:root { color-scheme: dark; --bg:#0a0d14; --panel:#121722; --line:#263043; --muted:#8e9ab0; --text:#f5f7fb; --blue:#4d7cff; --cyan:#31d4c8; --danger:#ff6b7a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0%,#13203d 0,transparent 35%),var(--bg); color:var(--text); font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { min-height:100vh; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,4vw,56px); border-bottom:1px solid var(--line); background:rgba(10,13,20,.82); backdrop-filter:blur(18px); position:sticky; top:0; z-index:10; }
.brand { display:flex; gap:12px; align-items:center; font-size:19px; font-weight:760; }
.brand-copy { display:flex;flex-direction:column;gap:3px; }
.brand-copy strong { font-size:18px;line-height:1.2; }
.brand-copy small { color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.08em; }
.logo { width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#08101d;font-weight:900; }
.actions { display:flex;gap:10px; }
.button { border:1px solid var(--line); color:var(--text); background:#171d29; padding:10px 15px; border-radius:10px; }
.button:hover { border-color:#52627d; }
.button.primary { background:var(--blue); border-color:var(--blue); }
.content { width:min(1180px,calc(100% - 32px));margin:34px auto; }
.status { display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;margin-bottom:20px; }
.dot { width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan); }
.dot.bad { background:var(--danger);box-shadow:0 0 12px var(--danger); }
.headline { display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:22px; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(27px,4vw,42px);letter-spacing:-.03em; }
.sub { color:var(--muted);margin-top:8px; }
.search { width:min(360px,100%);position:relative; }
.search input,.field input { background:#101520;border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--text);outline:none; }
.search input,.field input { width:100%; }
.search input:focus,.field input:focus { border-color:var(--blue);box-shadow:0 0 0 3px #4d7cff22; }
.panel { border:1px solid var(--line);background:rgba(18,23,34,.92);border-radius:18px;overflow:hidden;box-shadow:0 24px 80px #0005; }
.table { width:100%;border-collapse:collapse; }
.table th { text-align:left;color:var(--muted);font-weight:600;font-size:13px;padding:15px 20px;background:#171d29; }
.sort-head { display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;line-height:16px;vertical-align:middle; }
.sort-head:hover,.sort-head.active { color:#aebfff; }
.sort-arrows { display:inline-flex;flex:0 0 10px;flex-direction:column;justify-content:center;gap:1px;width:10px;height:16px;vertical-align:middle; }
.sort-arrows i { width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;opacity:.72; }
.sort-arrows .up { border-bottom:6px solid #9aa5b8; }
.sort-arrows .down { border-top:6px solid #9aa5b8; }
.sort-arrows .up.on { border-bottom-color:#7fa0ff;opacity:1; }
.sort-arrows .down.on { border-top-color:#7fa0ff;opacity:1; }
.table td { padding:16px 20px;border-top:1px solid var(--line); }
.table tbody tr:hover { background:#171e2b; }
.name { color:#aebfff;background:none;border:0;padding:0;font-weight:700; }
.balance { font-variant-numeric:tabular-nums;font-weight:750; }
.joined { white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.45; }
.joined span { color:#cfd7e6; }
.badge { display:inline-flex;padding:5px 9px;border-radius:999px;background:#31d4c81a;color:#75e4dc;font-size:12px; }
.pagination { display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid var(--line);color:var(--muted); }
.page-jump { display:flex;align-items:center;gap:7px; }
.page-jump select { appearance:none;min-width:52px;padding:8px 24px 8px 12px;border:1px solid var(--line);border-radius:9px;background:#171d29;color:var(--text);text-align:center;cursor:pointer; }
.page-jump select:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #4d7cff22; }
.pager { display:flex;gap:8px; }
.empty { padding:54px;text-align:center;color:var(--muted); }
.login-wrap { min-height:100vh;display:grid;place-items:center;padding:24px; }
.login { width:min(430px,100%);padding:34px;border:1px solid var(--line);border-radius:22px;background:rgba(18,23,34,.96);box-shadow:0 30px 100px #0009; }
.login h1 { font-size:30px; }
.field { margin-top:18px; }
.field label { display:block;color:var(--muted);font-size:13px;margin-bottom:8px; }
.login .button { width:100%;margin-top:22px;padding:13px; }
.error { color:#ff9aa5;margin-top:14px;font-size:14px; }
.drawer { position:fixed;inset:0;background:#0009;display:flex;justify-content:flex-end;z-index:20; }
.drawer-card { width:min(660px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line);padding:28px;overflow:auto; }
.drawer-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:22px; }
.record { padding:15px 0;border-top:1px solid var(--line); }
.range { color:#8093b8;font-size:13px;margin-top:9px; }
.record-meta { display:flex;gap:12px;color:var(--muted);font-size:13px;margin-bottom:7px; }
.record p { line-height:1.65; }
.settings { max-width:560px; }
.settings .field small { color:var(--muted);display:block;margin-top:7px;line-height:1.5; }
@media(max-width:720px){.headline{align-items:stretch;flex-direction:column}.table th:nth-child(3),.table td:nth-child(3){display:none}.table th,.table td{padding:14px}.topbar{padding:0 14px}.actions .text{display:none}}