/* Aspekta, the typeface of aspectblockchain.com (SIL Open Font License, Ivo Dolenc). */
@font-face{font-family:"Aspekta";font-weight:100 900;font-style:normal;font-display:swap;src:url("/static/fonts/AspektaVF.woff2") format("woff2")}
[hidden]{display:none!important}
/* Layout: icon rail | shipment list | map over tabbed detail — a dispatch console the customer can read at a glance */
:root{
  --bg:#060a0b; --panel:#0c1113; --raise:#121a1c; --line:#1e292b; --line-soft:#162022;
  --fg:#eaf2f1; --muted:#87969a; --faint:#56656a;
  --accent:#08d3a6; --accent-2:#0bbfdc; --accent-ink:#03201b;
  --grad:linear-gradient(135deg,#0bbfdc 0%,#08d3a6 60%,#06d99c 100%);
  --font-brand:"Aspekta",Arial,sans-serif;
  --ok:#3fbf7f; --warn:#e8a23a; --bad:#e5544b; --info:#5b8def;
  --font-ui:"Aspekta",Arial,sans-serif;
  /* References, codes and tracking numbers: the same typeface with even-width figures. */
  --font-mono:"Aspekta",Arial,sans-serif;
  --r:10px;
  --ok-ink:#5fd39a; --warn-ink:#f0b558; --bad-ink:#f6a39d; --info-ink:#9db8f5; --cyan-ink:#5fd6ea;
  --map-glow:#0d1719; --tint:rgba(255,255,255,.05); --tint-2:rgba(255,255,255,.09); --shadow:rgba(0,0,0,.45);
  color-scheme:dark;
}
/* Light mode: same layout and brand colours on a pale background. Toggled from the header (cookie "theme"). */
html[data-theme="light"]{
  --bg:#f3f6f5; --panel:#ffffff; --raise:#eef3f2; --line:#d9e2e0; --line-soft:#e6edeb;
  --fg:#13201f; --muted:#56676a; --faint:#869497;
  --accent:#06977c; --accent-2:#0893ab; --accent-ink:#03201b;
  --ok:#1f9d61; --warn:#c98114; --bad:#d6463c; --info:#3d6fd6;
  --ok-ink:#137a4b; --warn-ink:#8f5400; --bad-ink:#b42318; --info-ink:#2e5bbf; --cyan-ink:#0b7d93;
  --map-glow:#e6f0ee; --tint:rgba(0,0,0,.04); --tint-2:rgba(0,0,0,.07); --shadow:rgba(20,40,40,.16);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums}

.app{display:grid;grid-template-columns:60px 380px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);height:100%;min-height:640px}
.rail{grid-row:1/3;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:12px;background:var(--bg)}
.logo{width:34px;height:34px;display:grid;place-items:center;margin-bottom:14px}
.logo img{width:30px;height:auto}
.rail button{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--faint)}
.rail button[aria-current="page"]{background:var(--raise);color:var(--fg)}
.rail button:hover{color:var(--fg)}
.rail svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail .spacer{flex:1}

.top{grid-column:2/4;display:flex;align-items:center;gap:16px;padding-inline:20px;border-bottom:1px solid var(--line-soft);min-width:0}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.brand-mark{display:none;width:26px;height:26px}
.brand-icon{display:block;width:30px;height:30px}
.auth-card .brand h1{font-size:16px;font-weight:500;margin:0;color:var(--fg)}
.wm{display:flex;flex-direction:column;line-height:1;font-family:var(--font-brand)}
.wm b{font-weight:700;font-size:15px;letter-spacing:.32em;color:var(--fg)}
.wm span{font-weight:600;font-size:7.5px;letter-spacing:.78em;color:var(--muted);margin-top:4px}
.sep{width:1px;height:22px;background:var(--line)}
.top h1{font-size:15px;font-weight:500;margin:0;color:var(--fg);letter-spacing:.01em}
.acct{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;white-space:nowrap}
.acct b{color:var(--fg);font-weight:500}
.sample{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 7px;border-radius:99px}
.kpis{display:flex;gap:22px;margin-left:auto}
.kpi{display:flex;flex-direction:column;line-height:1.15}
.kpi span{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.kpi b{font-weight:500;font-size:15px}
.kpi b.due{color:var(--warn-ink)}

.list{border-right:1px solid var(--line-soft);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.list-head{padding:16px 16px 12px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line-soft)}
.list-title{display:flex;align-items:center;gap:10px}
.list-title h2{font-size:15px;font-weight:500;margin:0}
.count{font-size:12px;color:var(--muted);background:var(--raise);padding:2px 8px;border-radius:6px}
.search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 10px;height:36px}
.search svg{width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:1.8}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--fg);font:inherit;font-size:13px;outline:none}
.search input::placeholder{color:var(--faint)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chip{font-size:12.5px;padding:5px 11px;border-radius:7px;color:var(--muted);background:var(--raise);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.cards{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.card{text-align:left;width:100%;padding:14px 16px;border-radius:var(--r);background:var(--raise);border:1px solid transparent;display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:var(--line)}
.card[aria-selected="true"]{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--raise))}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-id{font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;font-weight:500;font-variant-numeric:tabular-nums}
.pill{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:5px;white-space:nowrap}
.s-transit{background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:var(--cyan-ink)}
.s-delivered{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-ink)}
.s-customs{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn-ink)}
.s-delayed,.s-attempt{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn-ink)}
.s-booked{background:var(--line);color:var(--muted)}
.lane{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.track{flex:1;height:2px;background:var(--line);position:relative;border-radius:2px}
.track i{position:absolute;inset:0 auto 0 0;background:var(--fg);border-radius:2px}
.track .mode{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--raise);display:grid;place-items:center}
.track .mode svg{width:12px;height:12px;fill:var(--fg)}
.places{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.places span:last-child{text-align:right}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--faint)}
.meta b{color:var(--muted);font-weight:500}
.bill{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:9px}
.bill b{color:var(--fg);font-weight:500;font-size:13px}
.bt{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--faint)}
.bt.due{background:var(--warn)}.bt.overdue{background:var(--bad)}.bt.paid{background:var(--ok)}
.empty{color:var(--muted);text-align:center;padding:40px 16px;font-size:13px}

.main{display:grid;grid-template-rows:minmax(260px,1fr) auto;min-height:0;min-width:0}
.map{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);background:radial-gradient(ellipse at 50% 40%,var(--map-glow) 0%,var(--bg) 70%)}
.map canvas{position:absolute;inset:0;width:100%;height:100%}
.tag{position:absolute;transform:translate(-50%,calc(-100% - 12px));font-family:var(--font-mono);font-size:11.5px;background:color-mix(in srgb,var(--raise) 88%,transparent);border:1px solid var(--line);padding:4px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;backdrop-filter:blur(4px)}
.tag em{font-style:normal;color:var(--faint);margin-right:6px;font-family:var(--font-ui)}
.tag.now{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.legend{position:absolute;left:16px;bottom:14px;display:flex;gap:14px;font-size:11.5px;color:var(--faint)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--fg);opacity:.75}
.legend i.a{background:var(--grad);opacity:1}

