:root {
  --bg:#0c0c0d; --panel:#111112; --card:#151516; --hover:#1a1a1c; --line:#232325; --line2:#2e2e31;
  --fg:#ecebe6; --mute:#8d8c86; --dim:#5f5e5a; --accent:#d9f26b; --accent-fg:#0c0c0d; --accent-soft:rgba(217,242,107,.1);
  --danger:#f0736a; --danger-soft:rgba(240,115,106,.12); --shadow:0 20px 60px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --bg:#f6f5f1; --panel:#fbfaf7; --card:#fff; --hover:#f0efea; --line:#e4e2db; --line2:#d3d1c9;
  --fg:#161615; --mute:#6c6b66; --dim:#a09f99; --accent:#3d5a00; --accent-fg:#fff; --accent-soft:rgba(90,130,0,.1);
  --danger:#c0392b; --danger-soft:rgba(192,57,43,.08); --shadow:0 20px 60px rgba(0,0,0,.12);
}
* { box-sizing:border-box; margin:0; }
html, body { height:100%; }
body { background:var(--bg); color:var(--fg); font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button, input, select, textarea { font:inherit; color:inherit; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.93em; }
.mute { color:var(--mute); } .dim { color:var(--dim); } .sm { font-size:12.5px; }
.grow { flex:1; min-width:0; } .row { display:flex; align-items:center; gap:8px; } .wrap { flex-wrap:wrap; }
.ell { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hide { display:none !important; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--line2); border-radius:8px; border:2px solid var(--bg); }

/* controls */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:transparent; cursor:pointer; white-space:nowrap; font-weight:500; text-decoration:none; transition:background .12s,border-color .12s; }
.btn:hover { background:var(--hover); border-color:var(--line2); }
.btn.primary { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn.primary:hover { opacity:.9; }
.btn.danger { color:var(--danger); } .btn.danger:hover { background:var(--danger-soft); border-color:var(--danger); }
.btn.ghost { border-color:transparent; } .btn.icon { width:32px; padding:0; }
.btn.lg { height:40px; padding:0 18px; } .btn:disabled { opacity:.5; cursor:default; }
.input, select.input { height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); outline:none; width:100%; min-width:0; }
textarea.input { height:auto; padding:8px 10px; resize:vertical; }
.input:focus { border-color:var(--mute); }
.input.lg { height:40px; }
label.f { display:block; margin-bottom:14px; } label.f > span { display:block; font-size:12.5px; color:var(--mute); margin-bottom:5px; }
.chip { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:6px; background:var(--hover); border:1px solid var(--line); font-size:12px; color:var(--mute); white-space:nowrap; cursor:default; }
.chip.code { background:var(--accent-soft); border-color:transparent; color:var(--accent); font:600 12px ui-monospace,Menlo,Consolas,monospace; cursor:pointer; }
.chip.click { cursor:pointer; } .chip.click:hover, .chip.on { color:var(--fg); border-color:var(--line2); background:var(--line); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
svg.i { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* auth */
.auth { min-height:100%; display:grid; place-items:center; padding:24px; }
.auth .box { width:100%; max-width:360px; }
.auth h1 { font-size:22px; letter-spacing:-.02em; margin:18px 0 4px; } .auth p { color:var(--mute); margin-bottom:22px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:650; font-size:15px; letter-spacing:-.01em; text-decoration:none; }
.brand i { width:24px; height:24px; border-radius:7px; background:var(--fg); color:var(--bg); display:grid; place-items:center; }
.err { color:var(--danger); font-size:13px; min-height:20px; margin:-4px 0 8px; }

/* shell */
.shell { display:grid; grid-template-columns:216px 1fr; height:100%; }
.side { background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:16px 10px; gap:2px; min-height:0; }
.side .brand { padding:4px 8px 16px; }
.nav { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:8px; color:var(--mute); text-decoration:none; cursor:pointer; font-weight:500; }
.nav:hover { background:var(--hover); color:var(--fg); } .nav.on { background:var(--hover); color:var(--fg); }
.nav .n { margin-left:auto; font-size:12px; color:var(--accent); font-weight:600; }
.side .foot { margin-top:auto; padding:10px 8px 0; border-top:1px solid var(--line); }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 8px 14px; }
.stats b { display:block; font-size:16px; letter-spacing:-.02em; } .stats span { font-size:11.5px; color:var(--mute); }
.main { min-width:0; min-height:0; display:flex; flex-direction:column; }
.top { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); min-height:57px; flex-wrap:wrap; }
.top h2 { font-size:15px; font-weight:600; letter-spacing:-.01em; }
.page { flex:1; overflow:auto; padding:22px 18px 60px; } .page > .inner { max-width:880px; }
.search { position:relative; flex:1; max-width:420px; min-width:160px; } .search .input { padding-left:32px; } .search svg { position:absolute; left:10px; top:8px; color:var(--mute); }

