/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#f0f2f5; --card:#fff; --line:#e5e7eb;
  --primary:#1d4ed8; --primary-dark:#1e3a8a;
  --sidebar:#0f172a; --sidebar-hover:#1e293b;
  --text:#111827; --muted:#6b7280;
  --ok:#059669; --warn:#d97706; --err:#dc2626;
  --radius:8px;
}
body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
a{ color:inherit; text-decoration:none; }

/* ============ 登录页 ============ */
.login-body{ background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card{ background:#fff; border-radius:12px; padding:36px 40px; width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-brand{ display:flex; gap:12px; align-items:center; margin-bottom:20px; }
.logo-mark{ width:46px; height:46px; background:var(--primary); color:#fff; font-size:22px; font-weight:700; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.login-brand h1{ font-size:18px; }
.login-brand .sub{ color:var(--muted); font-size:12px; margin-top:2px; }
.login-tip{ background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:6px; padding:10px 12px; font-size:12.5px; line-height:1.6; margin-bottom:18px; }
.field{ display:block; margin-bottom:14px; }
.field span{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:14px; outline:none; }
.field input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.btn-primary{ background:var(--primary); color:#fff; border:none; border-radius:6px; padding:10px 16px; font-size:14px; cursor:pointer; }
.btn-primary:hover{ background:var(--primary-dark); }
.btn-block{ width:100%; padding:11px; font-size:15px; margin-top:6px; }
.login-foot{ margin-top:18px; color:#9ca3af; font-size:11.5px; line-height:1.6; text-align:center; }

/* ============ 布局 ============ */
.layout{ display:flex; min-height:100vh; }
.sidebar{ width:216px; background:var(--sidebar); color:#cbd5e1; flex:none; display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:10; }
.side-logo{ display:flex; gap:10px; align-items:center; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.side-logo .logo-mark{ width:36px; height:36px; font-size:17px; }
.side-logo .t{ color:#fff; font-size:14.5px; font-weight:600; line-height:1.25; }
.side-logo .s{ color:#64748b; font-size:11px; }
.side-nav{ flex:1; overflow-y:auto; padding:10px 0; }
.nav-group{ padding:14px 16px 6px; font-size:11px; color:#64748b; letter-spacing:1px; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; color:#cbd5e1; font-size:13.5px; border-left:3px solid transparent; }
.nav-item:hover{ background:var(--sidebar-hover); color:#fff; }
.nav-item.active{ background:var(--sidebar-hover); color:#fff; border-left-color:#3b82f6; }
.nav-item .ic{ width:18px; text-align:center; flex:none; }
.side-foot{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#94a3b8; }
.main{ margin-left:216px; flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ background:var(--card); border-bottom:1px solid var(--line); padding:0 24px; height:56px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:5; }
.topbar .page-title{ font-size:16px; font-weight:600; }
.topbar .spacer{ flex:1; }
.chip{ font-size:12px; padding:4px 10px; border-radius:999px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.chip.warn{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.chip.ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.user-box{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.content{ padding:20px 24px 40px; }

/* ============ 卡片 / 栅格 ============ */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.card-h{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.card-h h3{ font-size:14.5px; }
.card-h .desc{ color:var(--muted); font-size:12px; margin-left:6px; }
.card-b{ padding:16px 18px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.stat .k{ color:var(--muted); font-size:13px; }
.stat .v{ font-size:26px; font-weight:700; }
.stat .v small{ font-size:13px; color:var(--muted); font-weight:400; margin-left:4px; }
.stat .d{ font-size:12px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-2-1{ display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.mb16{ margin-bottom:16px; }
.mt16{ margin-top:16px; }
.row{ display:flex; align-items:center; gap:10px; }
.row.between{ justify-content:space-between; }

/* ============ 表格 ============ */
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; padding:10px 14px; color:var(--muted); font-weight:500; background:#f9fafb; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:11px 14px; border-bottom:1px solid #f3f4f6; vertical-align:middle; }
.tbl tr:hover td{ background:#fafbfc; }
.tbl .num{ font-variant-numeric:tabular-nums; }
.tag{ display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.tag.blue{ background:#eff6ff; color:#1e40af; }
.tag.green{ background:#ecfdf5; color:#065f46; }
.tag.gray{ background:#f3f4f6; color:#4b5563; }
.tag.amber{ background:#fffbeb; color:#92400e; }
.tag.red{ background:#fef2f2; color:#991b1b; }
.tag.violet{ background:#f5f3ff; color:#5b21b6; }

/* ============ 空态 / 状态条 ============ */
.empty{ text-align:center; padding:44px 20px; color:var(--muted); }
.empty .e-ic{ font-size:36px; margin-bottom:10px; }
.empty .e-t{ font-size:14px; margin-bottom:4px; color:#374151; }
.empty .e-s{ font-size:12.5px; line-height:1.7; }
.banner{ display:flex; gap:12px; align-items:center; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius); padding:13px 16px; margin-bottom:16px; font-size:13.5px; color:#78350f; }
.banner .b-ic{ font-size:20px; }
.banner.blue{ background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.banner.green{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }

/* ============ 表单控件 ============ */
.filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.input, select.input{ padding:8px 12px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; outline:none; }
.input:focus{ border-color:var(--primary); }
.btn{ padding:8px 16px; border-radius:6px; font-size:13px; cursor:pointer; border:1px solid var(--line); background:#fff; }
.btn:hover{ border-color:#cbd5e1; }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.sm{ padding:5px 10px; font-size:12px; }
.mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }

/* ============ 授权状态卡片 ============ */
.auth-flow{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.auth-step{ background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--muted); }
.auth-step.on{ background:#eff6ff; border:1px solid #3b82f6; color:#1e40af; }
.auth-step.off{ opacity:.55; }
.auth-arrow{ color:#cbd5e1; }

/* ============ 徽标 ============ */
.badge-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
.dot-gray{ background:#9ca3af; } .dot-green{ background:#10b981; } .dot-amber{ background:#f59e0b; } .dot-red{ background:#ef4444; }

.footer-note{ margin-top:20px; color:#9ca3af; font-size:11.5px; text-align:center; line-height:1.7; }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-2,.grid-2-1{grid-template-columns:1fr;} }