.detail{background:var(--panel);min-height:300px;display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.tab{padding:13px 10px 11px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-size:13.5px}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.tab .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-left:6px;vertical-align:2px}
.pane{padding:20px;overflow-y:auto;flex:1;min-width:0}
.d-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.d-head h3{margin:0;font-family:var(--font-mono);font-weight:500;font-size:19px}
.d-head .ref{color:var(--faint);font-size:12.5px;margin-left:auto}
.ov{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(200px,.9fr);gap:28px;align-items:start}
.lbl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.cargo b{display:block;font-size:16px;font-weight:500}
.cargo p{margin:2px 0 0;color:var(--muted);font-size:13px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:14px;font-size:13px}
.facts dt{color:var(--faint)}.facts dd{margin:0}
.route-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.route-row .eta{font-size:11.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.route-row .eta b{color:var(--fg);font-weight:500}
.seg{display:flex;gap:3px;height:4px;margin-bottom:12px}
.seg i{flex:1;border-radius:2px;background:var(--line)}
.seg i.on{background:var(--fg)}
.seg i.cur{background:var(--grad)}
.ends{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.ends div:last-child{text-align:right}
.ends .code{font-family:var(--font-mono);font-size:14px}
.ends .sub{color:var(--faint);font-size:12px}
.side{display:flex;flex-direction:column;gap:10px}
.tile{background:var(--raise);border-radius:var(--r);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tile span{color:var(--muted);font-size:12.5px}
.tile b{font-weight:500;font-size:14px}
.tile button.link{color:var(--accent);font-size:12.5px}

.tl{list-style:none;margin:0;padding:0;max-width:640px}
.tl li{display:grid;grid-template-columns:142px 18px minmax(0,1fr);gap:12px;padding-bottom:16px;position:relative}
.tl li:not(:last-child)::after{content:"";position:absolute;left:calc(142px + 12px + 8px);top:14px;bottom:-2px;width:1px;background:var(--line)}
.tl time{color:var(--faint);font-size:12px;text-align:right;padding-top:1px}
.tl .node{width:9px;height:9px;border-radius:50%;background:var(--muted);margin:5px auto 0;position:relative;z-index:1;box-shadow:0 0 0 3px var(--panel)}
.tl li.done .node{background:var(--fg)}
.tl li.current .node{background:var(--accent);box-shadow:0 0 0 3px var(--panel),0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent)}
.tl li.future{color:var(--faint)}
.tl li.future .node{background:transparent;border:1px solid var(--line)}
.tl .ev b{font-weight:500;display:block}
.tl .ev span{color:var(--muted);font-size:12.5px}
.tl li.alert .ev b{color:var(--warn-ink)}

.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.doc{background:var(--raise);border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:center}
.doc .ic{width:34px;height:40px;border-radius:5px;background:var(--line);display:grid;place-items:center;font-family:var(--font-mono);font-size:9.5px;color:var(--muted);flex:none}
.doc b{display:block;font-weight:500;font-size:13.5px}
.doc span{color:var(--faint);font-size:12px}
.doc.pending{opacity:.6}

.charges{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:28px;align-items:start}
.tablewrap{overflow-x:auto}
/* The charges table (quote vs invoice). Scoped so its right-aligned money columns don't leak into other tables. */
.charges table{width:100%;border-collapse:collapse;font-size:13.5px}
.charges th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:0 0 8px;border-bottom:1px solid var(--line)}
.charges td{padding:10px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.charges td small{display:block;color:var(--faint);font-size:12px}
.charges th:last-child,.charges td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
.charges th:nth-child(2),.charges td:nth-child(2){text-align:right;white-space:nowrap;padding-left:16px}
.nil{color:var(--faint)}
.charges td.q{color:var(--muted)}
.charges tr.diff td:last-child{color:var(--warn-ink)}
.charges tr.disc td:last-child{color:var(--ok-ink)}
/* Every other table: plain, left-aligned, columns line up with their headings. */
table{width:100%;border-collapse:collapse;font-size:13.5px}
.chg{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--warn-ink);margin-left:6px}
.chg.add{color:var(--warn-ink)}
.up{color:var(--warn-ink)}.down{color:var(--ok-ink)}
tfoot td{border:0;padding-top:12px;font-weight:500}
tfoot tr.total td{font-size:16px}
.inv{background:var(--raise);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.inv-row{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.inv-row span{color:var(--muted)}
.amt{font-size:26px;font-weight:500;letter-spacing:-.01em}
.btn{background:var(--grad);color:var(--accent-ink);font-weight:600;border-radius:8px;padding:10px 14px;text-align:center}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--line);color:var(--fg);font-weight:500}
.note{font-size:12px;color:var(--muted);background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:9px 11px}
.inv-pill{align-self:flex-start}
.p-paid{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-ink)}
.p-due{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn-ink)}
.p-overdue{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad-ink)}
.p-quote{background:var(--line);color:var(--muted)}