/* mail */
.mail { flex:1; display:grid; grid-template-columns:minmax(300px,400px) 1fr; min-height:0; }
.list { border-right:1px solid var(--line); overflow:auto; min-height:0; }
.item { display:block; padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer; position:relative; }
.item:hover { background:var(--hover); } .item.on { background:var(--hover); box-shadow:inset 2px 0 0 var(--fg); }
.item .l1 { display:flex; align-items:center; gap:7px; } .item .from { font-weight:500; color:var(--mute); }
.item.unread .from, .item.unread .subj { color:var(--fg); font-weight:620; }
.item .time { margin-left:auto; font-size:12px; color:var(--dim); flex:none; }
.item .subj { color:var(--mute); margin-top:1px; } .item .snip { color:var(--dim); font-size:12.5px; margin-top:1px; }
.item .meta { display:flex; gap:6px; margin-top:6px; align-items:center; }
.item .to { font-size:11.5px; color:var(--dim); }
.empty { padding:60px 24px; text-align:center; color:var(--mute); } .empty b { display:block; color:var(--fg); font-size:15px; margin-bottom:4px; }
.more { padding:14px; text-align:center; }
.reader { display:flex; flex-direction:column; min-width:0; min-height:0; }
.reader .head { padding:18px 22px 14px; border-bottom:1px solid var(--line); }
.reader h1 { font-size:18px; letter-spacing:-.015em; line-height:1.3; margin-bottom:8px; overflow-wrap:anywhere; }
.reader .kv { color:var(--mute); font-size:13px; overflow-wrap:anywhere; } .reader .kv b { color:var(--fg); font-weight:500; }
.hl { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.otp { display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--accent-soft); color:var(--accent); cursor:pointer; border:0; }
.otp b { font:650 18px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; }
.tabs { display:flex; gap:4px; padding:8px 22px; border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap; }
.tab { height:28px; padding:0 10px; border-radius:7px; border:0; background:none; color:var(--mute); cursor:pointer; font-weight:500; }
.tab.on { background:var(--hover); color:var(--fg); }
.body { flex:1; min-height:0; overflow:auto; }
.body iframe { width:100%; height:100%; border:0; background:#fff; display:block; }
.body pre { padding:20px 22px; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.6 ui-monospace,Menlo,Consolas,monospace; }
.links { padding:16px 22px; display:grid; gap:8px; } .links a { overflow-wrap:anywhere; font-size:13px; }

/* tables / cards */
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-weight:500; color:var(--mute); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--bg); z-index:1; }
td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:hover td { background:var(--panel); }
td.act { text-align:right; white-space:nowrap; } td.act .btn { height:28px; }
.tablewrap { flex:1; overflow:auto; min-height:0; }
.card { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:18px; margin-bottom:16px; }
.card h3 { font-size:14px; font-weight:600; margin-bottom:4px; } .card > p { color:var(--mute); margin-bottom:14px; font-size:13px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--card); } .kpi b { font-size:22px; letter-spacing:-.02em; display:block; } .kpi span { color:var(--mute); font-size:12.5px; }
.formrow { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; } .formrow label.f { margin:0; flex:1; min-width:130px; }
pre.code { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace; }
input[type=checkbox] { width:15px; height:15px; accent-color:var(--fg); cursor:pointer; }

.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; } .cols .card { margin:0; }
.bars { display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px; }
.bar { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; min-width:0; }
.bar i { width:100%; max-width:38px; background:var(--accent); border-radius:5px 5px 2px 2px; display:block; }
.bar span { font-size:11px; color:var(--dim); }
.rank { position:relative; display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); min-width:0; }
.rank:last-child { border-bottom:0; } .rank > i { position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent); opacity:.6; }

/* modal + toast */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:20px; z-index:50; }
.dialog { width:100%; max-width:440px; background:var(--card); border:1px solid var(--line2); border-radius:14px; padding:22px; box-shadow:var(--shadow); max-height:90vh; overflow:auto; }
.dialog h3 { font-size:16px; margin-bottom:4px; letter-spacing:-.01em; } .dialog > p { color:var(--mute); margin-bottom:16px; font-size:13px; }
.dialog .foot { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
#toasts { position:fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index:60; max-width:min(360px,calc(100vw - 32px)); }
.toast { background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:10px 14px; box-shadow:var(--shadow); animation:in .18s ease; cursor:pointer; }
.toast b { display:block; } .toast.bad { border-color:var(--danger); }
@keyframes in { from { opacity:0; transform:translateY(6px); } }

@media (max-width:860px) {
  .shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .side { flex-direction:row; align-items:center; padding:8px 10px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; gap:4px; }
  .side .brand { padding:0 8px 0 4px; } .side .brand span, .side .foot, .stats, .nav span.t { display:none; }
  .nav { padding:0 10px; } .side .sp { margin-left:auto; }
  .mail { grid-template-columns:1fr; } .mail.open .list { display:none; } .mail:not(.open) .reader { display:none; }
  .list { border-right:0; }
}
@media (min-width:861px) { .backbtn, .side .sp { display:none; } }