:root {
  --bg:#0f1115; --card:#171a21; --line:#262b36; --txt:#e6e8eb;
  --mut:#8a93a3; --acc:#4f9cf9; --ok:#37d67a; --warn:#f5a623; --bad:#ef5b5b;
  --item:#2a3a2a; --pal:#3a2a3a;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
       font-family:"Microsoft YaHei","Segoe UI",system-ui,sans-serif; line-height:1.5; }
header { padding:14px 20px; background:linear-gradient(90deg,#1b2030,#11141b);
         border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
header h1 { font-size:18px; margin:0; font-weight:600; }
header nav { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
header nav a { color:var(--mut); text-decoration:none; font-size:13px; padding:6px 12px;
               border-radius:6px; border:1px solid transparent; }
header nav a:hover { color:var(--txt); background:var(--card); }
header nav a.active { color:var(--acc); border-color:#2f4a6f; background:#1a2740; }
main { max-width:1100px; margin:0 auto; padding:22px 18px; }
footer { text-align:center; color:var(--mut); font-size:12px; padding:18px; border-top:1px solid var(--line); margin-top:30px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.card h2 { font-size:13px; margin:0 0 12px; color:var(--mut); font-weight:600;
           text-transform:uppercase; letter-spacing:.5px; }

.points-badge { display:inline-block; background:linear-gradient(90deg,#2a3a2a,#1e2b1e);
                border:1px solid #3a5a3a; color:var(--ok); font-weight:700;
                padding:6px 16px; border-radius:999px; font-size:15px; }

form .row { margin-bottom:14px; }
label { display:block; font-size:13px; color:var(--mut); margin-bottom:5px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width:100%; background:#0f1218; color:var(--txt); border:1px solid var(--line);
  border-radius:6px; padding:9px 11px; outline:none; font-family:inherit; font-size:14px;
}
input:focus, select:focus, textarea:focus { border-color:var(--acc); }
button, .btn { background:var(--acc); color:#08121f; border:0; border-radius:6px;
  padding:9px 18px; cursor:pointer; font-weight:600; font-size:14px; text-decoration:none; display:inline-block; }
button.ghost, .btn.ghost { background:transparent; color:var(--mut); border:1px solid var(--line); }
button:hover, .btn:hover { filter:brightness(1.1); }
button.danger { background:var(--bad); color:#fff; }
.small { font-size:12px; color:var(--mut); }
.muted { color:var(--mut); }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }

.alert { padding:10px 14px; border-radius:6px; margin-bottom:14px; font-size:14px; }
.alert.err { background:#2b1a1a; border:1px solid #4d201f; color:var(--bad); }
.alert.info { background:#1a2433; border:1px solid #2f4a6f; color:var(--acc); }
.alert.success { background:#1a2b1e; border:1px solid #2f5a32; color:var(--ok); }

/* 商城网格 */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.item { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; }
.item .icon { font-size:34px; margin-bottom:6px; }
.item .name { font-weight:600; font-size:15px; }
.item .desc { color:var(--mut); font-size:12px; min-height:32px; margin:4px 0 10px; }
.item .tag { font-size:11px; padding:2px 8px; border-radius:999px; display:inline-block; margin-bottom:8px; width:fit-content; }
.tag.item { background:var(--item); color:#9fd6a0; border:1px solid #3a5a3a; }
.tag.pal  { background:var(--pal);  color:#d6a0e0; border:1px solid #5a3a5a; }
.item .cost { color:var(--warn); font-weight:700; margin-bottom:10px; }
.item button { margin-top:auto; }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
th { color:var(--mut); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
tr:hover td { background:#1c212b; }
.table-actions { display:flex; gap:6px; }

.hero { text-align:center; padding:40px 10px; }
.hero h2 { font-size:22px; margin:0 0 8px; }
.hero p { color:var(--mut); margin:0 0 24px; }
.login-box { max-width:380px; margin:0 auto; }
.waiting { text-align:center; }
.waiting .code-hint { font-size:14px; color:var(--mut); margin:14px 0; }
.spinner { width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--acc);
           border-radius:50%; animation:spin 1s linear infinite; margin:18px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.stat .num { font-size:24px; font-weight:700; color:var(--acc); }
.stat .lbl { font-size:12px; color:var(--mut); }