:root{
  --bg:#0f1115;
  --bg-2:#161922;
  --card:#1a1e29;
  --card-border:#262b3a;
  --txt:#e2e4ea;
  --txt-dim:#8b93a7;
  --primary:#3b82f6;
  --primary-soft:rgba(59,130,246,.12);
  --danger:#ef4444;
  --ok:#10b981;
  --warn:#f59e0b;
  --sidebar-w:210px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{color:#60a5fa}
input,select,textarea,button{font:inherit;color:inherit}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:8px;padding:18px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1px solid var(--card-border);background:var(--bg-2);cursor:pointer;transition:.15s;font-size:13px}
.btn:hover{background:#222738}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:#2563eb}
.btn-danger{background:rgba(239,68,68,.1);color:var(--danger);border-color:rgba(239,68,68,.3)}
.input{width:100%;padding:8px 11px;border-radius:6px;border:1px solid var(--card-border);background:var(--bg-2);outline:none;transition:.15s}
.input:focus{border-color:var(--primary)}
label{display:block;margin:10px 0 5px;color:var(--txt-dim);font-size:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--card-border)}
th{color:var(--txt-dim);font-weight:500;font-size:12px}
tr:hover td{background:rgba(255,255,255,.02)}
.tag{display:inline-block;padding:1px 8px;border-radius:4px;font-size:12px}
.tag-ok{background:rgba(16,185,129,.15);color:var(--ok)}
.tag-off{background:rgba(239,68,68,.15);color:var(--danger)}
.tag-warn{background:rgba(245,158,11,.15);color:var(--warn)}

/* 布局 */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--bg-2);border-right:1px solid var(--card-border);display:flex;flex-direction:column;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;padding:6px 18px 16px;border-bottom:1px solid var(--card-border);margin-bottom:8px}
.logo-mark{width:32px;height:32px;border-radius:6px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.logo-name{font-weight:600;font-size:14px;line-height:1.2}
.logo-sub{font-size:11px;color:var(--txt-dim);line-height:1.2;margin-top:2px}
.menu-group{padding:14px 18px 5px;font-size:11px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.5px}
.sidebar a{display:flex;align-items:center;gap:10px;padding:8px 18px;color:var(--txt-dim);font-size:13px;border-left:2px solid transparent}
.sidebar a:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.sidebar a.active{color:var(--txt);background:var(--primary-soft);border-left-color:var(--primary)}
.menu-icon{width:18px;text-align:center;font-size:14px;opacity:.8}
.menu-logout{margin-top:auto;border-top:1px solid var(--card-border);padding-top:12px!important}

.main{display:flex;flex-direction:column}
.topbar{padding:14px 24px;border-bottom:1px solid var(--card-border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-2)}
.page-title{font-size:16px;font-weight:600}
.topbar-point{font-size:13px;color:var(--txt-dim)}
.topbar-point b{color:var(--txt)}
.content{padding:20px 24px;flex:1}

.row{display:grid;gap:14px}
.row.cols-2{grid-template-columns:1fr 1fr}
.row.cols-3{grid-template-columns:repeat(3,1fr)}
.row.cols-4{grid-template-columns:repeat(4,1fr)}
.stat{padding:14px}
.stat .muted{font-size:12px}
.stat .num{font-size:22px;font-weight:600;margin-top:4px}
.muted{color:var(--txt-dim)}
.alert{padding:10px 12px;border-radius:6px;margin:0 0 12px;font-size:13px}
.alert-ok{background:rgba(16,185,129,.1);color:var(--ok);border:1px solid rgba(16,185,129,.2)}
.alert-err{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid rgba(239,68,68,.2)}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.auth-card{width:380px}
.auth-card h1{font-size:20px;margin-bottom:4px}
.auth-card .sub{color:var(--txt-dim);margin-bottom:18px;font-size:13px}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;display:none;align-items:center;justify-content:center}
.modal-mask.show{display:flex}
.modal{background:var(--card);border:1px solid var(--card-border);border-radius:8px;padding:20px;max-width:380px;width:90%;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.modal h3{margin-bottom:6px;font-size:15px}
.modal p{color:var(--txt-dim);margin-bottom:16px;font-size:13px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* toast */
#toast{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card);border:1px solid var(--card-border);border-left:3px solid var(--ok);padding:10px 14px;border-radius:6px;font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:toastIn .2s ease}
.toast.err{border-left-color:var(--danger)}
@keyframes toastIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .row.cols-3,.row.cols-4{grid-template-columns:1fr 1fr}
}