/* ZXMOTO Internal HQ System — official brand color system
Showroom white / silver surfaces / dark charcoal navigation / ZXMOTO blue accent.
Red is reserved for critical states only. */
:root{
/* ===== ZXMOTO official design tokens (showroom identity) ===== */
--zxmoto-blue:#5F86BE;
--zxmoto-blue-dark:#3F679D;
--zxmoto-blue-soft:#EAF1F8;
--bg-main:#F7F8FA;
--bg-card:#FFFFFF;
--bg-soft:#F1F3F6;
--sidebar-bg:#171A1F;
--sidebar-hover:#232832;
--sidebar-active:#EAF1F8;
--text-main:#1F2328;
--text-secondary:#667085;
--text-muted:#98A2B3;
--border-light:#E1E5EA;
--border-medium:#CBD2DA;
--success-bg:#EAF7F0; --success-text:#247A4D;
--warning-bg:#FFF6E5; --warning-text:#9A6700;
--critical-bg:#FDECEC; --critical-text:#B42318;
--neutral-bg:#F2F4F7; --neutral-text:#667085;
/* ===== internal aliases (existing rules resolve to the tokens above) ===== */
--blue:var(--zxmoto-blue); --blue2:var(--zxmoto-blue-soft);
--bg:var(--bg-main); --panel:var(--bg-card); --soft:var(--bg-soft);
--line:var(--border-light);
--graphite:var(--sidebar-bg); --graphite2:var(--sidebar-hover);
--ink:var(--text-main); --mut:var(--text-secondary); --mut2:var(--text-muted);
--ok:var(--success-text); --okbg:var(--success-bg);
--warn:var(--warning-text); --warnbg:var(--warning-bg);
--crit:var(--critical-text); --critbg:var(--critical-bg);
--neutral:var(--neutral-text); --neutbg:var(--neutral-bg);
--info:var(--zxmoto-blue); --infobg:var(--zxmoto-blue-soft);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:13px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
background:var(--bg);color:var(--ink);}
a{color:var(--info);text-decoration:none}
.app{display:flex;min-height:100vh}
/* Sidebar */
.side{width:228px;background:var(--graphite);color:#cfd6dd;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:18px 16px;border-bottom:1px solid #262B33}
.brand .logo{font-weight:800;font-size:15px;color:#fff;letter-spacing:.4px}
.brand .logo span{color:var(--blue)}
.brand .sub{font-size:10.5px;color:#8b949e;margin-top:3px;line-height:1.35}
.nav{padding:14px 10px;flex:1}
.nav .sec{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#6c7680;padding:10px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;color:#B9C0C9;font-size:12.5px;margin-bottom:3px;transition:background .12s}
.nav a:hover{background:rgba(255,255,255,.05)}
.nav a.on{background:var(--sidebar-hover);color:var(--sidebar-active);box-shadow:inset 3px 0 0 var(--zxmoto-blue)}
.nav a .dot{width:6px;height:6px;border-radius:50%;background:#4a545e;flex-shrink:0}
.nav a.on .dot{background:var(--blue)}
.side .foot{padding:12px 16px;border-top:1px solid #262B33;font-size:10.5px;color:#6c7680}
/* Topbar */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:var(--panel);border-bottom:1px solid var(--line);padding:10px 22px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:5}
.top h1{font-size:15px;font-weight:700}
.top .env{font-size:10px;background:var(--neutbg);color:var(--mut);border:1px solid var(--line);padding:2px 8px;border-radius:10px}
.top .grow{flex:1}
.rolebox{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.rolebox select{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.rolebox .ro{font-size:10px;background:var(--warnbg);color:var(--warn);padding:2px 8px;border-radius:10px;font-weight:600}
/* Content */
.content{padding:20px 22px;max-width:1340px}
.pagehead{margin-bottom:14px}
.pagehead h2{font-size:18px;font-weight:750}
.pagehead p{color:var(--mut);font-size:12.5px;margin-top:2px;max-width:860px}
/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:13px 15px;min-height:88px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kpi .l{font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kpi .v{font-size:20px;font-weight:800;margin-top:4px;letter-spacing:-.3px}
.kpi .s{font-size:11px;color:var(--mut);margin-top:2px}
.kpi.red .v{color:var(--crit)} .kpi.green .v{color:var(--ok)} .kpi.amber .v{color:var(--warn)} .kpi.blue .v{color:var(--zxmoto-blue-dark)}
.kpi.hero{border-left:3px solid var(--blue)}
/* Panels & grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:1100px){.grid2,.grid3{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:14px;overflow:hidden}
.panel .ph{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.panel .ph h3{font-size:13px;font-weight:700}
.panel .ph .n{font-size:11px;color:var(--mut)}
.panel .ph .grow{flex:1}
.panel .pb{padding:12px 14px}
.panel .pb.p0{padding:0}
/* Tables */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{background:var(--bg-soft);color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;text-align:left;
padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid #eef0f2;vertical-align:top;line-height:1.45}
tr:last-child td{border-bottom:none}
tr.click{cursor:pointer} tr.click:hover td{background:#FAFBFC}
td .b{font-weight:650} td .m{color:var(--mut);font-size:11.5px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:"SF Mono",Consolas,monospace;font-size:11.5px}
/* Badges */
.bdg{display:inline-block;font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:10px;white-space:nowrap}
.b-crit{background:var(--critbg);color:var(--crit)} .b-high{background:var(--warnbg);color:var(--warn)}
.b-med{background:var(--infobg);color:var(--info)} .b-low{background:var(--neutbg);color:var(--mut)}
.b-ok{background:var(--okbg);color:var(--ok)}
.b-fast{background:var(--okbg);color:var(--ok)} .b-slow{background:var(--warnbg);color:var(--warn)} .b-dead{background:var(--neutbg);color:var(--neutral)}
.b-pref{background:var(--okbg);color:var(--ok)} .b-appr{background:var(--infobg);color:var(--info)}
.b-watch{background:var(--warnbg);color:var(--warn)} .b-block{background:var(--critbg);color:var(--crit)}
.b-pend{background:var(--warnbg);color:var(--warn)} .b-done{background:var(--okbg);color:var(--ok)} .b-rej{background:var(--neutbg);color:var(--mut)}
/* Buttons */
.btn{display:inline-block;font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px;border:1px solid var(--line);
background:#fff;color:var(--ink);cursor:pointer}
.btn:hover{background:#f6f7f9}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{background:var(--zxmoto-blue-dark)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm{padding:3px 9px;font-size:11px}
/* Filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input[type=search]{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;min-width:260px;background:#fff}
.filters select{font:inherit;padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
/* Alert / list rows */
.alert{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid #eef0f2;align-items:flex-start}
.alert:last-child{border-bottom:none}
.alert .body{flex:1;min-width:0}
.alert .t{font-weight:650;font-size:12.5px}
.alert .d{color:var(--mut);font-size:12px;margin-top:2px}
.alert .meta{display:flex;gap:14px;font-size:11px;color:var(--mut2);margin-top:5px;flex-wrap:wrap}
.alert .meta b{color:var(--mut)}
/* Approval cards */
.apcard{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;background:#fff}
.apcard .hd{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.apcard .hd .t{font-weight:700;font-size:13px;flex:1}
.apgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px;font-size:12px;margin-top:8px}
.apgrid .k{color:var(--mut2);font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
.apgrid .v{margin-top:1px}
.oldnew{display:flex;gap:8px;align-items:center;background:#fafbfc;border:1px solid var(--line);border-radius:6px;padding:7px 10px;margin-top:8px;font-size:12px}
.oldnew .arr{color:var(--mut2)}
.apact{margin-top:10px;display:flex;gap:8px}
/* Detail page */
.crumb{font-size:12px;color:var(--mut);margin-bottom:10px}
.crumb a{color:var(--info);cursor:pointer}
.dethead{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:14px}
.dethead .img{width:92px;height:92px;background:var(--neutbg);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--mut2);font-size:10px;text-align:center;flex-shrink:0}
.dethead h2{font-size:17px}
.dethead .oem{font-family:Consolas,monospace;color:var(--mut);font-size:12.5px;margin:2px 0 8px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:150px 1fr;gap:5px 12px;font-size:12.5px}
.kv .k{color:var(--mut)}
.aibox{border-left:3px solid var(--info);background:var(--infobg);padding:10px 12px;border-radius:0 6px 6px 0;font-size:12.5px}
.aibox.crit{border-color:var(--crit);background:var(--critbg)}
.aibox.warn{border-color:var(--warn);background:var(--warnbg)}
.aibox .h{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
/* Stations */
.stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-bottom:16px}
.station{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer}
.station:hover{border-color:#c4cad2}
.station.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.station.lock{opacity:.45;cursor:not-allowed}
.station .t{font-weight:700;font-size:12.5px}
.station .d{font-size:11px;color:var(--mut);margin-top:2px}
.station .q{font-size:11px;margin-top:6px;color:var(--info);font-weight:600}
.taskrow{display:flex;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid #eef0f2;font-size:12.5px}
.taskrow:last-child{border-bottom:none}
/* Scenario */
.scsel{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:14px}
.sccard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer}
.sccard:hover{border-color:#c4cad2}
.sccard.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.sccard .t{font-weight:650;font-size:12.5px}
.assump{background:#fafbfc;border:1px dashed var(--line);border-radius:6px;padding:8px 12px;font-size:11.5px;color:var(--mut);margin-bottom:10px}
.verdict{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.verdict .vc{flex:1;min-width:180px;border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.verdict .vc .k{font-size:10.5px;color:var(--mut);text-transform:uppercase}
.verdict .vc .v{font-size:16px;font-weight:800;margin-top:3px}
/* Misc */
.note{font-size:11.5px;color:var(--mut);padding:8px 0}
.masked{color:var(--mut2);font-style:italic;font-size:11px}
.empty{padding:34px;text-align:center;color:var(--mut)}
.lockmsg{background:var(--warnbg);border:1px solid #f0d9bd;color:var(--warn);border-radius:8px;padding:14px 16px;font-size:12.5px;margin-bottom:14px}
.demopath{background:var(--graphite);color:#cfd6dd;border-radius:8px;padding:12px 16px;font-size:12px;margin-bottom:16px}
.demopath b{color:#fff}
.bar{height:8px;background:var(--neutbg);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:4px}
.bar.g i{background:var(--ok)}
/* ---- production additions: login, forms, tabs ---- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--graphite)}
.loginbox{background:#fff;border-radius:10px;padding:34px 36px;width:380px;box-shadow:0 8px 40px rgba(0,0,0,.35)}
.loginbox .logo{font-weight:800;font-size:20px;letter-spacing:.4px}
.loginbox .logo span{color:var(--blue)}
.loginbox .sub{font-size:11.5px;color:var(--mut);margin:4px 0 20px}
.loginbox label{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 4px}
.loginbox input{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:6px}
.loginbox .btn{width:100%;margin-top:18px;padding:10px}
.loginerr{background:var(--critbg);color:var(--crit);border-radius:6px;padding:8px 10px;font-size:12px;margin-top:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs a{padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent}
.tabs a.on{color:var(--ink);border-bottom-color:var(--blue)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;margin-bottom:12px}
.formgrid label{display:block;font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.formgrid input,.formgrid select{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff}
.toast{position:fixed;bottom:18px;right:18px;background:var(--graphite);color:#fff;padding:10px 16px;border-radius:8px;font-size:12.5px;z-index:99;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.toast.err{background:var(--crit)}
.spin{padding:40px;text-align:center;color:var(--mut)}
/* ---- part image thumbnails ---- */
.thumbcell{width:44px;padding-right:0!important}
.thumb{width:38px;height:32px;object-fit:contain;border:1px solid var(--line);border-radius:4px;background:#fff;display:block}
.thumb.none{display:flex;align-items:center;justify-content:center;color:var(--mut2);font-size:10px;background:var(--neutbg)}
/* ---- official brand logo ---- */
.brandimg{display:block;width:100%;max-height:44px;object-fit:contain;object-position:left;
background:#fff;border-radius:6px;padding:6px 10px;margin-bottom:8px}
.loginlogo{display:block;max-width:220px;max-height:52px;object-fit:contain;margin-bottom:4px}
/* ---- image preview modal (lightbox) ---- */
.imgmodal{position:fixed;inset:0;background:rgba(15,18,22,.72);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.imgbox{background:var(--bg-card);border-radius:10px;max-width:min(960px,94vw);width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,.35);overflow:hidden}
.imgbox .ih{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-light)}
.imgbox .ih .t{font-weight:750;font-size:15px}
.imgbox .ih .meta{font-size:12px;color:var(--text-secondary);margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}
.imgbox .ih .meta b{color:var(--text-main)}
.imgscroll{overflow:auto;background:var(--bg-soft);flex:1;display:flex;align-items:center;justify-content:center;min-height:320px}
.imgscroll img{max-width:100%;max-height:64vh;object-fit:contain;transition:transform .15s ease;transform-origin:center center;background:#fff}
.imgbox .itools{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--border-light)}
.imgbox .itools .zlvl{font-size:12px;color:var(--text-secondary);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.imgbox .noimg{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-muted);padding:60px 20px;font-size:13px}
/* clean placeholder icon (no black boxes, ever) */
.thumb.none,.imgph{display:flex;align-items:center;justify-content:center;background:var(--bg-soft);border:1px solid var(--border-light);color:var(--text-muted)}
.imgph svg,.thumb.none svg{opacity:.55}
/* part detail image area — larger, professional, click hint */
.dethead .img{width:150px;height:120px;cursor:zoom-in;position:relative}
.dethead .img .hint{position:absolute;left:0;right:0;bottom:0;background:rgba(31,35,40,.62);color:#fff;font-size:10px;text-align:center;padding:3px 0;letter-spacing:.3px}
.thumb{cursor:zoom-in}
/* ---- responsiveness: desktop-first, safe down to tablet ---- */
.panel .pb.p0{overflow-x:auto} /* wide tables scroll inside their panel, never the page */
.panel .pb.p0 table{min-width:640px}
.content{min-width:0}
@media(max-width:1200px){
.content{padding:16px 16px;max-width:none}
.kpis{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
}
@media(max-width:1000px){
.side{width:200px}
.grid2,.grid3{grid-template-columns:1fr}
.dethead{flex-wrap:wrap}
}
@media(max-width:820px){
.side{width:176px}
.brand .sub{display:none}
.kpis{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kpi .v{font-size:17px}
.filters input[type=search]{min-width:180px}
.top{flex-wrap:wrap;row-gap:6px}
}
/* ---- 10/10 polish: nav icons, typography, empty states ---- */
.navic{width:16px;height:16px;flex-shrink:0;opacity:.75}
.nav a.on .navic{opacity:1;color:var(--zxmoto-blue)}
.nav a{gap:11px}
.nav a .dot{display:none} /* icons replace the dots */
.pagehead h2{font-size:20px;letter-spacing:-.2px}
.kpi .v{font-size:22px}
.kpi .l{color:var(--text-secondary)}
td .m{color:var(--text-secondary)} /* secondary text: readable, not washed out */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 20px;color:var(--text-secondary);font-size:12.5px}
.empty::before{content:"";width:34px;height:34px;opacity:.4;background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
/* ============================================================
FINAL PRESENTATION POLISH — readability, hierarchy, premium
(append-only: cascade intentionally overrides earlier rules)
============================================================ */
/* 1) Readability: bigger, higher-contrast tables */
table{font-size:13px}
th{color:#4E5560;font-weight:700;letter-spacing:.45px;padding:10px 14px;background:var(--bg-soft)}
td{padding:11px 14px;line-height:1.5}
td .b{font-weight:660;font-size:13px;color:var(--text-main)}
td .m{font-size:12px;color:#5C6470} /* secondary text: readable at distance */
.mono{font-size:12px}
.num{font-weight:560}
tr.click:hover td{background:#F5F8FB} /* calm blue-tinted hover */
/* 2) KPI cards: executive confidence */
.kpi{padding:15px 17px;min-height:96px;border-radius:9px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.kpi .l{font-size:11px;letter-spacing:.5px;font-weight:650;color:#5C6470}
.kpi .v{font-size:24px;margin-top:6px;letter-spacing:-.4px}
.kpi .s{font-size:11.5px;margin-top:4px;line-height:1.45;color:#6B7280}
.kpi.hero{border-left-width:3px}
/* 3) Executive Demo: 60-second briefing cards */
.scen{border-left:4px solid var(--border-medium)}
.scen.s-critical{border-left-color:var(--critical-text)}
.scen.s-high{border-left-color:var(--warning-text)}
.scen .ph{padding:14px 18px}
.scent{font-size:15px;margin-left:6px}
.scen .pb{padding:16px 18px}
.scen .apgrid{gap:14px 22px}
.scen .apgrid .k{font-size:10.5px;font-weight:700;color:#7A828E;letter-spacing:.5px;margin-bottom:3px}
.scen .apgrid .v{font-size:12.5px;line-height:1.55;color:var(--text-main)}
/* approvals grids inherit the same clarity */
.apgrid .k{font-weight:700;color:#7A828E}
.apgrid .v{line-height:1.5}
/* 4) Command Center: risk summary + queue readability */
.alert{padding:13px 16px;gap:13px}
.alert .t{font-size:13px;line-height:1.4}
.alert .d{font-size:12px;line-height:1.5;margin-top:3px;color:#5C6470}
.alert .meta{margin-top:6px}
/* 5) Buttons: nothing cheap */
.btn{border-radius:7px}
.btn.sm{padding:4px 11px;font-size:11.5px}
.btn.pri{box-shadow:0 1px 2px rgba(63,103,157,.25)}
/* 6) Sidebar: premium identity + active state */
.brand{padding:20px 16px 16px}
.brand .logo{font-size:16px;letter-spacing:.6px}
.brand .sub{margin-top:5px;line-height:1.45;color:#7E8894}
.nav a{font-size:13px;padding:9px 13px}
.nav a.on{font-weight:650}
.side .foot{color:#7E8894;line-height:1.5}
/* badges: one size, one weight, everywhere */
.bdg{font-size:10.5px;padding:2.5px 9px;font-weight:640;letter-spacing:.2px}
/* panel headers */
.panel .ph h3{font-size:13.5px}
.panel .ph .n{font-size:11px;color:#7A828E}
.panel{border-radius:9px}
/* forms */
.formgrid label{font-weight:650;color:#5C6470}
.formgrid input,.formgrid select{padding:8px 10px}
/* ---- sidebar: ACTIVE must dominate, hover stays temporary ---- */
.nav a{color:#A7AFBA}
.nav a:hover{background:rgba(255,255,255,.05);color:#CBD3DC} /* soft, no accent bar */
.nav a:hover .navic{opacity:.85}
.nav a.on, .nav a.on:hover{
background:var(--sidebar-hover);
color:#FFFFFF;
box-shadow:inset 3px 0 0 var(--zxmoto-blue), 0 1px 2px rgba(0,0,0,.25);
font-weight:660;
}
.nav a.on .navic{color:var(--zxmoto-blue);opacity:1}
/* ---- warranty page: readable decisions ---- */
.wtable td{font-size:13px}
.wtable .action{max-width:230px}
.actline{display:block;font-size:12px;line-height:1.5;color:var(--text-main)}
.actline::before{content:"› ";color:var(--zxmoto-blue);font-weight:700}
/* ---- success green: badges ONLY (Healthy / Approved / Preferred / Completed / Action taken / No risk) ---- */
:root{ --success-bg:#ECFDF5; --success-text:#047857; --success-border:#A7F3D0 }
.b-ok, .b-pref, .b-done, .b-fast{
background:#ECFDF5; color:#047857; border:1px solid #A7F3D0;
padding:1.5px 8px; /* compensate the border — badge size unchanged */
}
/* green is NOT for big numbers: green-class KPI values render in dark text */
.kpi.green .v{color:var(--text-main)}
/* ---- logo: native transparent display, NO white box ---- */
.brandimg{
background:transparent; border-radius:0; padding:0; margin:0 0 10px 2px;
max-width:160px; width:auto; height:26px; object-fit:contain; object-position:left;
display:block;
}
.loginlogo{
background:transparent; max-width:220px; height:auto; object-fit:contain;
display:block; margin:0 auto 14px;
}
.loginbox .sub{text-align:center}
.brand{padding:18px 16px 14px}
/* ============================================================
ZXMOTO ACADEMY — Employee Training & Onboarding Portal
Separate, calmer layout: light header + tab nav (no dark sidebar)
============================================================ */
/* platform selection */
.platwrap{min-height:100vh;background:var(--bg-main);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}
.plathead{text-align:center;margin-bottom:34px}
.platlogo{max-width:240px;height:auto;margin:0 auto 10px;display:block}
.platsub{color:var(--text-secondary);font-size:12.5px}
.platcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,420px));gap:20px;justify-content:center;width:100%;max-width:900px}
.platcard{background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;padding:28px 30px;box-shadow:0 2px 8px rgba(16,24,40,.06);display:flex;flex-direction:column}
.platkind{font-size:10.5px;font-weight:750;letter-spacing:1px;color:var(--zxmoto-blue-dark);margin-bottom:10px}
.platkind.ac{color:var(--warning-text)}
.platcard h2{font-size:19px;letter-spacing:-.2px;margin-bottom:4px}
.platsub2{font-size:12.5px;color:var(--text-secondary);font-weight:600;margin-bottom:10px}
.platcard p{font-size:13px;line-height:1.6;color:var(--text-secondary);flex:1;margin-bottom:18px}
.platfoot{margin-top:30px;font-size:11.5px;color:var(--text-muted);text-align:center}
/* academy shell */
.acwrap{min-height:100vh;background:var(--bg-main);display:flex;flex-direction:column}
.achead{background:var(--bg-card);border-bottom:1px solid var(--border-light);padding:14px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:5}
.aclogo{height:24px;width:auto;object-fit:contain}
.actitle h1{font-size:16px;letter-spacing:-.2px}
.acsub{font-size:11px;color:var(--text-secondary)}
.achead .grow{flex:1}
.acnav{background:var(--bg-card);border-bottom:1px solid var(--border-light);padding:0 26px;display:flex;gap:2px;overflow-x:auto}
.acnav a{padding:11px 15px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap}
.acnav a:hover{color:var(--text-main)}
.acnav a.on{color:var(--zxmoto-blue-dark);border-bottom-color:var(--zxmoto-blue)}
.acmain{flex:1;max-width:1060px;width:100%;margin:0 auto;padding:28px 26px 44px}
.acfoot{text-align:center;padding:14px;font-size:11.5px;color:var(--text-muted);border-top:1px solid var(--border-light)}
/* overview */
.achero{text-align:center;margin:8px 0 26px}
.achero h2{font-size:26px;letter-spacing:-.4px}
.aclead{font-size:14px;color:var(--zxmoto-blue-dark);font-weight:650;margin:4px 0 12px}
.acdesc{font-size:13px;line-height:1.65;color:var(--text-secondary);max-width:720px;margin:0 auto 6px}
.acpageh{font-size:20px;letter-spacing:-.3px;margin-bottom:6px}
.acmain > .acdesc{margin:0 0 20px}
/* cards & grids */
.acgrid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.acgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:20px}
.accard{background:var(--bg-card);border:1px solid var(--border-light);border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(16,24,40,.04);margin-bottom:14px}
.acgrid3 .accard,.acgrid4 .accard{margin-bottom:0}
.accard h3{font-size:14.5px;margin-bottom:6px}
.accard p{font-size:12.5px;line-height:1.55;color:var(--text-secondary);margin-bottom:8px}
.accard.click{cursor:pointer}
.accard.click:hover{border-color:var(--zxmoto-blue)}
.acbig{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:6px 0}
.acbig .m{font-size:15px;font-weight:600}
.acprow{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--bg-soft)}
.acrolehead{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* lessons */
.aclessons{margin-top:12px;border-top:1px solid var(--border-light)}
.aclesson{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--bg-soft);font-size:12.5px}
.aclesson:last-child{border-bottom:none}
/* visual guides */
.acguide{padding:22px 24px}
.acguidehead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.acguidehead h3{margin:0}
.acguidebody{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin:14px 0}
@media(max-width:860px){.acguidebody{grid-template-columns:1fr}}
.ac-imgwrap{min-height:220px}
.ac-img{width:100%;border:1px solid var(--border-light);border-radius:8px;background:#fff}
.ac-imgph{min-height:220px;border:1.5px dashed var(--border-medium);border-radius:8px;background:var(--bg-soft);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:13px}
.accallouts{display:flex;flex-direction:column;gap:12px}
.accallout{display:flex;gap:11px;align-items:flex-start;font-size:12.5px}
.acnum{width:22px;height:22px;border-radius:50%;background:var(--zxmoto-blue);color:#fff;font-size:11.5px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acnum.s{background:var(--bg-soft);color:var(--zxmoto-blue-dark);border:1px solid var(--border-medium)}
.acsteps{border-top:1px solid var(--border-light);padding-top:12px}
.acstepst{font-size:10.5px;font-weight:750;letter-spacing:.6px;color:#7A828E;text-transform:uppercase;margin-bottom:8px}
.acstep{display:flex;gap:10px;align-items:center;font-size:12.5px;padding:5px 0}
/* scenarios */
.acscen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:12px 0}
.ack{font-size:10.5px;font-weight:750;letter-spacing:.6px;color:#7A828E;text-transform:uppercase;margin-bottom:4px}
.acscen p{margin:0}
/* checklists */
.acchk{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--bg-soft)}
.acchk:last-child{border-bottom:none}
.acchk input{margin-top:2px;accent-color:var(--zxmoto-blue)}
.acdone{color:var(--text-muted);text-decoration:line-through}
/* knowledge check */
.acq .b{font-size:13.5px}
.acopts{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.acopt{text-align:left;font:inherit;font-size:12.5px;padding:9px 13px;border:1px solid var(--border-light);border-radius:8px;background:#fff;cursor:pointer}
.acopt:hover:not([disabled]){border-color:var(--zxmoto-blue)}
.acopt[disabled]{cursor:default;opacity:.75}
.acopt.right{border-color:#A7F3D0;background:#ECFDF5;color:#047857;font-weight:650;opacity:1}
.acwhy{font-size:12px;padding:9px 12px;border-radius:8px;margin-top:8px}
.acwhy.ok{background:#ECFDF5;color:#047857}
.acwhy.no{background:var(--warning-bg);color:var(--warning-text)}
.acscore{font-size:13px;margin-bottom:14px;color:var(--text-secondary)}
/* safety + actions */
.ac-safety{background:var(--zxmoto-blue-soft);border:1px solid #D3E1F2;border-radius:10px;padding:12px 16px;
font-size:12.5px;color:var(--text-main);margin:6px 0 18px}
.ac-safety .m{display:block;margin-top:4px;color:var(--text-secondary);font-size:11.5px}
.acactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
/* guide: common mistake / what to check */
.acmc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:700px){.acmc{grid-template-columns:1fr}}
.acmci{border-radius:8px;padding:10px 14px;font-size:12.5px;line-height:1.5}
.acmci .ack{display:block;margin-bottom:3px}
.acmci.no{background:var(--warning-bg);color:var(--text-main)}
.acmci.no .ack{color:var(--warning-text)}
.acmci.ok{background:#ECFDF5;color:var(--text-main)}
.acmci.ok .ack{color:#047857}
/* ============ FINAL PRESENTATION SANITY PASS ============ */
/* 1) sidebar: never a horizontal scrollbar; labels wrap cleanly */
.side{overflow-x:hidden}
.nav a{min-width:0;white-space:normal;line-height:1.35;align-items:flex-start}
.nav a .navic{margin-top:1px}
.brand .sub{overflow-wrap:break-word}
/* 2) final calm KPI palette */
:root{
--critical-text:#B91C1C; /* red only when truly critical */
--success-text:#0F766E; /* calm teal-green for healthy/approved badges */
}
.kpi .v{color:#111827} /* normal KPI numbers: dark */
.kpi.red .v{color:#B91C1C}
.kpi.amber .v{color:#B7791F} /* subtle premium accent, counts only */
.kpi.blue .v{color:var(--zxmoto-blue-dark)}
.b-ok,.b-pref,.b-done,.b-fast{color:#0F766E} /* healthy badges: teal on light green */
/* ============================================================
ZXMOTO FINAL BRAND COLOR SYSTEM — technical, sharp, comfortable
(final cascade block: overrides all earlier palettes)
============================================================ */
:root{
--zxmoto-blue:#2563EB; /* main ZXMOTO system accent */
--zxmoto-blue-dark:#1D4ED8; /* hover */
--zxmoto-blue-soft:#DBEAFE; /* soft highlight */
--bg-main:#F8FAFC; /* cool gray background */
--bg-card:#FFFFFF;
--bg-soft:#F1F5F9;
--border-light:#E5E7EB;
--border-medium:#D1D5DB;
--sidebar-bg:#0B1220; /* dark technical */
--sidebar-hover:#1E293B; /* active item */
--text-main:#111827;
--text-secondary:#4B5563;
--text-muted:#6B7280;
--critical-text:#DC2626; --critical-bg:#FEF2F2;
--warning-text:#D97706; --warning-bg:#FFFBEB;
--success-text:#059669; --success-bg:#ECFDF5;
--neutral-text:#6B7280; --neutral-bg:#F3F4F6;
}
/* sidebar: sharp HQ control panel */
.side{background:#0B1220}
.brand{border-bottom:1px solid #1E293B}
.brand .sub{color:#94A3B8}
.side .foot{border-top:1px solid #1E293B;color:#94A3B8}
.nav a{color:#E5E7EB}
.nav a .navic{opacity:.65;color:#94A3B8}
.nav a:hover{background:rgba(255,255,255,.06);color:#FFFFFF}
.nav a.on, .nav a.on:hover{
background:#1E293B;color:#FFFFFF;
box-shadow:inset 3px 0 0 #2563EB, 0 1px 2px rgba(0,0,0,.3);
}
.nav a.on .navic{color:#60A5FA;opacity:1}
/* KPI: calm, dark numbers; color only where it means something */
.kpi .v{color:#111827}
.kpi.red .v{color:#DC2626}
.kpi.amber .v{color:#D97706}
.kpi.blue .v{color:#1D4ED8}
.kpi.hero{border-left-color:#2563EB}
.kpi .l{color:#4B5563}
.kpi .s{color:#6B7280}
/* tables: readable, technical */
th{color:#374151;font-weight:700;background:var(--bg-soft)}
td{border-bottom-color:#F1F5F9}
td .m{color:#4B5563}
tr.click:hover td{background:#F8FAFC}
/* badges: attention guides, not decoration */
.b-ok,.b-pref,.b-done,.b-fast{background:#ECFDF5;color:#059669;border:1px solid #A7F3D0}
.b-crit,.b-block{background:#FEF2F2;color:#DC2626}
.b-high,.b-watch,.b-slow,.b-pend{background:#FFFBEB;color:#D97706}
.b-med,.b-appr{background:#DBEAFE;color:#1D4ED8}
.b-low,.b-rej,.b-dead{background:#F3F4F6;color:#6B7280}
/* buttons */
.btn{color:#374151;border-color:#E5E7EB}
.btn.pri{background:#2563EB;border-color:#2563EB;color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.3)}
.btn.pri:hover{background:#1D4ED8}
/* secondary text that was hard-coded in earlier passes */
.alert .d{color:#4B5563}
.pagehead p{color:#4B5563}
.panel .ph .n{color:#6B7280}
.acnum{background:#2563EB}
.acnum.s{color:#1D4ED8}
.acnav a.on{color:#1D4ED8;border-bottom-color:#2563EB}
.acopt.right{color:#059669;border-color:#A7F3D0}
.acwhy.ok{color:#059669}
.acmci.ok .ack{color:#059669}
.aclead{color:#1D4ED8}
/* layout comfort: grid children may shrink; wide tables scroll inside panels */
.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.grid2>*,.grid3>*{min-width:0}
.panel .tblwrap,.panel{overflow-x:auto}
/* ============================================================
ZXMOTO ACADEMY — PRESENTATION POLISH
Wider, denser, executive-quality training portal
============================================================ */
.acmain{max-width:1280px;padding:26px 32px 40px}
/* landing hero */
.achero2{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;align-items:center;
background:linear-gradient(135deg,#FFFFFF 55%,#F0F6FF);border:1px solid var(--border-light);
border-left:4px solid #2563EB;border-radius:12px;padding:30px 34px;margin-bottom:20px;
box-shadow:0 2px 10px rgba(16,24,40,.05)}
.ackicker{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:#1D4ED8;margin-bottom:8px}
.achero2 h2{font-size:27px;letter-spacing:-.5px}
.achero2 .aclead{margin:3px 0 10px}
.achero2 .acdesc{margin:0 0 16px;max-width:none}
.achero2 .acactions{margin-top:2px}
.acheror{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acstat{background:#fff;border:1px solid var(--border-light);border-radius:10px;padding:14px 10px;text-align:center;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.acstat .n{font-size:25px;font-weight:800;color:#111827;letter-spacing:-.5px}
.acstat .l{font-size:11px;color:#4B5563;font-weight:600;margin-top:2px}
@media(max-width:960px){.achero2{grid-template-columns:1fr}}
/* progress bars */
.acbar{height:6px;background:#EEF2F7;border-radius:99px;overflow:hidden;margin:8px 0 10px;flex:none}
.acbar i{display:block;height:100%;background:#2563EB;border-radius:99px}
.acbar.big{height:9px;margin:8px 0 6px}
/* role training */
.acgrid3{gap:16px}
.acmeta{font-size:11.5px;color:#6B7280;font-weight:600;margin:2px 0 0}
.acrole .acbar{margin:6px 0 4px}
.aclesson{padding:10px 0}
.aclesson .btn.sm{min-width:76px;text-align:center;flex:none}
/* visual guides */
.acguidebody{grid-template-columns:1.4fr 1fr;gap:26px}
.ac-img{cursor:zoom-in;box-shadow:0 1px 8px rgba(16,24,40,.10)}
.ac-imgcap{font-size:11px;color:#6B7280;margin-top:7px}
.ac-zoom{position:fixed;inset:0;background:rgba(11,18,32,.88);z-index:99;display:flex;
align-items:center;justify-content:center;cursor:zoom-out;padding:28px}
.ac-zoom img{max-width:96%;max-height:94%;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.55)}
/* scenarios */
.acsc{border-left:4px solid var(--border-medium)}
.acsc.sev-critical{border-left-color:#DC2626}
.acsc.sev-high{border-left-color:#D97706}
.acsc.sev-medium{border-left-color:#2563EB}
.acsbox{background:#F8FAFC;border:1px solid #EEF2F7;border-radius:8px;padding:11px 13px}
.acsbox.ok{background:#ECFDF5;border-color:#A7F3D0}
.acsbox.ok .ack{color:#059669}
.acsbox p{font-size:12.5px;line-height:1.55;color:#111827}
/* checklists */
.acchk{padding:8px 4px;border-radius:6px;transition:background .12s}
.acchk:hover{background:#F8FAFC}
.acchk input{width:15px;height:15px;flex:none}
/* knowledge check */
.acqbar{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border-light);
border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:12.5px;color:#4B5563}
.acqbar .acbar{flex:1;margin:0}
.acq{padding:18px 22px}
.acqhead{display:flex;gap:11px;align-items:flex-start}
.acqhead .b{font-size:13.5px;padding-top:2px}
.acopts{margin-left:33px}
.acwhy{margin-left:33px}
/* progress dashboard */
.acdashmain{border-left:4px solid #2563EB;padding:22px 26px}
.acdashtop{display:flex;gap:24px;align-items:center;margin:4px 0 6px}
.acring{width:88px;height:88px;border-radius:50%;flex:none;position:relative;display:flex;
align-items:center;justify-content:center;
background:conic-gradient(#2563EB calc(var(--p)*1%),#E5E7EB 0)}
.acring::before{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}
.acring span{position:relative;font-size:19px;font-weight:800;color:#111827;letter-spacing:-.5px}
.acreadiness{display:inline-block;font-size:11px;font-weight:750;padding:3px 11px;border-radius:99px;margin-bottom:2px}
.acreadiness.done{background:#ECFDF5;color:#059669;border:1px solid #A7F3D0}
.acreadiness.mid{background:#DBEAFE;color:#1D4ED8}
.acreadiness.low{background:#F3F4F6;color:#6B7280}
.acnext{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border-light);
margin-top:16px;padding-top:14px;font-size:12.5px;flex-wrap:wrap}
.acnext .ack{margin:0;flex:none}
.acpaths{margin-top:6px}
.acpath{display:grid;grid-template-columns:220px 1fr 46px;gap:14px;align-items:center;
padding:7px 0;border-bottom:1px solid var(--bg-soft);font-size:12.5px}
.acpath:last-child{border-bottom:none}
.acpath .acbar{margin:0}
.acpath.mine .acpathn{font-weight:700}
.acpath .m{text-align:right}
@media(max-width:700px){.acpath{grid-template-columns:1fr;gap:4px}.acpath .m{text-align:left}}
/* platform selection premium */
.platcard{position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s}
.platcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#2563EB}
.platcard:hover{box-shadow:0 8px 24px rgba(16,24,40,.12);transform:translateY(-2px)}
.platkind.ac{color:#1D4ED8}
/* overview: how-it-works strip */
.achow{padding:20px 24px}
.achowgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:12px}
.achowstep{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;cursor:pointer;
padding:12px 14px;border:1px solid var(--border-light);border-radius:10px;background:#F8FAFC;transition:border-color .15s}
.achowstep:hover{border-color:#2563EB}
.achowstep .m{margin-top:2px;line-height:1.5}
.acgrid4 .accard.click{border-top:3px solid #2563EB}
/* ============================================================
ENTERPRISE READINESS LAYER — inventory ops, settings, matrix
============================================================ */
/* inventory operational flow strip */
.opsflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.opsstep{background:#fff;border:1px solid var(--border-light);border-left:3px solid #2563EB;border-radius:8px;
padding:10px 13px;display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.opsstep:hover{border-color:#2563EB;box-shadow:0 2px 8px rgba(37,99,235,.10)}
.opsstep .b{font-size:12.5px}
.opsstep .m{font-size:11px;line-height:1.4}
/* part picker info chip + warnings */
.pinfo{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:#F8FAFC;border:1px solid var(--border-light);
border-radius:8px;padding:9px 13px;font-size:12px;color:#4B5563;margin:10px 0}
.pinfo .b{color:#111827}
.pwarn{color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:6px;padding:2px 9px;font-weight:600;font-size:11.5px}
/* permission matrix + settings */
.matrix th,.matrix td{white-space:normal}
.matrix td{vertical-align:top}
.famlbl{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#6B7280;display:block;margin:2px 0}
.filters input[type=date]{border:1px solid var(--border-light);border-radius:8px;padding:7px 10px;font:inherit;font-size:12.5px;color:#374151;background:#fff}
/* academy: emergency training, purpose list, not-ready reasons */
.acemgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-bottom:20px}
.acem{margin-bottom:0}
.acem h3{font-size:13.5px}
.acemrow{border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.5;margin-top:8px}
.acemrow .ack{display:block;margin-bottom:2px}
.acemrow.no{background:#FEF2F2}.acemrow.no .ack{color:#DC2626}
.acemrow.ok{background:#ECFDF5}.acemrow.ok .ack{color:#059669}
.acemmeta{display:flex;gap:22px;margin-top:10px;font-size:12px;color:#111827}
.acemmeta .ack{display:block}
.acpurpose{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:12px}
@media(max-width:760px){.acpurpose{grid-template-columns:1fr}}
.acpitem{display:flex;gap:9px;font-size:12.5px;line-height:1.5;align-items:flex-start}
.acptick{color:#059669;font-weight:800;flex:none}
.acnotready{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--border-light);margin-top:14px;padding-top:12px}
.acnotready .ack{margin:0;flex:none}
.acmiss{font-size:11.5px;background:#FFFBEB;color:#B45309;border:1px solid #FDE68A;border-radius:99px;padding:3px 10px;font-weight:600}
/* settings info tables: long descriptive cells wrap instead of forcing a scrollbar */
.matrix td, .matrix th, .wraptable td{white-space:normal}
td .m, td.m{white-space:normal}
/* model selector: premium dropdown typography */
select optgroup{font-weight:800;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#374151;background:#F8FAFC}
select option{font-weight:500;color:#111827}
/* system insights + critical watchlist */
.insightgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px}
.insight{display:flex;gap:11px;align-items:center;background:#F8FAFC;border:1px solid var(--border-light);
border-radius:8px;padding:10px 13px;font-size:12.5px;line-height:1.5;transition:border-color .15s}
.insight.click{cursor:pointer}
.insight.click:hover{border-color:#2563EB}
.insight .bdg{flex:none}
.insight .m{margin-left:auto;white-space:nowrap}
/* factory data confirmation center */
.fdc{border-left:4px solid #2563EB}
.fdcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.fdcitem{background:#F8FAFC;border:1px solid var(--border-light);border-radius:8px;padding:11px 13px;
display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.5}
.fdcitem .bdg{align-self:flex-start}
/* ============================================================
MOBILE ADAPTATION — phones (<=700px)
Off-canvas sidebar + hamburger, touch-friendly layout.
(append-only: cascade intentionally overrides earlier rules)
============================================================ */
.menubtn{display:none}
.scrim{display:none}
@media(max-width:700px){
/* sidebar becomes an off-canvas drawer */
.side{position:fixed;left:0;top:0;bottom:0;height:100vh;width:min(78vw,300px);z-index:60;
transform:translateX(-104%);transition:transform .22s ease;box-shadow:8px 0 32px rgba(0,0,0,.35)}
body.navopen .side{transform:none}
.scrim{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:55}
body.navopen .scrim{display:block}
body.navopen{overflow:hidden}
.brand .sub{display:block} /* restore subtitle inside the drawer */
.nav a{padding:11px 12px;font-size:13px} /* touch-size nav rows */
/* hamburger button (rendered by app shell, hidden on desktop) */
.menubtn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:38px;height:34px;
padding:0 9px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;flex-shrink:0}
.menubtn span{display:block;height:2px;border-radius:2px;background:var(--ink)}
/* topbar */
.top{padding:8px 10px;gap:8px}
.top h1{font-size:13.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .env{display:none}
.rolebox{gap:6px;font-size:11px;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
/* content */
.content{padding:10px 10px 30px}
.pagehead h2{font-size:17px}
.kpis{grid-template-columns:repeat(2,1fr);gap:8px}
.kpi{min-height:72px;padding:10px 12px}
.kpi .v{font-size:18px}
.filters input[type=search]{min-width:0;flex:1 1 100%}
.filters select{flex:1 1 auto;max-width:100%;padding:8px}
.btn{padding:8px 12px}
.btn.sm{padding:6px 10px;font-size:11.5px}
th{padding:8px 10px}
td{padding:9px 10px}
.panel .pb.p0 table{min-width:560px} /* wide tables keep scrolling inside their panel */
.dethead{flex-wrap:wrap;gap:8px}
.verdict .vc{min-width:100%}
.fdcgrid{grid-template-columns:1fr}
.loginbox{width:min(380px,92vw);padding:26px 22px}
}
@media(max-width:400px){
.rolebox>span:first-child{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:700px){
/* tabs: one row, swipe horizontally instead of wrapping mid-word */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;flex:none;padding:9px 12px}
}