:root{
  --bg:#0f1424;
  --panel:#141b2e;
  --text:#e8eefc;
  --muted:#a9b4cc;
  --brand:#c9b6ff;
  --chip:#e7ddff;
  --shadow: rgba(0,0,0,.35);
  --btn-grad: linear-gradient(135deg,#7E5BFF,#FFB347);
}
:root.light{
  --bg:#f5f7fd;
  --panel:#ffffff;
  --text:#101523;
  --muted:#5b6478;
  --brand:#7E5BFF;
  --chip:#efeaff;
  --shadow: rgba(17,20,35,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit}
.container{max-width:1060px;margin:0 auto;padding:18px 18px 64px}
.header{display:flex;align-items:center;gap:12px;padding:14px 18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px}
.brand img{width:28px;height:28px;border-radius:8px;box-shadow:0 6px 18px var(--shadow)}
.badge{font-size:12px;background:var(--chip);color:#5646a9;border-radius:18px;padding:6px 10px;margin-left:auto}
.menuBtn{margin-left:12px;border:1px solid #d9d9d915;background:var(--panel);color:var(--text);border-radius:12px;padding:10px 12px}
.card{background:var(--panel);border:1px solid #d9d9d915;padding:18px;border-radius:16px;box-shadow:0 10px 30px var(--shadow);margin:14px 0}
.h1{font-size:40px;font-weight:800;margin:6px 0 8px}
.sub{color:var(--muted)}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid #ffffff22;background:transparent;color:var(--text)}
.btn.primary{background:var(--btn-grad);border:none;color:#101523;font-weight:700}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.row{grid-template-columns:1fr} .h1{font-size:34px}}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:var(--muted);text-align:left;font-weight:600;padding:6px 10px}
.table td{background:var(--panel);padding:14px 12px;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--chip);color:#4430aa;border-radius:999px;padding:6px 10px;font-weight:700}
.footer{color:var(--muted);text-align:center;margin-top:36px}

.drawer{position:fixed;inset:0;display:none}
.drawer.open{display:block}
.backdrop{position:absolute;inset:0;background:#0008}
.sheet{position:absolute;right:0;top:0;bottom:0;width:320px;background:var(--panel);padding:18px;border-left:1px solid #ffffff18}
.sheet h3{margin:0 0 12px}
.nav a{display:block;padding:10px;border-radius:10px}
.switch{display:flex;align-items:center;gap:10px;margin:6px 0}
input[type="text"],input[type="number"]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #ffffff22;background:transparent;color:var(--text)}
label{display:block;margin:10px 0 6px;color:var(--muted);font-weight:600}
.value{font-weight:800}
hr.sep{border:none;height:1px;background:#ffffff15;margin:12px 0}