/* Design styles preserved from supplied operations prototype. */

  :root{
    /* MOBOXA "Trust — Light". Tokens aligned exactly to the canonical theme sheet.
       (Internal names kept: indigo=transit, amber=warn, brick=critical, slate=ink-2,
       faint=ink-3, bg=paper, panel=surface, panel-2=surface-2.) */
    /* Accessible palette, matching the app (v1.2.0): Secure Teal nudged to #0F6E60,
       amber and tertiary text darkened, so text meets WCAG AA on light grounds. */
    --secure:#0F6E60; --secure-tint:#E3F1EE;
    --indigo:#3B4B86; --indigo-tint:#E8ECF7;
    --amber:#8A5A08;  --amber-tint:#FAF0DA;
    --brick:#B23A2E;  --brick-tint:#F8E7E4;
    --ink:#0E1726; --slate:#54607A; --faint:#616C85;
    --hairline:#E5EAF1; --hairline-2:#D6DEE8; --panel:#FFFFFF; --bg:#EAEEF3;
    --panel-2:#F5F8FB; --shadow:rgba(14,23,38,.07);
    --accent:var(--secure); --accent-bright:#5FE3C4;
    --radius:14px; --radius-sm:10px;
    --display:'Space Grotesk',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.45}
  h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  a{color:inherit}
  button{font-family:var(--body);cursor:pointer}

  /* Shell */
  .shell{display:grid;grid-template-columns:236px 1fr;min-height:100%}
  .side{background:var(--panel);border-right:1px solid var(--hairline);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
  .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
  .brand .mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:16px}
  .brand .name{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em}
  .brand .sub{font-size:10px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
  .nav{padding:8px;display:flex;flex-direction:column;gap:2px;overflow:auto}
  .nav .group{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:12px 12px 5px}
  .nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--slate);text-decoration:none;font-weight:600;font-size:13px}
  .nav a svg{width:17px;height:17px;flex:none}
  .nav a:hover{background:var(--panel-2);color:var(--ink)}
  .nav a.active{background:var(--secure-tint);color:var(--accent)}
  .nav .spacer{flex:1}
  .side .foot{padding:12px 16px;border-top:1px solid var(--hairline);display:flex;align-items:center;gap:10px}
  .avatar{width:32px;height:32px;border-radius:99px;background:var(--indigo-tint);color:var(--indigo);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:12px}

  .main{min-width:0;display:flex;flex-direction:column}
  .topbar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:14px;padding:12px 22px}
  .topbar h1{font-size:20px}
  .search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--hairline);border-radius:10px;padding:8px 11px;color:var(--faint)}
  .search input{border:0;background:transparent;outline:none;color:var(--ink);font-family:var(--body);font-size:13px;width:100%}
  .pill-env{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--hairline);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--slate)}
  .dot{width:7px;height:7px;border-radius:99px;background:var(--secure)}
  .icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--hairline);background:var(--panel);color:var(--slate);display:grid;place-items:center}
  .content{padding:22px;display:flex;flex-direction:column;gap:18px;max-width:1240px;width:100%}
  .view[hidden]{display:none !important}

  /* Bits */
  .row{display:flex;gap:14px;flex-wrap:wrap}
  .card{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:0 3px 14px var(--shadow)}
  .card.pad{padding:18px}
  .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
  .section-title h2{font-size:16px}
  .muted{color:var(--slate)}
  .faint{color:var(--faint)}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
  .kpi{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px}
  .kpi .label{font-size:11px;color:var(--slate);font-weight:600}
  .kpi .val{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em}
  .kpi .delta{font-size:11px;font-weight:600}
  .kpi .barwrap{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:4px}
  .kpi .barwrap>i{display:block;height:100%;border-radius:99px}
  .stripe{width:4px;border-radius:4px;align-self:stretch}

  /* Pills / status */
  .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
  .pill .d{width:6px;height:6px;border-radius:99px}
  .pill.secure{background:var(--secure-tint);color:var(--secure)}
  .pill.indigo{background:var(--indigo-tint);color:var(--indigo)}
  .pill.amber{background:var(--amber-tint);color:var(--amber)}
  .pill.brick{background:var(--brick-tint);color:var(--brick)}
  .pill.plain{background:var(--panel-2);color:var(--slate)}
  .pill.secure .d{background:var(--secure)} .pill.indigo .d{background:var(--indigo)}
  .pill.amber .d{background:var(--amber)} .pill.brick .d{background:var(--brick)} .pill.plain .d{background:var(--faint)}

  /* Channel chip (cable / ops-net / cellular / offline) */
  .chan{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--slate)}
  .chan svg{width:14px;height:14px}
  .chan.cable{color:var(--indigo)} .chan.opsnet{color:var(--secure)} .chan.cell{color:var(--slate)} .chan.off{color:var(--brick)}

  /* Table */
  .tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel)}
  table{border-collapse:collapse;width:100%;min-width:760px}
  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hairline);font-size:13px;white-space:nowrap}
  th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;background:var(--panel-2);position:sticky;top:0}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--panel-2)}
  tbody tr:last-child td{border-bottom:0}
  td .name{font-weight:600}
  td .id{font-size:11px;color:var(--faint)}
  .bar-mini{width:64px;height:6px;border-radius:99px;background:var(--panel-2);display:inline-block;vertical-align:middle;overflow:hidden}
  .bar-mini>i{display:block;height:100%}

  /* Filters */
  .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .chip{border:1px solid var(--hairline);background:var(--panel);color:var(--slate);border-radius:99px;padding:6px 13px;font-size:12px;font-weight:600}
  .chip.on{background:var(--secure-tint);color:var(--accent);border-color:transparent}

  /* Buttons */
  .btn{border:0;border-radius:10px;padding:10px 15px;font-weight:600;font-size:13px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:8px}
  .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--hairline)}
  .btn.danger{background:var(--brick)}
  .btn.warn{background:var(--amber)}
  .btn svg{width:15px;height:15px}
  .btn:active{transform:translateY(1px)}

  /* Box detail */
  .detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
  .telemetry{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .tile{background:var(--panel-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:12px}
  .tile .l{font-size:10.5px;color:var(--slate);font-weight:600}
  .tile .v{font-family:var(--mono);font-weight:600;font-size:16px;margin-top:5px}
  .route{aspect-ratio:16/10;border-radius:var(--radius-sm);border:1px solid var(--hairline);background:linear-gradient(160deg,var(--panel-2),var(--bg));overflow:hidden;position:relative}
  .commands{display:flex;flex-direction:column;gap:9px}
  .cmd-row{display:flex;gap:9px;flex-wrap:wrap}

  /* Stepper / provisioning */
  .steps{display:flex;gap:0;margin:6px 0 4px}
  .step{flex:1;display:flex;flex-direction:column;gap:6px;position:relative;padding-right:8px}
  .step .n{width:26px;height:26px;border-radius:99px;background:var(--panel-2);border:1px solid var(--hairline);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--faint);font-family:var(--mono)}
  .step.done .n{background:var(--secure);border-color:var(--secure);color:#fff}
  .step.active .n{background:var(--secure-tint);border-color:var(--secure);color:var(--secure)}
  .step .t{font-size:11.5px;font-weight:600;color:var(--slate)}
  .step.active .t{color:var(--ink)}
  .toggle{display:inline-flex;background:var(--panel-2);border:1px solid var(--hairline);border-radius:10px;padding:3px;gap:3px}
  .toggle button{border:0;background:transparent;border-radius:8px;padding:8px 14px;font-weight:600;font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:7px}
  .toggle button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px var(--shadow)}
  .toggle svg{width:15px;height:15px}

  .list-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--hairline)}
  .list-row:last-child{border-bottom:0}
  .list-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
  .list-row .grow{flex:1;min-width:0}
  .list-row .grow .t{font-weight:600;font-size:13px}
  .list-row .grow .s{font-size:11.5px;color:var(--slate);margin-top:1px}

  .note{display:flex;gap:9px;align-items:flex-start;border-radius:11px;padding:11px 13px;font-size:12.5px;font-weight:500}
  .note svg{width:16px;height:16px;flex:none;margin-top:1px}
  .note.info{background:var(--indigo-tint);color:var(--indigo)}
  .note.good{background:var(--secure-tint);color:var(--secure)}
  .note.warn{background:var(--amber-tint);color:var(--amber)}

  /* progress rows */
  .fwrow{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--hairline)}
  .fwrow:last-child{border-bottom:0}
  .prog{flex:1;height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:120px}
  .prog>i{display:block;height:100%;background:var(--accent);border-radius:99px}

  /* toast — one stack, so a burst of process feedback queues instead of each
     message overwriting the last. Severity is carried by colour AND icon, and the
     stack sits above the modal backdrop (90 vs the backdrop's 80): a validation
     error raised from a process dialog has to be readable while it is still open. */
  .toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:stretch;pointer-events:none;width:min(520px,92vw)}
  .toast{background:var(--ink);color:var(--bg);padding:12px 12px 12px 16px;border-radius:12px;font-weight:600;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.3);display:flex;align-items:center;gap:9px;pointer-events:auto;cursor:pointer;opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease}
  .toast.show{opacity:1;transform:translateY(0)}
  .toast svg{width:16px;height:16px;flex:none}
  .toast .tmsg{flex:1;min-width:0}
  .toast .tcls{background:transparent;border:0;color:inherit;opacity:.6;font-size:17px;line-height:1;padding:0 4px;cursor:pointer}
  .toast .tcls:hover{opacity:1}
  .toast.success{border-left:3px solid var(--accent-bright)}
  .toast.info{border-left:3px solid #8093E4}
  .toast.warn{background:var(--amber);color:#fff;border-left:3px solid #F2D08A}
  .toast.error{background:var(--brick);color:#fff;border-left:3px solid #F0B3AA}
  @media (prefers-reduced-motion:reduce){.toast{transition:none;transform:none}}

  /* Keyboard focus — visible on every interactive control. */
  :focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:8px}
  tbody tr:focus-visible{outline-offset:-2px}
  .nav a:focus-visible,.mobile-nav a:focus-visible{outline-offset:-2px}
  .chip{appearance:none;cursor:pointer}

  /* Search results panel */
  .search{position:relative}
  .qresults{position:absolute;top:calc(100% + 8px);right:0;width:min(430px,86vw);background:var(--panel);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 18px 40px rgba(14,23,38,.15);padding:6px;z-index:60;max-height:58vh;overflow:auto}
  .qresults[hidden]{display:none}
  .qhead{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:9px 10px 4px}
  .qrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:9px 10px;cursor:pointer;font-family:var(--body)}
  .qrow:hover,.qrow[aria-selected="true"]{background:var(--panel-2)}
  .qrow .qt{font-size:13px;font-weight:600;color:var(--ink)}
  .qrow .qs{font-size:11.5px;color:var(--slate)}
  .qkind{margin-left:auto;font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
  .qempty{padding:14px 12px;font-size:12.5px;color:var(--slate)}

  /* Sortable table headers */
  .thsort{all:unset;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:5px;padding:2px 0}
  .thsort::after{content:'↕';opacity:.4}
  th[aria-sort="ascending"] .thsort::after{content:'↑';opacity:1;color:var(--indigo)}
  th[aria-sort="descending"] .thsort::after{content:'↓';opacity:1;color:var(--indigo)}

  /* Secondary condition pills */
  .pill.mini{padding:2px 7px;font-size:10px;margin-left:5px}

  .qscope{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--hairline);font-size:11.5px;color:var(--slate);cursor:pointer;border-radius:0 0 10px 10px}
  .qscope input{accent-color:var(--indigo)}
  .qnote{padding:2px 10px 8px;font-size:11px;color:var(--faint)}

  /* Modal / process dialogs */
  .backdrop{position:fixed;inset:0;background:rgba(14,23,38,.45);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:80;padding:20px}
  .backdrop[hidden]{display:none}
  .modal{background:var(--panel);border:1px solid var(--hairline);border-radius:16px;box-shadow:0 24px 60px rgba(14,23,38,.28);width:min(560px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
  .modal-h{display:flex;align-items:flex-start;gap:10px;padding:18px 20px 12px;border-bottom:1px solid var(--hairline)}
  .modal-h h2{font-size:17px}
  .modal-h .s{font-size:12px;color:var(--slate);margin-top:3px;line-height:1.4}
  .modal-x{margin-left:auto;background:transparent;border:0;color:var(--faint);cursor:pointer;font-size:22px;line-height:1;padding:0 4px}
  .modal-b{padding:18px 20px;overflow:auto;display:flex;flex-direction:column;gap:14px}
  .modal-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--hairline);flex-wrap:wrap}
  .field{display:flex;flex-direction:column;gap:6px}
  .field>label{font-size:11.5px;font-weight:600;color:var(--slate)}
  .field input,.field select,.field textarea{font-family:var(--body);font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--hairline);border-radius:10px;padding:10px 12px;width:100%}
  .field textarea{min-height:64px;resize:vertical}
  .field .hint{font-size:11px;color:var(--faint)}
  .checks{display:flex;flex-direction:column;gap:9px}
  .checks label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:500;color:var(--ink)}
  .checks input{margin-top:2px;accent-color:var(--secure)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:520px){.grid2{grid-template-columns:1fr}}
  .runrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:12.5px}
  .runrow:last-child{border-bottom:0}
  .runrow .st{margin-left:auto;font-size:11px;font-weight:700}

  .mobile-nav{display:none}
  @media (max-width:860px){
    .shell{grid-template-columns:1fr}
    .side{display:none}
    .detail-grid{grid-template-columns:1fr}
    .mobile-nav{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--hairline);background:var(--panel);position:sticky;top:0;z-index:6}
    .mobile-nav a{white-space:nowrap;padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--slate);text-decoration:none}
    .mobile-nav a.active{background:var(--secure-tint);color:var(--accent)}
    .content{padding:16px}
    .topbar{padding:12px 16px}
  }

  /* ===== Box screen (physical device display) preview =====
     A faithful mock of the round screen on the box lid — a Nextion NX4848E021
     (2.1", 480×480 circular IPS, capacitive touch). Kept dark, with the four status
     colours reused so a state reads the same here as it does in the fleet table. */
  /* Round face — models the Nextion NX4848E021 (2.1", 480×480 circular). The bezel
     and the active area are both discs; content is inset so the curved edge never
     clips it, and the top/bottom lines are short and centred to fit the chord. */
  .screenframe{background:radial-gradient(circle at 50% 40%,#1A2130,#080B12 70%);border:1px solid #222A38;border-radius:50%;aspect-ratio:1/1;padding:11px;max-width:290px;margin:0 auto;display:grid;place-items:center;box-shadow:inset 0 0 0 3px #05070C, 0 6px 22px rgba(0,0,0,.3)}
  .screen{aspect-ratio:1/1;width:100%;border-radius:50%;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;color:#EAF0F7;background:radial-gradient(circle at 50% 42%,#0D1320,#06080d 72%);font-family:var(--body);padding:13% 14%}
  .screen .sbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%}
  .screen .sglyph{width:38px;height:38px}
  .screen .stitle{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.2px;line-height:1.12}
  .screen .ssub{font-size:10.5px;color:#9AA7BC;line-height:1.3;max-width:100%}
  .screen .scode{font-family:var(--mono);font-weight:700;font-size:24px;letter-spacing:5px;color:#fff}
  .screen .stopbar{display:flex;align-items:center;gap:6px;font-size:9px;color:#8593AB;font-family:var(--mono);max-width:70%;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .screen .sfoot{font-size:9px;color:#8593AB;font-family:var(--mono);max-width:74%;display:flex;gap:6px;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .screen .sfoot .dot{opacity:.5}
  .screen.on-secure{box-shadow:inset 0 0 0 2px rgba(31,167,143,.35)}
  .screen.on-indigo{box-shadow:inset 0 0 0 2px rgba(122,142,214,.35)}
  .screen.on-amber{box-shadow:inset 0 0 0 2px rgba(214,158,60,.4)}
  .screen.on-brick{background:radial-gradient(circle at 50% 42%,#2A0E0C,#160707 72%);box-shadow:inset 0 0 0 2px rgba(224,90,74,.6)}
  .screen .badge{position:absolute;top:11%;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:700;padding:2px 8px;border-radius:99px}
  .screen-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
  .screen-gallery .screenframe{max-width:170px}
  /* Three small state previews under each profile — must shrink to fit the card. */
  .sg-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .sg-strip .screenframe{max-width:none;width:100%;padding:5px}
  .sg-strip .stitle{font-size:10px}
  .sg-strip .ssub{font-size:7px}
  .sg-strip .sglyph{width:24px;height:24px}
  .sg-strip .scode{font-size:13px;letter-spacing:3px}
  .sg-strip .stopbar,.sg-strip .sfoot{font-size:6.5px}
  .screen-gallery .sg-item .sg-cap{margin-top:8px}
  .screen-gallery .sg-item .sg-name{font-size:12.5px;font-weight:700;color:var(--ink)}
  .screen-gallery .sg-item .sg-when{font-size:11px;color:var(--slate);margin-top:2px}

  /* ===== Shipping label (4×6 in / 101.6×152.4 mm) =====
     Built to the universal desktop-thermal size (Zebra/Rollo/Dymo) that Royal Mail
     Click & Drop, DPD and Evri all emit. On screen it is scaled to fit the modal;
     on paper @page pins it to the true physical size. */
  .label4x6{width:101.6mm;height:152.4mm;background:#fff;color:#000;border:1px solid #000;
    font-family:'Helvetica Neue',Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden}
  .label4x6 *{box-sizing:border-box}
  .lbl-head{display:flex;justify-content:space-between;align-items:flex-start;padding:3mm 4mm;border-bottom:2px solid #000}
  .lbl-brand{font-family:var(--display),Arial;font-weight:800;font-size:5mm;letter-spacing:.5px}
  .lbl-carrier{text-align:right;font-weight:800;font-size:4mm;line-height:1.1}
  .lbl-carrier small{display:block;font-weight:600;font-size:2.6mm}
  .lbl-service{padding:2mm 4mm;border-bottom:1px solid #000;display:flex;justify-content:space-between;font-size:3mm;font-weight:700}
  .lbl-addr{padding:3mm 4mm;border-bottom:1px solid #000;flex:0 0 auto}
  .lbl-addr .who{font-size:2.6mm;text-transform:uppercase;letter-spacing:.5px;color:#333;font-weight:700;margin-bottom:1mm}
  .lbl-addr .to{font-size:4mm;font-weight:800;line-height:1.35}
  .lbl-from{padding:2mm 4mm;border-bottom:1px solid #000;font-size:2.7mm;line-height:1.4}
  .lbl-return-banner{background:#000;color:#fff;text-align:center;font-weight:800;font-size:3.4mm;letter-spacing:1px;padding:2mm}
  .lbl-barcode{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2mm;padding:3mm}
  .barcode{width:88%;height:16mm;background-image:repeating-linear-gradient(90deg,#000 0 0.6mm,#fff 0.6mm 1.1mm,#000 1.1mm 1.5mm,#fff 1.5mm 2.6mm);}
  .barcode.wide{background-image:repeating-linear-gradient(90deg,#000 0 1mm,#fff 1mm 1.6mm,#000 1.6mm 2mm,#fff 2mm 3.4mm)}
  .lbl-track{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:4mm;letter-spacing:1px}
  .lbl-qr{width:22mm;height:22mm;background:
    repeating-linear-gradient(0deg,#000 0 1.6mm,#fff 1.6mm 3.2mm),
    repeating-linear-gradient(90deg,#000 0 1.6mm,#fff 1.6mm 3.2mm);
    background-blend-mode:difference;border:1mm solid #fff;outline:1px solid #000}
  .lbl-foot{padding:2mm 4mm;border-top:2px solid #000;display:flex;justify-content:space-between;align-items:center;font-size:2.6mm}
  .lbl-foot .mbxid{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:3mm}
  .label-scale{transform-origin:top center}
  .label-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:4px 0 2px}
  .carrier-opt{border:1px solid var(--hairline-2);border-radius:var(--radius-sm);padding:11px 12px;cursor:pointer;background:var(--panel);text-align:left;transition:border-color .12s,background .12s}
  .carrier-opt:hover{border-color:var(--slate)}
  .carrier-opt.on{border-color:var(--secure);background:var(--secure-tint);box-shadow:inset 0 0 0 1px var(--secure)}
  .carrier-opt .cn{font-weight:700;font-size:13px;color:var(--ink)}
  .carrier-opt .cs{font-size:11px;color:var(--slate);margin-top:2px}

  /* Print: only the staged label prints, at true 4×6 physical size. */
  #printArea{display:none}
  @media print{
    @page{size:101.6mm 152.4mm;margin:0}
    html,body{background:#fff!important}
    body>*{display:none!important}
    #printArea{display:block!important;position:static}
    #printArea .label4x6{border:none;width:101.6mm;height:152.4mm}
  }