/* App shell, theme tokens, dark mode, appearance options */
:root{--primary:#1a6ae0;--primary-hover:#1558c0;--primary-dark:#0f3d91;--primary-rgb:26,106,224;--primary-light:color-mix(in srgb,var(--primary) 12%,var(--surface));
--background:#f4f5f7;--surface:#fff;--surface-secondary:#f7f8fa;--text:#16181d;--text-secondary:#6b7280;--border:#e3e5ea;--danger:#dc2626;--success:#16a34a;--warning:#d97706;--sbw:244px;
--brand:var(--primary);--brand2:var(--primary-hover);--bg:var(--background);--card:var(--surface);--ink:var(--text);--mute:var(--text-secondary);--line:var(--border)}
html[data-sb=collapsed]{--sbw:68px}
html[data-theme=dark]{--background:#0f1218;--surface:#171b23;--surface-secondary:#1e232d;--text:#e6e9ef;--text-secondary:#9aa3b2;--border:#2b3240;color-scheme:dark}
html[data-theme=dark] :is(input,select,textarea,.btn,.seg button,dialog,.sugg,.invlist){background:var(--surface);color:var(--text)}
html[data-theme=dark] .btn.solid:not(.danger),html[data-theme=dark] .seg button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
html[data-theme=dark] .btn.danger{background:#b00020;color:#fff}
html[data-theme=dark] .stage{background:#0c0f14}
html[data-theme=dark] :is(.bl,.ir,.sr):hover{background:var(--surface-secondary)}
html[data-theme=dark] .pfx{color:#111}
.top{display:none!important}
body{padding-left:var(--sbw);transition:padding-left .25s var(--ease)}
#sb{position:fixed;inset:0 auto 0 0;width:var(--sbw);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:60;transition:width .25s var(--ease),transform .28s var(--ease);overflow:hidden}
.sbh{height:60px;display:flex;align-items:center;gap:10px;padding:0 14px;flex:0 0 auto}
.sbl{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.sbt{flex:1;white-space:nowrap}
.sbn{flex:1;overflow:auto;padding:6px 10px;display:flex;flex-direction:column;gap:2px}.sbf{padding:8px 10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.sbi{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--text-secondary);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
.sbi:hover{background:var(--surface-secondary);color:var(--text)}.sbi.on{background:var(--primary-light);color:var(--primary)}
svg.i,.sbi svg,.tbi svg,.tbs svg,.tbq svg{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sbtog{margin-left:auto}.sbtog svg{transition:transform .25s}
html[data-sb=collapsed] .sbi span,html[data-sb=collapsed] .sbt{display:none}html[data-sb=collapsed] .sbtog svg{transform:rotate(180deg)}html[data-sb=collapsed] .sbh{padding:0 17px}html[data-sb=collapsed] .sbtog{display:none}
#tb{position:sticky;top:0;z-index:40;min-height:60px;display:flex;align-items:center;gap:10px;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
#tb h1{font-size:18px;margin:0;flex:1;white-space:nowrap}
.tbi{width:42px;height:42px;border-radius:10px;border:0;background:none;color:var(--text);display:grid;place-items:center;cursor:pointer;position:relative;flex:0 0 auto;transition:background .18s}.tbi:hover{background:var(--surface-secondary)}
.tbs{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-secondary);color:var(--text-secondary);cursor:pointer;font:inherit;min-width:230px}.tbs kbd{margin-left:auto;font:12px system-ui;border:1px solid var(--border);border-radius:6px;padding:1px 6px}
.tbq{min-height:42px!important;padding:0 14px!important;display:flex;align-items:center;gap:6px}
.tbb{position:absolute;top:4px;right:3px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font:700 11px/18px system-ui;text-align:center;padding:0 4px;font-style:normal}
.tbu{width:40px;height:40px;border-radius:50%;border:0;background:var(--primary);color:#fff;font:700 16px system-ui;cursor:pointer}
#tbMenu,#sbo{display:none}
@media(max-width:859px){body{padding-left:0}#sb{transform:translateX(-100%);width:260px}html.sbopen #sb{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}html.sbopen #sbo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;animation:bdIn .2s}#tbMenu{display:grid}.tbs span,.tbs kbd,.tbq span{display:none}.tbs{min-width:42px;padding:0 10px}#tb{padding:6px 10px}html[data-sb=collapsed] .sbi span,html[data-sb=collapsed] .sbt{display:inline}html[data-sb=collapsed]{--sbw:0px}.sbtog{display:none}}
/* dashboard & customers */
.dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.dg2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
.kpi{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.1);border-color:var(--primary)}.kpi small{color:var(--text-secondary);font-weight:600}.kpi b{font-size:24px}
.sk{height:84px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface-secondary),var(--border),var(--surface-secondary));background-size:200% 100%;animation:skl 1.2s linear infinite}.sk.tall{height:200px}@keyframes skl{to{background-position:-200% 0}}
.chart{width:100%;height:auto}.chart .bar{fill:var(--primary)}.chart text{fill:var(--text-secondary);font-size:10px}
.pbar{display:grid;grid-template-columns:70px 1fr 40px;gap:8px;align-items:center;font-size:14px}.pbar i{height:8px;border-radius:4px;background:var(--surface-secondary);overflow:hidden}.pbar u{display:block;height:100%;background:var(--primary);border-radius:4px;transition:width .6s var(--ease)}.pbar em{font-style:normal;color:var(--text-secondary);text-align:right}
.lr{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}.lr span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.lr small{color:var(--text-secondary)}
.bad{color:var(--danger)!important}.warn{color:var(--warning)!important}
.emp{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 10px;text-align:center;color:var(--text-secondary)}.emp b{color:var(--text);font-size:16px}
.tw{overflow-x:auto}.tr{display:grid;grid-template-columns:minmax(150px,2fr) 1fr .6fr 1fr 1fr 1fr;gap:10px;align-items:center;min-width:620px;width:100%;padding:12px 8px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}.tr:hover{background:var(--primary-light)}.tr.th{font-weight:700;color:var(--text-secondary);font-size:13px;cursor:default}.tr.th:hover{background:none}
/* search & appearance */
.gs{gap:8px}.gsres{max-height:55vh;overflow:auto}.gsres h3{margin:10px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.gsr{display:flex;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}.gsr:hover,.gsr:focus-visible{background:var(--primary-light)}.gsr small{color:var(--text-secondary)}
.apl{font-weight:700;font-size:13px;color:var(--text-secondary);margin-top:4px}.sws{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--border);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}.sw:hover{transform:scale(1.1)}.sw.on{box-shadow:0 0 0 3px var(--primary)}
.sw.cust{position:relative;overflow:hidden;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red)}.sw.cust input{position:absolute;inset:-8px;width:60px;height:60px;opacity:0;cursor:pointer;min-height:0;padding:0}
/* appearance options */
html[data-density=compact] :is(input,select,.btn){min-height:42px}html[data-density=compact] .seg button{min-height:38px}html[data-density=compact] .card{padding:10px;gap:8px}html[data-density=compact] #tb{min-height:52px}
html[data-corner=standard]{--r:8px}html[data-corner=standard] :is(input,select,textarea,.btn,.seg,.kpi,.tbs,.sbi,.gsr){border-radius:8px}html[data-corner=standard] dialog{border-radius:10px}
html[data-anim=reduced] *,html[data-anim=reduced] *::before,html[data-anim=reduced] *::after{animation-duration:.12s!important;transition-duration:.12s!important}
html[data-anim=off] *,html[data-anim=off] *::before,html[data-anim=off] *::after{animation:none!important;transition:none!important}
@media print{#sb,#tb,#sbo{display:none!important}body{padding-left:0!important}}