@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
  --color-text-secondary:#6b7280;
  --color-background-secondary:#f9fafb;
  --color-border-tertiary:#e5e7eb;
  --color-background-warning:#fffbeb;
  --border-radius-md:8px;
  --brand-1:#7336eb;
  --brand-2:#5527a8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#111827;
  --muted:#6b7280;
  --status-ok:#3a7556;
  --status-warn:#907247;
  --status-critical:#93505b;
  --status-info:#456192;
  --status-neutral:#475569;
  --badge-ok-bg:#eef9f3;
  --badge-ok-border:#c4e9d2;
  --badge-warn-bg:#fdf9ed;
  --badge-warn-border:#eddca0;
  --badge-critical-bg:#fdf3f3;
  --badge-critical-border:#eac7cd;
  --badge-info-bg:#f0f5fb;
  --badge-info-border:#c4d7ee;
  --badge-neutral-bg:#f8fafc;
  --badge-neutral-border:#e2e8f0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f0f0ec;color:#1a1a1a;min-height:100vh}
button,input,select,textarea{font-family:inherit}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:#1a1a1a;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar-logo{padding:20px 16px;border-bottom:1px solid #333;flex-shrink:0}
.sidebar-logo h1{font-size:15px;font-weight:700;color:#fff}
.sidebar-logo p{font-size:11px;color:#888;margin-top:2px}
.sidebar-theme{
  padding:10px 16px 8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:flex-start;
}
.sidebar-nav{flex:1;padding:12px 0}
.nav-section{padding:6px 16px 4px;font-size:10px;color:#555;text-transform:uppercase;letter-spacing:0.5px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;color:#aaa;cursor:pointer;transition:all 0.15s;border-left:3px solid transparent}
.nav-item:hover{color:#fff;background:#252525}
.nav-item.active{color:#fff;background:#252525;border-left-color:#7b2fff}
.nav-dot{width:8px;height:8px;border-radius:50%;background:#444;flex-shrink:0}
.nav-item.active .nav-dot{background:#7b2fff}
.sync-bar{padding:10px 16px;border-top:1px solid #333;font-size:11px;display:flex;align-items:center;gap:6px;flex-shrink:0}
.sync-bar .lupd{margin-left:auto;font-size:11px}
.sync-dot{width:6px;height:6px;border-radius:50%;background:#555}
.sync-dot.on{background:#22863a}
.sync-dot.saving{background:#f59e0b;animation:pulse 1s infinite}
.sync-dot.err{background:#dc2626}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.main{margin-left:220px;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid #e5e5e5;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:relative}
.mobile-menu-btn{display:none}
.topbar h2{font-size:16px;font-weight:600}
.content{padding:24px 28px}
.stats{display:grid;gap:12px;margin-bottom:20px}
.s3{grid-template-columns:repeat(3,1fr)}
.s4{grid-template-columns:repeat(4,1fr)}
.s5{grid-template-columns:repeat(5,1fr)}
.stat{background:#fff;border-radius:12px;border:1px solid #e5e5e5;padding:14px 18px}
.stat-label{font-size:11px;color:#888;margin-bottom:5px}
.stat-val{font-size:24px;font-weight:600}
.green{color:var(--status-ok)}.red{color:var(--status-critical)}.amber{color:var(--status-warn)}.blue{color:var(--status-info)}
.pbar{width:100%;height:3px;background:#f0f0f0;border-radius:2px;margin-top:8px}
.pfill{height:100%;border-radius:2px;background:#22863a;transition:width 0.3s}
.controls{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.controls input[type=text]{flex:1;min-width:160px;padding:8px 12px;border:1px solid #d0d0d0;border-radius:8px;font-size:13px}
.controls input[type=number]{width:75px;padding:8px 8px;border:1px solid #d0d0d0;border-radius:8px;font-size:13px;text-align:center}
select{padding:8px 10px;border:1px solid #d0d0d0;border-radius:8px;font-size:13px;background:#fff;cursor:pointer}
.btn{
  min-height:32px;
  padding:6px 14px;
  border-radius:10px;
  border:1px solid #d0d0d0;
  background:#fff;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn.sm{min-height:26px;padding:3px 10px;font-size:12px;border-radius:8px}
.admin-pos-btn{display:none}
body.admin-tools-unlocked .admin-pos-btn{display:inline-flex}
.btn:hover{background:#f5f5f5;transform:translateY(-1px)}
.btn.p{background:#7b2fff;color:#fff;border-color:#7b2fff}
.btn.p:hover{background:#6a20ee}
.btn.d{background:#dc2626;color:#fff;border-color:#dc2626}
.btn.g{background:#22863a;color:#fff;border-color:#22863a}
.tag{font-size:12px;background:#f0eeff;color:#7b2fff;padding:4px 10px;border-radius:20px}
.tw{background:#fff;border-radius:12px;border:1px solid #e5e5e5;overflow:hidden}
.mobile-cards{display:none}
.mcard{
  background:rgba(255,255,255,.72);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  margin-bottom:8px;
}
.mcard-title{font-size:13px;font-weight:700;margin-bottom:8px}
.mcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mkv{font-size:12px}
.mkv b{display:block;color:#94a3b8;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.mcard-top{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.mcard-top .ni{
  width:92px;
  min-height:40px;
  font-size:14px;
  font-weight:700;
}
.btn.thumb{
  flex:1;
  min-height:40px;
  font-size:14px;
  font-weight:700;
}
.mcard-note{
  margin-top:8px;
}
table{width:100%;border-collapse:collapse;font-size:13px}
thead{background:#fafafa;position:static;top:auto;z-index:auto}
th{font-weight:600;font-size:11px;color:#666;text-align:left;padding:10px 12px;border-bottom:1px solid #e5e5e5;white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid #f0f0f0;vertical-align:middle;word-break:break-word}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafafa}
.bx{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  letter-spacing:.1px;
}
.br{background:var(--badge-critical-bg);color:var(--status-critical);border-color:var(--badge-critical-border)}
.ba{background:var(--badge-warn-bg);color:var(--status-warn);border-color:var(--badge-warn-border)}
.bg{background:var(--badge-ok-bg);color:var(--status-ok);border-color:var(--badge-ok-border)}
.bb{background:var(--badge-info-bg);color:var(--status-info);border-color:var(--badge-info-border)}
.bgy{background:var(--badge-neutral-bg);color:var(--status-neutral);border-color:var(--badge-neutral-border)}
.bpu{background:#f0eeff;color:#5b21b6}
.qr{color:var(--status-critical);background:var(--badge-critical-bg);padding:2px 8px;border-radius:6px;font-weight:600}
.qa{color:var(--status-warn);background:var(--badge-warn-bg);padding:2px 8px;border-radius:6px;font-weight:600}
.qg{color:var(--status-ok);font-weight:600}
.ni{width:65px;font-size:12px;padding:3px 6px;border:1px solid #d0d0d0;border-radius:6px;text-align:center}
.nit{width:100%;font-size:12px;padding:3px 6px;border:1px solid #d0d0d0;border-radius:6px}
.empty{text-align:center;padding:40px;color:#999;font-size:14px}
.hidden{display:none!important}
.page{display:none}.page.active{display:block;animation:pageIn .24s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.uzone{background:#fff;border-radius:12px;border:2px dashed #d0d0d0;padding:36px;text-align:center;margin-bottom:20px;transition:all 0.2s}
.uzone:hover{border-color:#7b2fff;background:#faf7ff}
.uzone h3{font-size:15px;font-weight:600;margin-bottom:6px}
.uzone p{font-size:13px;color:#888;margin-bottom:16px}
.mbg{position:fixed;inset:0;background:rgba(2,6,23,0.7);z-index:200;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:14px;padding:24px;width:480px;max-width:92vw;max-height:88vh;overflow-y:auto}
.modal h3{font-size:15px;font-weight:600;margin-bottom:16px}
.mr{margin-bottom:12px}
.mr label{font-size:12px;color:#666;display:block;margin-bottom:4px}
.mr input,.mr select,.mr textarea{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:8px;font-size:13px}
.mr textarea{resize:vertical;min-height:70px}
.mbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.zcard{background:#fff;border-radius:12px;border:1px solid #e5e5e5;padding:16px}
.ztitle{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.zbadge{font-size:10px;padding:2px 8px;border-radius:10px;background:#f0eeff;color:#7b2fff}
.drow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid #f5f5f5}
.drow:last-child{border-bottom:none}
.dname{font-size:12px;color:#444}
.dnums{display:flex;gap:6px;font-size:12px}
.dnums span{opacity:.9}
.metric-total{font-weight:600}
.metric-work{color:var(--status-ok);font-weight:600}
.metric-bad{color:var(--status-critical);font-weight:600}
.metric-repair{color:var(--status-warn);font-weight:600}
.zone-foot{margin-top:10px;padding-top:8px;border-top:1px solid #f0f0f0;display:flex;gap:12px;font-size:12px}
.zone-foot span{opacity:.92}
.htab{display:flex;gap:0;margin-bottom:16px;border:1px solid #d0d0d0;border-radius:8px;overflow:hidden;width:fit-content}
.htab-btn{padding:7px 18px;font-size:13px;cursor:pointer;background:#fff;border:none;color:#666;transition:all 0.15s}
.htab-btn.act{background:#7b2fff;color:#fff}
.card{background:#fff;border-radius:12px;border:1px solid #e5e5e5;padding:14px;margin-bottom:12px}
.card-title{font-size:13px;font-weight:600;margin-bottom:10px;color:#444}
.hrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #f5f5f5;font-size:12px}
.hrow:last-child{border-bottom:none}
.hdate{color:#888;width:90px;flex-shrink:0}
.htype-plus{color:#22863a;font-weight:600;width:60px;flex-shrink:0}
.htype-minus{color:#dc2626;font-weight:600;width:60px;flex-shrink:0}
.hqty{font-weight:600;width:60px;flex-shrink:0}
.hname{flex:1;color:#555}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:700px){
  .sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap}
  .sidebar-logo{padding:12px 16px;flex:1}
  .sidebar-nav{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 8px;width:100%}
  .nav-section{display:none}
  .nav-item{padding:6px 10px;font-size:11px;border-left:none;border-bottom:2px solid transparent}
  .nav-item.active{border-left:none;border-bottom:2px solid #7b2fff}
  .sync-bar{padding:6px 16px}
  .main{margin-left:0}
  .topbar{padding:10px 14px}
  .content{padding:12px 14px}
  .stats{gap:8px}
  .s3{grid-template-columns:repeat(3,1fr)}
  .s4{grid-template-columns:repeat(2,1fr)}
  .s5{grid-template-columns:repeat(3,1fr)}
  .stat{padding:10px 12px}
  .stat-val{font-size:18px}
  .lgrid{grid-template-columns:1fr}
  .zgrid{grid-template-columns:1fr}
  .controls{gap:6px}
  table{font-size:11px}
  th,td{padding:6px 8px}
  .tw{overflow-x:auto}
}
.cbox{background:#fff;border-radius:12px;border:1px solid #e5e5e5;padding:12px}
.cbox h3{font-size:12px;font-weight:600;margin-bottom:10px;color:#555}
.chwrap{position:relative;height:180px}
.zgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.toast-wrap{position:fixed;right:16px;bottom:16px;z-index:500;display:flex;flex-direction:column;gap:8px}
.toast{min-width:260px;max-width:360px;padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.toast.ok{border-color:#86efac;background:#f0fdf4;color:#166534}
.toast.err{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.toast.info{border-color:#c7d2fe;background:#eef2ff;color:#3730a3}
.mobile-nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.6);
  z-index:90;
}

/* ===== V2 visual redesign ===== */
body{
  background:radial-gradient(1200px 600px at -10% -20%, #e9ddff 0%, transparent 60%),
             radial-gradient(900px 500px at 110% 0%, #d7f4ff 0%, transparent 55%),
             #f5f7fb;
  color:var(--text);
}
.theme-toggle{
  position:relative;
  width:70px;
  height:34px;
  border:1px solid #d8ddea;
  background:linear-gradient(180deg,#ffffff,#f6f8fc);
  border-radius:999px;
  padding:0 8px;
  cursor:pointer;
  color:#374151;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  transition:all .18s ease;
}
.theme-toggle .icon{
  font-size:12px;
  line-height:1;
  z-index:2;
  opacity:.9;
}
.theme-toggle .knob{
  position:absolute;
  top:3px;
  left:3px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid #d8ddea;
  box-shadow:0 3px 10px rgba(15,23,42,.18);
  transition:left .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover{box-shadow:0 0 0 3px rgba(123,47,255,.12)}
.topbar-actions{display:flex;align-items:center;gap:8px}
.audit-icon-btn{
  width:28px;
  height:28px;
  border-radius:7px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,0.12);
  color:#7b8ba3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:0;
  backdrop-filter:blur(4px);
  transition:all .16s ease;
}
.audit-icon-btn:hover{
  color:#56657d;
  border-color:rgba(100,116,139,.44);
  background:rgba(255,255,255,0.24);
}
.audit-icon{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lupd{font-size:12px;color:#64748b}
.topbar-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topbar-loss-switch{margin-bottom:0}
.dash-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dash-split.one{grid-template-columns:1fr}
.dash-block{background:var(--surface);border-radius:14px;border:1px solid #e8ebf3;padding:14px;box-shadow:0 6px 20px rgba(15,23,42,0.05)}
.dash-block-title{font-size:13px;font-weight:700;margin-bottom:12px;color:#374151}
.dash-text{font-size:13px;color:var(--color-text-secondary)}
.dash-text-sm{font-size:12px;color:var(--color-text-secondary)}
.shift-zone{margin-bottom:10px}
.shift-zone-title{font-size:10px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.shift-row{margin-bottom:4px;display:flex;flex-wrap:wrap;gap:6px}
.shift-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px}
.shift-chip.day{background:#dbeafe;color:#1e3a8a}
.shift-chip.night{background:#ede9fe;color:#5b21b6}
.shift-tag{font-size:10px;font-weight:700;opacity:.85}
.topbar-copy{display:flex;flex-direction:column;gap:4px}
.topbar-subtitle{display:none}
.dash-panel-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:12px;margin-bottom:12px}
.alertbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 12px;border-radius:12px;border:1px solid #e8ebf3;
  background:linear-gradient(90deg,#fff 0%,#fafbff 70%);
  box-shadow:0 8px 20px rgba(15,23,42,.06);font-size:12px
}
.alertbar-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#fff}
.alertbar-item.red{color:#991b1b;background:#fee2e2}
.alertbar-item.amber{color:#92400e;background:#fef3c7}
.alertbar-item.blue{color:#1e40af;background:#dbeafe}
.alertbar-note{color:#64748b;font-weight:600}
.dash-list{display:grid;gap:10px}
.dash-alert{padding:11px 12px;border-radius:12px;border:1px solid #e8ebf3;background:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dash-alert.clickable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.dash-alert.clickable:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,42,0.08)}
.dash-alert-title{font-size:12px;font-weight:700;color:#1f2937;margin-bottom:3px}
.dash-alert-text{font-size:12px;color:#6b7280}
.dash-alert-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.dash-alert.red{border-color:#fecaca;background:#fff5f5}
.dash-alert.amber{border-color:#fde68a;background:#fffbeb}
.dash-alert.blue{border-color:#bfdbfe;background:#eff6ff}
.dash-alert.green{border-color:#bbf7d0;background:#f0fdf4}
.dash-alert .dash-alert-badge.red{background:#fef2f2;color:#9f1239;border-color:#fecdd3}
.dash-alert .dash-alert-badge.amber{background:#fffbeb;color:#92400e;border-color:#fde68a}
.dash-alert .dash-alert-badge.blue{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe}
.dash-alert .dash-alert-badge.green{background:#ecfdf5;color:#166534;border-color:#bbf7d0}
.dash-kpi{display:grid;gap:10px}
.dash-kpi-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#4b5563}
.dash-kpi-row strong{color:#111827}
.dash-progress{height:8px;background:#eef2f7;border-radius:999px;overflow:hidden}
.dash-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7b2fff,#00bfa5);transition:width .25s}
.sched-shell{background:var(--surface);border-radius:14px;border:1px solid #e8ebf3;padding:12px;overflow-x:auto;box-shadow:0 6px 20px rgba(15,23,42,0.05)}
.sched-chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin:2px 4px 0 0}
.sched-chip.day{background:#d1fae5;color:#065f46}
.sched-chip.night{background:#dbeafe;color:#1e40af}
.sched-empty{color:#94a3b8;font-size:13px}
.sched-head-name{padding:8px 12px;text-align:left;font-size:12px;min-width:160px;color:#475569}
.sched-head-day{padding:8px 10px;text-align:center;font-size:12px;min-width:90px;color:#64748b}
.sched-head-day.today{
  color:#6d5a98;
  background:linear-gradient(180deg,#f8f6ff 0%,#f1edff 100%);
  border-top:1px solid #a78bfa;
  box-shadow:inset 0 0 0 1px #e9ddff;
}
.sched-zone-row td{
  background:#f8fafc;
  font-size:10px;
  font-weight:700;
  color:#475569;
  padding:5px 12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.sched-person{padding:7px 12px}
.sched-person-name{font-size:13px;font-weight:600;color:#0f172a}
.sched-person-tg{font-size:11px;color:#64748b}
.sched-td{padding:4px 6px}
.sched-td.today{
  background:linear-gradient(180deg,#fbf9ff 0%,#f7f4ff 100%);
  border-left:1px solid #eee5ff;
  border-right:1px solid #eee5ff;
}
.sched-cell{
  border-radius:8px;padding:6px 8px;text-align:center;cursor:pointer;font-size:12px;min-width:70px;
  border:1px solid transparent;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.sched-cell:hover{transform:translateY(-1px)}
.sched-cell.empty{color:#9ca3af;background:rgba(148,163,184,.12)}
.sched-cell.day{background:#d1fae5;color:#065f46;font-weight:700}
.sched-cell.night{background:#dbeafe;color:#1e40af;font-weight:700}
.sched-cell.off{background:#f1f5f9;color:#64748b;font-weight:700}
.sched-cell.today{
  box-shadow:inset 0 0 0 1px #d6c8ff, 0 3px 8px rgba(124,58,237,.1);
}
.dash-block,.stat,.zcard,.tw,.controls,.card,.cbox,.sched-shell,.qr-card{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.dash-block:hover,.stat:hover,.zcard:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.qr-shell{max-width:520px;margin:0 auto}
.qr-card{background:var(--surface);border-radius:14px;border:1px solid #e8ebf3;padding:18px;box-shadow:0 6px 20px rgba(15,23,42,0.05)}
.qr-meta{font-size:13px;color:#6b7280;margin-bottom:8px;font-weight:600}
.qr-form-row{display:flex;gap:8px;margin-top:10px;align-items:center}
.qr-label{font-size:12px;color:#666}
.qr-select{font-size:13px;padding:6px 10px;border:1px solid #d0d0d0;border-radius:8px}
.qr-grow{flex:1}
.qr-container{display:inline-block;padding:12px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;margin-bottom:16px}
.qr-caption{font-size:12px;color:#888;margin-bottom:14px;word-break:break-all}
.sidebar{
  background:linear-gradient(180deg,#0f172a 0%, #111827 100%);
  box-shadow:6px 0 28px rgba(15,23,42,0.22);
  border-right:1px solid rgba(255,255,255,0.05);
}
.sidebar-logo{
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-logo h1{
  font-size:16px;
  letter-spacing:0.2px;
}
.sidebar-logo p{
  color:#94a3b8;
}
.nav-section{
  color:#64748b;
  font-weight:700;
}
.nav-item{
  margin:3px 8px;
  border-radius:10px;
  border-left:none;
  color:#cbd5e1;
}
.nav-item:hover{
  background:rgba(255,255,255,0.08);
  color:#fff;
}
.nav-item.active{
  background:linear-gradient(90deg, rgba(123,47,255,0.28) 0%, rgba(123,47,255,0.12) 100%);
  border-left:none;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,0.35);
}
.sync-bar{
  border-top:1px solid rgba(255,255,255,0.08);
}
.main{
  background:transparent;
}
.topbar{
  margin:10px 12px 0;
  border-radius:14px;
  border:1px solid #e6e8ef;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 26px rgba(15,23,42,0.08);
}
.topbar h2{
  font-size:17px;
  color:#0f172a;
}
#lupd{color:#64748b!important}
.content{
  padding:12px 12px 14px;
}
.stat,.card,.zcard,.cbox,.tw,.uzone{
  border-radius:14px;
  border:1px solid #e8ebf3;
  box-shadow:0 6px 20px rgba(15,23,42,0.05);
}
.stat{
  background:linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);
  padding:14px 16px;
}
.stat-label{
  color:#6b7280;
  font-weight:500;
}
.stat-val{
  font-size:26px;
}
.controls{
  background:rgba(255,255,255,0.7);
  border:1px solid #e8ebf3;
  border-radius:12px;
  padding:9px;
}
.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:9px;
  border:1px solid #e8ebf3;
  border-radius:12px;
  background:rgba(255,255,255,0.7);
}
.toolbar input[type=text]{
  flex:1;
  min-width:220px;
  padding:8px 12px;
  border:1px solid #d8ddea;
  border-radius:8px;
  font-size:13px;
  background:#fff;
}
.toolbar select{
  min-width:100px;
}
.toolbar.dragover{
  border-color:#7c3aed;
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}
.toolbar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar-group.grow{flex:1;min-width:260px}
.toolbar-sep{width:1px;height:24px;background:#e5e7eb}
.sup-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sup-post-btn{
  min-height:24px;
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1px;
}
.sup-state{
  justify-content:center;
  min-height:24px;
  font-size:11px;
}
#page-supply .toolbar{
  padding:10px;
  border-radius:14px;
}
#page-supply .toolbar .btn{
  min-height:30px;
  padding:5px 12px;
  border-radius:9px;
}
#page-supply #sup-import-file,
#page-supply #sup-add-pos,
#page-supply #sup-export{
  min-width:124px;
  justify-content:center;
}
#page-supply .toolbar #sup-import-file{
  background:linear-gradient(135deg,#6c45c6,#4f46b8);
  border-color:#5c3fae;
  color:#eef2ff;
}
#page-supply .toolbar #sup-add-pos{
  background:linear-gradient(180deg,#172033,#0f172a);
  border-color:#3b4960;
  color:#d8e1f3;
}
#page-supply .toolbar #sup-add-pos:hover{
  background:linear-gradient(180deg,#1a2740,#111b2f);
}
#page-supply .sup-actions .nit{
  min-height:24px;
  padding:3px 8px;
  border-radius:8px;
}
#page-supply .sup-actions .nit::placeholder{
  color:#7c8aa3;
}
#page-supply tbody tr:hover td{
  background:#f4f8ff;
}
.info-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #d8ddea;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:700;
}
.controls input[type=text],
.controls input[type=number],
select{
  border:1px solid #d8ddea;
  background:#fff;
}
.controls input[type=text]:focus,
.controls input[type=number]:focus,
select:focus,
.mr input:focus,
.mr textarea:focus,
.mr select:focus{
  outline:none;
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(123,47,255,0.14);
}
.btn{
  border:1px solid #d8ddea;
  background:#fff;
  font-weight:600;
}
.btn:hover{
  background:#f7f8fc;
}
.btn.p{
  background:linear-gradient(135deg,#7b2fff 0%, #5b21b6 100%);
  border-color:#6d28d9;
}
.btn.p:hover{
  background:linear-gradient(135deg,#6d28d9 0%, #4c1d95 100%);
}
.btn.g{
  background:linear-gradient(135deg,#16a34a 0%, #15803d 100%);
  border-color:#15803d;
}
.btn.d{
  background:linear-gradient(135deg,#dc2626 0%, #b91c1c 100%);
  border-color:#b91c1c;
}
.tag{
  background:#eef2ff;
  color:#4338ca;
  font-weight:600;
}
.tw{
  background:#fff;
}
thead{
  background:#f8fafc;
}
th{
  color:#475569;
  font-weight:700;
  letter-spacing:.2px;
  padding:9px 10px;
}
td{
  border-bottom:1px solid #eef2f7;
  padding:8px 10px;
  transition:background .14s ease, border-color .14s ease;
}
tr:hover td{
  background:#f8fbff;
}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #7b2fff}
.uzone{
  border:1.5px dashed #c7d2fe;
  background:linear-gradient(180deg,#fff 0%, #f9f6ff 100%);
}
.uzone:hover{
  border-color:#8b5cf6;
  background:#f7f2ff;
}
.uzone.dragover{
  border-color:#7c3aed!important;
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}
.mbg{
  background:rgba(2,6,23,0.74);
}
.modal{
  border:1px solid #e6e8ef;
  box-shadow:0 24px 60px rgba(2,6,23,0.42);
  width:560px;
}
.modal h3{
  color:#111827;
}
.mr label{
  color:#4b5563;
  font-weight:600;
}
.mr input,.mr select,.mr textarea{
  border:1px solid #d8ddea;
}
.hrow{
  border-bottom:1px solid #eef2f7;
}
.htab{
  border:1px solid #d8ddea;
}
.htab-btn{
  font-weight:600;
}
.htab-btn.act{
  background:linear-gradient(135deg,#7b2fff 0%, #5b21b6 100%);
}
.ztitle{
  color:#0f172a;
}
.zbadge{
  background:#ede9fe;
  color:#5b21b6;
}
.empty{
  color:#94a3b8;
}
body.dark{
  --surface:#0f172a;
  --surface-2:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --color-background-warning:rgba(245,158,11,.14);
  --status-ok:#86b29a;
  --status-warn:#c0a77f;
  --status-critical:#bb8f98;
  --status-info:#a8bfe0;
  --status-neutral:#b7c6df;
  --badge-ok-bg:rgba(34,197,94,.12);
  --badge-ok-border:rgba(34,197,94,.22);
  --badge-warn-bg:rgba(245,158,11,.12);
  --badge-warn-border:rgba(245,158,11,.22);
  --badge-critical-bg:rgba(220,38,38,.12);
  --badge-critical-border:rgba(220,38,38,.22);
  --badge-info-bg:rgba(59,130,246,.12);
  --badge-info-border:rgba(59,130,246,.22);
  --badge-neutral-bg:rgba(71,85,105,.18);
  --badge-neutral-border:rgba(100,116,139,.3);
  background:
    radial-gradient(1200px 520px at 0% -8%, rgba(124,58,237,.36) 0%, rgba(124,58,237,0) 58%),
    radial-gradient(980px 460px at 100% -6%, rgba(14,165,233,.22) 0%, rgba(14,165,233,0) 56%),
    linear-gradient(180deg,#030712 0%, #020617 100%);
}
body.dark .main{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 35%);
}
body.dark .sidebar{
  background:
    linear-gradient(180deg,rgba(14,20,36,.96) 0%, rgba(8,13,25,.96) 100%),
    radial-gradient(420px 200px at 10% -10%, rgba(139,92,246,.24) 0%, rgba(139,92,246,0) 62%);
  border-right:1px solid rgba(148,163,184,.18);
  box-shadow:12px 0 40px rgba(0,0,0,.42);
}
body.dark .sidebar-logo{
  border-bottom:1px solid rgba(148,163,184,.16);
}
body.dark .sidebar-logo h1{color:#f8fafc}
body.dark .sidebar-logo p{color:#8aa0c7}
body.dark .sidebar-theme{border-bottom:1px solid rgba(148,163,184,.16)}
body.dark .ztitle{color:#dbe7ff}
body.dark .zbadge{
  background:rgba(139,92,246,.2);
  color:#ddd6fe;
  border:1px solid rgba(167,139,250,.34);
}
body.dark .nav-section{color:#7d91b6}
body.dark .nav-item{
  color:#c8d5ec;
  border:1px solid transparent;
}
body.dark .nav-item:hover{
  background:linear-gradient(90deg,rgba(99,102,241,.17),rgba(14,165,233,.10));
  border-color:rgba(129,140,248,.25);
}
body.dark .nav-item.active{
  background:linear-gradient(90deg,rgba(124,58,237,.34),rgba(14,165,233,.18));
  border-color:rgba(167,139,250,.42);
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.22), 0 8px 18px rgba(76,29,149,.28);
}
body.dark .nav-dot{background:#475569}
body.dark .nav-item.active .nav-dot{
  background:linear-gradient(180deg,#a78bfa,#22d3ee);
  box-shadow:0 0 12px rgba(167,139,250,.6);
}
body.dark .sync-bar{border-top:1px solid rgba(148,163,184,.16)}
body.dark .alertbar{
  border-color:rgba(99,115,148,.28);
  background:linear-gradient(90deg,rgba(17,24,39,.88) 0%, rgba(15,23,42,.92) 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
}
body.dark .alertbar-item{background:rgba(15,23,42,.9);border:1px solid rgba(99,115,148,.24)}
body.dark .alertbar-item.red{background:rgba(127,29,29,.28);color:#fecaca;border-color:rgba(220,38,38,.35)}
body.dark .alertbar-item.amber{background:rgba(120,53,15,.26);color:#fde68a;border-color:rgba(245,158,11,.32)}
body.dark .alertbar-item.blue{background:rgba(30,58,138,.25);color:#bfdbfe;border-color:rgba(59,130,246,.3)}
body.dark .alertbar-note{color:#93a4c8}
body.dark .topbar,
body.dark .stat,
body.dark .card,
body.dark .zcard,
body.dark .cbox,
body.dark .tw,
body.dark .controls,
body.dark .modal,
body.dark .toast,
body.dark .dash-block,
body.dark .qr-card,
body.dark .sched-shell{
  background:
    linear-gradient(180deg,rgba(15,23,42,.9) 0%, rgba(12,20,38,.92) 100%)!important;
  border-color:rgba(99,115,148,.24)!important;
  color:#e5e7eb!important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.03)!important;
}
body.dark .topbar-subtitle{color:#93a4c8}
body.dark .topbar{
  background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(12,20,38,.9))!important;
  border-color:rgba(129,140,248,.2)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.03)!important;
}
body.dark .topbar h2{color:#f8fafc}
body.dark .dash-alert{background:#0f172a;border-color:#273449}
body.dark .dash-alert-title{color:#e5e7eb}
body.dark .dash-alert-text{color:#9ca3af}
body.dark .dash-alert.red{background:#2a1116;border-color:#5a1f28}
body.dark .dash-alert.amber{background:#2a2212;border-color:#5e4a1f}
body.dark .dash-alert.blue{background:#102133;border-color:#1f3f5f}
body.dark .dash-alert.green{background:#0f241a;border-color:#1f5a3b}
body.dark .uzone{
  border:1.5px dashed rgba(99,115,148,.5);
  background:linear-gradient(180deg,rgba(15,23,42,.9) 0%, rgba(13,20,36,.92) 100%);
}
body.dark .uzone:hover{
  border-color:rgba(139,92,246,.72);
  background:linear-gradient(180deg,rgba(30,27,75,.35) 0%, rgba(15,23,42,.92) 100%);
}
body.dark .uzone h3{color:#e2e8f0}
body.dark .uzone p{color:#8ea2c8}
body.dark .cbox h3{color:#9fb1d3}
body.dark .mcard{
  background:rgba(15,23,42,.74);
  border-color:rgba(99,115,148,.26);
}
body.dark .mcard-title{color:#e2e8f0}
body.dark .mkv{color:#cbd5e1}
body.dark .mkv b{color:#8ea2c8}
body.dark #page-supply #sup-toolbar{
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(12,20,38,.95));
  border-color:rgba(99,115,148,.28);
}
body.dark .uzone.dragover{
  border-color:#a78bfa!important;
  box-shadow:0 0 0 3px rgba(139,92,246,.22);
}
body.dark .dash-kpi-row{color:#cbd5e1}
body.dark .dash-kpi-row strong{color:#f8fafc}
body.dark .dash-progress{background:#1f2937}
body.dark .shift-zone-title{color:#94a3b8}
body.dark .shift-chip.day{background:#1e3a8a;color:#dbeafe}
body.dark .shift-chip.night{background:#4c1d95;color:#ede9fe}
body.dark .sched-chip.day{background:rgba(22,163,74,.22);color:#bbf7d0}
body.dark .sched-chip.night{background:rgba(14,116,144,.22);color:#bae6fd}
body.dark .sched-empty{color:#7f92b6}
body.dark .sched-head-name{color:#9fb1d3}
body.dark .sched-head-day{color:#8ea2c8}
body.dark .sched-head-day.today{
  color:#c7bce8;
  background:linear-gradient(180deg,rgba(91,33,182,.22) 0%,rgba(76,29,149,.16) 100%);
  border-top-color:rgba(139,92,246,.55);
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.28);
}
body.dark .sched-zone-row td{
  background:rgba(15,23,42,.94);
  color:#94a3b8;
  border-top:1px solid rgba(99,115,148,.22);
  border-bottom:1px solid rgba(99,115,148,.22);
}
body.dark .sched-person-name{color:#e2e8f0}
body.dark .sched-person-tg{color:#8aa0c7}
body.dark .sched-td.today{
  background:linear-gradient(180deg,rgba(76,29,149,.14),rgba(67,56,202,.08));
  border-left:1px solid rgba(139,92,246,.34);
  border-right:1px solid rgba(139,92,246,.34);
}
body.dark .sched-cell.empty{color:#7f92b6;background:rgba(15,23,42,.5);border-color:rgba(99,115,148,.24)}
body.dark .sched-cell.day{background:rgba(22,163,74,.22);color:#bbf7d0;border-color:rgba(34,197,94,.34)}
body.dark .sched-cell.night{background:rgba(8,145,178,.24);color:#bae6fd;border-color:rgba(6,182,212,.32)}
body.dark .sched-cell.off{background:rgba(51,65,85,.48);color:#cbd5e1;border-color:rgba(100,116,139,.34)}
body.dark .sched-cell.today{box-shadow:inset 0 0 0 1px rgba(196,181,253,.34), 0 4px 10px rgba(76,29,149,.16)}
body.dark thead{
  background:linear-gradient(90deg,rgba(18,26,42,.96),rgba(16,34,52,.94));
}
body.dark th{
  color:#a9bbda;
  background:linear-gradient(90deg,rgba(92,58,170,.08),rgba(18,130,186,.06));
  border-bottom-color:rgba(99,115,148,.22);
}
body.dark #page-supply thead{
  background:linear-gradient(90deg,rgba(18,26,42,.96),rgba(16,34,52,.94));
}
body.dark #page-supply th{
  color:#a9bbda;
  background:linear-gradient(90deg,rgba(92,58,170,.08),rgba(18,130,186,.06));
  border-bottom-color:rgba(99,115,148,.22);
}
body.dark #tsd-all-sn td:first-child,
body.dark #tsd-sn-body td:first-child{
  color:#d7e3fb;
  font-weight:600;
}
body.dark td{border-bottom-color:rgba(99,115,148,.22)}
body.dark tbody tr:nth-child(odd) td{background:rgba(2,6,23,.2)}
body.dark tbody tr:nth-child(even) td{background:rgba(2,6,23,.08)}
body.dark tbody tr:hover td{
  background:linear-gradient(90deg,rgba(76,29,149,.14),rgba(14,165,233,.06))!important;
}
body.dark tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #a78bfa}
body.dark .stat-label,body.dark .card-title,body.dark .dname,body.dark .mr label{color:#94a3b8}
body.dark .metric-total{color:#b8c6e0}
body.dark .metric-work{color:var(--status-ok)}
body.dark .metric-bad{color:var(--status-critical)}
body.dark .metric-repair{color:var(--status-warn)}
body.dark .zone-foot{border-top-color:rgba(99,115,148,.34)}
body.dark .qg,
body.dark .qa,
body.dark .qr{
  padding:2px 8px;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:600;
}
body.dark .qg{
  color:var(--status-ok);
  background:var(--badge-ok-bg);
  border-color:var(--badge-ok-border);
}
body.dark .qa{
  color:var(--status-warn);
  background:var(--badge-warn-bg);
  border-color:var(--badge-warn-border);
}
body.dark .qr{
  color:var(--status-critical);
  background:var(--badge-critical-bg);
  border-color:var(--badge-critical-border);
}
body.dark .bx{
  border:1px solid transparent;
  font-weight:600;
}
body.dark .bg{
  color:var(--status-ok);
  background:var(--badge-ok-bg);
  border-color:var(--badge-ok-border);
}
body.dark .ba{
  color:var(--status-warn);
  background:var(--badge-warn-bg);
  border-color:var(--badge-warn-border);
}
body.dark .br{
  color:var(--status-critical);
  background:var(--badge-critical-bg);
  border-color:var(--badge-critical-border);
}
body.dark .bb{
  color:var(--status-info);
  background:var(--badge-info-bg);
  border-color:var(--badge-info-border);
}
body.dark .bgy{
  color:var(--status-neutral);
  background:var(--badge-neutral-bg);
  border-color:var(--badge-neutral-border);
}
body.dark .dash-alert .dash-alert-badge.red{background:var(--badge-critical-bg);color:var(--status-critical);border-color:var(--badge-critical-border)}
body.dark .dash-alert .dash-alert-badge.amber{background:var(--badge-warn-bg);color:var(--status-warn);border-color:var(--badge-warn-border)}
body.dark .dash-alert .dash-alert-badge.blue{background:var(--badge-info-bg);color:var(--status-info);border-color:var(--badge-info-border)}
body.dark .dash-alert .dash-alert-badge.green{background:var(--badge-ok-bg);color:var(--status-ok);border-color:var(--badge-ok-border)}
body.dark .stat-val.green{color:var(--status-ok)}
body.dark .stat-val.red{color:var(--status-critical)}
body.dark .stat-val.amber{color:var(--status-warn)}
body.dark input,body.dark select,body.dark textarea{
  background:linear-gradient(180deg,#0b1220,#0a1020)!important;
  border-color:#3b4960!important;
  color:#e5e7eb!important;
}
body.dark select option{
  background:#0b1220;
  color:#e5e7eb;
}
body.dark select optgroup{
  background:#0b1220;
  color:#9fb1d3;
}
body.dark #m-loss-work #m-lw-info{
  background:linear-gradient(180deg,#0b1220,#0a1020)!important;
  border:1px solid #3b4960;
  color:#c7d2e7!important;
}
body.dark #m-loss-work select{
  color-scheme:dark;
}
body.dark .btn{
  background:linear-gradient(180deg,#111827,#0b1220);
  border-color:#3b4960;
  color:#e5e7eb;
}
body.dark .btn:hover{background:linear-gradient(180deg,#172033,#0f172a)}
body.dark .toolbar{
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(12,20,38,.94));
  border-color:rgba(99,115,148,.28);
}
body.dark .toolbar input[type=text]{
  background:linear-gradient(180deg,#0b1220,#0a1020);
  border-color:#3b4960;
  color:#e5e7eb;
}
body.dark .toolbar.dragover{
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(139,92,246,.22);
}
body.dark .toolbar-sep{background:rgba(99,115,148,.35)}
body.dark .sup-post-btn{
  background:linear-gradient(135deg,#0f8a79,#0f9e72);
  border-color:#0f8a79;
  color:#e9fbff;
  box-shadow:0 4px 10px rgba(15,138,121,.18);
}
body.dark .sup-state{
  color:#a9bbda;
  background:rgba(51,65,85,.42);
  border-color:rgba(99,115,148,.34);
}
body.dark #page-supply .sup-actions .nit{
  background:linear-gradient(180deg,#0f1728,#0c1424)!important;
  border-color:#445168!important;
  color:#dbe6fb!important;
}
body.dark #page-supply .sup-actions .nit::placeholder{
  color:#93a3bf;
}
body.dark #page-supply tbody tr:hover td{
  background:linear-gradient(90deg,rgba(76,29,149,.18),rgba(14,165,233,.08))!important;
}
body.dark .info-chip{
  background:rgba(30,41,59,.62);
  border-color:rgba(99,115,148,.35);
  color:#c7d2fe;
}
body.dark .htab{
  border-color:rgba(99,115,148,.34);
  background:rgba(15,23,42,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.dark .htab-btn{
  background:transparent;
  color:#9fb1d3;
}
body.dark .htab-btn:hover{
  background:rgba(139,92,246,.14);
  color:#e2e8f0;
}
body.dark .btn.p{
  background:linear-gradient(135deg,#6b46c1,#4f46b8);
  border-color:#5f3fb0;
  color:#eef2ff;
  box-shadow:0 4px 10px rgba(79,70,184,.20);
}
body.dark .btn.g{
  background:linear-gradient(135deg,#0f8a79,#0f9e72);
  border-color:#0f8a79;
  color:#e9fbff;
  box-shadow:0 4px 10px rgba(15,138,121,.20);
}
body.dark .btn.d{
  background:linear-gradient(135deg,#b91f2f,#981a29);
  border-color:#a61e2d;
  color:#fff4f6;
  box-shadow:0 4px 10px rgba(166,30,45,.18);
}
body.dark .htab-btn.act{
  background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px rgba(91,33,182,.34);
}
body.dark .theme-toggle{
  background:linear-gradient(180deg,#1b2336,#0f172a);
  border-color:#4b5568;
  color:#dbe4f5;
}
body.dark .theme-toggle .knob{
  left:39px;
  background:#0b1220;
  border-color:#51607a;
  box-shadow:0 3px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}
body.dark .audit-icon-btn{
  background:rgba(15,23,42,0.28);
  border-color:rgba(148,163,184,.26);
  color:#7f8ea6;
}
body.dark .audit-icon-btn:hover{
  color:#a8b6cc;
  border-color:rgba(148,163,184,.45);
  background:rgba(30,41,59,0.5);
}
body.dark .lupd{color:#94a3b8}
body.dark .qr-container{background:#111827;border-color:#374151}
body.dark .qr-caption{color:#94a3b8}
@media(max-width:700px){
  .topbar{
    margin:10px 10px 0;
  }
  .content{
    padding:10px;
  }
  .dash-split{
    grid-template-columns:1fr;
  }
  .dash-panel-grid{
    grid-template-columns:1fr;
  }
  .controls{
    padding:8px;
  }
  .toolbar{
    padding:8px;
    gap:8px;
  }
  .toolbar-group.grow{
    min-width:100%;
  }
  .toolbar-sep{
    display:none;
  }
  .theme-toggle{
    width:64px;
    height:30px;
    padding:0 7px;
  }
  .theme-toggle .knob{
    width:22px;
    height:22px;
  }
  body.dark .theme-toggle .knob{
    left:35px;
  }
  .stat{
    padding:10px;
  }
  .topbar-title-row{
    gap:8px;
  }
  .topbar-loss-switch{
    width:100%;
  }
}
@media(max-width:768px){
  .mobile-menu-btn{
    display:inline-flex;
    width:32px;height:32px;
    border-radius:8px;
    align-items:center;justify-content:center;
    border:1px solid #334155;
    background:linear-gradient(180deg,#111827,#0b1220);
    color:#dbe7ff;
    cursor:pointer;
    font-size:18px;
    line-height:1;
  }
  .sidebar{
    position:fixed;
    top:0;
    height:100vh;
    left:-240px;
    width:240px;
    transition:left .2s ease;
    z-index:100;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .sidebar-logo{
    padding:10px 12px;
  }
  .sidebar-logo h1{
    font-size:18px;
    line-height:1.1;
    margin-bottom:2px;
  }
  .sidebar-logo p{
    font-size:11px;
  }
  .sidebar-theme{
    padding:8px 12px;
  }
  .theme-toggle{
    width:58px;
    height:28px;
  }
  .theme-toggle .knob{
    width:20px;
    height:20px;
  }
  body.dark .theme-toggle .knob{
    left:31px;
  }
  .sidebar-nav{
    padding-top:8px;
  }
  body.mobile-nav-open .sidebar{left:0}
  body.mobile-nav-open{overflow:hidden}
  .mobile-nav-backdrop{display:block}
  body:not(.mobile-nav-open) .mobile-nav-backdrop{display:none}
  .main{margin-left:0}
  .topbar{
    padding:8px 10px;
    border-radius:10px;
    margin:8px 8px 0;
  }
  .topbar h2{font-size:15px}
  .topbar-copy{gap:2px}
  .topbar-actions{gap:6px}
  .topbar-actions .lupd{font-size:11px}
  .content{padding:10px 12px}
  .controls{padding:8px}
  #page-supply #sup-toolbar{
    position:sticky;
    top:6px;
    z-index:25;
    border-radius:12px;
    backdrop-filter:blur(8px);
  }
  #page-supply #sup-toolbar .toolbar-group{
    width:100%;
  }
  #page-supply #sup-toolbar .toolbar-group .btn{
    flex:1;
  }
  #page-supply .tw,#page-tmc .tw,#page-spec .tw{display:none}
  #page-supply .mobile-cards,#page-tmc .mobile-cards,#page-spec .mobile-cards{display:block}
  .stats.s4,.stats.s5{grid-template-columns:repeat(2,1fr)}
  .stats.s3{grid-template-columns:repeat(3,1fr)}
  .btn{min-height:36px}
  .mcard{
    padding:10px 10px 12px;
    margin-bottom:10px;
  }
  .mcard-grid{
    grid-template-columns:1fr 1fr;
    gap:6px 8px;
  }
}