:root{
  --ink:#13203A;--muted:#4B5568;--page:#F4F5F7;--card:#FFFFFF;--border:#E1E4EA;--line:#C9CFD8;
  --teal:#0E6E6A;--teal-d:#0A4F4C;--teal-l:#E6F1F0;--good:#15803D;--good-l:#E7F5EC;--warn:#B45309;--warn-l:#FFF4E0;--bad:#B42318;--bad-l:#FDECEA;
  --up:#1D4ED8;--re:#0E6E6A;--cs:#C2410C;--navy:#13203A;--navy2:#1E3157;--red:#E5484D;--amber:#F5B544;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--page);font-size:15px;line-height:1.45;min-height:100vh;display:flex;flex-direction:column;-webkit-text-size-adjust:100%}
main{flex:1 0 auto;outline:none}
a{color:var(--teal)}a:hover{color:var(--teal-d)}
h1{font-size:24px;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:17px;margin:0;font-weight:700}
h3{font-size:15px;margin:0;font-weight:700}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.small{font-size:13px}.xs{font-size:12px}
.boot{padding:80px 20px;text-align:center;color:var(--muted)}

/* top bar */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40}
.topbar .in{max-width:1392px;margin:0 auto;padding:0 16px;min-height:60px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;padding:6px 0}
.brand img{height:34px;width:auto;display:block}
.brand .t{display:flex;flex-direction:column;line-height:1.15}
.brand .t b{font-size:15px;letter-spacing:.02em}
.brand .t span{font-size:11px;color:#8FC3BF;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav{flex:1 1 420px;min-width:0;display:flex;flex-wrap:wrap;gap:2px}
.nav a,.nav button.more{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;color:#fff;background:transparent;border:0;font-family:inherit;cursor:pointer}
.nav a:hover,.nav button.more:hover{background:#1A2B4D;color:#fff}
.nav a.on{background:var(--navy2);font-weight:700;box-shadow:inset 0 -3px 0 #8FC3BF}
.pill{padding:1px 7px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700}
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.iconbtn{min-height:44px;min-width:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;color:#fff;text-decoration:none;background:transparent;border:0;cursor:pointer}
.iconbtn:hover{background:#1A2B4D;color:#fff}.iconbtn.on{background:var(--navy2);box-shadow:inset 0 -3px 0 #8FC3BF}
.who{display:flex;align-items:center;gap:8px;padding:0 6px 0 10px;border-left:1px solid #2E4370;margin-left:4px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.who .n{display:flex;flex-direction:column;line-height:1.2}.who .n b{font-size:13px}.who .n span{font-size:11px;color:#C7CEDB}
.signout{min-height:40px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid #2E4370;border-radius:8px;color:#fff;font-size:13px;font-weight:600;background:transparent;cursor:pointer;font-family:inherit}
.signout:hover{background:#1A2B4D}
.viewas{min-height:40px;border-radius:8px;border:1px solid #2E4370;background:#1A2B4D;color:#fff;font:inherit;font-size:16px;padding:0 32px 0 8px;max-width:180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.morepanel{position:absolute;background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(19,32,58,.18);padding:6px;z-index:60;min-width:220px}
.morepanel a{display:flex;min-height:40px;align-items:center;padding:0 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px}
.morepanel a:hover,.morepanel a.on{background:var(--teal-l)}
.samplebar{background:#FFF4E0;color:#7A4A06;border-bottom:1px solid #F2D9A8;font-size:13px}
.samplebar .in{max-width:1392px;margin:0 auto;padding:6px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* page */
.page{max-width:1392px;margin:0 auto;padding:22px 16px 40px;display:flex;flex-direction:column;gap:18px}
.phead{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.phead .sub{color:var(--muted);font-size:14px;margin-top:3px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;min-width:0}
.card.pad0{padding:0}
.card h2+.sub,.card h3+.sub{color:var(--muted);font-size:13px;margin-top:2px}
.chead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}
.grid>*{min-width:0}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}.c9{grid-column:span 9}
@media (max-width:1100px){.c8,.c7,.c6,.c5,.c4,.c9{grid-column:span 12}.c3{grid-column:span 6}}
@media (max-width:640px){.c3{grid-column:span 12}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.spacer{flex:1}

/* tiles */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tile{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile .l{font-size:13px;color:var(--muted);font-weight:600}
.tile .v{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .s{font-size:12px;color:var(--muted)}
.tile.big{border-width:2px}
.tile.g{border-color:#9ED3B0}.tile.a{border-color:#F2C877}.tile.r{border-color:#F1A49C}
.tag{align-self:flex-start;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.tag.g{background:var(--good);color:#fff}.tag.a{background:var(--amber);color:var(--ink)}.tag.r{background:var(--red);color:#fff}.tag.n{background:#EEF0F4;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:#EEF0F4;color:var(--muted)}
.chip.g{background:var(--good-l);color:#14532D}.chip.a{background:var(--warn-l);color:#7A4A06}.chip.r{background:var(--bad-l);color:#8A1C12}.chip.t{background:var(--teal-l);color:var(--teal-d)}.chip.b{background:#E8EEFC;color:#1E3A8A}.chip.o{background:#FFEDD5;color:#9A3412}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.g{background:var(--good)}.dot.a{background:var(--amber)}.dot.r{background:var(--red)}.dot.n{background:#C9CFD8}

/* buttons, inputs */
.btn{min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#9AA3B2;color:var(--ink)}
.btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}.btn.pri:hover{background:var(--teal-d);color:#fff}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.danger{background:#fff;border-color:#F1A49C;color:var(--bad)}.btn.danger:hover{background:var(--bad-l)}
.btn.sm{min-height:36px;padding:0 10px;font-size:13px}
.btn.lg{min-height:52px;font-size:17px;padding:0 24px;border-radius:10px}
.btn[disabled]{background:#D5DAE2;border-color:#D5DAE2;color:var(--muted);cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.seg button{min-height:40px;padding:0 14px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--navy);color:#fff}
.seg.fill{display:flex;width:100%}.seg.fill button{flex:1 1 0;min-width:0;text-align:center}
.focusgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.focusgrid button{min-height:46px;padding:0 10px;border:1.5px solid #D5DAE2;border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.focusgrid button.on{background:var(--navy);border-color:var(--navy);color:#fff}
label.f{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;min-width:0}
label.f .h{font-weight:400;color:var(--muted);font-size:12px}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:#fff;min-height:44px;padding:0 12px;width:100%;min-width:0}
select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596377' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
select::-ms-expand{display:none}
textarea{padding:10px 12px;min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:3px solid #9CCFCB;outline-offset:1px;border-color:var(--teal)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--teal)}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.err{background:var(--bad-l);border:1px solid #F1C3BD;color:#8A1C12;border-radius:8px;padding:10px 12px;font-size:14px}
.ok{background:var(--good-l);border:1px solid #B5DEC3;color:#14532D;border-radius:8px;padding:10px 12px;font-size:14px}
.note{background:var(--warn-l);border:1px solid #F2D9A8;color:#7A4A06;border-radius:8px;padding:10px 12px;font-size:14px}
.info{background:#EEF3FB;border:1px solid #CCD8EE;color:#1E3A8A;border-radius:8px;padding:10px 12px;font-size:14px}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap;background:#FAFBFC;position:sticky;top:0}
table.t th.sort{cursor:pointer;user-select:none}table.t th.sort:hover{color:var(--ink)}
table.t td{padding:9px 10px;border-bottom:1px solid #EEF0F4;vertical-align:middle}
table.t td.n,table.t th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tr.hl td{background:#FFF8EC}table.t tr.bad td{background:#FFF3F1}table.t tr.dim td{color:var(--muted)}
table.t tr:hover td{background:#F7F9FB}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:14px}

/* bars */
.bar{height:10px;background:#EEF0F4;border-radius:999px;overflow:hidden;position:relative}
.bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--teal)}
.bar.g>i{background:var(--good)}.bar.a>i{background:var(--amber)}.bar.r>i{background:var(--red)}
.bar .mk{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.vbars{display:flex;gap:6px;align-items:flex-end;height:160px;padding-top:8px}
.vbars .vb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.vbars .vb .col{width:100%;max-width:46px;border-radius:6px 6px 0 0;background:var(--teal);position:relative;min-height:2px}
.vbars .vb .lab{font-size:11px;color:var(--muted);white-space:nowrap}
.vbars .vb .val{font-size:11px;font-family:var(--mono);white-space:nowrap}
.stackbar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:#EEF0F4}
.stackbar i{display:block;height:100%}
.heat{display:grid;gap:3px}
.heat .hc{border-radius:4px;min-height:30px;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
svg.line{width:100%;height:180px;display:block}

/* toast, modal */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(560px,calc(100% - 24px))}
#toast .tm{background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);pointer-events:auto}
#toast .tm.err{background:#8A1C12;border:0;color:#fff}#toast .tm.hi{background:#B42318}
.mback{position:fixed;inset:0;background:rgba(19,32,58,.45);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 12px;overflow:auto}
.modal{background:#fff;border-radius:14px;width:min(640px,100%);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal.wide{width:min(980px,100%)}
.modal .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.x{background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);min-width:44px;min-height:44px}

/* footer */
.site-foot{background:var(--navy);color:#C7CEDB;font-size:13px;flex:0 0 auto}
.site-foot .foot-in{max-width:1392px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.site-foot strong{color:#fff}

/* login */
.login{min-height:calc(100vh - 50px);display:flex;align-items:center;justify-content:center;padding:40px 16px}
.login .box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.login .logo{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.login .logo img{width:min(300px,80%);height:auto}
.login .logo .s{font-size:15px;color:var(--muted)}
.login .by{text-align:center;font-size:13px;color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:6px;font-size:14px}
.checks .ck{display:flex;gap:8px;align-items:center}
.checks .ck.ok{color:var(--good);background:none;border:0;padding:0}.checks .ck.no{color:var(--muted)}

/* logger */
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.outs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ob{min-height:56px;border-radius:10px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:2px solid #D5DAE2;background:#fff;color:var(--ink)}
.ob.sale{background:var(--teal-l)}.ob.on{background:var(--navy);border-color:var(--navy);color:#fff}.ob.sale.on{background:var(--teal);border-color:var(--teal)}
.prod{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #EEF0F4}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:20px;font-weight:700;cursor:pointer;color:var(--ink)}
.qty .q{min-width:32px;text-align:center;font-family:var(--mono);font-size:18px;font-weight:600}
.netstat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.leadcard{background:#FAFBFC;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}

/* misc */
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.list{display:flex;flex-direction:column}.list .li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #EEF0F4;flex-wrap:wrap}
.list .li:last-child{border-bottom:0}
.alert{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fff}
.alert.hi{border-color:#F1A49C;background:#FFF8F7}.alert.ack{opacity:.75}
.alert pre{white-space:pre-wrap;font-family:var(--sans);font-size:14px;margin:0;color:var(--ink)}
.qitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #EEF0F4}
.qitem.basket{background:#FFF7ED;margin:0 -10px;padding:12px 10px;border-radius:8px}
.qopts{display:flex;gap:4px;flex-wrap:wrap}
.qopts button{min-height:40px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.qopts button.on.full,.qopts button.on.pass{background:var(--good);border-color:var(--good);color:#fff}
.qopts button.on.partial{background:var(--amber);border-color:var(--amber)}
.qopts button.on.missed,.qopts button.on.breach{background:var(--red);border-color:var(--red);color:#fff}
.tl{display:flex;gap:6px;flex-wrap:wrap}
.tl .tp{flex:1 1 60px;border-radius:8px;padding:6px 8px;font-size:12px;border:1px solid var(--border);background:#fff;min-width:58px}
.tl .tp.done{background:var(--good-l);border-color:#B5DEC3}.tl .tp.due{background:var(--warn-l);border-color:#F2D9A8}.tl .tp.over{background:var(--bad-l);border-color:#F1C3BD}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tabs button{min-height:44px;padding:0 14px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--teal)}
.sig{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:10px}
.hide-sm{}
@media (max-width:640px){
  .hide-sm{display:none!important}
  .page{padding:16px 12px 32px}
  h1{font-size:21px}
  .tile .v{font-size:21px}
  .brand img{height:28px}
  .who .n{display:none}
  .card{padding:14px}
}
@media print{.topbar,.site-foot,.samplebar,.noprint{display:none!important}body{background:#fff}.card{border:0}}

/* ===== burger menu + phone polish ===== */
.burger{display:none}
.show-mob{display:none}
.drawer-back{position:fixed;inset:0;background:rgba(10,18,36,.5);z-index:90;animation:fadein .15s ease}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);background:#fff;color:var(--ink);z-index:91;transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
.drawer.open{transform:none}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 12px 12px 16px;background:var(--navy);color:#fff}
.drawer .dh .who{border:0;margin:0;padding:0}
.drawer .dh .who .n{display:flex!important}
.drawer .dh .x{color:#fff}
.drawer .dview{display:flex;flex-direction:column;gap:6px;padding:12px 16px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
.drawer .dview .viewas{background:#fff;color:var(--ink);border-color:var(--line);max-width:none;width:100%;min-height:44px}
.drawer .dnav{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch}
.drawer .dnav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:500}
.drawer .dnav a:hover{background:#F4F5F7}
.drawer .dnav a.on{background:var(--teal-l);color:var(--teal-d);font-weight:700;box-shadow:inset 3px 0 0 var(--teal)}
.drawer .dsignout{margin:8px 16px;color:var(--ink);border-color:var(--line);justify-content:center;min-height:46px;font-size:15px}
.drawer .dfoot{padding:10px 16px 16px;font-size:12px;color:var(--muted)}
body.noscroll{overflow:hidden}
@keyframes fadein{from{opacity:0}to{opacity:1}}
input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;text-align:left;display:block;line-height:44px}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}

@media (max-width:900px){
  .burger{display:inline-flex;margin-left:-6px}
  .topbar .nav,.hide-mob{display:none!important}
  .show-mob{display:inline}
  .topbar .in{min-height:56px;flex-wrap:nowrap;gap:4px;padding:0 10px;padding-top:env(safe-area-inset-top)}
  .brand{flex:1;min-width:0;gap:8px}
  .brand img{height:26px}
  .brand .t b{font-size:14px}.brand .t span{font-size:10px}
  .tools{flex-wrap:nowrap;gap:2px}
  .samplebar .in{padding:6px 12px;font-size:12px;gap:6px}
}
@media (max-width:640px){
  body{font-size:15px}
  .page{gap:14px;padding:14px 12px 28px}
  .phead{flex-direction:column;align-items:stretch;gap:10px}
  .phead>div{min-width:0;max-width:100%}
  .phead .sub{overflow-wrap:anywhere}
  .phead>.row{flex-wrap:wrap;gap:8px}
  .phead>.row>select,.phead>.row>input{flex:1 1 140px;width:auto!important}
  .phead>.row>.btn{flex:1 1 auto}
  .phead .sub{font-size:13px}
  .seg{flex:0 0 auto;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{white-space:nowrap;min-height:40px;padding:0 12px;font-size:13px;flex:0 0 auto}
  .row>.seg{max-width:100%}
  .fgrid{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .tile{padding:10px 12px}.tile .v{font-size:18px}.tile .l{font-size:12px}.tile .s{font-size:11px}
  .card{border-radius:12px}
  .chead{margin-bottom:8px}
  h2{font-size:16px}
  .btn{min-height:44px}
  .btn.lg{width:100%}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;white-space:nowrap}
  .modal{padding:16px;border-radius:14px}
  .mback{padding:16px 10px;align-items:flex-end}
  .site-foot .foot-in{flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .login .box{gap:16px}
  /* tables become stacked cards */
  table.t.cards thead{display:none}
  table.t.cards,table.t.cards tbody,table.t.cards tr,table.t.cards td{display:block;width:100%}
  table.t.cards tr{border-bottom:1px solid var(--border);padding:10px 12px}
  table.t.cards td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right!important}
  table.t.cards td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;text-align:left;flex:0 0 auto;font-family:var(--sans)}
  table.t.cards td:first-child{font-size:16px;justify-content:flex-start;text-align:left!important;padding-bottom:6px}
  table.t.cards td:first-child::before{display:none}
  table.t.cards td[data-l=""]::before{display:none}
  table.t.cards td.empty{justify-content:center}
  table.t.cards tr:hover td{background:none}
  table.t.cards tr.bad{background:#FFF3F1}table.t.cards tr.hl{background:#FFF8EC}
  table.t.cards tr.bad td,table.t.cards tr.hl td{background:none}
  .qitem{grid-template-columns:minmax(0,1fr)}
  .outs{gap:8px}
  .vbars{height:130px!important}
}