:root {
  --primary: #2563eb;
  --primary-light: #eff6ff;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --bg: #ffffff;
  --card: #f9fafb;
  --border: #e5e7eb;
  --text: #111827;
  --text2: #6b7280;
  --sidebar: #1f2937;
  --sidebar-text: #e5e7eb;
  --sidebar-active: #ffffff;
  --time-color: #6b7280;
}
[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-light: rgba(30,58,138,.2);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --bg: #0f172a;
  --card: #1e293b;
  --border: #334155;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --sidebar: #1e293b;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #93c5fd;
  --time-color: #f1f5f9;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
/* layout */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:220px; background:var(--sidebar); color:var(--sidebar-text);
  flex-shrink:0; display:flex; flex-direction:column; transition:width .2s;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand { padding:18px 16px; font-size:15px; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar .nav { flex:1; padding:8px 0; overflow-y:auto; }
.nav-item {
  padding:9px 16px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:8px;
  opacity:.75; text-decoration:none; color:var(--sidebar-text);
}
.nav-item:hover { opacity:1; }
.nav-item.active { opacity:1; background:rgba(255,255,255,.08); color:var(--sidebar-active); font-weight:600; }
.nav-item .arrow { margin-left:auto; font-size:10px; }
.nav-sub { padding-left:0; }
.nav-sub .nav-item { padding-left:36px; font-size:12.5px; }
.sidebar .footer { padding:12px 16px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; }
.main { flex:1; padding:20px 24px; overflow-x:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.topbar h2 { font-size:18px; }
/* cards */
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:14px; overflow-x:auto; }
.card table { min-width:max-content; }
/* toolbar */
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.toolbar input[type=text], .toolbar select, .toolbar input[type=date] {
  padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:13px;
}
.btn { padding:7px 14px; border-radius:6px; border:none; cursor:pointer; font-size:13px; font-weight:500; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-ghost { background:var(--card); color:var(--text); border:1px solid var(--border); }
.btn-sm { padding:4px 10px; font-size:12px; }
/* table */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
th { font-weight:600; color:var(--text2); background:var(--card); position:sticky; top:0; }
tr:hover td { background:var(--primary-light); }
/* time under value */
.cell-time { display:block; font-size:10px; color:var(--time-color); margin-top:2px; }
/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px; }
.stat .num { font-size:24px; font-weight:700; }
.stat .lbl { font-size:12px; color:var(--text2); margin-top:2px; }
/* modal */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; z-index:100; overflow-y:auto; }
.modal-mask.show { display:flex; }
.modal { background:var(--bg); border-radius:12px; padding:24px; width:100%; max-width:720px; }
.modal h3 { margin-bottom:16px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.fg { display:flex; flex-direction:column; gap:4px; }
.fg label { font-size:12px; color:var(--text2); }
.fg input, .fg select, .fg textarea { padding:7px 9px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:13px; }
.modal .actions { margin-top:18px; display:flex; gap:8px; justify-content:flex-end; }
/* tag */
.tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:500; }
.tag-success { background:rgba(5,150,105,.12); color:var(--success); }
.tag-warn { background:rgba(217,119,6,.12); color:var(--warning); }
.tag-danger { background:rgba(220,38,38,.12); color:var(--danger); }
.tag-muted { background:#e5e7eb; color:#374151; }
/* chart bars */
.bars { display:flex; align-items:flex-end; gap:6px; height:120px; padding:8px 0; }
.bars .bar { flex:1; background:var(--primary); border-radius:3px 3px 0 0; min-height:4px; }
.bars .bar.alt { background:rgba(37,99,235,.35); }
/* login */
body:has(.login-wrap){ background:#2563eb !important; }
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#2563eb; }
.login-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:32px; width:340px; }
.login-box input { width:100%; padding:9px 11px; margin:6px 0 14px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); }
/* responsive */
@media (max-width:768px) {
  .main { padding:12px; }
  .form-grid { grid-template-columns:1fr 1fr; }
}
.collapsed .sidebar { width:56px; }
.theme-toggle { cursor:pointer; background:none; border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 10px; font-size:12px; }
/* dashboard multi-column grid */
.dash-grid{display:grid !important; grid-template-columns:1fr 1fr; gap:14px;}
.dash-grid .card{margin-bottom:0 !important;}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr;}}
@media(min-width:1500px){.dash-grid{grid-template-columns:1fr 1fr 1fr;}}

@media (max-width: 768px) {
  .stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat { padding: 10px !important; }
  .stat .num { font-size: 18px !important; }
  .dash-grid { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .fg { flex: 1 1 100% !important; }
}