:root {
  --bg:#0a0e14; --bg-gradient:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(56,139,253,.12),transparent);
  --bg-card:#11161f; --bg-elevated:#161d29; --bg-input:#0a0e14; --bg-topbar:rgba(17,22,31,.85);
  --border:#1e2632; --border-hover:#2d3a4d;
  --text:#dce4ee; --text-dim:#7d8aa0; --text-faint:#4d5a70;
  --accent:#38bdf8; --accent-deep:#0284c7; --accent-glow:rgba(56,189,248,.2);
  --good:#34d399; --warn:#fbbf24; --purple:#a78bfa; --danger:#f87171;
  --mono:"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
}
body.light-theme {
  --bg:#f0f4f8; --bg-gradient:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(56,139,253,.08),transparent);
  --bg-card:#fff; --bg-elevated:#f8fafc; --bg-input:#f1f5f9; --bg-topbar:rgba(255,255,255,.85);
  --border:#e2e8f0; --border-hover:#cbd5e1;
  --text:#1e293b; --text-dim:#64748b; --text-faint:#94a3b8;
  --accent:#0284c7; --accent-deep:#0369a1; --accent-glow:rgba(2,132,199,.15);
  --good:#059669; --warn:#d97706; --purple:#7c3aed; --danger:#dc2626;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  background-image:var(--bg-gradient),linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px);
  background-size:100% 100%,32px 32px,32px 32px;
  color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
#loginView { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:44px 40px; width:360px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-box::before { content:''; position:absolute; top:0; left:20px; right:20px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.login-box h2 { font-size:13px; font-weight:600; letter-spacing:4px; text-align:center; margin-bottom:28px; text-transform:uppercase; }
.login-box input { width:100%; padding:11px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:14px; font-family:var(--mono); margin-bottom:14px; outline:none; }
.login-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.login-box .btn { width:100%; margin-top:4px; }
.error-msg { color:var(--danger); font-size:13px; margin-top:12px; text-align:center; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:56px; background:var(--bg-topbar); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar h1 { font-size:13px; font-weight:600; letter-spacing:2px; display:flex; align-items:center; gap:12px; text-transform:uppercase; }
.logo { height:26px; }
.topbar-btns { display:flex; gap:8px; align-items:center; }
.btn { padding:8px 16px; border:1px solid var(--border-hover); border-radius:6px; background:transparent; color:var(--text-dim); cursor:pointer; font-size:13px; font-family:inherit; transition:all .15s; white-space:nowrap; }
.btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-deep)); border:none; color:#fff; font-weight:600; box-shadow:0 0 20px var(--accent-glow); }
.btn-primary:hover { color:#fff; opacity:.9; }
.btn-danger { color:var(--danger); border-color:rgba(248,113,113,.3); }
.btn-danger:hover { background:rgba(248,113,113,.08); border-color:var(--danger); color:var(--danger); }
.theme-toggle { font-size:16px; padding:6px 10px; min-width:38px; }
.stats-row { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.stat-card { background:var(--bg-card); padding:22px 16px 18px; cursor:pointer; transition:all .2s; }
.stat-card:hover { background:var(--bg-elevated); }
.stat-card .num { font-family:var(--mono); font-size:36px; font-weight:700; line-height:1; letter-spacing:-1px; transition:transform .2s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
.stat-card:hover .num { transform:scale(1.2); }
.stat-card .label { font-size:10px; color:var(--text-faint); margin-top:8px; letter-spacing:2px; text-transform:uppercase; }
.stat-card.brand_new .num,.stat-card.brand_new .label { color:var(--accent); }
.stat-card.in_use .num,.stat-card.in_use .label { color:var(--good); }
.stat-card.pending_clean .num,.stat-card.pending_clean .label { color:var(--warn); }
.stat-card.cleaned .num,.stat-card.cleaned .label { color:var(--purple); }
.stat-card.retired .num,.stat-card.retired .label { color:var(--text-faint); }
.stat-card.total .num { color:var(--text); }
.stat-card.total .label { color:var(--text-faint); }
.chart-section { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:20px; margin:20px; }
.chart-section h3 { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.chart-bar-list { display:flex; flex-direction:column; gap:10px; }
.chart-bar-item { display:flex; align-items:center; gap:12px; }
.chart-bar-label { width:100px; font-size:13px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-bar-track { flex:1; height:8px; background:var(--bg-input); border-radius:4px; overflow:hidden; }
.chart-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent-deep),var(--accent)); border-radius:4px; min-width:3px; transition:width .6s; }
.chart-bar-value { width:50px; font-size:12px; font-family:var(--mono); color:var(--accent); }
.filter-bar { display:flex; gap:10px; padding:16px 20px 8px; }
.filter-bar select,.filter-bar input { padding:9px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; outline:none; }
.filter-bar input { flex:1; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; padding:12px 20px 28px; }
.nozzle-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:16px; cursor:pointer; transition:all .2s; }
.nozzle-card:hover { transform:translateY(-3px); border-color:var(--accent-glow); box-shadow:0 12px 32px rgba(0,0,0,.15); }
.nozzle-card .name { font-size:15px; font-weight:600; margin-bottom:4px; }
.nozzle-card .sn { font-size:11px; font-family:var(--mono); color:var(--text-faint); margin-bottom:8px; }
.nozzle-card .card-note { font-size:12px; color:var(--text-dim); margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-thumb { width:100%; height:130px; object-fit:cover; border-radius:6px; margin-bottom:12px; border:1px solid var(--border); }
.meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11px; font-family:var(--mono); border-radius:4px; }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge.brand_new { background:var(--accent-glow); color:var(--accent); }
.badge.in_use { background:rgba(52,211,153,.1); color:var(--good); }
.badge.pending_clean { background:rgba(251,191,36,.1); color:var(--warn); }
.badge.cleaned { background:rgba(167,139,250,.1); color:var(--purple); }
.badge.retired { background:rgba(125,138,160,.1); color:var(--text-faint); }
.detail-body { display:grid; grid-template-columns:340px 1fr; gap:16px; padding:20px; }
.detail-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:20px; }
.detail-card h3 { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:13px; border-bottom:1px solid var(--border); }
.info-row:last-child { border-bottom:none; }
.info-row .k { color:var(--text-faint); font-size:12px; }
.action-btns { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.timeline { position:relative; padding-left:20px; }
.timeline::before { content:''; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--border); }
.tl-item { position:relative; padding-bottom:20px; }
.tl-item::before { content:''; position:absolute; left:-20px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-card); }
.tl-item.clean::before { background:var(--purple); }
.tl-date { font-size:11px; font-family:var(--mono); color:var(--text-faint); }
.tl-title { font-size:13px; margin:4px 0; font-weight:500; }
.tl-note { font-size:12px; color:var(--text-dim); margin-top:3px; }
.quality-good { color:var(--good); font-weight:600; }
.quality-normal { color:var(--warn); font-weight:600; }
.quality-poor { color:var(--danger); font-weight:600; }
.tl-actions { display:flex; gap:6px; margin-top:8px; }
.tl-btn { padding:3px 10px; font-size:11px; border:1px solid var(--border-hover); border-radius:4px; background:transparent; color:var(--text-dim); cursor:pointer; }
.tl-btn:hover { border-color:var(--accent); color:var(--accent); }
.tl-btn-danger:hover { border-color:var(--danger); color:var(--danger); }
.tl-photo-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tl-photo { width:120px; height:90px; object-fit:cover; border-radius:6px; cursor:pointer; border:1px solid var(--border); }
.photo-preview-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.preview-item { position:relative; }
.preview-item img { width:80px; height:60px; object-fit:cover; border-radius:4px; border:1px solid var(--border); cursor:pointer; }
.preview-remove { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff; border:none; font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.detail-photo { width:100%; max-height:240px; object-fit:cover; border-radius:6px; margin-bottom:16px; cursor:pointer; border:1px solid var(--border); }
.modal-overlay { position:fixed; inset:0; background:rgba(5,8,13,.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:var(--bg-card); border:1px solid var(--border-hover); border-radius:8px; padding:24px; width:440px; max-width:92vw; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal h2 { font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.modal label { display:block; margin-bottom:14px; font-size:12px; color:var(--text-dim); }
.modal input,.modal select,.modal textarea { width:100%; margin-top:6px; padding:9px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; outline:none; }
.modal input:focus,.modal select:focus,.modal textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.supplier-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; padding:20px; }
.supplier-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:18px; transition:all .15s; }
.supplier-card:hover { border-color:var(--accent-glow); }
.supplier-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.supplier-name { font-size:15px; font-weight:600; }
.supplier-row { font-size:13px; color:var(--text-dim); margin-bottom:5px; }
.supplier-price { font-family:var(--mono); font-size:20px; font-weight:700; color:var(--warn); margin:10px 0; }
.supplier-note { font-size:12px; color:var(--text-faint); margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.supplier-actions { display:flex; gap:8px; margin-top:14px; }
.supplier-actions .btn { padding:5px 12px; font-size:12px; }
@media (max-width:768px) {
  .topbar { padding:0 14px; height:50px; }
  .topbar h1 { font-size:12px; }
  .stats-row { grid-template-columns:repeat(3,1fr); }
  .stat-card { padding:16px 12px 14px; }
  .stat-card .num { font-size:26px; }
  .chart-section { margin:12px; padding:16px; }
  .filter-bar { padding:14px 12px 8px; flex-wrap:wrap; }
  .card-grid { grid-template-columns:1fr; gap:10px; padding:8px 12px 24px; }
  .detail-body { grid-template-columns:1fr; padding:12px; }
  .modal { width:100%; border-radius:8px 8px 0 0; padding:18px; }
  .supplier-grid { grid-template-columns:1fr; padding:14px; }
  .tl-photo { width:100px; height:75px; }
}