/* DENONTEK Seller Portal - theme: DENONTEK red + dark */
:root{
  --red:#BE0B0E; --red-d:#8E0709; --red-l:#FDECEC; --red-50:#FFF6F6;
  --ink:#111214; --ink-2:#1B1C1F; --ink-3:#26282C;
  --tx:#17181B; --tx-2:#55585F; --tx-3:#8A8D94;
  --bg:#F3F3F4; --card:#FFFFFF; --line:#E6E6E8; --line-2:#F0F0F1;
  --ok:#14804A; --ok-l:#E7F6EE; --warn:#B45309; --warn-l:#FEF3E2; --info:#1D4ED8; --info-l:#EAF0FD;
  --mute:#6B6E75; --mute-l:#EFEFF1;
  --r:12px; --r-s:8px;
  --sh:0 1px 2px rgba(17,18,20,.06),0 1px 3px rgba(17,18,20,.05);
  --sh-2:0 8px 28px rgba(17,18,20,.14);
  --sb:248px;
  --f: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f);font-size:14px;line-height:1.45;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-d)}
.ic{width:20px;height:20px;flex:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:17px} h3{font-size:15px}
.muted{color:var(--tx-2)} .small{font-size:12px} .tiny{font-size:11px;color:var(--tx-3)}
.nowrap{white-space:nowrap} .right{text-align:right} .center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px}
.neg{color:var(--red)} .pos{color:var(--ok)}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ---------- Sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb);background:var(--ink);color:#E9E9EB;display:flex;flex-direction:column;z-index:40}
.sb-brand{display:flex;align-items:center;gap:12px;padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-icon{width:38px;height:38px;border-radius:9px}
.sb-title{font-weight:800;letter-spacing:.06em;font-size:15px}
.sb-sub{font-size:11.5px;color:#A3A5AB;margin-top:1px}
.sb-nav{flex:1;padding:12px 10px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.sb-nav::-webkit-scrollbar{width:0;height:0;display:none}
.sb-link{display:flex;align-items:center;gap:12px;color:#C9CACE;padding:10px 12px;border-radius:9px;margin:2px 0;font-weight:500;position:relative}
.sb-link:hover{background:var(--ink-3);color:#fff}
.sb-link.on{background:var(--red);color:#fff}
.sb-link.on .ic{color:#fff}
.sb-link .pill{margin-left:auto;background:#fff;color:var(--red);font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px}
.sb-link:not(.on) .pill{background:var(--red);color:#fff}
.sb-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.07)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700}
.sb-user-info{flex:1;min-width:0}
.sb-user-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{font-size:11.5px;color:#A3A5AB}
.sb-logout{color:#A3A5AB;padding:6px;border-radius:8px}
.sb-logout:hover{background:var(--ink-3);color:#fff}
.scrim{display:none}

/* ---------- Main ---------- */
.main{min-height:100vh}
.has-nav .main{margin-left:var(--sb)}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:12px 26px;min-height:62px}
.top-logo{height:22px;display:none}
.top-title{font-size:19px}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.content{padding:22px 26px 40px;max-width:1500px}
.only-mobile,.icon-btn.only-mobile{display:none}
.bottombar{display:none}

/* ---------- Cards / grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.card-h .sub{margin-left:auto}
.card-b{padding:18px}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack>*+*{margin-top:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);position:relative;overflow:hidden}
.stat .lbl{font-size:12px;color:var(--tx-2);font-weight:500}
.stat .val{font-size:22px;font-weight:750;margin-top:4px;letter-spacing:-.02em}
.stat.red{background:var(--ink);border-color:var(--ink);color:#fff}
.stat.red .lbl{color:#B9BBC0}
.stat.red::after{content:"";position:absolute;right:-22px;bottom:-22px;width:58px;height:58px;border-radius:50%;background:var(--red)}
.stat>*{position:relative;z-index:1}
.stat a{color:inherit}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:var(--r-s);padding:9px 15px;font:600 13.5px var(--f);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,opacity .12s;text-decoration:none;line-height:1.2}
.btn .ic{width:17px;height:17px}
.btn-p{background:var(--red);color:#fff}
.btn-p:hover{background:var(--red-d);color:#fff}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:var(--ink-3);color:#fff}
.btn-o{background:#fff;border-color:var(--line);color:var(--tx)}
.btn-o:hover{border-color:#cfd0d4;color:var(--tx)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ok:hover{opacity:.9;color:#fff}
.btn-g{background:transparent;color:var(--tx-2)}
.btn-g:hover{background:var(--mute-l);color:var(--tx)}
.btn-s{padding:6px 10px;font-size:12.5px}
.btn-l{padding:12px 18px;font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn.loading{opacity:.55;pointer-events:none}
.icon-btn{background:none;border:0;padding:6px;border-radius:8px;color:var(--tx);cursor:pointer;display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--mute-l)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.lbl-t{font-weight:600;font-size:12.5px;color:var(--tx-2)}
.field .hint{font-size:11.5px;color:var(--tx-3)}
.req::after{content:" *";color:var(--red)}
input[type=text],input[type=password],input[type=number],input[type=tel],input[type=email],input[type=date],input[type=search],select,textarea{
  width:100%;font:14px var(--f);color:var(--tx);background:#fff;border:1px solid #D9DADD;border-radius:var(--r-s);padding:10px 12px;outline:none;transition:border-color .12s,box-shadow .12s}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(190,11,14,.12)}
input[readonly]{background:var(--line-2)}
.check{display:flex;gap:9px;align-items:center;font-weight:500;cursor:pointer;user-select:none}
.check input{width:17px;height:17px;accent-color:var(--red)}
.inline-form{display:inline}
.input-sm{padding:7px 10px !important;font-size:13px !important}

/* ---------- Alerts ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-s);margin-bottom:14px;border:1px solid;font-weight:500}
.alert .ic{margin-top:1px}
.alert-ok{background:var(--ok-l);border-color:#BDE5CF;color:#0D5C35}
.alert-err,.alert-error{background:var(--red-l);border-color:#F5C2C3;color:#8E0709}
.alert-warn{background:var(--warn-l);border-color:#F8D9A8;color:#8A4005}
.alert-info{background:var(--info-l);border-color:#C9D7FA;color:#1E3A8A}
.alert ul{margin:4px 0 0;padding-left:18px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.tbl td .badge{margin-top:-3px;margin-bottom:-3px;vertical-align:2px} /* badge text on the same line as the other cells' text */
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-ok{background:var(--ok-l);color:var(--ok)}
.st-bad{background:var(--red-l);color:var(--red)}
.st-alert{background:var(--warn-l);color:var(--warn)}
.st-info{background:var(--info-l);color:var(--info)}
.st-wait{background:#F4EEFF;color:#6D28D9}
.lk{color:inherit;border-bottom:1px dashed var(--tx-3);cursor:pointer;text-decoration:none}
.lk:hover{color:var(--red);border-bottom-color:var(--red)}
.lk-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fff}
.lk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.chip{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--line-2);font-weight:600;color:var(--tx-2)}
.chip.ok{background:var(--ok-l);color:var(--ok)}
.chip.bad{background:#FDECEC;color:var(--red)}
.lk-row{display:block;padding:9px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
a.lk-row:hover{background:var(--line-2)}
.lk-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.city-tag{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.3px;color:var(--red);background:var(--red-l);padding:2px 10px;border-radius:6px}
.dash-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--tx-3);margin:16px 0 8px}
.pack-card{display:block;color:inherit;margin-bottom:6px;border-left:4px solid var(--red)}
.pack-card:hover{box-shadow:var(--sh-2)}
#busyBar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(90deg,transparent 0,var(--red) 30%,#ff7b7b 50%,var(--red) 70%,transparent 100%);background-size:200% 100%}
#busyBar.on{opacity:1;animation:busy 1s linear infinite}
@keyframes busy{from{background-position:200% 0}to{background-position:0 0}}
.st-pend{background:#FEF9C3;color:#854D0E}
.st-appr{background:#CCFBF1;color:#0F766E}
.bk-pick{display:inline-flex;align-items:center;margin-right:6px;vertical-align:middle}
.bk-pick input{width:18px;height:18px;accent-color:var(--ok)}
.st-mute{background:var(--mute-l);color:var(--mute)}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--mute-l);color:var(--tx-2);letter-spacing:.02em}
.tag-red{background:var(--red);color:#fff}
.tag-dark{background:var(--ink);color:#fff}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff;background:var(--red);border-radius:5px;padding:2px 6px}
.flag .ic{width:12px;height:12px}
.flag.warn{background:var(--warn)}
.msg-pill{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11px;font-weight:700;color:var(--tx-2);background:var(--line-2);border:1px solid var(--line);border-radius:20px;padding:2px 7px;margin-left:4px;vertical-align:middle;white-space:nowrap;cursor:pointer}
.msg-pill:hover{border-color:var(--tx-3);color:var(--tx)}.msg-pill span{display:inline-flex;align-items:center;gap:2px}.msg-pill .ic{width:12px;height:12px}
.msg-pill span:nth-child(1) .ic{color:var(--warn)}
.msg-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px;background:var(--line-2)}
.msg-ttl{display:flex;align-items:center;gap:6px;font-weight:650;font-size:13px;margin-bottom:8px}.msg-ttl .ic{width:15px;height:15px;color:#16a34a}
.msg-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.msg-k{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 4px}
.msg-k .ic{width:15px;height:15px}.msg-k b{font-size:16px;line-height:1.1}.msg-k span{font-size:10.5px;color:var(--tx-2)}.msg-k.zero{opacity:.45}
.msg-courier .ic{color:var(--warn)}.msg-customer .ic{color:var(--info)}.msg-seller .ic{color:#6D28D9}.msg-team .ic{color:var(--tx-2)}
.msg-list{margin-top:8px}.msg-list summary{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;font-weight:650;list-style:none;padding:4px 0}.msg-list summary::-webkit-details-marker{display:none}
.msg-chev{margin-left:auto;transform:rotate(90deg);transition:transform .15s}.msg-list[open] .msg-chev{transform:rotate(-90deg)}
.msg-it{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-top:6px}
.msg-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px}.msg-at{margin-left:auto;color:var(--tx-2)}
.msg-who{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;background:var(--line-2)}.msg-who .ic{width:11px;height:11px}
.msg-txt{margin-top:4px;color:var(--tx-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.msg-it:hover .msg-txt{-webkit-line-clamp:unset}
.msg-modal{max-width:560px}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;background:#FAFAFA;text-align:left;font-weight:650;color:var(--tx-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:10px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 9px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tbody tr:hover{background:#FCFCFC}
.tbl tr.clickable{cursor:pointer}
.tbl tfoot td{font-weight:700;background:#FAFAFA;border-top:1px solid var(--line)}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.grp-row td{background:var(--ink);color:#fff;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:8px 12px}
.grp-row.attn td{background:var(--red)}
.cell-main{font-weight:600}
.cell-sub{font-size:12px;color:var(--tx-2);margin-top:2px}

/* ---------- Tabs / filters ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:8px 13px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--tx-2);font-weight:600;font-size:13px;display:inline-flex;gap:7px;align-items:center}
.tab b{background:var(--mute-l);color:var(--tx);border-radius:12px;font-size:11px;padding:1px 7px}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tab.on b{background:var(--red);color:#fff}
.t-short{display:none}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{margin:0}
.filters input,.filters select{padding:8px 10px;font-size:13px}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 16px 28px}
.timeline li::before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #C7C8CC}
.timeline li.last .dot{border-color:var(--red);background:var(--red-l)}
.timeline li.ok .dot{border-color:var(--ok)}
.timeline li.bad .dot{border-color:var(--red)}
.timeline .t-msg{font-weight:600}
.timeline .t-at{font-size:12px;color:var(--tx-2);margin-top:2px}

/* ---------- Key/value ---------- */
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:13.5px}
.kv dt{color:var(--tx-2)}
.kv dd{margin:0;font-weight:550;word-break:break-word}
.money-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.money-grid>div{background:var(--line-2);border-radius:var(--r-s);padding:10px 12px}
.money-grid .l{font-size:11.5px;color:var(--tx-2)}
.money-grid .v{font-weight:700;font-size:15px;margin-top:2px}
.money-grid .net{background:var(--ink);color:#fff}
.money-grid .net .l{color:#B9BBC0}

/* ---------- Order form items ---------- */
.item-row{display:grid;grid-template-columns:1fr 90px 120px 36px;gap:8px;align-items:center;margin-bottom:8px}
.item-row .rm{color:var(--tx-3)}
.total-box{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r-s);padding:12px 16px;margin-top:6px}
.total-box b{font-size:18px}

/* ---------- Auth pages ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-side{background:var(--ink);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--red);right:-200px;bottom:-220px;opacity:.95}
.auth-side::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.05);left:-90px;top:120px}
.auth-side>*{position:relative;z-index:1}
.auth-side h2{font-size:34px;line-height:1.15;max-width:420px;letter-spacing:-.02em}
.auth-side p{color:#C2C3C8;max-width:400px;font-size:15px}
.auth-brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.08em}
.auth-brand img{width:42px;height:42px;border-radius:10px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:32px 20px;background:#fff}
.auth-box{width:100%;max-width:400px}
.auth-box .logo{height:34px;margin-bottom:26px}
.auth-box h1{font-size:24px;margin-bottom:6px}
.auth-box .lead{color:var(--tx-2);margin:0 0 22px}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:46px 20px;color:var(--tx-2)}
.empty-ic{width:44px;height:44px;color:#C7C8CC;margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-weight:600;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:.22s;z-index:100;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red)}
.modal{position:fixed;inset:0;background:rgba(17,18,20,.5);display:none;align-items:center;justify-content:center;z-index:90;padding:16px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:14px;width:100%;max-width:520px;box-shadow:var(--sh-2);max-height:92vh;overflow:auto}
.modal-h{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-h .icon-btn{margin-left:auto}
.modal-b{padding:18px}
.sync-note{font-size:12px;color:var(--tx-3);display:inline-flex;gap:6px;align-items:center}
.sync-note .ic{width:15px;height:15px}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seg{display:inline-flex;background:var(--mute-l);border-radius:9px;padding:3px}
.seg label{padding:7px 14px;border-radius:7px;cursor:pointer;font-weight:600;font-size:13px;color:var(--tx-2)}
.seg input{display:none}
.seg input:checked+span{color:#fff}
.seg label:has(input:checked){background:var(--ink);color:#fff}
.sel-bar{position:sticky;bottom:0;background:var(--ink);color:#fff;border-radius:var(--r);padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;box-shadow:var(--sh-2)}
.sel-bar b{font-size:17px}

/* ---------- Responsive ---------- */
.m-viewbar{display:none}
.m-tog{display:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.seg button{border:0;background:none;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--tx-2);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
@media (max-width: 1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .sidebar{transform:translateX(-100%);transition:transform .22s;box-shadow:var(--sh-2)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .has-nav .main{margin-left:0;padding-bottom:68px}
  .only-mobile,.icon-btn.only-mobile{display:inline-grid}
  .topbar{padding:10px 14px;gap:10px;min-height:56px}
  .top-actions{flex-wrap:nowrap;gap:6px;min-width:0}
  .top-actions .btn{padding:7px 10px;font-size:13px;white-space:nowrap}
  .top-actions .btn:not(:only-child){font-size:0;gap:0;padding:8px 10px}
  .top-actions .btn:not(:only-child) svg{width:18px;height:18px;margin:0}
  .tabs:not(.tabs-seg){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs:not(.tabs-seg)::-webkit-scrollbar{display:none}
  .tabs:not(.tabs-seg) .tab{flex:0 0 auto}
  .top-logo{display:block;height:18px}
  .top-title{display:none}
  .content{padding:16px 14px 30px}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bb-link{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--tx-3);padding:4px 0;position:relative}
  .bb-link.on{color:var(--red)}
  .bb-link .dot{position:absolute;top:2px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--red)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .grid>*{grid-column:auto !important;position:static !important}
  .topbar .sync-note{display:none}
  .card-h{flex-wrap:wrap}
  .kv{grid-template-columns:120px 1fr}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .page-title-m{display:block !important}
  /* tables become cards */
  table.tbl.cards thead{display:none}
  table.tbl.cards, table.tbl.cards tbody, table.tbl.cards tfoot, table.tbl.cards tr, table.tbl.cards td{display:block;width:100%}
  table.tbl.cards tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px;background:#fff;padding:6px 4px}
  table.tbl.cards td{border:0;padding:5px 12px 5px 112px;position:relative;text-align:right;min-height:28px}
  table.tbl.cards td::before{content:attr(data-l);position:absolute;left:12px;top:6px;font-weight:600;color:var(--tx-2);font-size:12px;text-align:left}
  table.tbl.cards td[data-l=""]{padding-left:12px}
  table.tbl.cards .cell-sub{margin-top:1px}
  table.tbl.cards td[data-l=""]::before{display:none}
  table.tbl.cards td.hide-m{display:none}
  table.tbl.cards tr.grp-row{border:0;background:none;padding:0;margin:14px 0 8px}
  table.tbl.cards tr.grp-row td{border-radius:8px;text-align:left}
  table.tbl.cards tfoot td[data-l=""]{text-align:left;font-size:13px}
  table.tbl.cards tfoot tr{background:var(--ink);color:#fff}
  table.tbl.cards tfoot td{background:none}
  .m-viewbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
  .tabs-seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px}
  .tabs-seg .tab{flex-direction:column;justify-content:center;gap:3px;border:0;border-radius:9px;padding:7px 1px;font-size:10.5px;line-height:1.15;text-align:center;min-width:0}
  .tabs-seg .t-full{display:none}
  .tabs-seg .t-short{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .filters>*{min-width:0}
  .filters .field input,.filters .field select{width:100%;min-width:0}
  .filters .f-search,.filters>.btn:only-of-type{grid-column:1 / -1}
  .filters>.field{min-width:0 !important}
  .filters>.field:has(input[type=search]){grid-column:1 / -1}
  .filters .f-search{flex:1 1 100%}
  .filters .f-search input{width:100%}
  .filters .f-date{flex:1 1 0;min-width:0}
  .filters .f-date input{width:100%}
  .cards-wrap.m-min table.tbl.cards td.m-more{display:none}
  .cards-wrap.m-min table.tbl.cards tbody tr.open td.m-more{display:block}
  .cards-wrap.m-min table.tbl.cards tbody tr:not(.grp-row){padding:2px 4px}
  .cards-wrap table.tbl.cards td[data-l="Order"]{padding-right:44px}
  .m-tog{display:grid;place-items:center;position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;background:var(--line-2);border-radius:8px;color:var(--tx-2);cursor:pointer;padding:0}
  .m-tog svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .15s}
  .cards-wrap.m-min tr.open .m-tog svg{transform:rotate(-90deg)}
  .cards-wrap:not(.m-min) .m-tog{display:none}
  .cards-wrap:not(.m-min) table.tbl.cards td[data-l="Order"]{padding-right:12px}
  /* Full view: status as plain coloured text (the pill is already in the card head), wraps without an empty box */
  .cards-wrap:not(.m-min) table.tbl.cards td[data-l="Status"] .badge{display:inline;background:none;border:0;padding:0;font-size:13px;font-weight:700;white-space:normal}
  .cards-wrap:not(.m-min) table.tbl.cards td[data-l="Status"] .badge::before{display:inline-block;vertical-align:middle;margin:0 6px 2px 0}
  .card.flat-m{background:none;border:0;box-shadow:none}
  .card.flat-m>.card-h{padding:0 0 10px;border:0}
  .tbl-wrap.cards-wrap{overflow:visible}
  .item-row{grid-template-columns:1fr 70px 36px}
  .item-row .price{grid-column:1 / span 2}
}
.page-title-m{display:none;font-size:20px;margin-bottom:14px}
@media print{.print-only{display:block !important}.sidebar,.topbar,.bottombar,.no-print{display:none !important}.has-nav .main{margin:0}}
.auth-page .content{padding:0;max-width:none}

a.stat-link{display:block;color:var(--tx);text-decoration:none;cursor:pointer;transition:border-color .12s,box-shadow .12s}
a.stat-link:hover{border-color:#cfd0d4;box-shadow:var(--sh-2);color:var(--tx)}
a.stat-link.red,a.stat-link.red:hover{color:#fff}
a.stat-link.red .muted{color:#B9BBC0}
.pay-tbl td,.pay-tbl th{padding:9px 6px}
.pay-tbl input.input-sm{padding:6px 7px !important}

/* ---- Public tracking page ---- */
.track-page .content{padding:0;max-width:none}
.tk{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.tk-main{display:flex;justify-content:center;padding:48px 20px;background:#fff}
.tk-wrap{width:100%}
.tk-box{width:100%;max-width:440px;margin:0 auto}
.tk-box .logo{height:34px;margin-bottom:22px}
.tk-search{display:flex;gap:8px;margin:0 0 18px}
.tk-search input{flex:1;min-width:0}
.st-hero{border-radius:14px;padding:18px;margin-bottom:16px;border:1px solid}
.st-hero .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.st-hero .v{font-size:26px;font-weight:800;margin:4px 0 2px;line-height:1.15}
.st-hero .t{font-size:13px}
.st-hero.h-warn{background:#FEF3E2;border-color:#F8D9A8;color:#8A4005}.st-hero.h-warn .v{color:#B45309}
.st-hero.h-ok{background:#E8F6EE;border-color:#B7E2C7;color:#13633A}.st-hero.h-ok .v{color:#15803D}
.st-hero.h-bad{background:#FDECEC;border-color:#F5C2C2;color:#8F1214}.st-hero.h-bad .v{color:#BE0B0E}
.st-hero.h-info{background:#EAF1FB;border-color:#C5D8F2;color:#1E3A66}.st-hero.h-info .v{color:#1D4ED8}
.st-hero.h-mute{background:#F2F2F3;border-color:#DDDDE0;color:#55575D}
.kv2{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:14px;margin:0 0 18px}
.kv2 dt{color:var(--tx-3)}.kv2 dd{margin:0;font-weight:600;word-break:break-word}
.tl{list-style:none;margin:0 0 18px 6px;padding:0 0 0 18px;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 14px 8px;font-size:14px}
.tl li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--tx-3)}
.tl li.ok::before{background:var(--ok);border-color:var(--ok)}
.tl li.now.h-warn::before{background:#B45309;border-color:#B45309}
.tl li.now.h-ok::before{background:#15803D;border-color:#15803D}
.tl li.now.h-bad::before{background:#BE0B0E;border-color:#BE0B0E}
.tl li.now.h-info::before{background:#1D4ED8;border-color:#1D4ED8}
.tl .when{font-size:12px;color:var(--tx-3)}
.fake{border:1.5px dashed var(--red);border-radius:14px;padding:16px;text-align:center;margin-bottom:16px}
.fake b{display:block;font-size:16px;margin-bottom:4px}
.fake p{margin:0 0 12px;color:var(--tx-2);font-size:13px}
.fake.done{border-color:#B7E2C7;border-style:solid;background:#E8F6EE}.fake.done p{margin:0}
.tk-help{margin-top:18px}
.tk-mhead{display:none}
.tk-sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center;z-index:200}
.tk-sheet.open{display:flex}
.tk-sheet .in{background:#fff;width:100%;max-width:440px;border-radius:18px 18px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto}
.tk-sheet .opt{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:14px;cursor:pointer}
.tk-sheet .opt:has(input:checked){border-color:var(--red);background:var(--red-l)}
.tk-sheet .opt input{accent-color:var(--red);margin:0}
@media(min-width:901px){.tk-sheet{align-items:center}.tk-sheet .in{border-radius:18px}}
@media(max-width:900px){
  .tk{grid-template-columns:1fr}.tk-side{display:none}.tk-main{padding:0 0 30px}
  .tk-mhead{display:block;background:var(--ink);color:#fff;padding:20px 18px 26px;position:relative;overflow:hidden}
  .tk-mhead::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:var(--red);right:-70px;bottom:-110px}
  .tk-mhead::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;border:24px solid rgba(255,255,255,.06);left:-50px;top:-30px}
  .tk-mhead>*{position:relative;z-index:1}
  .tk-mhead .auth-brand img{width:34px;height:34px}
  .tk-mhead h2{margin:14px 0 2px;font-size:22px;color:#fff}.tk-mhead p{margin:0;color:#C2C3C8;font-size:13px}
  .tk-box{padding:18px 16px 0}.tk-box .logo{display:none}
  .kv2{grid-template-columns:105px 1fr}
}
/* Settings: customer tracking test row */
.trk-test-row{display:flex;gap:8px;flex-wrap:wrap}
.trk-test-row input{flex:1 1 150px;min-width:0}
.cm-row{padding:12px 0;border-bottom:1px solid var(--line-2)}.cm-row:first-of-type{padding-top:0}.cm-row textarea{width:100%}.cm-sw{margin:0;line-height:1.4;align-items:flex-start}.cm-sw input{margin-top:2px}.cm-when{display:block;font-size:12px;color:var(--tx-3);font-weight:400}.trk-test select{width:100%}
#trk .g3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- Service tickets ---- */
.tk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.tk-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;color:var(--tx);text-decoration:none}
.tk-stat span{font-size:12px;color:var(--tx-2);font-weight:600}
.tk-stat b{font-size:24px;line-height:1.1}
.tk-stat.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red-l)}
.tk-row{cursor:pointer}
.tk-code{font-size:14px}
.tk-age{font-size:12.5px;color:var(--tx-2);white-space:nowrap}
.tk-age.late{color:var(--red);font-weight:700}
.tk-modal{max-width:760px}
.tk-mh{align-items:flex-start}
.tk-mh-code{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:18px;font-weight:800;margin-bottom:2px}
.tk-mh-code .mono{font-size:18px}
.tk-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;gap:0;overflow-x:auto}
.tk-steps li{flex:1 1 0;min-width:96px;position:relative;padding:18px 6px 0;text-align:center;font-size:12px}
.tk-steps li::before{content:"";position:absolute;top:6px;left:0;right:0;height:3px;background:var(--line)}
.tk-steps li:first-child::before{left:50%}.tk-steps li:last-child::before{right:50%}
.tk-steps .dot{position:absolute;top:0;left:50%;margin-left:-8px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--line);z-index:1}
.tk-steps li.done::before,.tk-steps li.now::before{background:var(--ok)}
.tk-steps li.now::before{background:linear-gradient(90deg,var(--ok) 50%,var(--line) 50%)}
.tk-steps li:first-child.now::before{background:var(--line)}
.tk-steps li.done .dot{background:var(--ok);border-color:var(--ok)}
.tk-steps li.now .dot{background:#fff;border-color:var(--red);box-shadow:0 0 0 4px var(--red-l)}
.tk-steps b{display:block;font-weight:650;line-height:1.25;margin-top:4px}
.tk-steps small{display:block;color:var(--tx-3);font-size:11px;margin-top:2px}
.tk-steps li.todo b{color:var(--tx-3);font-weight:500}
.tk-next{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--red-50);border:1px solid #F7D4D5;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.tk-cols{gap:4px 18px;margin-bottom:6px}
.tk-cols .kv{grid-template-columns:110px 1fr;margin:6px 0 10px}
.tk-fault{background:var(--line-2);border-radius:10px;padding:10px 12px;font-size:13.5px}
.tk-wa{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:6px}
.tk-wa-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.tk-wa-row:last-child{border-bottom:0}
.tk-wa-row.off{opacity:.55}
.tk-wa-row details summary{cursor:pointer;color:var(--tx-2);margin-top:2px}
.tk-pre{white-space:pre-wrap;font-family:inherit;background:var(--line-2);border-radius:8px;padding:8px 10px;margin:6px 0 0;font-size:12px}
.tk-sec{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.tk-sec>summary{cursor:pointer;font-weight:650;font-size:13.5px}
.tk-sec>form{margin-top:10px}
.tk-log{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);font-size:13px}
.tk-log li{padding:0 0 10px 8px;position:relative}
.tk-log li::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--tx-3)}
.tk-log small{display:block;color:var(--tx-3);font-size:11.5px}
.nt-results{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;margin:-4px 0 12px}
.nt-hit{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer;color:var(--tx)}
.nt-hit .l2{display:block;font-size:12px;color:var(--tx-2);margin-top:2px}
.nt-hit:hover,.nt-hit.on{border-color:var(--red);background:var(--red-50)}
.seg-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg-pick label{display:block;cursor:pointer}
.seg-pick input{position:absolute;opacity:0;pointer-events:none}
.seg-pick span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;height:100%}
.seg-pick small{display:block;color:var(--tx-2);font-size:12px;margin-top:2px;line-height:1.35}
.seg-pick input:checked+span{border-color:var(--red);background:var(--red-50)}
.ra-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.x-row{grid-template-columns:1fr 64px 96px 34px}
/* public page: ticket */
.tl li.todo::before{border-style:dashed;border-color:var(--line)}
.tl li.todo b{color:var(--tx-3);font-weight:500}
.tk-addr{border:1.5px dashed var(--warn);background:var(--warn-l);border-radius:14px;padding:14px;margin-bottom:16px;font-size:14px}
.tk-addr p{margin:8px 0 0;font-size:13px}
.tk-sub-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin:8px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:900px){
  .tk-steps{flex-direction:column;gap:0;padding-left:4px}
  .tk-steps li{text-align:left;padding:0 0 10px 26px;min-width:0;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
  .tk-steps li::before{top:0;bottom:0;left:7px;right:auto;width:3px;height:auto}
  .tk-steps li:first-child::before{left:7px;top:8px}.tk-steps li:last-child::before{right:auto;bottom:auto;height:8px}
  .tk-steps li.now::before{background:var(--line)}
  .tk-steps .dot{left:0;margin-left:0;top:1px}
  .tk-steps b{margin-top:0}
  .tk-next{flex-direction:column;align-items:stretch}
  .tk-cols{grid-template-columns:1fr}
  .seg-pick{grid-template-columns:1fr}
  .x-row{grid-template-columns:1fr 56px 84px 34px}
}
.st-card>summary{list-style:none;cursor:pointer}
.st-card>summary::-webkit-details-marker{display:none}
.st-sum{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}

/* ---- Dashboard v2 ---- */
.dash-page .content{max-width:none}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.dash-main{min-width:0}
.dash-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
.stats.s6{grid-template-columns:repeat(6,minmax(0,1fr))}
.stats .stat{min-height:96px;display:flex;flex-direction:column}
.stats .stat .val{font-size:24px}
.stats .stat.money .val{font-size:19px}
.stats .stat .val small{font-size:13px;font-weight:600;color:var(--tx-2)}
.stats .stat .small{margin-top:auto;padding-top:2px}
.ac-list{display:flex;flex-direction:column}
.ac-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line-2);color:var(--tx-2);text-decoration:none;font-size:13.5px}
.ac-row:first-child{border-top:0}
.ac-row:hover{background:var(--line-2);color:var(--tx)}
.ac-row svg{width:17px;height:17px;flex:none;color:var(--tx-3)}
.ac-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-row b{min-width:28px;text-align:center;font-size:12.5px;padding:2px 8px;border-radius:999px;background:var(--line-2);color:var(--tx-3)}
.ac-row.has{color:var(--tx);font-weight:600}
.ac-row.has b{background:var(--ink);color:#fff}
.ac-row.has.red b{background:var(--red);color:#fff}
.ac-row.has.warn b{background:var(--warn);color:#fff}
.ac-row.has.red svg{color:var(--red)}.ac-row.has.warn svg{color:var(--warn)}
.qf-chip{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 8px 6px 12px;font-size:13px;margin:0 0 10px}
.qf-chip svg{width:15px;height:15px}
.qf-chip a{background:#fff;color:var(--ink);border-radius:999px;padding:3px 10px;font-weight:600;font-size:12px;text-decoration:none}
@media(max-width:1500px){.stats.s6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1180px){.dash-grid{grid-template-columns:1fr}.dash-side{position:static}}
@media(max-width:900px){.stats.s6{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stats .stat{min-height:84px;padding:12px}.stats .stat .val{font-size:20px}.stats .stat.money .val{font-size:16px}}

/* ---- Settings tabs ---- */
.set-tabs{margin-bottom:16px}
.set-tabs .tab svg{width:16px;height:16px;margin-right:6px}
.set-pane{display:none}
.set-pane.on{display:block}
.set-grid{align-items:start}
.set-cols{gap:0 24px;align-items:start}
@media(max-width:900px){.set-cols{grid-template-columns:1fr}}

/* ---- Back trail ---- */
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.crumb-back{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--tx)}
.crumb-back:hover{background:var(--line-2);color:var(--tx)}
.crumb-back svg{width:18px;height:18px}
.crumb-trail{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.crumb-trail::-webkit-scrollbar{display:none}
.crumb{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--line-2);color:var(--tx-2);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;flex:none}
a.crumb:hover{background:#e6e6e8;color:var(--tx)}
.crumb small{font-weight:500;color:var(--tx-3);font-size:11.5px}
.crumb.cur{background:var(--ink);color:#fff;font-size:15px;padding:7px 13px}
.crumb.cur small{color:#B9BBC0}
.crumb-sep{color:var(--tx-3);font-size:13px;flex:none}
@media(max-width:900px){.crumbs ~ .top-actions{flex:none}.topbar:has(.crumbs) .top-logo{display:none}.crumb:not(.cur){font-size:12px;padding:5px 9px}.crumb.cur{font-size:13px;padding:6px 10px}.crumb small{display:none}.crumb-back{width:34px;height:34px}}

/* ---- Confirm dialog ---- */
.dt-confirm{z-index:300}
.dt-confirm .modal-b{text-align:center;padding:24px 22px 20px}
.dc-ic{width:46px;height:46px;border-radius:50%;background:var(--red-l);color:var(--red);font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.dc-msg{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--tx)}
.dc-btns{display:flex;gap:10px;justify-content:center}
.dc-btns .btn{min-width:120px}
.dt-confirm .field{text-align:left}

/* ---- Inline validation, pagination ---- */
.field-err{color:var(--red);font-size:12px;margin-top:4px;font-weight:600}
input.inv,textarea.inv,select.inv{border-color:var(--red) !important;box-shadow:0 0 0 3px var(--red-l)}
tr.pg-hide{display:none !important}
.pg-more{margin-top:10px}

/* ---- Chat ---- */
.chat-page .content{padding:0;max-width:none}
.chat-app{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100vh - 63px);height:calc(100dvh - 63px);background:#fff}
.chat-app.is-seller{grid-template-columns:minmax(0,1fr)}
.ch-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:#FBFBFC}
.ch-list-h{padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.ch-list-h .row1{display:flex;align-items:center;justify-content:space-between}
.ch-list-h h2{margin:0;font-size:17px}
.ch-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 10px;color:var(--tx-3)}
.ch-search svg{width:16px;height:16px;flex:none}
.ch-search input{border:0;padding:9px 0;box-shadow:none !important;background:transparent;font-size:13.5px}
.ch-filt{display:flex;gap:6px}
.ch-filt button{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--tx-2);cursor:pointer}
.ch-filt button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ch-filt b{font-weight:700}
.ch-items{overflow:auto;flex:1}
.ch-item{display:flex;gap:11px;padding:12px 14px;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;width:100%;text-align:left;background:transparent;color:var(--tx);font:inherit}
.ch-item:hover{background:#fff}
.ch-item.on{background:#fff;box-shadow:inset 3px 0 0 var(--red)}
.ch-empty-s{padding:24px;text-align:center;color:var(--tx-3);font-size:13px}
.ch-av{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;position:relative;background:var(--ink)}
.ch-av.online::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#22C55E;border:2px solid #fff}
.ch-meta{flex:1;min-width:0;display:block}
.ch-meta .t{display:flex;justify-content:space-between;gap:6px}
.ch-meta b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-meta time{font-size:11.5px;color:var(--tx-3);flex:none;display:flex;align-items:center;gap:4px}
.ch-meta .p{display:flex;justify-content:space-between;gap:6px;margin-top:3px}
.ch-meta .p span{font-size:12.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-meta .p em{font-style:normal;background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:999px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex:none}
.ch-item.unread .p span{color:var(--tx);font-weight:600}
.wa-on{width:8px;height:8px;border-radius:50%;background:#16A34A;display:inline-block}
.tagD{font-size:10px;font-weight:800;background:var(--ink);color:#fff;border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.ch-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:#F4F4F6}
.ch-blank{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--tx-3);text-align:center;padding:30px}
.ch-blank svg{width:44px;height:44px;color:#C9CAD0}
.ch-blank b{color:var(--tx-2);font-size:16px}
.ch-conv{display:flex;flex-direction:column;min-height:0;flex:1}
.ch-conv[hidden],.ch-blank[hidden]{display:none}
.ch-head{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line)}
.ch-head .ch-av{width:38px;height:38px;font-size:14px}
.ch-head .who{min-width:0}
.ch-head .who b{font-size:15px}
.ch-head .who div{font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.on-txt{color:#16A34A;font-weight:600}
.ch-head .acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.ch-backb{display:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;flex:none;cursor:pointer}
.ch-backb svg{width:18px;height:18px}
.ch-chip{font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--tx-2);background:#fff;display:inline-flex;gap:6px;align-items:center;cursor:pointer;text-decoration:none}
.ch-chip svg{width:14px;height:14px}
.wa-tog{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--tx-2);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 9px;background:#fff;cursor:pointer;user-select:none}
.wa-tog svg{width:14px;height:14px;color:#16A34A}
.wa-tog input{display:none}
.wa-tog .sw{width:30px;height:17px;border-radius:999px;background:#D4D4D8;position:relative;flex:none;transition:background .15s}
.wa-tog .sw::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.wa-tog input:checked+.sw{background:#16A34A}
.wa-tog input:checked+.sw::after{left:15px}
.ch-pin{margin:10px 18px 0;background:#FFF7E6;border:1px solid #F7DDA8;border-radius:10px;padding:8px 12px;font-size:12.5px;color:#7A4A00;display:flex;gap:8px;align-items:flex-start}
.ch-pin[hidden]{display:none}
.ch-pin svg{width:15px;height:15px;flex:none;margin-top:1px}
.ch-body{flex:1;overflow:auto;padding:14px 18px 10px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
.ch-start{margin:auto;color:var(--tx-3);font-size:13px;text-align:center;max-width:360px}
.ch-day{align-self:center;font-size:11.5px;font-weight:700;color:var(--tx-3);background:#E9E9EC;border-radius:999px;padding:3px 10px;margin:8px 0}
.msg{max-width:min(520px,78%);padding:8px 11px 6px;border-radius:14px;font-size:14px;line-height:1.42;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.04);word-wrap:break-word;overflow-wrap:anywhere}
.msg.in{align-self:flex-start;background:#fff;border-top-left-radius:4px;color:var(--tx)}
.msg.out{align-self:flex-end;background:#16181D;color:#fff;border-top-right-radius:4px}
.msg.gone{opacity:.6;font-size:13px}
.msg .meta{display:flex;justify-content:flex-end;gap:6px;align-items:center;font-size:10.5px;opacity:.65;margin-top:3px}
.msg.out .meta{opacity:.8}
.msg .tick{font-weight:800;letter-spacing:-2px}
.msg .tick.seen{color:#60A5FA}
.msg .unsend{background:none;border:0;color:inherit;font-size:10.5px;text-decoration:underline;cursor:pointer;padding:0;opacity:.85}
.msg a.ref{font-weight:700;text-decoration:underline;text-underline-offset:2px;color:inherit}
.msg.in a.ref{color:var(--red)}
.ocard{display:flex;gap:10px;align-items:center;border-radius:10px;padding:9px 10px;margin:2px 0 4px;min-width:250px;text-decoration:none;color:inherit;flex-wrap:wrap}
.msg.in .ocard{background:#F4F4F6}.msg.out .ocard{background:rgba(255,255,255,.1)}
.ocard:hover{filter:brightness(.97)}
.ocard .ic{width:34px;height:34px;border-radius:9px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ocard .ic svg{width:18px;height:18px}
.ocard .oc-t{flex:1;min-width:0}
.ocard b{display:block;font-size:13.5px}.ocard small{display:block;font-size:12px;opacity:.75}
.att-img{display:block;margin:0 0 4px}
.att-img img{display:block;max-width:260px;max-height:240px;border-radius:9px;object-fit:cover}
.msg.pic{padding:4px 4px 4px}
.msg.pic .meta{padding:0 6px 2px}
.att{display:flex;gap:10px;align-items:center;border-radius:10px;padding:8px 10px;margin:2px 0 4px;text-decoration:none;color:inherit}
.msg.in .att{background:#F4F4F6}.msg.out .att{background:rgba(255,255,255,.1)}
.att .ic{width:34px;height:34px;border-radius:9px;background:#475569;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.att .ic svg{width:18px;height:18px}
.att b{display:block;font-size:13px}.att small{display:block;font-size:11.5px;opacity:.7}
.ch-foot{background:#F4F4F6}
.ch-quick{display:flex;gap:6px;padding:8px 18px 0;overflow-x:auto;scrollbar-width:none}
.ch-quick::-webkit-scrollbar{display:none}
.ch-quick button{white-space:nowrap;font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--tx-2);cursor:pointer;font-family:inherit}
.ch-quick button:hover{border-color:var(--tx-3);color:var(--tx)}
.ch-quick button.edit{border-style:dashed}
.ch-typ{font-size:11.5px;color:var(--tx-3);padding:2px 18px 0;min-height:16px}
.ch-staged{display:flex;gap:6px;flex-wrap:wrap;padding:4px 18px 0}
.ch-staged[hidden]{display:none}
.stg{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;font-size:12.5px;font-weight:600;max-width:100%}
.stg svg{width:14px;height:14px;flex:none;color:var(--red)}
.stg button{border:0;background:var(--line-2);border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:14px;line-height:1;color:var(--tx-2)}
.ch-input{display:flex;align-items:flex-end;gap:8px;padding:8px 18px 14px;margin:0}
.ch-input textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font-size:14px;min-height:44px;max-height:140px;line-height:1.4;background:#fff}
.ch-btn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;border:1px solid var(--line);background:#fff;color:var(--tx-2);cursor:pointer}
.ch-btn:hover{color:var(--tx);border-color:var(--tx-3)}
.ch-btn svg{width:20px;height:20px}
.ch-btn.send{background:var(--red);border-color:var(--red);color:#fff}
.ch-btn.send svg{fill:currentColor;stroke:none}
.ch-btn.send.loading{opacity:.6}
.ch-ref-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:50vh;overflow:auto}
.ch-ref-list button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:13px;cursor:pointer;color:var(--tx);font-family:inherit}
.ch-ref-list button:hover{border-color:var(--red);background:var(--red-50)}
@media(max-width:900px){
  .chat-app{grid-template-columns:minmax(0,1fr);height:calc(100vh - 63px - 64px);height:calc(100dvh - 63px - 64px - env(safe-area-inset-bottom))}
  .chat-app.is-admin .ch-pane{display:none}
  .chat-app.is-admin.show-pane .ch-list{display:none}
  .chat-app.is-admin.show-pane .ch-pane{display:flex}
  .ch-backb{display:flex}
  .ch-head{padding:8px 12px;gap:10px}
  .ch-body{padding:12px 12px 8px}
  .ch-input{padding:6px 10px 10px;gap:6px}
  .ch-quick,.ch-typ,.ch-staged{padding-left:10px;padding-right:10px}
  .ch-pin{margin:8px 12px 0}
  .msg{max-width:86%}
  .ocard{min-width:0}
  .wa-tog .lbl,#chOrders span{display:none}
  .ch-btn{width:40px;height:40px}
}

/* ---- Asaan Order ---- */
.btn-easy{background:#B91C1C;color:#fff;border:0;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:12px;padding:10px 16px;box-shadow:0 2px 6px rgba(185,28,28,.25)}
.btn-easy:hover{background:#991B1B;color:#fff}
.card-h .btn-easy{padding:8px 14px;font-size:12.5px}
.ez-result{margin-top:10px;font-size:13px;padding:8px 10px;border-radius:8px}
.ez-result.bad{background:var(--red-l);color:var(--red-d)}
@keyframes ezFlash{0%{background:#DCFCE7;box-shadow:0 0 0 3px #BBF7D0}100%{background:#fff;box-shadow:none}}
.ez-filled{animation:ezFlash 2.2s ease-out}
.ez-need{border-color:#F59E0B !important;box-shadow:0 0 0 3px #FEF3C7 !important;background:#FFFBEB}
.chat-toast{position:fixed;right:18px;bottom:18px;z-index:250;display:flex;flex-direction:column;gap:2px;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;min-width:240px;max-width:340px;box-shadow:0 10px 30px rgba(0,0,0,.25);text-decoration:none;transform:translateY(20px);opacity:0;transition:transform .25s,opacity .25s}
.chat-toast.show{transform:none;opacity:1}
.chat-toast b{font-size:14px}.chat-toast span{font-size:13px;color:#D4D4D8}.chat-toast i{font-style:normal;font-size:12px;color:#FCA5A5;font-weight:700;margin-top:4px}
.chat-toast:hover{color:#fff}
@media(max-width:900px){.chat-toast{left:12px;right:12px;bottom:78px;max-width:none}}

/* Parcel claims: incentive / return charges */
.amt-neg{color:var(--red);font-weight:700}
.amt-pos{color:var(--ok);font-weight:700}
.cl-money{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.cl-money>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.cl-money b{display:block;font-size:19px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.cl-money small{display:block;color:var(--tx-3);font-size:11.5px;margin-top:2px}
.cl-money .neg{background:var(--red-50);border-color:#F7D4D5}.cl-money .neg b{color:var(--red)}
.cl-money .pos{background:#F0FAF3;border-color:#CDEBD6}.cl-money .pos b{color:var(--ok)}
.cl-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.cl-act .spacer{flex:1}
@media (max-width:640px){.cl-money{grid-template-columns:1fr 1fr}.cl-money>div:last-child{grid-column:1/-1}}

/* Toggle switch */
.sw{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw>span{width:38px;height:22px;border-radius:22px;background:#D5D5D8;position:relative;transition:background .15s;flex:none}
.sw>span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked+span{background:var(--ok)}
.sw input:checked+span::after{transform:translateX(16px)}
.sw input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.sw-lg>span{width:56px;height:30px}.sw-lg>span::after{width:24px;height:24px}.sw-lg input:checked+span::after{transform:translateX(26px)}
.sw-lg b{font-size:15px;min-width:32px}
/* WhatsApp switches card */
.wa-sw-card{margin-bottom:16px;padding:16px 18px}
.wa-master{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.wa-master h2{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:17px}
.wa-master p{margin:0}
.wa-sw-card.off .wa-master h2{color:var(--red)}
.wa-sw-card.off .wa-master .sw b{color:var(--red)}
.wa-secs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.wa-sec{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;transition:border-color .12s,background .12s}
.wa-sec.on{border-color:#CDEBD6;background:#F6FCF8}
.wa-sw-card.off .wa-sec{opacity:.55}
.wa-sec-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wa-sec-t b{font-size:13.5px}
.wa-sec-t small{color:var(--tx-2);font-size:11.5px;line-height:1.35}
.wa-sec-t .wa-sec-n{color:var(--tx-3)}
.wa-sec-n i{font-style:normal}
@media (max-width:1100px){.wa-secs{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.wa-secs{grid-template-columns:1fr}}

/* Date range bar */
.range-bar{align-items:center;gap:10px}
.range-chips{display:inline-flex;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px}
.range-chips .rc{padding:6px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--tx-2);text-decoration:none;white-space:nowrap}
.range-chips .rc:hover{background:var(--line-2);color:var(--tx)}
.range-chips .rc.on{background:var(--ink);color:#fff}
.range-custom{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-2)}
.range-custom input{width:142px}
.range-custom.on input{border-color:var(--ink)}
.sl-filters{display:flex;flex-wrap:wrap;gap:0 14px;align-items:flex-start;justify-content:space-between}
.sl-filters .filters input[type=search]{width:220px}
.sl-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
.sl-stats .stat.warn .val{color:var(--warn,#B26A00)}
@media (max-width:1200px){.sl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.sl-stats{grid-template-columns:1fr 1fr}.range-custom input{width:128px}}
/* Sellers table */
.sl-tbl th[data-sort]{cursor:pointer;user-select:none}
.sl-tbl th[data-sort]:hover{color:var(--tx)}
.sl-tbl th.asc::after{content:" ▲";font-size:9px}.sl-tbl th.desc::after{content:" ▼";font-size:9px}
.num-lk{color:var(--tx);text-decoration:none;font-weight:600;border-bottom:1px dashed var(--tx-3);padding:0 1px}
.num-lk:hover{color:var(--red);border-bottom-color:var(--red)}
.num-lk.b{font-weight:800}
.num-lk.ok{color:var(--ok)}.num-lk.bad{color:var(--red)}.num-lk.warn{color:#B26A00}
.tbl .z{color:var(--tx-3)}
.pct{display:inline-block;min-width:44px;text-align:center;padding:2px 7px;border-radius:999px;font-weight:700;font-size:12px}
.pct.ok{background:#E8F6EC;color:var(--ok)}.pct.mid{background:#FFF4DE;color:#B26A00}.pct.bad{background:var(--red-50);color:var(--red)}
@media (max-width:640px){
  .range-bar{width:100%}
  .range-chips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .range-custom{width:100%}.range-custom input{flex:1;width:auto;min-width:0}
  .sl-filters,.sl-filters .filters{width:100%}.sl-filters .filters .field{flex:1}.sl-filters .filters input[type=search]{width:100%}
}
@media (max-width:640px){.range-bar{flex-direction:column;align-items:stretch}.range-chips{display:flex}}
@media (max-width:900px){.filters.range-bar{display:flex;flex-direction:column;align-items:stretch}.range-chips{display:flex;flex-wrap:nowrap;overflow-x:auto}.range-custom{display:flex}.range-custom input{flex:1;min-width:0;width:auto}}

/* Asaan Order: saved vs new address */
.ez-pick{margin-top:8px;border:1px solid #F7D4D5;background:var(--red-50);border-radius:12px;padding:10px}
.ez-pick-h{font-size:12.5px;font-weight:650;color:var(--red-d,#8B1A1D);margin-bottom:8px}
.ez-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ez-pick-h{grid-column:1/-1;margin:0}
.ez-opt{position:relative;display:block;cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px}
.ez-opt input{position:absolute;opacity:0;pointer-events:none}
.ez-opt b{font-size:13px}.ez-opt small{color:var(--tx-3);font-size:11px;margin-left:4px}
.ez-opt em{display:block;font-style:normal;color:var(--tx-2);font-size:12.5px;margin-top:3px;line-height:1.4}
.ez-opt.on{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
.ez-opt.on b::before{content:"● ";color:var(--red)}
@media (max-width:640px){.ez-pick{grid-template-columns:1fr}}

/* Dashboard tiles: black only for the tile under the mouse / in focus */
.dash-page .stats a.stat-link{transition:background .15s,color .15s,border-color .15s}
.dash-page .stats a.stat-link:hover,.dash-page .stats a.stat-link:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.dash-page .stats a.stat-link:hover .lbl,.dash-page .stats a.stat-link:hover .muted,.dash-page .stats a.stat-link:focus-visible .lbl{color:#B9BBC0}
.dash-page .stats a.stat-link:hover .val span,.dash-page .stats a.stat-link:hover .val small{color:#fff !important}
.dash-page .stats a.stat-link::after{content:"";position:absolute;right:-22px;bottom:-22px;width:58px;height:58px;border-radius:50%;background:var(--red);opacity:0;transition:opacity .15s}
.dash-page .stats a.stat-link:hover::after,.dash-page .stats a.stat-link:focus-visible::after{opacity:1}
/* WhatsApp button */
.btn-wa{background:#1f8f4e;color:#fff}.btn-wa:hover{background:#18763f;color:#fff}.btn-wa:disabled{opacity:.5;cursor:not-allowed}
/* Packing popup */
.pk-modal{max-width:620px}
.pk-modal .modal-h h2{display:flex;align-items:center;gap:8px}
.pk-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px}
.pk-it{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.pk-it b{display:block;font-size:22px;font-weight:800;line-height:1.1}.pk-it span{font-size:12px;color:var(--tx-2)}
.pk-it.tot{background:var(--ink);border-color:var(--ink);color:#fff}.pk-it.tot span{color:#B9BBC0}
.pk-groups{background:var(--line-2);border-radius:10px;padding:10px 12px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.pk-rec{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pk-row-set{display:grid;grid-template-columns:1fr 150px auto;gap:8px;align-items:center;margin-bottom:8px}
@media (max-width:640px){.pk-row-set{grid-template-columns:1fr 1fr}.pk-row-set .check{grid-column:1/-1}}

/* Invoices */
.inv-ed{display:grid;grid-template-columns:minmax(380px,460px) minmax(0,1fr);gap:18px;align-items:start}
.inv-form .card-b{padding-top:12px}
.inv-seg{display:flex;width:100%;margin-bottom:12px}.inv-seg label{flex:1;text-align:center}
.sec-t{font-size:10.5px;letter-spacing:.14em;color:var(--red);font-weight:700;margin:14px 0 8px;text-transform:uppercase}
.inv-it{display:grid;grid-template-columns:1fr 60px 90px 30px;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.inv-it input{padding:7px 9px;font-size:13px;min-width:0}.inv-it .inv-desc{grid-column:1/4;font-size:12px;padding:5px 9px}
.inv-opts{display:flex;flex-direction:column}
.inv-opt{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;cursor:pointer}
.inv-banks{display:flex;flex-wrap:wrap;gap:4px 14px;padding:4px 0 8px 2px}
.inv-prev-card{position:sticky;top:76px}
.inv-prev{background:#e9e9ec;padding:16px;display:flex;justify-content:center;overflow:hidden;border-radius:0 0 var(--r) var(--r);max-height:calc(100vh - 160px);overflow-y:auto}
.inv-paper{zoom:.62;box-shadow:0 8px 30px rgba(0,0,0,.15)}
@media (max-width:1200px){.inv-ed{grid-template-columns:minmax(0,1fr)}.inv-prev-card{position:static}.inv-prev{max-height:none}.inv-paper{zoom:.45}}
.co-list{display:flex;flex-direction:column}
.co-item{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-2);color:var(--tx);text-decoration:none}
.co-item.on{background:var(--red-50)}.co-item img{width:90px;height:30px;object-fit:contain}
.co-item small{display:block;color:var(--tx-3);font-size:11.5px}
.co-nologo{width:90px;height:30px;display:grid;place-items:center;background:var(--line-2);border-radius:6px;font-weight:800}
.co-logo-row{display:flex;gap:14px;align-items:center;margin-bottom:12px}.co-logo-row img{max-width:140px;max-height:44px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff}
.co-bank{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;padding:8px;border:1px solid var(--line);border-radius:10px}
.co-bank input{padding:7px 9px;font-size:13px}.co-bank .co-bank-note{grid-column:1/-1}
.inv-def td.c,.inv-def th.c{text-align:center}
/* Notifications bell (sidebar) */
.push-btn{background:none;border:0;cursor:pointer;color:inherit;position:relative}
.push-btn.on{color:#4ade80}
.push-btn.on::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#4ade80}
/* Parcel statement */
.tbl.stmt th.num,.tbl.stmt td.num{white-space:nowrap}
.tbl.stmt th.stmt-pay,.tbl.stmt td.stmt-pay{background:#FFF5F5}
.tbl.stmt tfoot td.stmt-pay{background:#FDE8E8}
@media (max-width:760px){.tbl.stmt td.stmt-pay,.tbl.stmt tfoot td.stmt-pay{background:none}}
@media (min-width:761px){.tbl.stmt th,.tbl.stmt td{padding-left:9px;padding-right:9px}.tbl.stmt td[data-l="Date"]{white-space:nowrap}.tbl.stmt th{white-space:nowrap}}
@media (max-width:760px){table.tbl.cards tfoot td::before{color:rgba(255,255,255,.65)}}
/* Invoice requests (Messages) */
.ch-tabs{display:flex;gap:4px;background:var(--line-2);border-radius:10px;padding:3px}
.ch-tabs a{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--tx-2);padding:6px 8px;border-radius:8px;text-decoration:none;white-space:nowrap}
.ch-tabs a svg{width:14px;height:14px}
.ch-tabs a.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ch-tabs a b{background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px}
.invreq-page .ch-tabs{max-width:420px}
.invreq-page .ch-filt{flex-wrap:wrap;align-self:flex-end}
.ch-cnt{background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:0 6px}
.ocard.inv .ic{background:#2563EB}
.oc-acts{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.oc-btn{font:600 12.5px/1 inherit;font-family:inherit;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--tx);cursor:pointer;text-decoration:none}
.oc-btn.p{background:var(--red);border-color:var(--red);color:#fff}
.msg.out .oc-btn:not(.p){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.ch-ref-list .rq{float:right;font-size:11.5px;font-weight:700;color:#2563EB;border:1px solid #BFD3FB;border-radius:999px;padding:2px 8px;margin-left:6px;background:#F3F7FF}
.ch-ref-list .rq:hover{background:#2563EB;color:#fff}
.stg.inv svg{color:#2563EB}
.inv-to{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.inv-to-h{font-weight:700;font-size:13px}
.inv-to .seg{align-self:flex-start;flex-wrap:wrap}
.disc-box{background:var(--line-2);border-radius:8px;padding:12px;margin-bottom:12px}
/* Notifications (bell at the top) */
.ntf-btn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx);flex:none;margin-left:8px}
.ntf-btn svg{width:19px;height:19px}
.ntf-btn:hover{border-color:var(--ink)}
.ntf-n{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.ntf-n[hidden]{display:none}
.ntf-panel{position:fixed;top:64px;right:16px;width:380px;max-width:calc(100vw - 20px);max-height:min(560px,calc(100vh - 90px));background:#fff;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);z-index:900;display:flex;flex-direction:column;overflow:hidden}
.ntf-panel[hidden]{display:none}
.ntf-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line-2);gap:8px}
.ntf-tabs{display:flex;gap:4px;background:var(--line-2);border-radius:9px;padding:3px}
.ntf-tabs button{border:0;background:none;font:600 12.5px inherit;font-family:inherit;padding:6px 11px;border-radius:7px;color:var(--tx-2);cursor:pointer}
.ntf-tabs button.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ntf-all{border:0;background:none;color:var(--red);font:600 12px inherit;font-family:inherit;cursor:pointer}
.ntf-all[hidden]{display:none}
.ntf-body{overflow:auto;flex:1}
.ntf-it{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2);color:var(--tx);text-decoration:none;align-items:flex-start}
.ntf-it:hover{background:#FAFAFB}
.ntf-it.un{background:#FFF7F7}
.ntf-ic{width:30px;height:30px;border-radius:9px;background:#EEF4FF;flex:none;position:relative}
.ntf-ic:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#2563EB}
.ntf-ic.reminder{background:#FFF3EA}.ntf-ic.reminder:after{background:#EA580C}
.ntf-it.un .ntf-ic{box-shadow:0 0 0 2px var(--red)}
.ntf-ic.call{background:#FFF3EA}.ntf-ic.call:after{inset:7px;border-radius:0;background:#EA580C;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l1.5 4-2 1.3a11 11 0 0 0 5.2 5.2l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M15 3.5a6 6 0 0 1 5.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l1.5 4-2 1.3a11 11 0 0 0 5.2 5.2l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M15 3.5a6 6 0 0 1 5.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ntf-tx{flex:1;min-width:0}.ntf-tx b{display:block;font-size:13px}.ntf-tx small{display:block;font-size:12px;color:var(--tx-2);margin-top:2px}
.ntf-it time{font-size:11px;color:var(--tx-2);white-space:nowrap}
.ntf-rem{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.ntf-rem a{flex:1;min-width:0;color:var(--tx);text-decoration:none;font-size:13px}.ntf-rem a b{color:var(--red)}.ntf-rem small{display:block;color:var(--tx-2);font-size:12px;margin-top:2px}
.ntf-x{border:0;background:var(--line-2);width:24px;height:24px;border-radius:7px;cursor:pointer;font-size:15px;line-height:1;color:var(--tx-2)}
.ntf-empty{padding:28px 16px;text-align:center;color:var(--tx-2);font-size:13px}
.ntf-f{padding:9px 14px;font-size:11.5px;color:var(--tx-2);border-top:1px solid var(--line-2);background:#FAFAFB}
.ntf-f svg{width:12px;height:12px;vertical-align:-2px}
@media (max-width:760px){.ntf-panel{top:58px;right:10px;left:10px;width:auto}.ntf-btn{width:36px;height:36px;margin-left:4px}}
/* Reminders on the order page */
.rem-card .card-h svg{width:16px;height:16px;vertical-align:-3px}
.rem-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-2)}
.rem-row:last-child{border-bottom:0}
.rem-t{flex:1;min-width:0;font-size:13px}
.rem-seg{margin-bottom:12px;flex-wrap:wrap}
.rem-wa{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:6px}
.rem-wa .lbl-t svg{width:14px;height:14px;vertical-align:-2px;color:#16A34A}
.rem-wa-list{display:flex;flex-direction:column;gap:5px}
/* Watch list */
.wl-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.wl-act{display:block;cursor:pointer}
.wl-act input{display:none}
.wl-act span{display:block;border:1px solid var(--line);border-radius:10px;padding:9px 11px;height:100%}
.wl-act b{display:block;font-size:13px}.wl-act small{display:block;font-size:11.5px;color:var(--tx-2);margin-top:2px}
.wl-act.on span{border-color:var(--red);background:var(--red-50);box-shadow:0 0 0 1px var(--red)}
/* Messages: Chats / Invoice requests switch (clear active and inactive tabs) */
.ch-tabs{background:#fff;border:1px solid var(--line);padding:3px;gap:3px}
.ch-tabs a{color:var(--tx);background:#fff}
.ch-tabs a:hover{background:var(--line-2)}
.ch-tabs a.on{background:var(--ink);color:#fff;box-shadow:none}
.ch-tabs a.on b{background:#fff;color:var(--red)}
@media (max-width:760px){
  .invreq-page .ch-tabs{max-width:none}
  .invreq-page .ir-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;margin-left:-2px;margin-right:-16px;padding-right:16px}
  .invreq-page .ir-chips .btn{flex:none}
}

.invreq-page .ir-chips{display:flex;gap:6px;margin:12px 0 10px;flex-wrap:wrap}
@media (max-width:760px){.invreq-page .filters .field{flex:1 1 100%;min-width:0}}
/* Help (? next to the bell) */
.help-btn{margin-left:6px}
.help-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:#fff;z-index:950;box-shadow:-16px 0 48px rgba(0,0,0,.16);display:flex;flex-direction:column}
.help-panel[hidden]{display:none}
.help-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.help-h b{font-size:18px}
.help-s{display:flex;align-items:center;gap:8px;margin:0 16px 10px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}
.help-s svg{width:16px;height:16px;color:var(--tx-2)}
.help-s input{border:0;outline:0;flex:1;padding:11px 0;font:inherit;font-size:14px;background:none;box-shadow:none}
.help-s:focus-within{border-color:var(--ink)}
.help-body{flex:1;overflow:auto;padding:0 10px 10px}
.help-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);padding:12px 8px 5px}
.help-it{border-radius:10px}
.help-it.open{background:#FAFAFB}
.help-t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:none;text-align:left;padding:9px 8px;font:600 13.5px inherit;font-family:inherit;color:var(--tx);cursor:pointer;border-radius:8px}
.help-t:hover{background:var(--line-2)}
.help-t i{width:8px;height:8px;border-right:2px solid var(--tx-2);border-bottom:2px solid var(--tx-2);transform:rotate(45deg);flex:none;margin-top:-3px;transition:transform .15s}
.help-it.open .help-t i{transform:rotate(225deg);margin-top:3px}
.help-d{display:none;padding:0 8px 10px}
.help-it.open .help-d{display:block}
.help-d p{margin:0 0 8px;font-size:13px;line-height:1.5;color:#3B3D44}
.help-d .btn svg{width:13px;height:13px;margin-left:2px}
.help-f{padding:9px 16px;font-size:11.5px;color:var(--tx-2);border-top:1px solid var(--line-2);background:#FAFAFB}
@media (max-width:760px){.help-panel{width:100vw}}
.sync-chip{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:800;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:10px 16px;font:600 13px inherit;font-family:inherit;display:flex;gap:8px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
.sync-chip svg{width:16px;height:16px}
@media (max-width:760px){.sync-chip{bottom:76px}}
/* "@" picker for WhatsApp numbers */
.mention-box{position:fixed;z-index:1200;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);padding:4px;max-width:calc(100vw - 16px)}
.mention-box[hidden]{display:none}
.mention-box .mi{padding:7px 10px;border-radius:7px;cursor:pointer;display:flex;flex-direction:column}
.mention-box .mi b{font-size:13px}.mention-box .mi span{font-size:11.5px;color:var(--tx-2)}
.mention-box .mi.on,.mention-box .mi:hover{background:var(--red-50)}
.mention-box .mi-empty{padding:10px;font-size:12px;color:var(--tx-2)}
/* Global search (bar at the top) */
.gs-trigger{display:flex;align-items:center;gap:10px;min-width:300px;max-width:420px;flex:0 1 380px;height:38px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:10px;background:#F7F7F8;color:var(--tx-2);font:500 13px inherit;font-family:inherit;cursor:pointer;margin-left:10px;transition:border-color .15s,background .15s}
.gs-trigger:hover{border-color:var(--ink);background:#fff}
.gs-trigger svg{width:17px;height:17px;flex:none}
.gs-trigger .gs-ph{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-trigger kbd,.gs-foot kbd{font:600 11px ui-monospace,monospace;background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--tx-2)}
@media (max-width:1100px){.gs-trigger{min-width:200px}}
@media (max-width:760px){.gs-trigger{min-width:0;flex:none;width:36px;height:36px;padding:0;justify-content:center;margin-left:4px;background:#fff}.gs-trigger .gs-ph,.gs-trigger kbd{display:none}}
.gs{position:fixed;inset:0;z-index:1100;background:rgba(17,18,20,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px}
.gs[hidden]{display:none}
.gs-box{width:min(1100px,100%);height:min(720px,86vh);background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden;animation:gsIn .14s ease-out}
@keyframes gsIn{from{transform:translateY(-8px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.gs-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.gs-top svg{width:22px;height:22px;color:var(--red);flex:none}
.gs-top input{flex:1;border:0;outline:0;font:500 18px inherit;font-family:inherit;background:none;box-shadow:none;padding:6px 0;color:var(--tx)}
.gs-x{border:1px solid var(--line);background:#fff;border-radius:7px;font:600 11px inherit;font-family:inherit;padding:4px 8px;color:var(--tx-2);cursor:pointer}
.gs-main{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:0}
.gs-list{overflow:auto;padding:8px;border-right:1px solid var(--line-2);transition:opacity .15s}
.gs-list.busy{opacity:.55}
.gs-detail{overflow:auto;padding:18px 20px;background:#FAFAFB}
.gs-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2);padding:10px 10px 6px}
.gs-it{width:100%;display:flex;gap:11px;align-items:center;text-align:left;border:0;background:none;padding:10px;border-radius:11px;cursor:pointer;font-family:inherit;color:var(--tx)}
.gs-it:hover{background:#F5F5F6}
.gs-it.on{background:var(--red-50);box-shadow:inset 0 0 0 1px #F4CACB}
.gs-av{width:38px;height:38px;border-radius:12px;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.gs-av.lg{width:54px;height:54px;border-radius:16px;font-size:18px}
.gs-pk{background:var(--ink)}.gs-pk svg{width:18px;height:18px}
.gs-tx{flex:1;min-width:0}
.gs-tx b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-tx small{display:block;font-size:12px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-tx .gs-ad{color:#8A8D95}
.gs-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;max-width:42%}
.gs-r .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-r em,.gs-pr em{font-style:normal;font-size:11.5px;color:var(--tx-2);white-space:nowrap}
.gs-n{font-size:11.5px;font-weight:600;color:var(--tx-2)}
.gs mark{background:#FFE8A3;color:inherit;border-radius:3px;padding:0 1px}
.gs-hint{padding:40px 24px;text-align:center;color:var(--tx-2);font-size:13px;display:flex;flex-direction:column;gap:6px}
.gs-hint b{color:var(--tx);font-size:15px}.gs-hint i{font-style:normal;background:var(--line-2);border-radius:5px;padding:0 5px}
.gs-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--tx-2);font-size:13px}
.gs-back{display:none}
.gs-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.gs-hd h3{margin:0;font-size:20px}
.gs-ph{font-size:13px;color:var(--tx-2);margin-top:2px}
.gs-aka{font-size:11.5px;color:#8A8D95;margin-top:2px}
.gs-kpi{display:grid;grid-template-columns:repeat(4,1fr) 1.6fr;gap:8px;margin-bottom:12px}
.gs-kpi div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.gs-kpi b{display:block;font-size:18px}.gs-kpi span{font-size:11px;color:var(--tx-2)}
.gs-kpi .ok b{color:var(--ok)}.gs-kpi .bad{border-color:#F4CACB;background:var(--red-50)}.gs-kpi .bad b{color:var(--red)}
.gs-kpi .wide b{font-size:15px}
.gs-watch{background:#FFF6E5;border:1px solid #F7D9A6;color:#8A4B00;border-radius:10px;padding:8px 11px;font-size:12.5px;margin-bottom:12px}
.gs-acts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.gs-acts .btn svg{width:15px;height:15px}
.gs-sub{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:4px 0 8px}
.gs-addrs{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.gs-addr{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.gs-addr>div{flex:1;min-width:0;font-size:13px}.gs-addr p{margin:3px 0 0;color:#3B3D44;font-size:12.5px;line-height:1.4}
.gs-parcels{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gs-pr{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2);color:var(--tx);text-decoration:none;font-size:13px}
.gs-pr:last-child{border-bottom:0}.gs-pr:hover{background:#FAFAFB}
.gs-pr em{min-width:72px;text-align:right}
.gs-pd{width:78px;flex:none;font-size:12px;color:var(--tx-2)}
.gs-pt{flex:1;min-width:0}.gs-pt b{display:block;font-size:13px}.gs-pt small{display:block;font-size:11.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-foot{display:flex;gap:16px;align-items:center;padding:9px 18px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--tx-2);background:#fff}
.gs-foot span{display:flex;gap:4px;align-items:center}.gs-count{margin-left:auto;font-weight:600}
body.gs-on{overflow:hidden}
@media (max-width:760px){
  .gs{padding:0}
  .gs-box{height:100%;width:100%;border-radius:0}
  .gs-main{grid-template-columns:1fr}
  .gs-detail{display:none;padding:12px 14px}
  .gs.show-detail .gs-list{display:none}.gs.show-detail .gs-detail{display:block}
  .gs-back{display:inline-block;border:0;background:none;color:var(--red);font:700 13px inherit;font-family:inherit;padding:0 0 10px;cursor:pointer}
  .gs-kpi{grid-template-columns:repeat(4,1fr)}.gs-kpi .wide{grid-column:1/-1}
  .gs-foot{display:none}
  .gs-top input{font-size:16px}
}
@media (max-width:760px){.gs-pr{flex-wrap:wrap;row-gap:4px}.gs-pd{width:100%;order:-1}.gs-pt{flex:1 1 40%}}

/* ---------------- Mobile order card (Orders lists, compact view) ---------------- */
.oc-cell{display:none}
.tag-ok{background:var(--ok-l);color:var(--ok)}
@media (max-width: 900px){
  .cards-wrap.m-min table.tbl.cards tbody tr:not(.grp-row) > td{display:none}
  .cards-wrap.m-min table.tbl.cards tbody tr td.oc-cell{display:block;padding:0;text-align:left;min-height:0}
  .cards-wrap.m-min table.tbl.cards tbody tr:not(.grp-row){padding:0}
  .cards-wrap.m-min table.tbl.cards tbody tr.open td.oc-cell{border-bottom:1px solid var(--line-2);margin-bottom:4px}
  .oc{padding:10px 12px 9px;display:flex;flex-direction:column;gap:6px}
  .oc-r1{display:flex;align-items:center;gap:6px;min-width:0}
  .oc-ref{color:var(--red);font-weight:800;font-size:15px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
  .oc .tag{font-size:9.5px;padding:2px 5px}
  .oc .flag{font-size:9.5px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
  .oc .flag svg{width:10px;height:10px}
  .oc-amt{margin-left:auto;text-align:right;line-height:1.1;flex:none}
  .oc-amt b{display:block;font-weight:800;font-size:16px}
  .oc-amt small{font-size:10px;font-weight:600;color:var(--tx-3)}
  .oc-amt small.neg{color:var(--red)}
  .oc-r2{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}
  .oc-nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:60px;flex:0 1 auto}
  .oc-city{font-weight:800;font-size:12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px;flex:0 4 auto}
  .oc-dot{color:var(--tx-3)}
  .oc-acts{margin-left:auto;display:flex;gap:6px;flex:none}
  .oc-ib{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--tx-2);background:#fff;padding:0;cursor:pointer}
  .oc-ib svg{width:15px;height:15px}
  .oc .m-tog{position:static;width:30px;height:30px;background:#fff;border:1px solid var(--line)}
  .oc-r3{display:flex;align-items:center;gap:8px;min-width:0}
  .oc-r3 .badge{overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:72%;font-size:11px;flex:0 1 auto}
  .oc-ago{margin-left:auto;font-size:10.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .oc-pg{--c:var(--info)}
  .oc-pg.t-warn{--c:#F59E0B} .oc-pg.t-bad{--c:var(--red)} .oc-pg.t-ok{--c:var(--ok)} .oc-pg.t-mute{--c:var(--tx-3)}
  .oc-bars{display:flex;gap:3px;align-items:center}
  .oc-bars i{flex:1;height:5px;border-radius:3px;background:#E9E9EC}
  .oc-bars i.d{background:var(--c)}
  .oc-bars i.cur{background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--c)}
  .oc-att{flex:1;display:flex;gap:2px}
  .oc-att i{flex:1}
  .oc-lb{display:flex;justify-content:space-between;font-size:8.5px;color:var(--tx-3);margin-top:2px;letter-spacing:.02em}
  .oc-lb b{color:var(--tx-2)}
  .oc-ft{font-size:10.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:5px}
  .oc-ft .mono{font-size:10.5px;color:var(--tx-2)}
  .oc-ft b{color:var(--tx-2);font-weight:600;overflow:hidden;text-overflow:ellipsis}
  /* wider cards: the order cards sit on the page, not inside another card */
  .content:has(.cards-wrap){padding-left:10px;padding-right:10px}
  .card:has(> .card-b > .cards-wrap),.card:has(> .cards-wrap){background:none;border:0;box-shadow:none}
  .card-b:has(> .cards-wrap){padding:0}
  .cards-wrap table.tbl.cards tr{padding:4px 2px}
  /* status never runs out of the card */
  .oc-r3{flex-wrap:wrap;row-gap:4px}
  .oc-r3 .badge{max-width:100%}
  table.tbl.cards td .badge{white-space:normal;text-align:left;max-width:100%;line-height:1.25}
  .cards-wrap table.tbl.cards td{padding-left:96px}
  .cards-wrap table.tbl.cards td[data-l=""]{padding-left:12px}
  .cards-wrap table.tbl.cards td.oc-cell{padding:0;text-align:left}
  /* Full view: no repeat of what the card head already shows */
  .cards-wrap:not(.m-min) table.tbl.cards td[data-l="#"],.cards-wrap:not(.m-min) table.tbl.cards td[data-l="Total amount"],.cards-wrap:not(.m-min) table.tbl.cards td[data-l="Amount"],.cards-wrap:not(.m-min) table.tbl.cards td[data-l="Incentive"]{display:none}
}

/* Order page: activity / WhatsApp log under the payment details (wide screens) or at the bottom (phones) */
.od-desk .grid.g2{gap:16px}
.od-mob{display:none}
@media (max-width: 900px){ .od-desk{display:none} .od-mob{display:block} }
/* Order menu (long press / right click) + Intimate via WhatsApp */
.ctx-scrim{position:fixed;inset:0;z-index:95}
.ctx-scrim.dim{background:rgba(17,18,20,.35)}
.ctx-menu{position:fixed;z-index:96;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18),0 0 0 1px var(--line);min-width:250px;max-width:320px;padding:6px;animation:ctxIn .12s ease-out}
.ctx-menu.sheet{left:0;right:0;bottom:0;top:auto;max-width:none;border-radius:16px 16px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));animation:ctxUp .16s ease-out}
.ctx-grab{width:38px;height:4px;border-radius:4px;background:#D5D6DA;margin:2px auto 8px}
.ctx-h{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3);padding:6px 10px 6px}
.ctx-it{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:none;border-radius:9px;padding:10px;cursor:pointer;font:inherit;color:var(--tx)}
.ctx-it:hover:not(:disabled){background:var(--bg)}
.ctx-it:disabled{opacity:.5;cursor:not-allowed}
.ctx-it b{display:block;font-size:14px;font-weight:600}
.ctx-it small{display:block;font-size:12px;color:var(--tx-3);margin-top:1px}
.ctx-ic{width:34px;height:34px;border-radius:10px;background:#E7F6EE;display:grid;place-items:center;font-size:17px;flex:none}
tr.ctx-on>td{background:#F3FBF6!important}
@media (hover:none){tr[data-ctx]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
@keyframes ctxIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes ctxUp{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.oi-box{max-width:820px}
.oi-head{font-size:13px;padding:10px 12px;background:var(--bg);border-radius:10px;margin-bottom:14px}
.oi-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.oi-list{border:1px solid var(--line);border-radius:10px;max-height:190px;overflow:auto;margin-top:6px}
.oi-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:13px}
.oi-row:last-child{border-bottom:0}
.oi-row input{width:16px;height:16px;accent-color:var(--ok);flex:none}
.oi-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.oi-row.on{background:#F3FBF6}
.oi-prev .wa{background:#ECE5DD;border-radius:12px;padding:10px;margin-top:6px}
.oi-prev .bub{background:#DCF8C6;border-radius:8px 0 8px 8px;padding:5px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.oi-prev .bub img{width:100%;border-radius:6px;display:block}
.oi-prev .cap{white-space:pre-wrap;font-size:12.5px;line-height:1.45;padding:6px 4px 2px;color:#111}
.oi-ql{margin:12px 0 6px}
.oi-chips{display:flex;flex-wrap:wrap;gap:6px}
.oi-chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--tx);cursor:pointer;line-height:1.2}
.oi-chip:hover{border-color:var(--tx-2)}
.oi-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.oi-seg{display:flex;width:100%}.oi-seg label{flex:1;text-align:center}
.oi-seg label:has(input:disabled){opacity:.45;cursor:not-allowed}
.oi-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
@media (max-width:760px){.oi-grid{grid-template-columns:1fr}}

/* ---------------- Smart search: recent, chips, parcel list, "?" guide ---------------- */
.gs-help{width:18px;height:18px;border-radius:50%;border:0;background:var(--red);color:#fff;font:800 10.5px var(--f);display:grid;place-items:center;cursor:pointer;flex:none;padding:0;line-height:1}
.gs-help:hover{background:var(--red-d)}
.gs-help.on{background:var(--red-d);box-shadow:0 0 0 2px var(--red-l)}
.gs-q-ic{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;cursor:pointer;vertical-align:1px}
.gs-under{padding:8px 18px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px;background:#FCFCFC}
.gs-row{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.gs-row::-webkit-scrollbar{display:none}
.gs-row[hidden]{display:none}
.gs-lab{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);width:72px;flex:none}
.gs-rc{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--f);color:var(--tx-2);padding:4px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);white-space:nowrap;cursor:pointer;flex:none}
.gs-rc:hover{border-color:var(--ink);color:var(--tx)}
.gs-rc svg{width:13px;height:13px;color:var(--tx-3)}
.gs-ch{display:inline-flex;align-items:center;gap:6px;font:650 12.5px var(--f);padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--tx);white-space:nowrap;cursor:pointer;flex:none}
.gs-ch:hover{border-color:var(--ink)}
.gs-ch i{font-style:normal;font-size:13px}
.gs-ch .x{font-weight:700;opacity:.55;margin-left:2px}
.gs-ch.k-amt{background:#FFF6E5;border-color:#F7D9A6;color:#8A4B00}
.gs-ch.k-city{background:var(--info-l);border-color:#C9D7FA;color:var(--info)}
.gs-ch.k-days,.gs-ch.k-st{background:var(--red-50);border-color:#F4CACB;color:var(--red)}
.gs-ch.k-date{background:#F3F0FF;border-color:#DCD3FB;color:#5B3CC4}
.gs-ch.k-seller,.gs-ch.k-acc,.gs-ch.k-id{background:var(--ok-l);border-color:#BFE6CF;color:var(--ok)}
.gs-ch.k-sort,.gs-ch.k-not{background:var(--mute-l);color:var(--tx-2)}
.gs-und{font-size:11.5px;color:var(--tx-3);flex:none}
.gs.gs-pmode .gs-main{grid-template-columns:1fr}
.gs.gs-pmode .gs-detail{display:none}
.gs.gs-pmode .gs-list{border-right:0}
.gs.gs-guide .gs-main,.gs.gs-guide .gs-under{display:none}
.gs-sum{display:flex;gap:8px;padding:6px 6px 10px;flex-wrap:wrap}
.gs-sum div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:12px;color:var(--tx-2)}
.gs-sum b{display:block;font-size:16px;color:var(--tx)}
.gs-sum .bad{border-color:#F4CACB;background:var(--red-50)}.gs-sum .bad b{color:var(--red)}
.px-head,.gs-it.px-row{display:grid;grid-template-columns:120px minmax(0,1fr) 96px 74px minmax(150px,220px);gap:10px;align-items:center}
.px-head{padding:4px 10px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.px-head .r{text-align:right}.px-head .c{text-align:center}
.gs-it.px-row{font-size:13px}
.px-row b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-row small{display:block;font-size:11.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-p,.px-c{min-width:0}
.px-amt{text-align:right;font-weight:700;white-space:nowrap}
.px-days{font-weight:800;font-size:12.5px;text-align:center;border-radius:8px;padding:4px 0;white-space:nowrap}
.d-hi{background:var(--red-l);color:var(--red)}.d-mid{background:#FFF6E5;color:#8A4B00}.d-lo{background:var(--mute-l);color:var(--tx-2)}.d-no{color:var(--tx-3)}
.px-s{min-width:0}.px-s .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gd{flex:1;overflow:auto;padding:16px 20px 20px;background:#FAFAFB}
.gd[hidden]{display:none}
.gd-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.gd-top h3{font-size:16px;margin:0}
.gd-top>span{font-size:12px;color:var(--tx-2)}
.gd-tip{margin-left:auto;display:inline-flex;gap:6px;align-items:center;background:var(--red-50);border:1px solid #F4CACB;color:var(--red)!important;border-radius:8px;padding:4px 10px;font-weight:600}
.gd-tip svg{width:13px;height:13px}
.gd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gd-c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.gd-c h4{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);display:flex;gap:6px;align-items:center}
.gd-c h4 i{font-style:normal;font-size:14px}
.gd-combo{grid-column:1/-1}
.gd-combo .gd-cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.gd-r{display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;padding:5px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px}
.gd-r:last-child{border-bottom:0}
.gd-r>span{color:var(--tx-2);flex:1 1 140px}
.gd-k{display:inline-flex;align-items:center;gap:6px;font:600 12px ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--line-2);border:1px solid transparent;border-radius:6px;padding:2px 4px 2px 7px;color:var(--tx);cursor:pointer;white-space:nowrap}
.gd-k:hover{background:#fff;border-color:var(--red);color:var(--red)}
.gd-cp{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;color:var(--tx-3)}
.gd-cp:hover{background:var(--red-l);color:var(--red)}
.gd-cp svg{width:12px;height:12px}
.gd-k.done{background:var(--ok-l);border-color:#BFE6CF;color:var(--ok)}
.gd-note{font-size:11.5px;color:var(--tx-3);margin-top:12px}
.gs-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);background:var(--ink);color:#fff;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.15s;z-index:3}
.gs-toast.on{opacity:1;transform:translate(-50%,0)}
.gs-box{position:relative}
@media (max-width:900px){.gd-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .gs-under{padding:8px 12px}
  .gs-lab{width:auto;margin-right:2px}
  .gd{padding:12px}.gd-grid{grid-template-columns:1fr}.gd-combo .gd-cg{grid-template-columns:1fr}.gd-tip{margin-left:0}
  .px-head{display:none}
  .gs-it.px-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p amt" "c c" "s d";row-gap:4px;border-bottom:1px solid var(--line-2);border-radius:0}
  .px-p{grid-area:p}.px-c{grid-area:c}.px-amt{grid-area:amt}.px-s{grid-area:s}.px-days{grid-area:d;padding:3px 8px}
  .px-p b{display:inline}.px-p small{display:inline;margin-left:6px}
}
/* Invoice: choose saved customer details */
.ic-list{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.ic-it{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--tx)}
.ic-it:hover{border-color:var(--red);background:var(--red-50)}
.ic-tx{flex:1;min-width:0;font-size:13px}
.ic-tx small{display:block;color:#3B3D44;font-size:12.5px;margin-top:2px;line-height:1.4}
.ic-tx em{display:block;font-style:normal;font-size:11.5px;color:var(--tx-3);margin-top:2px}
/* Airway bills: ready / share / saved */
.awb-done{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #BFE6CF;background:var(--ok-l);border-radius:12px}
.awb-pdf{width:40px;height:40px;border-radius:10px;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.awb-pdf .ic{width:20px;height:20px}
.awb-ppl{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.awb-ph,.awb-pr{display:grid;grid-template-columns:minmax(0,1fr) 90px 120px;gap:8px;align-items:center;padding:8px 12px}
.awb-ph{background:var(--bg);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3)}
.awb-ph span:not(:first-child),.awb-pr label{text-align:center}
.awb-pr{border-top:1px solid var(--line-2);font-size:13px}
.awb-pr input{width:18px;height:18px;accent-color:var(--ok)}
@media (max-width:560px){.awb-ph,.awb-pr{grid-template-columns:minmax(0,1fr) 64px 70px}}
.awb-today{align-self:flex-end;height:41px;padding:0 18px;box-sizing:border-box}
/* Asaan Order: choose saved / AI / message details */
.ez-ph{margin-top:10px;font-size:13px;font-weight:650;padding:8px 12px;border-radius:10px;background:var(--bg);color:var(--tx-2);border:1px solid var(--line)}
.ez-ph.ok{background:var(--ok-l);border-color:#BFE6CF;color:var(--ok)}
.ez-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin:12px 0 6px}
.ez-opts{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.ez-op{display:block;position:relative;cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:9px 12px 9px 36px;font-size:13px}
.ez-op input{position:absolute;left:12px;top:12px;width:16px;height:16px;accent-color:var(--red);margin:0}
.ez-op.on{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
.ez-op em{display:block;font-style:normal;color:#3B3D44;font-size:12.5px;margin-top:3px;line-height:1.4}
.ez-tg{font-size:10px;font-weight:800;border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1px;white-space:nowrap}
.ez-tg.sv{background:var(--ok-l);color:var(--ok)}.ez-tg.ai{background:#EDE9FE;color:#5B3CC4}.ez-tg.lc{background:var(--mute-l);color:var(--tx-2)}
.ez-nc{color:#B45309;font-weight:650}
.ez-mask{margin-top:10px;background:#F8F6FF;border:1px dashed #C9BEF5;border-radius:8px;padding:7px 10px;font-size:11.5px;color:#3B3D44}
.ez-mask b{color:#5B3CC4}
.ez-ai{border-color:#A78BFA !important;box-shadow:0 0 0 3px #EDE9FE !important}
/* Incentive change remarks */
.inc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.inc-chip{font:600 12.5px var(--f);border:1px solid var(--line);border-radius:20px;padding:5px 11px;background:#fff;color:var(--tx);cursor:pointer}
.inc-chip:hover{border-color:var(--ink)}
.inc-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.inc-remark{background:#FFF6E5;border:1px solid #F7D9A6;color:#8A4B00;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500}
.inc-lost{color:var(--tx-3);white-space:nowrap}.inc-lost s{margin-right:4px}
/* Asaan Order: AI switch + working spinner */
.ez-aitg{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-size:13px;font-weight:650;color:var(--tx-2);cursor:pointer;user-select:none}
.ez-aitg input{position:absolute;opacity:0;pointer-events:none}
.ez-aitg span{width:34px;height:20px;border-radius:20px;background:#D5D6DA;position:relative;transition:.15s;flex:none}
.ez-aitg span:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.15s}
.ez-aitg input:checked+span{background:#7C3AED}
.ez-aitg input:checked+span:after{left:16px}
.ez-busy{display:flex;align-items:center;gap:10px;background:#F8F6FF;border:1px solid #DCD3FB;color:#5B3CC4;font-weight:600}
.ez-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #DCD3FB;border-top-color:#7C3AED;animation:ezSpin .8s linear infinite;flex:none}
@keyframes ezSpin{to{transform:rotate(360deg)}}

/* ---------- Stock & Parties ---------- */
.stk-tabs{margin-bottom:10px}
.tabs-sub .tab{padding:5px 11px;font-size:12.5px;background:transparent}
.tabs-sub .tab.on{background:var(--red-l);border-color:var(--red-l);color:var(--red)}
.stk-hi td{background:var(--ok-l)}
.stk-help{background:var(--info-l);border:1px solid #D6E1FB;border-radius:var(--r);margin:0 0 14px;font-size:13px}
.stk-help summary{display:flex;gap:8px;align-items:center;padding:9px 12px;cursor:pointer;font-weight:600;color:var(--info);list-style:none}
.stk-help summary::-webkit-details-marker{display:none}
.stk-help summary .ic{width:16px;height:16px}
.stk-help-b{padding:0 14px 10px 36px;color:var(--tx)}
.stk-help-b p,.stk-help-b ul,.stk-help-b ol{margin:4px 0 8px}
.stk-help-b li{margin:3px 0}
.stk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.stk-tile{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;color:var(--tx);box-shadow:var(--sh);transition:border-color .15s,transform .15s}
.stk-tile:hover{border-color:var(--red);color:var(--tx);transform:translateY(-1px)}
.stk-tile b{font-size:15px}
.stk-tile span:last-child{font-size:12px;color:var(--tx-2)}
.stk-ti{width:36px;height:36px;border-radius:10px;background:var(--red-l);color:var(--red);display:grid;place-items:center;margin-bottom:4px}
.stk-form{max-width:860px}
.stk-head{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.stk-head .btn .ic{transform:rotate(180deg)}
.stk-step{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--sh)}
.stk-step.done{border-color:#BFE3CF}
.stk-sn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.stk-sn .ic{display:none;width:16px;height:16px}
.stk-step.done .stk-sn,.stk-ws.done .stk-sn{background:var(--ok)}
.stk-step.done .stk-sn span,.stk-ws.done .stk-sn span{display:none}
.stk-step.done .stk-sn .ic,.stk-ws.done .stk-sn .ic{display:block}
.stk-sb{flex:1;min-width:0}
.stk-sb h3{margin:3px 0 2px}
.stk-sh{font-size:12.5px;color:var(--tx-2);margin:0 0 10px}
.stk-g{gap:0 12px}
.stk-g .field{margin-bottom:8px}

.stk-new{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;margin-top:8px}
.stk-lines{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.stk-lh,.stk-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1.4fr) minmax(0,1fr) 30px;gap:8px;align-items:center}
.stk-lines:has(.stk-from) .stk-lh,.stk-lines:has(.stk-from) .stk-row{grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1.4fr) 30px}
.stk-lines:not(:has(.stk-r)):not(:has(.stk-from)) .stk-lh,.stk-lines:not(:has(.stk-r)):not(:has(.stk-from)) .stk-row{grid-template-columns:minmax(0,2.6fr) minmax(0,1.4fr) 30px}
.stk-lh{background:var(--line-2);padding:6px 10px;font-size:11.5px;font-weight:600;color:var(--tx-2)}
.stk-row{padding:8px 10px;border-top:1px solid var(--line)}
.stk-lines.nofrom .stk-from{display:none}.stk-lines.nofrom .stk-lh,.stk-lines.nofrom .stk-row{grid-template-columns:minmax(0,2.6fr) minmax(0,1.4fr) 30px}.stk-lines.nofrom .stk-lh span:nth-child(3){display:none}
.jw-src{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 12px}
.jw-src label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--card);margin:0}
.jw-src label.on{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx) inset}.jw-src label.dis{opacity:.5;cursor:default}
.jw-src input{margin-top:3px;accent-color:var(--tx)}.jw-src b{display:block;font-size:13.5px}.jw-src small{display:block;color:var(--tx-2);font-size:11.5px;margin-top:2px}
.jw-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.jw-row{display:grid;grid-template-columns:24px minmax(0,1fr) 150px 120px;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--line);background:var(--card)}
.jw-row:first-child{border-top:0}.jw-row.off .nm,.jw-row.off .jw-have{opacity:.5}
.jw-row .nm b{font-size:13.5px}.jw-row .nm small{display:block;color:var(--tx-2);font-size:11.5px}
.jw-q{display:flex;align-items:center;gap:6px}.jw-q input{width:100%;height:36px;margin:0}.jw-q span{font-size:12.5px;color:var(--tx-2)}
.jw-have{font-size:11.5px;color:var(--tx-2);text-align:right}
.jw-ok{font-size:12px;color:var(--ok);margin-top:8px}.jw-ok.neg{color:var(--red)}
.jw-place{display:flex;gap:10px;align-items:flex-end;margin-bottom:10px}.jw-place .field{margin:0;min-width:260px}.jw-place .tiny{padding-bottom:10px}.jw-place .tiny a,.jw-tg a{font-weight:600}
.jw-tg{margin-left:auto;font-size:12px;color:var(--tx-2)}.jw-tg a{color:var(--tx)}
.rt-tbl .m-only{display:none}.rt-tbl .rt-prod{line-height:1.6}.rt-tbl th.rt-cbh,.rt-tbl td:first-child{width:34px}
@media(max-width:640px){.rt-tbl .m-only{display:inline}}
.jw-none{border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--tx-2);font-size:13px;background:var(--card)}
.stk-row select,.stk-row input{width:100%;min-width:0}
.stk-qw{display:flex;gap:4px}
.stk-qw .stk-q{flex:1}
.stk-qw .stk-u{width:auto;flex:none;max-width:84px}
.stk-hn{grid-column:1/-1;margin-top:-2px}
.stk-del{width:28px;height:28px;font-size:18px}
.stk-lf{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-top:1px solid var(--line);background:var(--line-2)}
.stk-tot{font-weight:700}
.stk-sum{background:var(--ink);color:#fff;border-radius:var(--r);padding:12px 14px;margin:6px 0 10px;font-size:14px}
.stk-sum b{color:#FFD5D5}
.stk-save{display:flex;justify-content:flex-end;gap:8px;margin-bottom:30px}
.stk-save .btn{min-width:160px;justify-content:center}
.stk-jobinfo,.stk-parts{margin-top:6px;color:var(--tx-2)}
.stk-seg label{font-size:12.5px}
.stk-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stk-kinds label{cursor:pointer}
.stk-kinds input{position:absolute;opacity:0;pointer-events:none}
.stk-kinds span{display:block;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;height:100%}
.stk-kinds i{display:block;font-style:normal;font-size:11.5px;color:var(--tx-2);margin-top:2px}
.stk-kinds input:checked+span{border-color:var(--red);background:var(--red-50)}
.stk-vt input{width:100%;min-width:70px}
.stk-kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:center}
.stk-kv>div{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;min-height:26px}
.stk-kv .muted{display:inline-block;min-width:80px}
.tbl.doc-tbl th,.tbl.doc-tbl td,.tbl.doc-tbl td.num,.tbl.doc-tbl th.num{text-align:center;vertical-align:middle}
.stk-setup-top{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font-size:13px}
.stk-bar{display:flex;gap:4px}
.stk-bar a{flex:1;height:10px;border-radius:5px;background:var(--line)}
.stk-bar a.on{background:var(--ok)}
.stk-bar a.cur{outline:2px solid var(--ink);outline-offset:1px}
.stk-wiz{display:flex;flex-direction:column;gap:8px}
.stk-ws{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.stk-ws.open{border-color:var(--ink)}
.stk-wh{display:flex;gap:10px;align-items:center;padding:12px 14px;color:var(--tx)}
.stk-wh:hover{color:var(--tx)}
.stk-wh .tiny{margin-left:auto;text-align:right}
.stk-wb{padding:0 14px 14px 52px}
.stk-next{display:flex;justify-content:flex-end;margin-top:12px}
.stk-check{list-style:none;padding:0;margin:0 0 14px}
.stk-check li{padding:6px 0 6px 26px;position:relative}
.stk-check li:before{content:'';position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--ok)}
.stk-check li.bad:before{background:var(--red)}
.stk-filter{width:100%;max-width:320px;margin-bottom:8px}
.stk-open input{max-width:150px;text-align:right}
.stk-opst{display:inline-flex;align-items:center;gap:4px;min-height:42px}
.stk-open td{vertical-align:middle}
.stk-open .c-q,.stk-open .c-r{width:190px}.stk-open .c-v{width:140px}
.stk-open td.num .or{width:150px}
.stk-print{margin-left:auto}
@media (min-width:901px){.stk-open th:nth-child(2),.stk-open th:nth-child(3),.stk-open td:nth-child(2),.stk-open td:nth-child(3){text-align:center}}
.stk-star{background:none;border:0;cursor:pointer;font-size:18px;line-height:1;color:#C9CBCF;padding:2px}
.stk-star.on{color:#E0A100;cursor:default}
.stk-star:hover{color:#E0A100}
.stk-sup td{vertical-align:middle}
.stk-sup input[type=number]{width:96px;padding:6px 8px;text-align:right}
.stk-sup input[type=text]{min-width:140px;padding:6px 8px}
/* Products ↔ stock */
.pr-sk a{color:inherit}
.pr-sk{min-width:170px}
@media (min-width:901px){.pr-tbl td:first-child{min-width:230px}}
.pr-nl{color:var(--red);font-weight:600;font-size:12.5px}
.pr-hid{padding:10px 16px;border-top:1px solid var(--line-2)}
.pr-stk{border:1px solid var(--line);border-radius:10px;padding:12px;background:#FAFAFA;margin:4px 0 14px}
.pr-rad{display:flex;gap:9px;align-items:flex-start;margin:10px 0 4px;cursor:pointer}
.pr-rad input{margin-top:3px;accent-color:var(--red)}
.pr-rad .hint{display:block;margin-top:1px}
.pr-sub{margin:4px 0 4px 25px}
.stk-sold{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:#EEF4FF;color:#1D4ED8;margin-top:3px}
/* Stock → Plan an order */
.pl-top{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start;margin-bottom:6px}
.pl-lab{font-size:12.5px;font-weight:600;color:var(--tx-2);margin-bottom:6px}
.pl-mk{display:grid;grid-template-columns:minmax(0,1fr) 130px 38px;gap:8px;align-items:center;margin-bottom:8px}
.pl-x{width:38px;height:38px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff;color:var(--tx-2);font-size:18px;cursor:pointer}
.pl-opts{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.pl-opts .check{margin:0;display:inline-flex;align-items:center;gap:7px}
input.pl-pct{width:70px;padding:6px 8px}
.pl-sec{font-size:15px;margin:18px 0 10px}
.pl-grp{margin-bottom:14px}
.pl-ph{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFAFA}
.pl-ph h3{margin:0;font-size:15px}
.pl-acts{margin-left:auto;display:flex;gap:8px}
.pl-tbl td{vertical-align:middle}
.pl-tbl .pl-q{width:100px;padding:6px 8px;text-align:right}
.pl-tbl .pl-q.ch{border-color:#C2410C;background:#FFF7ED}
.pl-chg{display:none;font-size:10.5px;color:#C2410C;margin-top:2px}
.pl-q.ch+.pl-chg{display:block}
@media (max-width:900px){.pl-top{grid-template-columns:1fr}.pl-acts{margin-left:0;width:100%}.pl-mk{grid-template-columns:minmax(0,1fr) 100px 38px}}
@media (max-width:900px){table.tbl.cards.stk-open td::before{top:50%;transform:translateY(-50%)}}
.stk-ug{display:inline-flex;align-items:stretch;width:150px;background:#fff;border:1px solid #D9DADD;border-radius:var(--r-s);overflow:hidden;vertical-align:middle}
.stk-ug:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(190,11,14,.12)}
.stk-open .stk-ug input{flex:1;min-width:0;border:0;border-radius:0;box-shadow:none}
.stk-ug i{flex:none;width:46px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11.5px;color:var(--tx-2);background:var(--line-2);border-left:1px solid var(--line)}
.chip.on{background:var(--ink);color:#fff}
@media (max-width:760px){
  .stk-kinds{grid-template-columns:1fr}
  .stk-new{grid-template-columns:1fr}
  .stk-step{padding:12px 10px;gap:8px}
  .stk-lh{display:none}
  .stk-row,.stk-lines:has(.stk-from) .stk-row,.stk-lines:not(:has(.stk-r)):not(:has(.stk-from)) .stk-row{grid-template-columns:1fr 1fr 30px}
  .stk-row .stk-it{grid-column:1/3}
  .stk-row .stk-del{grid-column:3;grid-row:1}
  .stk-lines.nofrom .stk-row{grid-template-columns:1fr 30px}.stk-lines.nofrom .stk-row .stk-it{grid-column:1}.stk-lines.nofrom .stk-row .stk-del{grid-column:2}.stk-lines.nofrom .stk-row .stk-qw{grid-column:1}
  .stk-lf{flex-wrap:wrap;gap:6px}.jw-tg{margin-left:0}
  .jw-src{gap:6px}.jw-src label{padding:9px 6px;justify-content:center;text-align:center}.jw-src input,.jw-src small{display:none}.jw-src b{font-size:12.5px;line-height:1.25}
  .jw-row{grid-template-columns:22px minmax(0,1fr) 104px;row-gap:2px}.jw-row .jw-have{grid-column:2/4;text-align:left}
  .jw-place{flex-direction:column;align-items:stretch;gap:4px}.jw-place .field{min-width:0}.jw-place .tiny{padding:0}
  .stk-wb{padding:0 12px 12px}
  .stk-kv{grid-template-columns:1fr}
}
@media print{.stk-tabs,.stk-help{display:none}}
.stk-new[hidden]{display:none}
.stk-dates{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.stk-dates input{width:150px}
#stkPartsTxt{display:block;margin:0 0 10px}
.stk-pbar{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-top:6px;min-width:80px}
.stk-pbar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.stk-count td{vertical-align:middle}
.stk-count .grp-row td{vertical-align:middle}
.stk-count input[type=number]{max-width:110px;text-align:right}
.stk-count select.need{border-color:var(--warn);background:var(--warn-l)}
/* Stock & Parties: alignment */
.stk-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.stk-half{width:calc(50% - 6px)}
.stk-sb>select{width:calc(50% - 6px);max-width:none}
.stk-sb>select#stkJob{width:100%}
.stk-checks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:2px 0 10px}
.stk-checks .check{margin:0}
.stk-vt td{vertical-align:middle}
.stk-vt input[type=number],.stk-vt input[type=text]{width:100%}
.stk-places td{vertical-align:middle}
.stk-places td .check{display:inline-flex;margin:0 8px 0 0;vertical-align:middle}
.stk-places td.nowrap{white-space:nowrap}
@media (max-width:760px){.stk-half,.stk-sb>select{width:100%}}

/* Sidebar sections */
.sb-grp{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7E8188;padding:14px 12px 4px}
.sb-nav .sb-link{padding:8px 12px;margin:1px 0}

/* Team: employee home and work card */
.emp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;max-width:820px}
.emp-tile{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;color:var(--tx);text-decoration:none;box-shadow:var(--sh)}
.emp-tile:hover{border-color:var(--red)}
.emp-tile i{flex:none;width:40px;height:40px;border-radius:10px;background:var(--line-2);display:grid;place-items:center}
.emp-tile i .ic{width:20px;height:20px}
.emp-tile b{display:block;font-size:15px}.emp-tile small{color:var(--tx-2);font-size:12px}
.emp-work .check{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px}
.emp-work .check .hint{display:block}
.emp-login{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#FAFAFA;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px}
.chip.work{background:var(--ok-l);color:var(--ok)}
.chip.sells{background:#EEF4FF;color:#1D4ED8}

/* Order form: call + WhatsApp numbers, Asaan Order number picker and photo */
.wa-same{margin:6px 0 2px;font-size:12.5px}
.ez-photo{position:relative;cursor:pointer}
.ez-sec small{display:block;font-weight:500;color:var(--tx-2);font-size:11.5px;margin-top:1px;text-transform:none;letter-spacing:0}
.ez-nums{display:grid;gap:8px;margin:6px 0}
.ez-num{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.ez-n{font-weight:800;font-size:15.5px;letter-spacing:.02em}
.ez-w{font-size:11px;color:var(--tx-2);margin-top:1px}
.ez-pk{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.ez-pk label{border:1.5px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12.5px;font-weight:600;display:flex;gap:6px;align-items:center;color:var(--tx-2);cursor:pointer}
.ez-pk input{position:absolute;opacity:0;pointer-events:none}
.ez-pk label.c.on{border-color:#1D4ED8;background:#EEF4FF;color:#1D4ED8}
.ez-pk label.w.on{border-color:#16A34A;background:#ECFDF3;color:#15803D}
.ez-pk label.w.on::before{content:"✓"}
.ez-note{background:#FFFBEB;border:1px solid #FDE68A;color:#854D0E;border-radius:10px;padding:8px 10px;font-size:11.5px;line-height:1.45;margin:8px 0}
.ez-cities{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:8px;border-radius:9px;background:#FFFBEB;border:1px solid #FDE68A}
.ez-cities small{flex-basis:100%;font-size:11.5px;font-weight:600;color:#854D0E}
.ez-cities label{border:1.5px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;background:#fff;cursor:pointer}
.ez-cities label input{position:absolute;opacity:0;pointer-events:none}
.ez-cities label.on{border-color:var(--red);color:var(--red);background:#FDECEC}
.ez-cities.need{border-color:var(--red);box-shadow:0 0 0 3px rgba(190,11,14,.15)}
.ez-st{display:inline;font-size:10.5px;padding:2px 8px;line-height:1.95;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ez-st::before{display:inline-block;vertical-align:middle;margin:0 5px 1px 0}

/* Customers list: sort, rows per page, remarks */
.th-sort{color:inherit;text-decoration:none;white-space:nowrap}
.th-sort:hover,.th-sort.on{color:var(--red)}
.cu-h{flex-wrap:wrap;gap:6px 12px}
.cu-info{margin-left:auto}
.cu-gear{position:relative}
.cu-menu{position:absolute;right:0;top:110%;z-index:20;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:6px;min-width:150px}
.cu-menu a{display:block;padding:7px 10px;border-radius:7px;color:var(--tx);text-decoration:none;font-weight:600;font-size:13px}
.cu-menu a:hover{background:var(--bg)}.cu-menu a.on{background:var(--ink);color:#fff}
.cu-note{min-width:150px;max-width:240px}
.cu-nb{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit;font-size:12.5px;color:var(--tx);white-space:normal}
.cu-nb:hover span{text-decoration:underline}
.cu-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:14px 0 4px}
.cu-pn{min-width:32px;height:32px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--tx);text-decoration:none;font-weight:600;font-size:13px;background:#fff}
.cu-pn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:900px){.cu-info{margin-left:0;flex-basis:100%;order:3}.cu-gear{margin-left:auto}.cu-note{max-width:none}}
.stk-vt .vt-gone td{opacity:.45}.stk-vt .vt-gone input[type=text]{text-decoration:line-through}
.stk-vt .vt-gone .vt-rm{opacity:1;color:var(--red)}
.vt-add{margin-top:8px}
/* ⓘ tooltips: <i class="qi" tabindex="0" data-tip="…">i</i> (hover on computer, tap on phone) */
.qi{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--line-2);color:var(--tx-2);font:700 10px/1 system-ui,sans-serif;font-style:normal;cursor:help;margin-left:4px;flex:none;user-select:none;vertical-align:1px;outline:0;background:#DCDEE2}
.qi:hover,.qi.on,.qi:focus-visible{background:var(--ink);color:#fff}
.qi-tip{position:fixed;z-index:1300;max-width:min(260px,calc(100vw - 16px));background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1.45;padding:8px 10px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none}
.pr-stk .pr-rad{align-items:center;margin:8px 0 2px}
.pr-stk .pr-rad input{margin-top:0}
/* Stock → Items: products and parts / materials */
.it-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.it-choice label{cursor:pointer;position:relative}
.it-choice input{position:absolute;opacity:0;pointer-events:none}
.it-choice span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:12px;height:100%}
.it-choice b{display:block;font-size:14px;margin-bottom:3px}
.it-choice i{display:block;font-style:normal;font-size:11.5px;color:var(--tx-2)}
.it-choice input:checked+span{border-color:var(--red);background:var(--red-50)}
.it-sec{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--tx-3);text-transform:uppercase;margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.it-of{display:flex;flex-wrap:wrap;gap:6px 14px;padding:2px 0}
.it-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.it-row{display:grid;grid-template-columns:28px 1fr 90px 28px;gap:6px;align-items:center}
.it-row-u{grid-template-columns:1fr 120px 28px}
.it-row select,.it-row input{width:100%;min-width:0}
.it-q{position:relative;display:block}
.it-q input{padding-right:34px}
.it-q i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--tx-3);pointer-events:none}
.it-star{cursor:pointer;display:flex;justify-content:center}
.it-star input{position:absolute;opacity:0;pointer-events:none}
.it-star span{font-size:18px;color:#C9CBCF;line-height:1}
.it-star input:checked+span{color:#E8A317}
.it-ro{border:1px dashed var(--line);border-radius:9px;padding:9px 11px;font-size:13px;color:var(--tx-2);min-height:40px;box-sizing:border-box}
.tag.it-p{background:var(--red-50);color:var(--red)}
.it-low{color:#B45309}
/* searchable item picker (STK.combo) */
.stk-cb{position:relative;min-width:0}
.stk-cb-i{width:100%;min-width:0}
.stk-cb-l{position:fixed;z-index:1300;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:240px;overflow:auto;padding:4px;min-width:220px}
.stk-cb-o{padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:10px}
.stk-cb-o span{font-size:11px;color:var(--tx-3);white-space:nowrap}
.stk-cb-o:hover,.stk-cb-o.on{background:var(--red-50)}
.stk-cb-n{padding:8px 9px;font-size:12.5px;color:var(--tx-3)}
.it-copy{margin:0 0 8px}
.it-copy select{width:100%}
.it-np{background:var(--line-2);border-radius:9px;padding:10px 12px}
/* Orders list: steady columns, one Charges column, attempts pill */
@media (min-width:901px){
  table.ol-tbl{table-layout:fixed;width:100%}
  table.ol-tbl th.ol-n{width:3%}
  table.ol-tbl th.ol-o{width:17%}
  table.ol-tbl th.ol-c{width:16%}
  table.ol-tbl th.ol-s{width:10%}
  table.ol-tbl th.ol-st{width:19%}
  table.ol-tbl th.ol-a{width:9%}
  table.ol-tbl th.ol-ch{width:11%}
  table.ol-tbl th.ol-nt{width:8%}
  table.ol-tbl th.ol-i{width:8%}
  table.ol-tbl td{vertical-align:top;overflow-wrap:anywhere}
  table.ol-tbl td .badge{white-space:normal}
}
.ol-chd{font-size:11px;line-height:1.4;color:var(--tx-3)}
.att-pill{display:inline-block;margin:3px 0 0 6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--line-2);color:var(--tx-2);vertical-align:middle;white-space:nowrap}
.att-pill.many{background:var(--red);color:#fff}
/* Search: customer on the right in parcel mode, order popup over the search */
.gs.gs-pmode.show-detail .gs-main{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.gs.gs-pmode.show-detail .gs-detail{display:block}
.gs.gs-pmode.show-detail .gs-list{border-right:1px solid var(--line)}
.gs.gs-pmode.show-detail .px-row .px-days,.gs.gs-pmode.show-detail .px-head span:nth-child(4){display:none}
@media (max-width:760px){.gs.gs-pmode.show-detail .gs-main{grid-template-columns:1fr}.gs.gs-pmode.show-detail .gs-list{display:none}}
button.gs-pr{width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;text-align:left;cursor:pointer}
.gs-pr.on{background:var(--red-50);box-shadow:inset 3px 0 0 var(--red)}
.modal.gs-peek{z-index:1200}
.pk-kv{margin:0 0 12px}
.pk-sec{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--tx-3);text-transform:uppercase;margin:4px 0 8px}
.pk-tl{border-left:2px solid var(--line);margin:0 0 14px 6px;padding-left:14px;max-height:260px;overflow:auto}
.pk-step{position:relative;margin-bottom:9px;font-size:12.5px}
.pk-step::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:#C9CBCF;border:2px solid #fff}
.pk-step.on::before{background:var(--red)}
.pk-step b{font-weight:600}.pk-step small{display:block;color:var(--tx-3);font-size:11.5px}
.pk-btns{display:flex;gap:8px}.pk-btns .btn{flex:1;justify-content:center}
.gs.gs-pmode.show-detail .px-head,.gs.gs-pmode.show-detail .gs-it.px-row{grid-template-columns:96px minmax(0,1fr) 84px minmax(110px,150px)}
.gz-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.gz{border:1px solid var(--line);border-radius:10px;background:var(--card,#fff)}
.gz.open{border-color:var(--red);box-shadow:0 0 0 2px rgba(179,18,23,.08)}
.gz-h{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.gz-ar{color:var(--tx-3);width:12px;transition:transform .15s}
.gz.open .gz-ar{transform:rotate(90deg)}
.gz-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gz-m{font-size:12px;color:var(--tx-3);white-space:nowrap}
.gz-b{display:none;padding:10px 12px 12px;border-top:1px solid var(--line);background:#FAFAFB;border-radius:0 0 10px 10px}
.gz.open .gz-b{display:block}
.gz-b input{width:100%;min-width:0}
.gz-lab{font-size:12px;font-weight:600;margin:10px 0 6px}
.gz-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.gz-f .check{margin:0}
.gz-rm{background:none;border:0;color:var(--red);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.gz-rm svg{width:14px;height:14px}
.gz.gz-need .gz-t{color:var(--red)}
.gz:only-child .gz-copy{display:none}
.gz.gz-off{display:none}
.gz-all .gz.gz-off{display:block;opacity:.6}
.gz-show{background:none;border:0;color:var(--tx-3);font-size:12px;cursor:pointer;padding:0 0 8px;text-decoration:underline}
.gz.vt-gone{opacity:.55}
.gz.vt-gone .gz-t{text-decoration:line-through}
@media (max-width:640px){.gz-h{flex-wrap:wrap}.gz-m{width:100%;padding-left:22px;white-space:normal}.gz-b .grid.g3{grid-template-columns:1fr 1fr}.gz-b .grid.g3>.field:first-child{grid-column:1/3}.gz-b .it-row{grid-template-columns:28px 1fr 70px 28px}}

/* Stock: transaction number links, grouped "New transaction", More tab */
a.doc-link{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:600;color:var(--red);border-bottom:1px dashed currentColor;white-space:nowrap}
a.doc-link:hover{color:var(--red-d)}
.stk-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.stk-grp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--sh)}
.stk-grp h4{margin:0 0 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.stk-gi{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid var(--line-2);border-radius:9px;margin-bottom:6px;color:var(--tx)}
.stk-gi:last-child{margin-bottom:0}
.stk-gi:hover{border-color:var(--red);color:var(--tx);background:var(--red-50)}
.stk-gi b{display:block;font-size:13px}
.stk-gi small{display:block;font-size:11px;color:var(--tx-3);margin-top:1px}
.stk-gi code{font-size:10.5px;background:var(--bg);border-radius:5px;padding:2px 6px;color:var(--tx-2);flex:none}
.stk-more{position:relative;display:inline-block}
.stk-more summary{list-style:none;cursor:pointer;white-space:nowrap}
.stk-more summary::-webkit-details-marker{display:none}
.stk-more-m{position:fixed;width:180px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-2);padding:6px;min-width:170px;z-index:30;display:flex;flex-direction:column}
.stk-more-m a{padding:8px 10px;border-radius:7px;color:var(--tx);font-weight:600;font-size:13px}
.stk-more-m a:hover,.stk-more-m a.on{background:var(--line-2);color:var(--red)}
@media (max-width:1100px){.stk-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.stk-groups{grid-template-columns:1fr}}

/* Stock → party account page */
.pty-hd{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;margin-bottom:12px;flex-wrap:wrap}
.pty-av{width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;flex:none}
.pty-t{flex:1;min-width:200px}
.pty-t h1{margin:0;font-size:19px;line-height:1.3}
.pty-m{color:var(--tx-3);font-size:12px;margin-top:3px}
.pty-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--info-l);color:var(--info);vertical-align:3px;white-space:nowrap}
.pty-tag.off{background:var(--mute-l);color:var(--mute)}
.pty-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pty-new summary.btn{display:inline-flex}.pty-act .pa-s{display:none}
@media (max-width:640px){.pty-act{flex-wrap:nowrap}.pty-act .btn{padding-left:10px;padding-right:10px;white-space:nowrap}.pty-act .pa-x{display:none}.pty-act .pa-s{display:inline}}
.pty-kp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.pty-k{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.pty-k small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--tx-3);text-transform:uppercase}
.pty-k b{display:block;font-size:20px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pty-k span{display:block;font-size:11px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pty-k.dk{background:var(--ink);border-color:var(--ink);color:#fff}
.pty-k.dk small,.pty-k.dk span{color:#A9ABB0}
.pty-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.pty-tabs a{padding:10px 14px;font-weight:600;color:var(--tx-2);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.pty-tabs a.on{color:var(--red);border-color:var(--red)}
.pty-tabs a i{font-style:normal;font-size:10.5px;background:var(--line-2);border-radius:9px;padding:1px 6px;margin-left:3px;color:var(--tx-2)}
.pty-cols{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px;align-items:start}
.pty-bar{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pty-bar .stk-dates{display:flex;gap:6px;align-items:center;margin:0}
.pty-led td{vertical-align:top}
.pty-led td[data-l="Date"],.pty-led td[data-l="No."]{white-space:nowrap}
.pty-memo td{color:var(--tx-2);background:#FCFCFD}
.pty-tot td{background:#FAFAFB;font-weight:700}
.pty-note{padding:8px 12px;margin:0}
.pty-side .card-h h2{font-size:13px}
.pty-li{padding:9px 14px;border-top:1px solid var(--line-2)}
.pty-li>b{display:block;font-size:13px}
.pty-li .tiny{display:block}
.pty-li .stk-pbar{margin-top:6px}
.stk-pbar.late i{background:var(--warn)}
.pty-rem{display:flex;gap:9px;align-items:flex-start;padding:10px 14px;border-top:1px solid var(--line-2)}
.pty-dot{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:6px;flex:none}
@media (max-width:1100px){.pty-cols{grid-template-columns:1fr}.pty-kp{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pty-kp{grid-template-columns:repeat(2,minmax(0,1fr))}.pty-k.dk{grid-column:1/3}.pty-act{width:100%}.pty-led td:empty{display:none}.pty-side .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}}
@media print{.pty-side,.pty-tabs,.pty-kp,.pty-note{display:none!important}.pty-cols{display:block}}
/* bilty */
.pty-bl{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11.5px;font-weight:700;background:var(--warn-l);color:var(--warn);padding:1px 6px;border-radius:5px;white-space:nowrap}
.stk-blbox{margin-top:10px;padding:10px 12px;border:1px solid #F3C98B;background:var(--warn-l);border-radius:9px}
.stk-blbox .ic{width:15px;height:15px;vertical-align:-3px}
/* purchase order: supplier item filter */
.stk-pof{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.stk-chip{font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--tx-2);cursor:pointer}
.stk-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.stk-pomode{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px;background:var(--card)}
.stk-pomode a{flex:1;text-align:center;padding:9px 10px;font-weight:600;color:var(--tx-2)}
.stk-pomode a.on{background:var(--ink);color:#fff}

/* transaction popup: action row */
.doc-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.doc-acts>.btn,.doc-acts>a.btn,.doc-acts>form>.btn{height:38px}
.doc-cancel{display:flex;gap:6px;align-items:center;margin:0 0 0 auto}
.it-conv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-l);border:1px solid var(--warn);border-radius:10px;padding:10px 12px;margin:-4px 0 14px;font-size:13px}
.it-conv[hidden]{display:none}
.tag.it-s{background:#EEF2FF;color:#3730A3}
.it-tbl .tag{white-space:nowrap}
.cs-tbl td{vertical-align:middle}.cs-tbl select{margin:0;height:38px;padding-top:0;padding-bottom:0;line-height:normal}
.cs-tbl tr.cs-new{background:#FFFBEB}
@media(max-width:640px){.cs-tbl thead{display:none}.cs-tbl tbody tr{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:8px 12px;border-bottom:1px solid var(--line,#eee)}.cs-tbl tbody td{display:block;border:0;padding:2px 0}.cs-tbl tbody td:nth-child(3){grid-column:1/-1;padding-top:6px}.cs-tbl select{width:100%}}
.cs-sel.cs-delivered{background:#E7F6EE}.cs-sel.cs-returned{background:#FDECEC}.cs-sel.cs-attention{background:#FEF3E2}.cs-sel.cs-cancelled,.cs-sel.cs-notsent{background:#F4F4F5}.cs-sel.cs-transit{background:#EEF2FF}
.tag.tag-warn{background:var(--warn-l);color:var(--warn)}
.it-type{display:flex;width:100%}.it-type label{flex:1;text-align:center}
.it-conv label{margin:0;font-weight:600}
.it-conv-in{display:inline-flex;align-items:center;gap:8px}
.it-conv-in input{width:130px;height:36px;margin:0}
.doc-cancel input{width:150px;height:38px;margin:0}
.doc-cancel .btn-cancel{height:38px;color:var(--red);white-space:nowrap}
@media (max-width:640px){.doc-cancel{margin-left:0;width:100%}.doc-cancel input{flex:1;width:auto;min-width:0}.doc-cancel .btn-cancel{flex:none}}

/* Cash & Bank: day book, petty cash, expenses */
.fin-kp{grid-template-columns:repeat(4,minmax(0,1fr))}
.fin-g{gap:0 12px}
.fin-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.fin-foot .btn{min-width:110px;justify-content:center}
.fin-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:9px;background:var(--line-2);color:var(--tx-2);vertical-align:1px;white-space:nowrap}
.fin-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fin-cat{display:flex;flex-direction:column;gap:2px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--tx);min-width:120px}
.fin-cat span{font-size:11px;color:var(--tx-3);font-weight:600}
.fin-cat b{font-size:14px}
.fin-cat.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fin-row-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.fin-row-acts .btn{min-width:78px;justify-content:center}
.fin-day{font-size:14px}
.fin-dayf{display:flex;gap:6px;align-items:center;margin:0}
.fin-dayf input[type=date],.fin-dayf select{height:32px;padding:4px 8px;font-size:12.5px;width:auto}
.fin-dayf .btn{height:32px;min-width:32px;justify-content:center}
.fin-emp{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line-2)}
.pty-av.sm{width:32px;height:32px;border-radius:9px;font-size:13px}
.fin-emp-t{flex:1;min-width:0}
.fin-emp-t b,.fin-emp-a b{display:block;font-size:13px}
.fin-emp-a{text-align:right}
.fin-3btn{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px;border-top:1px solid var(--line-2)}
.fin-3btn .btn{justify-content:center;padding-left:4px;padding-right:4px}
.fin-day-t td[data-l="Time"]{white-space:nowrap;color:var(--tx-2)}
.fin-tbl td[data-l="No."]{white-space:nowrap}
.fin-kp3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.fin-kp{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-kp3 .pty-k.dk{grid-column:1/3}}
@media (max-width:640px){.fin-kp .pty-k.dk,.fin-kp .pty-k:nth-child(4){grid-column:1/3}.fin-kp3 .pty-k:nth-child(3){grid-column:auto}.fin-day-t td:empty{display:none}.fin-row-acts{justify-content:flex-start;flex-wrap:wrap}.fin-dayf input[type=date]{flex:1}}

/* Call the customer */
.call-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;border-radius:20px;padding:2px 8px 2px 6px;margin-left:4px;vertical-align:middle;white-space:nowrap}
.call-pill .ic{width:12px;height:12px}.call-pill.ask{color:var(--warn);background:var(--warn-l)}.call-pill.ok{color:var(--ok);background:var(--ok-l)}.call-pill.info{color:var(--info);background:var(--info-l)}.call-pill.bad{color:var(--red);background:var(--red-l)}
.cr-ic{display:inline-flex;color:var(--warn)}.cr-ic .ic{width:17px;height:17px}
.cr-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;background:#111;color:#fff;border-radius:14px;padding:9px 10px 9px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:13.5px}
.cr-bar[hidden]{display:none}.cr-bar .muted{color:#bbb}.cr-bar .btn{margin:0}.cr-bar .x{background:none;border:0;color:#bbb;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.cr-pick{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px;cursor:pointer}
.cr-pick input{margin-top:3px;accent-color:var(--tx)}.cr-pick b{font-size:13.5px;display:block}.cr-pick small{display:block;font-size:12px;color:var(--tx-2)}
.cr-att{display:inline-block;font-size:11px;font-weight:650;color:var(--warn);background:var(--warn-l);border-radius:20px;padding:1px 8px;margin-top:3px}
.cr-via{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 14px}
.cr-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px;background:var(--warn-l)}
.cr-box-t{display:flex;align-items:center;gap:6px;font-weight:650;font-size:13px}.cr-box-t .btn{margin-left:auto}
.cr-row{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-top:8px}.cr-row-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}.cr-row .call-pill{margin-left:0}
.cr-pop{max-width:420px;padding:16px}.cr-hello{display:flex;gap:10px;align-items:center;margin-bottom:10px}.cr-hello .icon-btn{margin-left:auto}
.cr-bub{width:40px;height:40px;border-radius:50%;background:var(--warn-l);color:var(--warn);display:grid;place-items:center;flex:none}.cr-bub .ic{width:20px;height:20px}
.cr-hello b{display:block;font-size:15px}.cr-hello span{font-size:12px;color:var(--tx-2)}
.cr-note{background:var(--line-2);border-radius:9px;padding:8px 10px;font-size:12.5px;margin-bottom:10px}
.cr-card{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--card)}
.cr-card .cr-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.cr-card .cr-t b{font-size:14px}.cr-ref{font-size:11.5px;color:var(--red);font-weight:700;white-space:nowrap}
.cr-s{font-size:12px;color:var(--tx-2);margin-top:2px}.cr-s .cr-att{margin:0}
.cr-act{display:flex;gap:6px;margin-top:8px}
.cr-act a,.cr-act button{flex:1;display:flex;gap:5px;align-items:center;justify-content:center;font:inherit;font-size:12.5px;font-weight:650;border:1px solid var(--line);border-radius:9px;padding:8px 4px;color:var(--tx);background:var(--card);text-decoration:none;cursor:pointer}
.cr-act .ic{width:15px;height:15px}.cr-act a.wa{color:#15803d}.cr-act button.done{background:#111;color:#fff;border-color:#111}
.cr-card.done{opacity:.75}.cr-res{display:flex;align-items:center;gap:5px;font-size:12.5px;margin-top:4px}.cr-res .ic{width:14px;height:14px}.cr-res.ok{color:var(--ok)}.cr-res.info{color:var(--info)}.cr-res.bad{color:var(--red)}
.cr-later{display:block;width:100%;background:none;border:0;color:var(--tx-2);font:inherit;font-size:12.5px;padding:8px;cursor:pointer}
.cr-sheet{max-width:420px}.cr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.cr-chips button{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:20px;padding:6px 11px;background:var(--card);cursor:pointer;color:var(--tx)}
.cr-chips button.on{background:#111;color:#fff;border-color:#111}
.cr-sheet textarea{width:100%;margin-bottom:10px}
@media(max-width:640px){.cr-login{align-items:flex-end}.cr-login .cr-pop{border-radius:18px 18px 0 0;max-height:85vh;overflow:auto;width:100%}.cr-bar{left:12px;right:12px;transform:none;bottom:74px}}

/* Parties list groups, party rate list */
.pr-tbl td{vertical-align:middle}.pr-in{width:120px;height:36px;margin:0;text-align:right}
.pr-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.pr-add .field{margin:0;min-width:200px}.pr-add .field:first-child{flex:1}
@media(max-width:640px){.pr-in{width:100px}}

/* live: new order banner (admin) */
.live-new{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;background:#111;color:#fff;border-radius:12px;padding:9px 10px 9px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px);animation:lnIn .25s ease}
.live-new[hidden]{display:none}.live-new .ln-t{min-width:0}.live-new b{display:block;font-size:13.5px}.live-new small{display:block;font-size:12px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-new .ln-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.25);flex:none}
.live-new .btn{margin:0;flex:none}.live-new .x{background:none;border:0;color:#aaa;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;flex:none}
@keyframes lnIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:640px){.live-new{top:62px;left:12px;right:12px;transform:none;animation:none}}
/* Chat: reply to a message (quote above the answer, hover button, swipe on phones) */
.msg .qt{display:flex;flex-direction:column;gap:1px;width:100%;min-width:160px;text-align:left;font:inherit;color:inherit;border:0;border-left:3px solid #2563EB;border-radius:8px;padding:5px 9px;margin:1px 0 5px;cursor:pointer;background:#F1F2F5}
.msg .qt.me{border-left-color:var(--red)}
.msg.out .qt{background:rgba(255,255,255,.1);border-left-color:#60A5FA}.msg.out .qt.me{border-left-color:#F87171}
.msg .qt b{font-size:12px;color:#2563EB}.msg .qt.me b{color:var(--red)}.msg.out .qt b{color:#93C5FD}.msg.out .qt.me b{color:#FCA5A5}
.msg .qt span{font-size:12.5px;opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg .qt.gone span{font-style:italic}
.msg .rpl{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--tx-2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s;padding:0}
.msg.in .rpl{right:-38px}.msg.out .rpl{left:-38px}
.msg .rpl svg{width:15px;height:15px}
.msg:hover .rpl,.msg .rpl:focus-visible{opacity:1}
.msg .rpl:hover{color:var(--tx);border-color:var(--tx-3)}
.msg.gone .rpl{display:none}
.msg.swipe-ok::before{content:"";position:absolute;left:-34px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.msg.flash{animation:msgFlash 1.4s ease}
@keyframes msgFlash{0%,35%{box-shadow:0 0 0 3px rgba(37,99,235,.45)}100%{box-shadow:0 1px 1px rgba(0,0,0,.04)}}
.rp-bar{display:flex;align-items:center;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-left:3px solid #2563EB;border-radius:10px;padding:6px 8px 6px 10px}
.rp-bar.me{border-left-color:var(--red)}
.rp-bar .ic{display:flex;color:var(--tx-3)}.rp-bar .ic svg{width:16px;height:16px}
.rp-t{flex:1;min-width:0;display:flex;flex-direction:column}
.rp-t b{font-size:12px;color:#2563EB}.rp-bar.me .rp-t b{color:var(--red)}
.rp-t span{font-size:12.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-bar button{border:0;background:var(--line-2);border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:15px;line-height:1;color:var(--tx-2);flex:none}
@media(hover:none){.msg .rpl{display:none}}
/* Order lists: sort by clicking a column heading (computer) or the sort button (phone) */
.th-sort a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.th-sort.num a{justify-content:flex-end}
.th-sort .sa{font-style:normal;font-size:10px;opacity:.35;transition:opacity .12s}
.th-sort a:hover .sa{opacity:.8}
.th-sort.on a{color:var(--tx)}.th-sort .sa.on{opacity:1;color:var(--red)}
.filters .f-go{display:flex;gap:8px;align-items:stretch}
.sort-ic{position:relative;display:none;align-items:center;justify-content:center;flex:none;width:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--tx-2);cursor:pointer}
.sort-ic svg{width:18px;height:18px}
.sort-ic.on{border-color:var(--red);color:var(--red);background:var(--red-50,#FFF1F1)}
.sort-ic select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
@media(max-width:900px){
  .sort-ic{display:inline-flex}
  .filters .f-go{grid-column:1 / -1}
  .filters .f-go .btn{flex:1}
  .filters .field:has(select[name=st]){grid-column:1 / -1}
}
/* Phone top bar: buttons never overlap (small phones): the logo gets smaller instead of the New button sliding under Search */
@media(max-width:900px){
  .top-logo{flex:0 1 auto;min-width:0;width:132px;max-width:132px;object-fit:contain;object-position:left center}
  .top-actions{flex:none}
}
@media(max-width:400px){
  .topbar{gap:6px;padding-left:10px;padding-right:10px}
  .gs-trigger,.ntf-btn{margin-left:0}
}

/* Website orders: tag next to the order number; seller's website link */
.tag-web{background:#E0F2FE;color:#0369A1;margin-left:4px;vertical-align:middle}
.web-link{display:flex;gap:8px;align-items:center}
.web-link input{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:13px}
.web-link .btn{flex:none}
@media(max-width:600px){.web-link{flex-wrap:wrap}.web-link input{flex-basis:100%}.web-link .btn{flex:1;justify-content:center}}
.sp-sell{width:64px;margin:0 8px 0 0;display:flex;justify-content:center;align-self:center;flex:none}
.sp-sell input{width:18px;height:18px;accent-color:var(--red);margin:0}
.sp-head{justify-content:space-between;padding:0 0 6px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em;flex-wrap:nowrap}
.sp-head .sp-sell{white-space:nowrap}
/* Cloud units (admin/cloud.php): the page sits in a frame that fills the screen under the top bar */
.cloud-page .content{padding:0;max-width:none}
.cloud-frame{display:block;width:100%;border:0;height:calc(100vh - 63px);height:calc(100dvh - 63px);background:#f4f5f7}
@media (max-width:900px){.cloud-page .main{padding-bottom:0}.cloud-frame{height:calc(100vh - 116px);height:calc(100dvh - 57px - 59px - env(safe-area-inset-bottom))}}

/* Production: wide product, small quantity */
.grid.stk-mk{grid-template-columns:minmax(0,2.4fr) 110px minmax(0,1.3fr)}.grid.stk-mk>.field:first-child{grid-column:auto}
@media (max-width:640px){.grid.stk-mk{grid-template-columns:96px minmax(0,1fr)}.grid.stk-mk>.field:first-child{grid-column:1/-1 !important}}
.fw-del{display:flex;gap:8px;flex-wrap:wrap}.fw-del input{flex:1 1 180px;min-width:0}
/* Unit page (admin/device.php) */
.dv-hero{display:flex;gap:20px;padding:22px;align-items:stretch;flex-wrap:wrap}
.dv-id{display:flex;gap:16px;flex:1 1 380px;min-width:0;align-items:center}
.dv-ic{width:56px;height:56px;border-radius:14px;background:var(--red);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.dv-ic svg{width:28px;height:28px}
.dv-idt{min-width:0}
.dv-model{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:6px}
.dv-lnk{border:0;background:none;padding:2px;color:var(--tx-3);cursor:pointer;display:inline-grid}
.dv-lnk svg{width:14px;height:14px}.dv-lnk:hover{color:var(--red)}
.dv-sno{font-size:30px;font-weight:800;letter-spacing:.02em;line-height:1.15;color:var(--tx);font-variant-numeric:tabular-nums}
.dv-sno span{font-size:13px;font-weight:600;color:var(--tx-3);letter-spacing:.04em;margin-right:8px;vertical-align:middle}
.dv-did{font-size:12.5px;color:var(--tx-3);margin-top:2px}
.dv-did b{color:var(--tx-2);font-size:12.5px;margin-left:4px}
.dv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dv-chips .badge{margin:0;vertical-align:0}
.dv-chips .badge svg{width:12px;height:12px}
.st-mute{background:var(--mute-l);color:var(--mute)}
.dv-live:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(20,128,74,.18)}
.dv-code{flex:0 1 350px;min-width:250px;border-radius:12px;background:linear-gradient(135deg,#17181B,#2A2C31);color:#fff;padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.dv-code-l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B8BCC6}
.dv-code-v{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:28px;font-weight:800;letter-spacing:.14em;margin:4px 0 2px}
.dv-code-none{font-size:18px;letter-spacing:0;color:#B8BCC6;font-family:inherit}
.dv-code-n{font-size:12px;color:#B8BCC6}
.dv-code-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dv-code-b form{margin:0}
.dv-code .btn-g{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.dv-code .btn-g:hover{background:rgba(255,255,255,.18)}
.dv-alert{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.dv-alert form{margin:0}
.dv-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.dv-f{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.dv-f span{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--tx-3);text-transform:uppercase;letter-spacing:.05em}
.dv-f span svg{width:14px;height:14px}
.dv-f b{font-size:15px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-f small{font-size:12px;color:var(--tx-3)}
.dv-two{margin-top:16px;align-items:stretch}
.dv-two>.card{display:flex;flex-direction:column}
.dv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;flex:1;padding:26px 18px;color:var(--tx-3)}
.dv-empty b{color:var(--tx);font-size:14px}
.dv-empty span{font-size:12.5px;max-width:300px}
.dv-empty-ic{width:44px;height:44px;border-radius:50%;background:var(--bg);display:grid;place-items:center;margin-bottom:6px;color:var(--tx-3)}
.dv-empty-ic svg{width:20px;height:20px}
.dv-cloud{display:flex;flex-direction:column;gap:0;padding-top:4px;padding-bottom:4px}
.dv-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.dv-row:last-child{border-bottom:0}
.dv-row form{margin:0}
.dv-row .badge svg{width:12px;height:12px}
.dv-k{font-size:11.5px;font-weight:650;color:var(--tx-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.dv-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dv-grow{flex:1;min-width:0}
.dv-logins{display:flex;flex-direction:column;gap:8px}
.dv-login{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dv-login b{font-weight:600;font-variant-numeric:tabular-nums;margin-right:4px}
.dv-hist{margin-top:16px}
.dv-tl{position:relative}
.dv-day{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);padding:14px 0 6px 52px}
.dv-day:first-child{padding-top:0}
.dv-ev{display:flex;gap:14px;align-items:flex-start;position:relative;padding:8px 0}
.dv-ev:before{content:"";position:absolute;left:17px;top:44px;bottom:-8px;width:2px;background:var(--line-2)}
.dv-tl>.dv-ev:last-child:before{display:none}
.dv-dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--mute-l);color:var(--mute);position:relative;z-index:1}
.dv-dot svg{width:16px;height:16px}
.dv-ok .dv-dot{background:var(--ok-l);color:var(--ok)}
.dv-bad .dv-dot{background:var(--red-l);color:var(--red)}
.dv-pend .dv-dot{background:var(--warn-l);color:var(--warn)}
.dv-evb{flex:1;min-width:0;padding-top:2px}
.dv-evt{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dv-evt .badge{margin:0;vertical-align:0}
.dv-evd{font-size:12.5px;color:var(--tx-2);margin-top:2px;overflow-wrap:anywhere}
.dv-evm{text-align:right;flex:0 0 auto;padding-top:2px}
.dv-evm b{display:block;font-size:12.5px;font-weight:650;color:var(--tx);font-variant-numeric:tabular-nums}
.dv-evm span{display:block;font-size:11.5px;color:var(--tx-3)}
@media (max-width:900px){.dv-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .dv-hero{padding:16px;gap:16px}.dv-code{flex:1 1 100%;min-width:0}
  .dv-sno{font-size:24px}.dv-code-v{font-size:24px}
  .dv-ic{width:46px;height:46px;border-radius:12px}.dv-ic svg{width:23px;height:23px}
  .dv-facts{gap:8px}.dv-f{padding:12px}.dv-f b{white-space:normal;font-size:14px}
  .dv-day{padding-left:0}
  .dv-ev{gap:10px}.dv-ev:before{left:15px}.dv-dot{width:32px;height:32px}
  .dv-ev{flex-wrap:wrap}
  .dv-evm{order:3;width:100%;padding:0 0 0 42px;text-align:left;display:flex;gap:6px;align-items:baseline}
  .dv-evm b,.dv-evm span{display:inline;font-size:11.5px}
  .dv-evm span:before{content:"· "}
}