*{box-sizing:border-box}:root{--bg: #0f1220;--panel:#171b2c;--panel2:#1e2340;--line:#2a3050;--txt:#e7e9f5;--muted:#98a0c3;--brand:#5b8cff;--brand2:#7c5bff;--ok:#2ec27e;--warn:#f5a524;--bad:#ef5350}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,Microsoft JhengHei,system-ui,sans-serif;background:radial-gradient(1200px 600px at 80% -10%,#1b2142 0%,var(--bg) 60%);color:var(--txt);font-size:14px}a{color:var(--brand);text-decoration:none}button{cursor:pointer}.app{display:flex;min-height:100vh}.sidebar{width:240px;background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-weight:700;font-size:16px;margin-bottom:4px;color:#fff}.brand-sub{color:var(--muted);font-size:11px;margin-bottom:18px}.nav-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--muted);padding:9px 12px;border-radius:8px;font-size:13.5px;margin-bottom:2px}.nav-item:hover{background:var(--panel2);color:#fff}.nav-item.active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-weight:600}.nav-head{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5c648c;margin:14px 12px 6px}.main{flex:1;padding:22px 26px 60px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}h1.page{font-size:21px;margin:0}.user-chip{color:var(--muted);font-size:13px}.logout{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:6px 12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}.card h3{margin:0 0 12px;font-size:15px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.stat .label{color:var(--muted);font-size:12px}.stat .value{font-size:22px;font-weight:700;margin-top:6px}.stat .sub{color:var(--muted);font-size:11px;margin-top:4px}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:8px;white-space:nowrap}td{border-bottom:1px solid rgba(42,48,80,.6);padding:8px;vertical-align:top}tr:hover td{background:#5b8cff0d}.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}.tag-ok{background:#2ec27e26;color:var(--ok)}.tag-warn{background:#f5a52426;color:var(--warn)}.tag-bad{background:#ef535026;color:var(--bad)}.tag-info{background:#5b8cff26;color:var(--brand)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:13px}textarea{min-height:70px}.btn{background:linear-gradient(90deg,var(--brand),var(--brand2));border:none;color:#fff;border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:600}.btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}.btn.danger{background:#ef53502e;color:var(--bad);border:1px solid rgba(239,83,80,.4)}.btn:disabled{opacity:.5;cursor:not-allowed}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.notice{border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13px}.notice.err{background:#ef53501f;color:#ff9b98;border:1px solid rgba(239,83,80,.3)}.notice.ok{background:#2ec27e1f;color:#7ee2b4;border:1px solid rgba(46,194,126,.3)}.muted{color:var(--muted)}.mono{font-variant-numeric:tabular-nums}.scroll{overflow-x:auto}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:380px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px}.login-card h1{margin:0 0 6px;font-size:20px}.login-card p{color:var(--muted);margin:0 0 20px;font-size:13px}.demo-list{font-size:11.5px;color:var(--muted);background:var(--panel2);border-radius:8px;padding:10px 12px;margin-top:16px}.demo-list code{color:var(--brand)}.warnbox{border-left:3px solid var(--warn);background:#f5a52414;padding:10px 12px;border-radius:0 10px 10px 0;color:#d9b26a;font-size:12.5px;margin-bottom:14px}.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}@media (max-width: 860px){.app{flex-direction:column}.sidebar{width:100%;height:auto;position:static;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.nav-item{width:auto}.nav-head{display:none}.main{padding:16px}}