@media (max-width:1180px){
  .app{grid-template-columns:60px 330px minmax(0,1fr)}
  .ov{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ov .side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.ov .side .tile{flex:1 1 180px}
  .kpis .kpi:nth-child(1){display:none}
}
@media (max-width:860px){
  html,body{height:auto}
  .app{display:flex;flex-direction:column;height:auto;min-height:0}
  .rail{display:none}
  .brand-mark{display:block}
  .top{padding:12px 16px;flex-wrap:wrap;gap:8px 16px;border-bottom:1px solid var(--line-soft)}
  .kpis{margin-left:0;width:100%;justify-content:space-between}
  .kpis .kpi:nth-child(1){display:flex}
  .list{border-right:0}
  .cards{max-height:none;overflow:visible;flex-direction:row;overflow-x:auto;padding:12px 16px}
  .card{flex:0 0 280px}
  .list-head{padding:14px 16px}
  .main{display:flex;flex-direction:column}
  .map{height:260px}
  .pane{padding:16px}.tabs{padding:0 12px}
  .ov,.charges{grid-template-columns:minmax(0,1fr);gap:20px}
  .tl li{grid-template-columns:84px 18px minmax(0,1fr)}
  .tl li:not(:last-child)::after{left:calc(84px + 12px + 8px)}
  .legend{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

a{color:inherit}
.user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.user form{margin:0}
.user button{color:var(--muted);font-size:13px;padding:6px 10px;border-radius:7px;border:1px solid var(--line)}
.user button:hover{color:var(--fg);border-color:var(--muted)}
.s-attention{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad-ink)}
a.doc{text-decoration:none}a.doc:hover{background:color-mix(in srgb,var(--fg) 6%,var(--raise))}
a.btn{display:block;text-decoration:none}
.reason{display:block;color:var(--warn-ink);font-size:12px;margin-top:2px}
.nomap{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:13px}
.blank{grid-column:2/4;display:grid;place-items:center;padding:40px 16px;text-align:center;color:var(--muted)}
.blank h2{color:var(--fg);font-weight:500;font-size:18px;margin:0 0 6px}
.updated{font-size:11.5px;color:var(--faint)}
/* auth pages */
.auth{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:28px}
.auth-card .brand{margin-bottom:22px}
.auth-card h1{font-size:18px;font-weight:500;margin:0 0 4px}
.auth-card p{color:var(--muted);margin:0 0 18px;font-size:13.5px}
.auth-card label{display:block;font-size:12.5px;color:var(--muted);margin:0 0 6px}
.auth-card input{width:100%;height:40px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--fg);font:inherit;margin-bottom:14px}
.auth-card input:focus{outline:none;border-color:var(--accent)}
.auth-card .btn{width:100%;margin-top:4px}
.auth-card .err{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad-ink);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.auth-card .fine{font-size:12px;color:var(--faint);margin:16px 0 0}
/* rail links */
.navi{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--faint)}
.navi:hover{color:var(--fg)}
.navi.on{background:var(--raise);color:var(--fg)}
.entity{width:100%;height:36px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font:inherit;font-size:13px;padding:0 10px}
/* inner pages: team, activity, security */
.app.page{grid-template-rows:56px minmax(0,1fr)}
.ppage{grid-column:2/4;overflow-y:auto;padding:28px 32px 48px;max-width:1100px;width:100%}
.ppage h1{font-size:22px;font-weight:500;margin:0 0 4px}
.ppage h2{font-size:15px;font-weight:500;margin:0 0 12px}
.psub{color:var(--muted);margin:0 0 18px}
.pcard{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:18px 20px;margin-bottom:16px;min-width:0;overflow-x:auto}
.pcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start;margin-bottom:16px}
.pcols .pcard{margin:0}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.ptable td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.ptable tr:last-child td{border-bottom:0}
.prow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ppage label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.ppage input,.ppage select{display:block;width:100%;height:38px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--fg);font:inherit;font-size:13.5px;margin-top:5px}
.ppage .prow input,.ppage .prow select{margin-top:0;width:auto;min-width:140px}
.ppage input:focus,.ppage select:focus{outline:none;border-color:var(--accent)}
.pbtn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;background:var(--grad);color:var(--accent-ink);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.pbtn.ghost{background:var(--raise);color:var(--fg);font-weight:500;border:1px solid var(--line)}
.pbtn.danger{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad-ink);font-weight:500}
.pbtn.sm{height:30px;padding:0 10px;font-size:12.5px}
.pflash{border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.pflash.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-ink)}
.pflash.err{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad-ink)}
.roles{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;font-size:12.5px}
.roles dt{color:var(--fg)}.roles dd{margin:0;color:var(--muted)}
.small{font-size:12.5px}.muted{color:var(--muted)}
/* two-factor cards */
.steps{margin:0 0 14px;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.6}
.qr{width:200px;height:200px;background:#fff;border-radius:10px;padding:6px;margin:0 auto}
.qr svg{width:100%;height:100%;display:block}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px;margin:0 0 14px;font-size:15px}
.check-dark{display:flex!important;align-items:center;gap:8px;margin:0 0 14px!important;color:var(--muted)}
.check-dark input{width:auto!important;height:auto!important;margin:0!important}
.auth-card .mono{font-family:var(--font-mono);color:var(--fg);word-break:break-all}
a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
@media (max-width:860px){.ppage{padding:20px 16px 40px}.app.page{display:flex;flex-direction:column}}
/* quotes */
.ppage textarea{display:block;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--fg);font:inherit;font-size:13.5px;margin-top:5px;resize:vertical}
.ppage textarea:focus{outline:none;border-color:var(--accent)}
.qtotal td{border-top:1px solid var(--line);padding-top:12px}
.qkv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:0}
.qkv dt{color:var(--faint)}.qkv dd{margin:0}
.qcheck{display:flex!important;gap:10px;align-items:flex-start;color:var(--fg)!important;font-size:13.5px!important;margin-bottom:14px!important}
.ppage .qcheck input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.qaccept{border-color:color-mix(in srgb,var(--accent) 35%,var(--line-soft))}
.quote-cta{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pill.p-wait{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info-ink)}
.pill.p-no{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad-ink)}
.pill.s-quoted{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info-ink)}
@media print{
  body{background:#fff;color:#000}
  .rail,.top,.noprint{display:none!important}
  .app.page{display:block}.ppage{padding:0;max-width:none;overflow:visible}
  .pcard{background:#fff;border-color:#ccc;color:#000}
  .muted,.psub,.ptable th,.qkv dt{color:#555!important}
  .pill{border:1px solid #999;color:#000!important;background:none!important}
}
.bt.q{background:var(--accent)}
/* print and attach */
.printbox{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 7%,transparent);border-radius:12px;padding:16px;margin-bottom:6px}
.printbox.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 6%,transparent)}
.pb-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
.pb-head b{display:block;font-weight:600;margin-bottom:3px}
.pb-head span{color:var(--muted);font-size:13px;max-width:520px;display:block}
.pb-head .btn{white-space:nowrap}
.pb-confirm{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13.5px}
.pb-confirm label{display:flex;gap:8px;align-items:center}
.pb-confirm input{width:16px;height:16px;accent-color:var(--accent)}
.pb-confirm .btn{width:auto;padding:8px 14px}
.printnote{display:block;width:100%;text-align:left;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,transparent);color:var(--muted);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px;cursor:pointer}
.printnote b{color:var(--warn-ink);font-weight:600;margin-right:6px}
/* live indicator */
.livebadge{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 10px 4px 9px;white-space:nowrap}
.livebadge i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.livebadge i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:live-pulse 2.4s ease-out infinite}
.livebadge.stale i,.livebadge.stale i::after{background:var(--warn)}
@keyframes live-pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.livebadge i::after{animation:none;opacity:0}}
.page .kpis+.livebadge{margin-left:auto}
@media (max-width:860px){.livebadge span{display:none}.livebadge{padding:5px}}
.tl-zone{font-size:11.5px;color:var(--faint);margin:0 0 10px}
/* map pan and zoom */
.map{cursor:grab;touch-action:none;user-select:none}
.map.dragging{cursor:grabbing}
.mapctl{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:2}
.mapctl button{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--raise) 88%,transparent);border:1px solid var(--line);color:var(--fg);font-size:17px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.mapctl button:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.mapctl button:disabled{opacity:.35;cursor:default}
.mapctl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tags{pointer-events:none}
.legend i.n{background:#5a7590;opacity:.6}
/* moving light on progress bars of shipments under way */
.track.live i{overflow:hidden;background:linear-gradient(90deg,rgba(11,191,220,.25),rgba(8,211,166,.9))}
.track.live i::after{content:"";position:absolute;top:0;bottom:0;width:46px;left:-46px;background:linear-gradient(90deg,transparent,rgba(217,255,245,.5) 35%,#fff 52%,rgba(217,255,245,.5) 68%,transparent);animation:track-sweep 2.6s cubic-bezier(.45,0,.25,1) infinite}
.track.live .mode{animation:mode-glow 2.6s ease-in-out infinite}
.track.live .mode svg{fill:#08d3a6}
@keyframes track-sweep{0%{left:-46px}75%,100%{left:100%}}
@keyframes mode-glow{0%,100%{box-shadow:0 0 0 0 rgba(8,211,166,0)}50%{box-shadow:0 0 0 4px rgba(8,211,166,.16),0 0 12px rgba(8,211,166,.35)}}
.seg.live{position:relative;overflow:hidden}
.seg.live::after{content:"";position:absolute;top:0;bottom:0;width:70px;left:-70px;background:linear-gradient(90deg,transparent,rgba(217,255,245,.55),transparent);animation:seg-sweep 3s cubic-bezier(.45,0,.25,1) infinite;pointer-events:none;mix-blend-mode:screen}
.seg.live i.cur{animation:seg-pulse 2s ease-in-out infinite}
@keyframes seg-sweep{0%{left:-70px}70%,100%{left:calc(var(--p) - 70px)}}
@keyframes seg-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.track.live i::after,.seg.live::after{animation:none;display:none}.track.live .mode,.seg.live i.cur{animation:none}}
/* booked, waiting for collection: a slow pulse at the start, nothing sliding */
.track.wait .mode{animation:mode-glow 3.2s ease-in-out infinite}
.track.wait .mode svg{fill:#08d3a6}
.seg.wait i.cur{animation:seg-pulse 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.track.wait .mode,.seg.wait i.cur{animation:none}}
/* logistics terms */
.terms-body h3{font-size:14px;font-weight:600;margin:20px 0 8px;color:var(--fg)}
.terms-body h3:first-child{margin-top:0}
.terms-body ul{margin:0 0 6px;padding-left:18px}
.terms-body li{margin:0 0 6px;line-height:1.5;font-size:13.5px;color:color-mix(in srgb,var(--fg) 88%,transparent)}
.terms-body p{font-size:13.5px;line-height:1.55;margin:0 0 10px;color:color-mix(in srgb,var(--fg) 88%,transparent)}
@media print{.terms-body h3,.terms-body li,.terms-body p{color:#000}}
/* company name sits quieter than the product name, after a thin divider */
.top .acct{gap:12px}
.top .acct::before{content:"";width:1px;height:20px;background:var(--line)}
.top .acct b{color:var(--muted);font-weight:400}
/* ---------- chat window ---------- */
.chatw{position:fixed;right:20px;bottom:20px;z-index:50;font-family:var(--font-ui)}
.chatw-launch{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border-radius:22px;background:var(--grad);color:var(--accent-ink);font-weight:600;font-size:13.5px;box-shadow:0 8px 24px var(--shadow),0 0 0 1px var(--tint);cursor:pointer;position:relative}
.chatw-launch svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linejoin:round}
.chatw-launch:hover{filter:brightness(1.06)}
.chatw.is-open .chatw-launch{display:none}
.chatw-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:11.5px;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)}
.chatw-launch.has-unread{animation:chat-nudge 2.8s ease-in-out infinite}
@keyframes chat-nudge{0%,88%,100%{transform:none}92%{transform:translateY(-3px)}96%{transform:translateY(0)}}
.chatw-panel{width:380px;height:min(580px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px var(--shadow);overflow:hidden}
.chatw-panel[hidden]{display:none}
.chatw-panel.drop{outline:2px dashed color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:-8px}
.chatw-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line-soft);background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.chatw-panel header b{display:block;font-weight:600;font-size:14px}
.chatw-panel header small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.chatw-x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex:none}
.chatw-x:hover{background:var(--raise);color:var(--fg)}
.chatw-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.chatw-thread{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column}
.chatw-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px;max-width:260px;line-height:1.5}
.chatw .chat-day{text-align:center;margin:12px 0 6px;font-size:11px;color:var(--faint)}
.chatw .chat-day span{background:var(--raise);padding:3px 10px;border-radius:99px}
.chatw .chat-msg{max-width:84%;margin:3px 0;display:flex;flex-direction:column}
.chatw .chat-msg.mine{align-self:flex-end;align-items:flex-end}.chatw .chat-msg.theirs{align-self:flex-start}
.chatw .chat-who{font-size:11px;color:var(--muted);margin:4px 0 3px 4px}
.chatw .chat-bubble{padding:8px 12px;border-radius:14px;background:var(--raise);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.chatw .chat-msg.mine .chat-bubble{background:color-mix(in srgb,var(--accent) 22%,var(--raise));border-bottom-right-radius:5px}
.chatw .chat-msg.theirs .chat-bubble{border-bottom-left-radius:5px}
.chatw .chat-bubble a{color:var(--accent)}
.chatw .chat-ref{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.chatw .chat-time{font-size:10.5px;color:var(--faint);margin:3px 4px 0}
.chatw .chat-files{display:flex;flex-direction:column;gap:6px}.chatw .chat-text+.chat-files{margin-top:8px}
.chatw .chat-file{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:var(--tint);text-decoration:none;color:var(--fg)}
.chatw .chat-file:hover{background:var(--tint-2)}
.chatw .chat-file svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
.chatw .chat-file b{display:block;font-weight:500;font-size:12.5px}.chatw .chat-file small{font-size:11px;color:var(--muted)}
.chatw .chat-img img{display:block;max-width:220px;max-height:180px;border-radius:9px}
.chatw-form{border-top:1px solid var(--line-soft);padding:8px 10px 10px}
.chatw-chips{display:flex;flex-wrap:wrap;gap:6px}
.chatw-chips:not(:empty){margin:2px 2px 8px}
.chatw-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 6px 4px 10px;border-radius:99px;background:var(--raise);border:1px solid var(--line);font-size:12px;color:var(--fg)}
.chatw-chip small{color:var(--muted)}
.chatw-chip button{width:18px;height:18px;border-radius:50%;color:var(--muted);display:grid;place-items:center}
.chatw-chip button:hover{background:var(--line);color:var(--fg)}
.chatw-chip.ref{padding:4px 10px;cursor:pointer;color:var(--muted)}
.chatw-chip.ref.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.chatw-row{display:flex;align-items:flex-end;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:5px}
.chatw-row:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.chatw-row textarea{flex:1;resize:none;border:0;background:none;color:var(--fg);font:inherit;font-size:13.5px;line-height:1.4;padding:7px 4px;max-height:140px;outline:none}
.chatw-attach,.chatw-send{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;cursor:pointer;color:var(--muted)}
.chatw-attach:hover{background:var(--raise);color:var(--fg)}
.chatw-send{background:var(--grad);color:var(--accent-ink)}
.chatw-send:disabled{opacity:.5}
.chatw-attach svg,.chatw-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chatw-err{margin-top:6px;font-size:12px;color:var(--bad-ink)}
@media (max-width:860px){.chatw{right:12px;bottom:12px}.chatw-launch span{display:none}.chatw-launch{width:48px;padding:0;justify-content:center;border-radius:50%}
  .chatw.is-open{inset:0}.chatw-panel{width:100%;height:100%;border-radius:0;border:0}}
@media print{.chatw{display:none}}
/* documents requested by Aspect, and sending documents */
.reqbox{border:1px solid color-mix(in srgb,var(--warn) 50%,var(--line));background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:12px;padding:16px;margin-bottom:14px}
.reqitem{border-top:1px solid color-mix(in srgb,var(--warn) 25%,var(--line));padding-top:12px;margin-top:12px}
.reqtitle b{display:block;font-weight:600}.reqtitle span{display:block;color:var(--fg);opacity:.85;font-size:13px;margin-top:2px}.reqtitle small{display:block;color:var(--faint);font-size:11.5px;margin-top:2px}
.upform{margin-top:10px}
.upgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.upform label{display:block;font-size:12px;color:var(--muted)}
.upform select,.upform input:not([type=file]){display:block;width:100%;height:36px;margin-top:4px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--fg);font:inherit;font-size:13px}
.upform select:focus,.upform input:focus{outline:none;border-color:var(--accent)}
.upnote{margin-top:10px}
.upform .upfind+select{margin-top:6px}
.uprow{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.upfile{flex:1;min-width:200px;display:flex!important;align-items:center;height:38px;padding:0 12px;border:1px dashed color-mix(in srgb,var(--fg) 28%,transparent);border-radius:8px;color:var(--muted)!important;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px!important}
.upfile:hover{border-color:var(--accent);color:var(--fg)!important}
.upfile input{position:absolute;width:1px;height:1px;opacity:0}
.upfile span{overflow:hidden;text-overflow:ellipsis}
.uprow .btn{width:auto;padding:9px 16px}
.uphint{font-size:11.5px;color:var(--faint);margin:6px 0 0}
.sendbox{margin-top:18px;border:1px solid var(--line-soft);border-radius:12px;padding:12px 16px;background:var(--raise)}
.sendbox summary{cursor:pointer;font-weight:500;font-size:13.5px}
.sendbox[open] summary{margin-bottom:2px}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:0 10px 30px var(--shadow);transition:opacity .5s,transform .5s}
.toast.ok{background:color-mix(in srgb,var(--ok) 25%,var(--panel));color:var(--ok-ink);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.toast.err{background:color-mix(in srgb,var(--bad) 25%,var(--panel));color:var(--bad-ink);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.toast.out{opacity:0;transform:translate(-50%,-10px)}
@media (max-width:600px){.upgrid{grid-template-columns:1fr}}
/* light / dark toggle */
.themebtn{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);flex:none;cursor:pointer;background:transparent}
.themebtn:hover{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.themebtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-moon{display:none}
html[data-theme="light"] .themebtn .i-sun{display:none}
html[data-theme="light"] .themebtn .i-moon{display:block}
.top .themebtn{margin-left:auto}
.top .kpis+.themebtn{margin-left:0}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* light-mode touch-ups for pieces drawn with fixed colours */
html[data-theme="light"] .rail{background:var(--panel)}
html[data-theme="light"] .tag{background:color-mix(in srgb,var(--panel) 92%,transparent)}
html[data-theme="light"] .chatw .chat-msg.mine .chat-bubble{background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
html[data-theme="light"] .track.live i::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 35%,#fff 52%,rgba(255,255,255,.7) 68%,transparent)}
html[data-theme="light"] .seg.live::after{mix-blend-mode:normal;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)}
html[data-theme="light"] .seg i.on{background:var(--fg)}
.upgrid:has(.upname[hidden]){grid-template-columns:1fr}
/* local clock in the header */
.clock{display:flex;align-items:center;gap:12px;white-space:nowrap}
.clock-place{color:var(--muted)}
.clock .clock-time{font-weight:500;font-size:15px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock-zone{font-size:11px;color:var(--faint)}
.top .kpis+.clock{margin-left:0}
.top .clock{margin-left:auto;padding-right:2px}
.top .kpis~.clock{margin-left:0}
@media (max-width:1180px){.top .clock-place{display:none}}
@media (max-width:860px){.top .clock{display:none}}
.top .clock+.themebtn{margin-left:0}

/* ---------- Documents Center ---------- */
.dc-wait h2,.dc-group h2{font-size:15px;margin:0 0 10px}
.dc-group{margin:22px 0 0}
.dc-reqs{list-style:none;margin:0;padding:0}
.dc-reqs li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.dc-reqs li:first-child{border-top:0;padding-top:0}
.dc-reqs li>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-reqact{display:flex;gap:8px;align-items:center}
.dc-tools{display:flex;gap:10px;margin:6px 0 4px;flex-wrap:wrap}
.dc-tools input{flex:1 1 320px;min-width:0}
.dc-tools select{flex:0 0 auto;width:auto}
.dc-tools input,.dc-tools select{height:38px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--fg);font:inherit;font-size:13.5px}
.dc-tools input:focus,.dc-tools select:focus{outline:none;border-color:var(--accent)}
.dc-none{margin:16px 0}
.dc-list{display:grid;gap:8px}
.dc-item{background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;transition:border-color .3s,box-shadow .3s}
.dc-item[open]{border-color:var(--line)}
.dc-item.wanted{border-color:color-mix(in srgb,var(--warn-ink) 55%,transparent)}
.dc-item.flash{box-shadow:0 0 0 2px var(--accent)}
.dc-item summary{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}
.dc-item summary::-webkit-details-marker{display:none}
.dc-item summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin-left:6px;flex:none;transition:transform .15s}
.dc-item[open] summary::after{transform:rotate(225deg)}
.dc-item .ic{width:40px;height:30px;border-radius:5px;background:var(--line);display:grid;place-items:center;font-family:var(--font-mono);font-size:9.5px;color:var(--muted);flex:none}
.dc-name{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dc-name b{font-weight:600;font-size:13.5px}
.dc-name small{color:var(--muted);font-size:12px}
.dc-tag{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--line);color:var(--muted);white-space:nowrap;flex:none}
.dc-tag.ok{background:color-mix(in srgb,var(--ok-ink) 16%,transparent);color:var(--ok-ink)}
.dc-tag.want{background:color-mix(in srgb,var(--warn-ink) 16%,transparent);color:var(--warn-ink)}
.dc-body{padding:0 14px 12px 66px;font-size:13.5px;line-height:1.55}
.dc-body p{margin:0 0 8px}
.dc-links{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.dc-links a{color:var(--accent);text-decoration:none;font-weight:500}
.dc-links a:hover{text-decoration:underline}
@media (max-width:600px){.dc-body{padding-left:14px}.dc-tag:not(.ok):not(.want){display:none}}
.reqtitle small a{color:var(--accent);text-decoration:none;font-weight:500}.reqtitle small a:hover{text-decoration:underline}

/* ---------- requested documents: deadlines and urgency ---------- */
.reqwarn{margin:2px 0 10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.reqwarn a{color:inherit;text-decoration:underline}
.reqtitle .reqdue{color:var(--warn-ink);opacity:1;font-weight:500;font-size:12.5px}
.reqtitle .reqdue.late{color:var(--bad-ink)}
.holdtag{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px;background:color-mix(in srgb,var(--bad-ink) 16%,transparent);color:var(--bad-ink)}
.reqline{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;font-weight:500;color:var(--warn-ink)}
.reqline i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.reqline.urgent{color:var(--bad-ink)}
.reqline.urgent i{animation:reqpulse 1.6s ease-in-out infinite}
@keyframes reqpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
.reqbanner{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:12px 12px 0;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn-ink) 45%,transparent);background:color-mix(in srgb,var(--warn-ink) 9%,var(--panel))}
.reqbanner.urgent{border-color:color-mix(in srgb,var(--bad-ink) 55%,transparent);background:color-mix(in srgb,var(--bad-ink) 9%,var(--panel))}
.reqbanner>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.reqbanner b{font-size:13.5px;font-weight:600}
.reqbanner span{font-size:12.5px}
.reqbanner small{font-size:11.5px;color:var(--muted)}
.reqbanner .btn{padding:8px 14px}
@media (prefers-reduced-motion:reduce){.reqline.urgent i{animation:none}}
.dc-due{font-size:12.5px;font-weight:500;color:var(--warn-ink)}.dc-due.late{color:var(--bad-ink)}

/* ---------- quote request form ---------- */
.rq h2{font-size:15px;margin:0 0 12px}
.rq-h3{font-size:13px;font-weight:600;margin:18px 0 6px}
.rq-hint{display:block;font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.4}
.rq-set{border:0;padding:0;margin:0;min-width:0}
.rq-set legend{font-size:15px;font-weight:600;padding:0;margin-bottom:6px}
.rq .pcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.rq .pcols .pcard{margin:0}
.rq-scroll{overflow-x:auto}
.rq-pieces{min-width:720px}
.rq-pieces td{padding:4px 6px 4px 0;vertical-align:middle}
.rq-pieces input{margin-top:0;height:34px}
.rq-pieces th:nth-child(-n+5),.rq-pieces td:nth-child(-n+5){width:84px}
.rq-text{display:block;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--fg);font:inherit;font-size:13.5px;resize:vertical}
.rq-text:focus{outline:none;border-color:var(--accent)}
.ppage textarea{font:inherit}
.ppage input[type=file]{height:auto;padding:8px 10px}
.rq label[hidden],.rq [hidden]{display:none!important}
@media (max-width:860px){.rq .pcols{grid-template-columns:1fr}}
.rq-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.rq-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rq-state{margin:0 0 10px;font-size:13px;color:var(--muted)}
.rq-state b{color:var(--fg)}
.rq-facts{grid-template-columns:auto 1fr;max-width:640px}
.rq-cancel{margin-top:10px}
.rq-cancel .link{background:none;border:0;padding:0;color:var(--bad-ink);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}
.rq-new{margin-left:auto}
.rq-airnote{margin:12px 0 0;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.5;border:1px solid color-mix(in srgb,var(--warn-ink) 45%,transparent);background:color-mix(in srgb,var(--warn-ink) 9%,var(--panel))}
.rq-airnote b{color:var(--warn-ink)}
.clock .clock-sun{display:inline-flex;align-items:center;gap:5px;padding-left:12px;border-left:1px solid var(--line);font-size:12.5px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.clock .clock-sun[hidden]{display:none}
.clock-sun svg{width:15px;height:15px;flex:none;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke:currentColor}
.clock-sun.set svg{stroke:#f0a35e}.clock-sun.rise svg{stroke:#e9b949}
.greet{margin:0 0 -4px;font-size:18px;font-weight:600;letter-spacing:-.01em}
a.brand{color:inherit;text-decoration:none}a.brand:hover h1{color:var(--accent)}a.logo{border-radius:8px;transition:opacity .15s}a.logo:hover{opacity:.8}
.blank-greet{font-size:26px;margin:0 0 18px;color:var(--fg)}.blank p{max-width:460px;margin-inline:auto}
.entity-switch{display:flex;align-items:center;gap:6px}
.entity-switch svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.entity-switch select{appearance:none;-webkit-appearance:none;background:var(--raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%238a9a98' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center/14px;border:1px solid var(--line);border-radius:8px;color:var(--fg);font:inherit;font-size:13px;padding:6px 28px 6px 10px;max-width:260px;cursor:pointer}
.entity-switch select:focus{outline:none;border-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.entity-switch select.on{border-color:var(--accent);color:var(--accent)}

/* compact controls inside table rows: same height as small buttons */
.ppage .ptable select,.ppage .ptable input:not([type=checkbox]):not([type=radio]){height:30px;font-size:13px;padding:0 26px 0 9px;margin-top:0;width:auto;min-width:120px}
.ppage .ptable .prow{flex-wrap:nowrap}
.ptable td .pill{vertical-align:middle}

/* forms inside rows and the header carry no bottom margin, so they sit on the row's centre line */
.top form,.ptable form,.prow form{margin:0}
.team-name summary{cursor:pointer;margin-top:4px}.team-name input{height:30px;font-size:13px;width:auto;min-width:180px;margin-top:0}

/* Address book */
.ab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ab-card{display:flex;flex-direction:column;gap:10px;margin:0}
.ab-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ab-head b{font-size:15px}
.ab-lines{font-size:13.5px;line-height:1.5}
.ab-meta{line-height:1.5}
.ab-meta:empty{display:none}
.ab-actions{margin-top:auto;gap:6px;flex-wrap:wrap}
.rq-book{display:flex;align-items:flex-end;gap:12px;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px}
.rq-book label{flex:1;display:flex;flex-direction:column;gap:5px;margin:0;padding:0;font-size:12.5px;color:var(--muted)}
.rq-book select{width:100%}
.rq-book a{font-size:12.5px;white-space:nowrap;display:inline-flex;align-items:center;height:38px}
.rq-save{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin-top:10px;font-size:13px}
.rq-save[hidden]{display:none!important}
.rq-save input{width:auto;margin:0}
@media (max-width:560px){.rq-book{flex-direction:column;align-items:stretch}.rq-book a{height:auto}}

.zip-note{display:block;font-size:11.5px;color:var(--ok-ink);margin-top:4px;font-weight:400}
.zip-note.warn{color:var(--warn-ink)}
.phone-row{display:flex;gap:6px;align-items:stretch;width:100%}
.phone-row .phone-dial{flex:0 0 96px;width:96px;min-width:0}
.phone-row input{flex:1;min-width:0;width:auto}
.handling{border:0;padding:0;margin:6px 0 0;min-width:0}
.handling legend{font-size:13px;font-weight:600;color:var(--fg);margin-bottom:8px;padding:0}
.handling-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 14px}
.rq .handling-opt,.handling-opt{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:13px;color:var(--fg);cursor:pointer;margin:0}
.handling-opt input{width:auto!important;height:auto;margin:0;flex:none}
.ab-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ab-tags span{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--raise);border:1px solid var(--line);color:var(--fg)}
.hours-row{display:flex;gap:6px;width:100%;max-width:520px}
.hours-row select{flex:1;min-width:0}
.hours-row select:first-child{flex:1.4}
.hours-row select:disabled{opacity:.45}
.hours-legacy{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.extras{display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.extras-list{display:flex;flex-direction:column;gap:8px}
.extras-list:empty{display:none}
.extra-row{display:flex;align-items:center;gap:8px;max-width:520px}
.extra-k{flex:0 0 46px;font-size:12px;color:var(--muted)}
.extra-v{flex:1;min-width:0}
.extra-v input{width:100%}
.extra-x{flex:none;width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.extra-x:hover{color:var(--bad)}
.extras-add{display:flex;gap:14px}
.extra-add{background:none;border:0;padding:0;color:var(--cyan-ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.extra-add[hidden]{display:none}
.extra-v input,.extra-v select,.extra-v .phone-row{margin-top:0!important;margin-bottom:0!important}
.auto-card .auto-toggle{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--fg);cursor:pointer}
.auto-card .auto-toggle input{width:auto!important;height:auto;margin:3px 0 0;flex:none}
.auto-body{margin-top:14px;display:flex;flex-direction:column;gap:14px;padding-left:24px}
.auto-body[hidden]{display:none}
.auto-amount{max-width:360px}
.auto-input{display:flex;align-items:center;gap:8px;margin-top:6px}
.auto-input input{flex:1;min-width:0}
.auto-sym{font-size:18px;font-weight:600;color:var(--fg)}
.auto-cur{font-size:12px;font-weight:600;color:var(--muted)}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;flex:none;vertical-align:middle;background:var(--raise);border:1px solid var(--line)}
.avatar-i{color:#fff;font-weight:700;letter-spacing:.02em;line-height:1;user-select:none;border:0}
.user-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.team-person{display:flex;align-items:center;gap:10px}
label.pbtn,label.btn{display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;margin:0!important}
form[data-avatar-form]{margin:0}
/* Stage tabs on the dashboard */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:9px;background:var(--raise);border:1px solid var(--line-soft)}
.stage{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 6px;border-radius:7px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:none;min-width:0}
.stage:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.stage[aria-selected="true"]{color:var(--fg);background:var(--panel, #121a1b);box-shadow:0 1px 0 rgba(0,0,0,.25),inset 0 0 0 1px var(--line)}
.stage .num{font-size:10.5px;font-weight:700;color:var(--faint);min-width:16px;text-align:center;padding:0 4px;border-radius:5px;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.stage[aria-selected="true"] .num{color:var(--fg);background:color-mix(in srgb,var(--cyan-ink, #5fd6ea) 22%,transparent)}
.stage-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:36px 18px!important}
.stage-empty b{color:var(--fg);font-size:14px}
.stage-empty span{font-size:13px;color:var(--muted);max-width:260px}
.stage-empty .pbtn{margin-top:8px}
.pane-empty{display:flex;flex-direction:column;gap:6px;padding:28px 4px;color:var(--muted);font-size:13.5px}
.pane-empty b{color:var(--fg);font-size:15px}
.draft-card{cursor:default}
.draft-title{font-size:14px;font-weight:600;color:var(--fg)}
.draft-cargo{font-size:12.5px;color:var(--muted)}
.draft-actions{display:flex;gap:6px;align-items:center}
.draft-actions form{margin:0}
.draft-card[aria-selected="true"]{border-color:var(--cyan-ink, #5fd6ea)}
.pill.s-draft{background:color-mix(in srgb,var(--faint) 22%,transparent);color:var(--muted)}
.rq-decide{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.rq-decide form{margin:0}
.btn.danger,.btn.ghost.danger{color:var(--bad-ink)}
.draft-note{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.qextend-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.qextend-form label{display:flex;flex-direction:column;gap:5px;margin:0}
.qextend-form .grow{flex:1;min-width:220px}
.qextend-form .pbtn{flex:none}
.qextend form{margin:0}
.sn-panel .rq-panel-head a{font-size:12.5px}
.sn-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 14px;font-size:12.5px}
.sn-list li{display:flex;gap:6px;align-items:baseline;min-width:0}
.sn-list li .mono{color:var(--fg)}
.sn-list li small{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-more summary,.sn-add summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin-top:8px}
.sn-form{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-width:560px}
.sn-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.sn-form textarea{width:100%}
.sn-form .sn-replace{flex-direction:row;align-items:center;gap:8px}
.sn-form .sn-replace input{width:auto;margin:0}
.sn-form .pbtn{align-self:flex-start}
.serial-body{margin-top:12px}
.serial-body[hidden]{display:none}
.serial-card .auto-toggle{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--fg);cursor:pointer}
.serial-card .auto-toggle input{width:auto!important;height:auto;margin:3px 0 0;flex:none}
#lg-lanes b{font-weight:inherit}
.legend i.d{background:var(--accent);opacity:1;animation:lgpulse 1.3s ease-in-out infinite}
@keyframes lgpulse{0%,100%{box-shadow:0 0 0 0 rgba(8,211,166,.55)}50%{box-shadow:0 0 0 4px rgba(8,211,166,0)}}
@media (prefers-reduced-motion:reduce){.legend i.d{animation:none}}
.tag.draft em{color:var(--accent)}
.tag.draft{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.rebook-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}
.rebook-row div{display:flex;flex-direction:column;gap:3px}
.rebook-row b{font-size:14px;color:var(--fg)}
.rebook-row span{font-size:12.5px;color:var(--muted)}
.rebook-row .pbtn{flex:none}
.rebook-row .manifest-btns{display:flex;flex-direction:row;align-items:center;gap:8px;flex:none}
.manifest-row + .rebook-row{margin-top:10px}
@media (max-width:560px){.manifest-row{flex-direction:column;align-items:stretch}.manifest-row .manifest-btns{justify-content:flex-end}}
.rebook-note{line-height:1.5}
.pane{padding-bottom:88px}
.sn-form textarea{display:block;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--fg);font-size:13px;resize:vertical}
.sn-form textarea:focus{outline:none;border-color:var(--accent)}
.sn-form input[type=file],.ppage input[type=file]{color:var(--muted);font-size:12.5px}
.sn-form input[type=file]::file-selector-button,.ppage input[type=file]::file-selector-button{font:inherit;font-size:12.5px;font-weight:600;margin-right:10px;padding:6px 12px;border-radius:7px;border:1px solid var(--line);background:var(--raise);color:var(--fg);cursor:pointer}
.pod-grid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
.pod-sig{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.pod-sig img{width:220px;max-width:100%;height:90px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--line);padding:4px}
.pod-sig figcaption{font-size:11px;color:var(--faint)}
.pod-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:12px}
.pod-photos a{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--raise)}
.pod-photos img{width:100%;height:100%;object-fit:cover;display:block}
.pod-docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* ---------- credit limit / exposure ---------- */
.creditnote{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 12px 0;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn-ink) 45%,transparent);background:color-mix(in srgb,var(--warn-ink) 9%,var(--panel))}
.creditnote.over{border-color:color-mix(in srgb,var(--bad-ink) 55%,transparent);background:color-mix(in srgb,var(--bad-ink) 9%,var(--panel))}
.creditnote>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.creditnote b{font-size:13.5px;font-weight:600;color:var(--warn-ink)}.creditnote.over b{color:var(--bad-ink)}
.creditnote span{font-size:12.5px;line-height:1.45}
.creditnote .pbtn{flex:none}
.creditnote.inline{display:block;margin:14px 0 0;font-size:13px;line-height:1.5}
.ppage .creditnote:not(.inline),.page .creditnote:not(.inline){margin:0 0 16px}
@media (max-width:560px){.creditnote:not(.inline){flex-direction:column;align-items:stretch}.creditnote .pbtn{align-self:flex-end}}
.xcard{padding:22px 24px}
.xhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.xhead h2{margin:0;font-size:18px;font-weight:600}
.xsub{margin:4px 0 0;color:var(--muted);font-size:13px}
.xpill{margin-top:2px}
.xpill.none{background:var(--raise);color:var(--muted)}
.xpill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-ink)}
.xpill.near{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn-ink)}
.xpill.over{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad-ink)}
.xstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
.xstats div{display:flex;flex-direction:column;gap:4px}
.xstats span,.xstages span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.xstats b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.xstats b.neg{color:var(--bad-ink)}
.xmeter{margin-top:16px}
.xmeter-bar{position:relative;height:10px;border-radius:99px;background:var(--raise);border:1px solid var(--line-soft)}
.xmeter-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--ok)}
.xmeter.near .xmeter-bar i{background:var(--warn)}.xmeter.over .xmeter-bar i{background:var(--bad)}
.xmeter-bar b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--faint)}
.xmeter-legend{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.xstages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.xstages div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;background:var(--raise);border:1px solid var(--line-soft);min-width:0}
.xstages b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.xstages small{font-size:12px;color:var(--muted)}
@media (max-width:760px){.xstages{grid-template-columns:repeat(2,minmax(0,1fr))}.xstats{grid-template-columns:1fr 1fr}.xstats div:last-child{grid-column:1/-1}}
.xtable{margin-top:18px}
.xtable th.r,.xtable td.r{text-align:right;padding-right:0}
.xtable td.r small{display:block;font-size:11px;color:var(--faint)}
.xtable td.mono a{color:inherit}
.xnote{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
@media (max-width:640px){.xtable .xroute,.xtable .xco{display:none}.xcard{padding:18px 16px}}
.xstages .uncounted{background:transparent;border-style:dashed}
.xstages .uncounted b{color:var(--muted)}
.xstages em{font-style:normal;text-transform:none;letter-spacing:0;font-size:10.5px;margin-left:6px;padding:1px 6px;border-radius:4px;background:var(--raise);color:var(--muted)}
.xstats small{font-size:12px;color:var(--muted)}
.xcredits{margin-top:18px}
.xcredits .ptable td.r{text-align:right;padding-right:0;color:var(--ok-ink)}

/* Team tables: everything lines up with the person's name, whatever opens under it */
.team-person{align-items:flex-start}
.team-person .avatar{margin-top:1px}
.ptable.team td{vertical-align:top}
.ptable.team td .pill{display:inline-block;margin-top:1px}
.ptable.team td .pill + .muted{margin-top:4px}
.ptable.team td > form.prow,.ptable.team td > .prow,.ptable.team td > .pbtn{margin-top:-6px}
.xstats.x4{grid-template-columns:repeat(4,minmax(0,1fr))}
.xstats b.warn{color:var(--warn-ink)}
@media (max-width:760px){.xstats.x4{grid-template-columns:1fr 1fr}.xstats.x4 div:last-child{grid-column:auto}}

/* ---------- frozen account ---------- */
.frozen{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--info-ink) 50%,transparent);background:color-mix(in srgb,var(--info) 12%,var(--panel))}
.list .frozen{margin:12px 12px 0}
.frozen svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--info-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.frozen>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.frozen b{font-size:14px;font-weight:600;color:var(--info-ink)}
.frozen span{font-size:13px;line-height:1.5}
.frozen .frozen-msg{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.frozen small{font-size:12px;color:var(--muted);line-height:1.45}
.frozen.pulse{animation:frozenpulse .9s ease-out}
@keyframes frozenpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--info) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.frozen-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:var(--fg);color:var(--bg);font-size:13.5px;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.frozen-toast.on{opacity:1;transform:translate(-50%,0)}
.list .frozen small{display:none}

/* ---------- customs: tabs, HS checker, guide, invoice maker ---------- */
.ctabs{display:flex;gap:4px;margin:0 0 18px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctabs a{flex:none;padding:9px 14px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13.5px;border-bottom:2px solid transparent;white-space:nowrap}
.ctabs a.on{color:var(--fg);border-bottom-color:var(--accent)}
.ctabs a:hover{color:var(--fg)}
.hs-search label{margin-bottom:6px}
.hs-search .prow{flex-wrap:nowrap}
.ppage .hs-search .prow input{flex:1;width:auto;min-width:0;height:40px;margin:0;font-size:14px}
.hs-search .pbtn{height:40px}
.hs-result{border-left:3px solid var(--line)}
.hs-result.ok{border-left-color:var(--ok)}
.hs-result.bad{border-left-color:var(--warn)}
.hs-verdict{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.hs-verdict b{font-size:15px;font-weight:600}
.hs-result.ok .hs-verdict b{color:var(--ok-ink)}
.hs-result.bad .hs-verdict b{color:var(--warn-ink)}
.hs-verdict span{font-size:12.5px;color:var(--muted)}
.hs-chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.hs-chain li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.hs-chain li span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.hs-chain li b{font-weight:500;font-size:13.5px;line-height:1.45}
.hs-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.hs-list{list-style:none;margin:6px 0 0;padding:0}
.hs-list li{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:13.5px;line-height:1.45}
.hs-list li:first-child{border-top:0}
.hs-list a{color:var(--accent);text-decoration:none;font-weight:600}
.hs-common td:first-child,.hs-common th:first-child{white-space:nowrap}
.hs-common td.muted{font-size:12.5px;line-height:1.45}
@media (max-width:640px){.hs-chain li{grid-template-columns:1fr;gap:2px}.hs-common th:nth-child(3),.hs-common td:nth-child(3){display:none}}

.guide{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.guide-toc{position:sticky;top:16px}
.guide-toc ol{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:7px;font-size:13px}
.guide-toc a{color:var(--fg);text-decoration:none}
.guide-toc a:hover{color:var(--accent)}
.guide-sec{scroll-margin-top:16px}
.guide-sec h2{font-size:16px;font-weight:600}
.guide-sec p,.guide-sec li{font-size:13.5px;line-height:1.6}
.guide-sec p{margin:0 0 10px}
.guide-sec ul,.guide-sec ol{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.g-scroll{overflow-x:auto;margin:6px 0 12px}
.g-table{min-width:620px}
.g-table td{font-size:13px;vertical-align:top;line-height:1.45}
.g-table td.g-s{color:var(--cyan-ink)}
.g-table td.g-b{color:var(--muted)}
.g-table td.g-n{color:var(--faint)}
.g-table th{white-space:normal}
.guide-sec .g-tip + .g-tip{margin-top:8px}
.g-tip{padding:10px 12px;border-radius:8px;background:var(--raise);border:1px solid var(--line-soft)}
@media (max-width:900px){.guide{grid-template-columns:1fr}.guide-toc{position:static}}

.ci-form h2{font-size:15px;font-weight:600}
.ci-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ci-cols .pcard{margin-bottom:16px}
@media (max-width:900px){.ci-cols{grid-template-columns:1fr;gap:0}}
.pgrid label.span{grid-column:1/-1}
.ci-party{grid-template-columns:repeat(2,minmax(0,1fr))}
.check-row{display:flex!important;align-items:center;gap:8px;margin:0!important;font-size:13.5px!important;color:var(--fg)!important}
.ppage .check-row input{width:16px;height:16px;margin:0;flex:none}
.ci-scroll{overflow-x:auto;margin:0 -4px}
.ci-lines{width:100%;min-width:900px;border-collapse:collapse}
.ci-lines th{font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);text-align:left;padding:0 4px 8px}
.ci-lines th.r{text-align:right}
.ci-lines td{padding:6px 4px;vertical-align:top;border-top:1px solid var(--line-soft)}
.ppage .ci-lines input,.ppage .ci-lines select,.ppage .ci-lines textarea{margin:0;height:38px;font-size:13px}
.ppage .ci-lines textarea{height:auto;min-height:38px;padding:9px 10px;line-height:1.35}
.ci-lines td:nth-child(2){width:30%}
.ci-lines td:nth-child(3){width:118px}
.ci-lines td:nth-child(4){width:130px}
.ci-lines td:nth-child(5),.ci-lines td:nth-child(8){width:72px}
.ci-lines td:nth-child(6){width:80px}
.ci-lines td:nth-child(7){width:100px}
.ci-lines input.num{text-align:right}
.ci-n{width:22px;padding-top:16px!important;color:var(--faint);font-size:12px;text-align:center}
.ci-total{width:120px;text-align:right;padding-top:16px!important;font-size:13px;white-space:nowrap}
.ci-hs{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:1.35;margin-top:4px;color:var(--faint)}
.ci-hs.ok{color:var(--ok-ink)}
.ci-hs.bad{color:var(--warn-ink)}
.ci-x{width:30px;height:38px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:17px;cursor:pointer}
.ci-x:hover{color:var(--bad-ink);border-color:var(--bad-ink)}
.ci-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 260px;gap:12px;align-items:end;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ci-totals label{margin:0}
.ci-totals input.num{text-align:right}
.ci-other{display:flex;gap:6px}
.ppage .ci-other input{margin-top:5px}
.ppage .ci-other input:first-child{flex:1.4;min-width:0}
.ppage .ci-other input:last-child{flex:1;min-width:0}
.ci-sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;padding:10px 12px;border-radius:10px;background:var(--raise);border:1px solid var(--line-soft)}
.ci-sum span{font-size:12.5px;color:var(--muted)}
.ci-sum b{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.ci-sum .ci-grand{font-size:15px;font-weight:600;color:var(--fg)}
@media (max-width:1000px){.ci-totals{grid-template-columns:1fr 1fr}.ci-sum{grid-column:1/-1}}
.ci-save-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ci-save-row label.grow{flex:1;min-width:260px;margin:0}
.ci-save-row .prow{flex-wrap:nowrap}
.ci-save-row .pbtn{height:38px}
.ci-save-row .pbtn[disabled]{opacity:.45;cursor:not-allowed}
.ci-sub{display:block;font-size:11.5px;color:var(--faint)}
.ci-list td{vertical-align:middle}
.ci-mini{list-style:none;margin:8px 0 0;padding:0}
.ci-mini li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:13px}
.ci-mini li:first-child{border-top:0}
.ci-mini small{color:var(--muted);flex:1}
.draft-ci{font-size:12px;color:var(--ok-ink);margin-top:6px}
.draft-ci a{color:inherit}
@media (max-width:480px){.ctabs{gap:0}.ctabs a{padding:9px 9px;font-size:13px}}

/* ---------- duty and tax estimator ---------- */
.duty{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.duty-form h2{font-size:15px;font-weight:600}
.duty-form input.num{text-align:right}
.duty-out{position:sticky;top:16px}
.duty-lines{display:grid;grid-template-columns:1fr auto;gap:10px 12px;margin:10px 0 0}
.duty-lines dt{font-size:13px;color:var(--muted)}
.duty-lines dt span{display:block;font-size:11.5px;color:var(--faint)}
.duty-lines dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-size:13.5px}
.duty-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.duty-total span{font-size:13.5px;font-weight:500}
.duty-total b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.duty-out .xnote:empty{display:none}
@media (max-width:900px){.duty{grid-template-columns:1fr}.duty-out{position:static}}
.duty-form .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){.duty-form .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- sidebar: icons only, or expanded with page names ---------- */
.navl{display:none}
.app{transition:grid-template-columns .2s ease}
.rail-toggle{margin-top:6px;background:none;border:0;cursor:pointer;font:inherit}
.rail-toggle svg{transition:transform .2s ease}
html[data-rail="open"] .app{grid-template-columns:212px 380px minmax(0,1fr)}
html[data-rail="open"] .app.page{grid-template-columns:212px 380px minmax(0,1fr)}
html[data-rail="open"] .rail{align-items:stretch;padding-inline:10px;overflow-y:auto;overflow-x:hidden}
html[data-rail="open"] .rail .logo{margin-left:4px}
html[data-rail="open"] .navi{width:auto;height:38px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 10px;white-space:nowrap}
html[data-rail="open"] .navi svg{flex:none}
html[data-rail="open"] .navl{display:block;font-size:13.5px;font-weight:500;color:inherit;overflow:hidden;text-overflow:ellipsis}
html[data-rail="open"] .navi.on .navl{color:var(--fg)}
html[data-rail="open"] .rail-toggle svg{transform:rotate(180deg)}
@media (max-width:1180px){html[data-rail="open"] .app,html[data-rail="open"] .app.page{grid-template-columns:200px 330px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.app,.rail-toggle svg{transition:none}}
.navi,.navi:hover{text-decoration:none}


/* ---------- message threads (per shipment, and General) ---------- */
.thread-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column}
.thread-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px;max-width:260px;line-height:1.5}
.thread-box .chat-day{text-align:center;margin:12px 0 6px;font-size:11px;color:var(--faint)}
.thread-box .chat-day span{background:var(--raise);padding:3px 10px;border-radius:99px}
.thread-box .chat-msg{max-width:84%;margin:3px 0;display:flex;flex-direction:column}
.thread-box .chat-msg.mine{align-self:flex-end;align-items:flex-end}.thread-box .chat-msg.theirs{align-self:flex-start}
.thread-box .chat-who{font-size:11px;color:var(--muted);margin:4px 0 3px 4px}
.thread-box .chat-bubble{padding:8px 12px;border-radius:14px;background:var(--raise);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.thread-box .chat-msg.mine .chat-bubble{background:color-mix(in srgb,var(--accent) 22%,var(--raise));border-bottom-right-radius:5px}
.thread-box .chat-msg.theirs .chat-bubble{border-bottom-left-radius:5px}
.thread-box .chat-bubble a{color:var(--accent)}
.thread-box .chat-ref{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.thread-box .chat-time{font-size:10.5px;color:var(--faint);margin:3px 4px 0}
.thread-box .chat-files{display:flex;flex-direction:column;gap:6px}.thread-box .chat-text+.chat-files{margin-top:8px}
.thread-box .chat-file{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:var(--tint);text-decoration:none;color:var(--fg)}
.thread-box .chat-file:hover{background:var(--tint-2)}
.thread-box .chat-file svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
.thread-box .chat-file b{display:block;font-weight:500;font-size:12.5px}.thread-box .chat-file small{font-size:11px;color:var(--muted)}
.thread-box .chat-img img{display:block;max-width:220px;max-height:180px;border-radius:9px}
.thread-form{border-top:1px solid var(--line-soft);padding:8px 10px 10px}
.thread-chips{display:flex;flex-wrap:wrap;gap:6px}
.thread-chips:not(:empty){margin:2px 2px 8px}
.thread-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 6px 4px 10px;border-radius:99px;background:var(--raise);border:1px solid var(--line);font-size:12px;color:var(--fg)}
.thread-chip small{color:var(--muted)}
.thread-chip button{width:18px;height:18px;border-radius:50%;color:var(--muted);display:grid;place-items:center}
.thread-chip button:hover{background:var(--line);color:var(--fg)}
.thread-chip.ref{padding:4px 10px;cursor:pointer;color:var(--muted)}
.thread-chip.ref.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.thread-row{display:flex;align-items:flex-end;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:5px}
.thread-row:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.thread-row textarea{flex:1;resize:none;border:0;background:none;color:var(--fg);font:inherit;font-size:13.5px;line-height:1.4;padding:7px 4px;max-height:140px;outline:none}
.thread-attach,.thread-send{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;cursor:pointer;color:var(--muted)}
.thread-attach:hover{background:var(--raise);color:var(--fg)}
.thread-send{background:var(--grad);color:var(--accent-ink)}
.thread-send:disabled{opacity:.5}
.thread-attach svg,.thread-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thread-err{margin-top:6px;font-size:12px;color:var(--bad-ink)}
.thread-box{display:flex;flex-direction:column;min-height:0}
.thread-box .thread-list{flex:none;height:clamp(260px,52vh,560px);padding:10px 4px;border-radius:12px}
.thread-box .thread-form{border-top:0;padding:10px 0 0}
.thread-box.drop .thread-list{outline:2px dashed color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:-4px}
.thread-box .thread-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px;max-width:340px;line-height:1.5}
.pane .thread-box .thread-list{height:clamp(240px,calc(100vh - 470px),620px)}
.navi{position:relative}
.navi-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e5544b;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.navi-badge[hidden]{display:none}
html[data-rail="open"] .navi-badge{position:static;margin-left:auto}
.card .unread-dot{display:inline-block;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e5544b;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;margin-left:6px;vertical-align:1px}
.msgs{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.msgs-list{padding:8px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 220px);overflow-y:auto}
.msgs-item{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 34px 10px 12px;border-radius:9px;text-decoration:none;color:var(--fg)}
.msgs-item:hover{background:var(--raise)}
.msgs-item.on{background:var(--raise)}
.msgs-item b{font-size:13.5px;font-weight:600}
.msgs-item span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgs-item small{font-size:11px;color:var(--faint)}
.msgs-badge{position:absolute;top:10px;right:10px;font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5544b;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.msgs-list .xnote{padding:8px 12px}
@media (max-width:900px){.msgs{grid-template-columns:1fr}.msgs-list{max-height:none}}
.tab-count{display:inline-block;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e5544b;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;margin-left:6px;vertical-align:1px}
.convo-sub{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.convo .thread-box .thread-list{background:var(--bg);border:1px solid var(--line-soft)}
.ppage .thread-row textarea{display:block;margin:0;border:0;background:none;padding:7px 4px;min-height:0;height:auto;width:auto;flex:1}
.ppage .thread-row label{margin:0;display:grid}

/* Progress in amber (customs hold, delay, missed delivery) or red (needs attention) */
.seg.warn i.on{background:var(--warn)}.seg.warn i.cur{background:color-mix(in srgb,var(--warn) 55%,transparent)}
.seg.bad i.on{background:var(--bad)}.seg.bad i.cur{background:color-mix(in srgb,var(--bad) 55%,transparent)}
.track.warn i,.track.live.warn i{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 30%,transparent),var(--warn))}.track.warn .mode svg,.track.live.warn .mode svg{fill:var(--warn)}
.track.bad i,.track.live.bad i{background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 30%,transparent),var(--bad))}.track.bad .mode svg,.track.live.bad .mode svg{fill:var(--bad)}
.track.live.warn .mode,.track.live.bad .mode{animation:none}
html[data-theme="light"] .seg.warn i.on{background:var(--warn)}html[data-theme="light"] .seg.bad i.on{background:var(--bad)}

/* Boxes: one row per box with its own progress */
.boxes-panel .rq-panel-head{display:flex;align-items:center;justify-content:space-between}
.boxes-count{font-size:12px;color:var(--muted)}
.boxes{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.boxes li{display:grid;grid-template-columns:22px 150px minmax(120px,1fr) 150px 150px;align-items:center;column-gap:14px;font-size:13px}
.boxes .box-no{color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.boxes .box-ref{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boxes .box-seg{margin:0}
.boxes .box-label{color:var(--fg);white-space:nowrap}
.boxes .box-when{color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:760px){.boxes li{grid-template-columns:22px 1fr auto;row-gap:6px}.boxes .box-seg{grid-column:2/4}.boxes .box-label{grid-column:2}.boxes .box-when{grid-column:3}}