:root{
  --slate-900:#0e1a2b; --slate-800:#16273a; --slate-700:#3a4658;
  --slate-500:#697587; --slate-400:#9aa6b4; --slate-300:#cbd5e1; --slate-200:#e6eaf0; --slate-100:#f0f3f7;
  --bg:#f6f7f9; --card:#ffffff; --line:#ebeef2;
  --blue:#2f9bd6; --blue-d:#2280b5; --blue-l:#4fb2e8; --blue-soft:#e9f4fb; --emerald:#10b981; --amber:#f59e0b; --red:#ef4444;
  --ink:#101828;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 16px 48px rgba(16,24,40,.16);
  --radius:14px; --radius-sm:10px; --sidebar-w:256px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2{margin:0}
.muted{color:var(--slate-500)}
.small{font-size:.8rem}
.lead{font-size:1rem;color:var(--slate-700);max-width:74ch;margin:0 0 20px}

#app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* Sidebar */
.sidebar{background:#0f1b2c;color:#aebccd;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top,0px)) 14px 18px;position:sticky;top:0;height:100vh;border-right:1px solid rgba(255,255,255,.05);z-index:40}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 14px;text-decoration:none}
.brand-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#2f9bd6,#13263a);display:grid;place-items:center;color:#fff;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{color:#fff;font-size:.93rem;letter-spacing:.02em}
.brand-text span{font-size:.68rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.1em}
.role-chip{display:flex;align-items:center;gap:9px;margin:4px 4px 12px;padding:9px 11px;border-radius:11px;background:rgba(47,155,214,.1);border:1px solid rgba(47,155,214,.22)}
.role-chip .rc-ico{width:28px;height:28px;border-radius:8px;background:var(--blue);display:grid;place-items:center;color:#042235;font-size:.9rem;flex-shrink:0}
.role-chip .rc-text{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.role-chip .rc-text b{color:#fff;font-size:.82rem}
.role-chip .rc-text span{font-size:.64rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.08em}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:2px;overflow-y:auto}
.nav-group{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.nav-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:#566a80;padding:8px 12px 3px}
.nav-item{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:#aebccd;text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:.875rem;font-weight:500;transition:.15s;width:100%}
.nav-item .ico{width:18px;text-align:center;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(47,155,214,.15);color:#fff;box-shadow:inset 3px 0 0 var(--blue-l)}
.badge-api{margin-left:auto;font-style:normal;font-size:.58rem;background:#0ea5e9;color:#fff;padding:2px 6px;border-radius:20px;letter-spacing:.05em}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.btn-demo{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:0;padding:11px;border-radius:11px;font-weight:700;cursor:pointer;font-size:.9rem;box-shadow:0 6px 16px rgba(16,185,129,.3)}
.btn-demo:hover{filter:brightness(1.05)}
.btn-demo:disabled{opacity:.55;cursor:default;box-shadow:none}
.env-pill{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--slate-400);justify-content:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block}
.dot.ok{background:var(--emerald)}

/* Main */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;padding:max(13px,env(safe-area-inset-top,0px)) 28px 13px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
/* .menu-btn is intentionally always hidden: the sidebar is permanently visible on
   desktop, and on mobile the bottom nav's "Menu" tab opens the drawer instead.
   See the 980px tier below. Kept in markup in case a future layout wants it back. */
.menu-btn{display:none;background:transparent;border:0;font-size:1.4rem;cursor:pointer;color:var(--slate-700);padding:2px 8px;border-radius:8px;line-height:1}
.menu-btn:hover{background:var(--slate-100)}
.tb-titles{min-width:0}
.tb-titles h1{font-size:1.22rem;letter-spacing:-.01em}
.tb-titles p{margin:1px 0 0;font-size:.83rem}
.tb-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.global-search{position:relative;display:flex;align-items:center}
.global-search::before{content:"⌕";position:absolute;left:13px;color:var(--slate-400);font-size:1.05rem;pointer-events:none}
.global-search input{width:200px;max-width:38vw;padding:9px 14px 9px 32px;border:1px solid var(--line);border-radius:22px;font-size:.85rem;background:var(--slate-100);font-family:inherit;transition:.15s}
.global-search input:focus{outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,155,214,.15)}
.role-badge{display:flex;align-items:center;gap:8px;background:var(--slate-100);border:1px solid var(--line);padding:7px 13px;border-radius:22px;cursor:pointer;font-size:.83rem;font-weight:600;color:var(--slate-700);transition:.15s}
.role-badge:hover{background:#fff;border-color:var(--blue);color:var(--blue-d)}
.role-badge .rb-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.role-badge .rb-switch{font-size:.68rem;color:var(--slate-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.search-trigger{display:flex;align-items:center;gap:8px;background:var(--slate-100);border:1px solid var(--line);border-radius:22px;padding:8px 13px;cursor:pointer;color:var(--slate-500);font-size:.85rem;font-family:inherit;transition:.15s}
.search-trigger:hover{background:#fff;border-color:var(--blue);color:var(--blue-d)}
.search-trigger .st-ico{font-size:1.02rem}
.search-trigger .st-kbd{font-size:.66rem;font-weight:700;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--slate-400)}
.view-wrap{padding:28px clamp(18px,4vw,40px);overflow:auto;max-width:1240px;margin:0 auto;width:100%}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:35}
.sidebar-backdrop.open{display:block}

/* Top-bar icon buttons + notifications */
.icon-btn{position:relative;background:var(--slate-100);border:1px solid var(--line);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.02rem;display:grid;place-items:center;color:var(--slate-700);transition:.15s}
.icon-btn:hover{background:#fff;border-color:var(--blue);color:var(--blue-d)}
.notif-wrap{position:relative}
.notif-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
.notif-badge.show{display:flex}
.notif-panel{position:absolute;right:0;top:48px;width:340px;max-width:88vw;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:30;max-height:72vh;overflow:auto}
.notif-panel.open{display:block}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 10px;font-weight:700;font-size:.92rem}
.notif-item{display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:10px;cursor:pointer}
.notif-item:hover{background:var(--slate-100)}
.notif-ico{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:.9rem}
.notif-ico.exc{background:#fee2e2;color:#b91c1c}
.notif-ico.sla{background:#fef3c7;color:#b45309}
.notif-ico.ok{background:var(--blue-soft);color:var(--blue-d)}
.notif-main{min-width:0;font-size:.85rem}
.notif-main b{font-weight:700}
.notif-time{font-size:.74rem;color:var(--slate-500);margin-top:2px}
.notif-empty{padding:26px 12px;text-align:center;color:var(--slate-500);font-size:.86rem}
.notif-item.unread{background:var(--blue-soft)}
.notif-item.unread:hover{background:var(--blue-soft)}

/* Bulk select bar */
.bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;background:rgba(47,155,214,.08);border:1px solid rgba(47,155,214,.25);border-radius:11px}
.bulk-bar .bulk-count{font-weight:700;font-size:.85rem;color:var(--blue-d);margin-right:auto}
.tk-check{width:18px;height:18px;flex-shrink:0;accent-color:var(--blue);cursor:pointer}

/* Command palette */
.cmd-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.45);display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:90;backdrop-filter:blur(2px)}
.cmd-backdrop.open{display:flex}
.cmd{width:560px;max-width:92vw;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmd input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:1rem;outline:none;background:var(--card);color:var(--ink);font-family:inherit}
.cmd-results{max-height:50vh;overflow:auto;padding:6px}
.cmd-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer}
.cmd-item.sel,.cmd-item:hover{background:var(--slate-100)}
.cmd-ico{width:26px;height:26px;border-radius:7px;background:rgba(47,155,214,.14);color:var(--blue-d);display:grid;place-items:center;font-size:.85rem;flex-shrink:0}
.cmd-main{min-width:0;font-size:.9rem}
.cmd-main .cm-sub{font-size:.76rem;color:var(--slate-500)}
.cmd-empty{padding:22px;text-align:center;color:var(--slate-500);font-size:.88rem}

/* Dark theme (platform only) */
html[data-theme="dark"]{
  --bg:#0b1320; --card:#131e2e; --line:#243244; --ink:#e6edf5;
  --slate-700:#b7c2d0; --slate-500:#8a98a8; --slate-400:#6b7888; --slate-200:#243244; --slate-100:#1b2838;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.32);
  --shadow-lg:0 18px 50px rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .topbar{background:rgba(13,22,35,.86)}
html[data-theme="dark"] .icon-btn:hover,html[data-theme="dark"] .role-badge:hover{background:#1b2838}
html[data-theme="dark"] .ff input,html[data-theme="dark"] .ff select,
html[data-theme="dark"] .search-input,html[data-theme="dark"] .manifest-builder select,
html[data-theme="dark"] #scan-select,html[data-theme="dark"] .global-search input,
html[data-theme="dark"] .global-search input:focus{background:#1b2838;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .data-table tbody tr:hover{background:#1b2838}
html[data-theme="dark"] .label-card{background:#0f1a28;border-color:var(--line)}
html[data-theme="dark"] .home-tile.attn{background:#241620}
html[data-theme="dark"] .alert-row{background:#241620;border-color:#5b2330}
html[data-theme="dark"] .exc-banner{background:#241620;border-color:#5b2330}
html[data-theme="dark"] .close-x{background:#1b2838;color:var(--ink)}

/* Workspace picker (role gate) */
.role-gate{position:fixed;inset:0;z-index:100;background:radial-gradient(1000px 600px at 75% -10%,#1d3a55,transparent 55%),#0a1622;display:none;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px));overflow:auto}
.role-gate.open{display:flex}
.rg-close{position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:20px;border:0;background:rgba(255,255,255,.08);
  color:#dfe6ee;width:38px;height:38px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;z-index:1;transition:.15s}
.rg-close:hover{background:rgba(255,255,255,.16)}
.rg-inner{width:100%;max-width:860px;text-align:center;color:#dfe6ee}
.rg-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.1em;color:#fff;margin-bottom:26px}
.rg-brand svg{width:30px;height:30px}
.rg-brand span{font-size:.68rem;color:#7e93a8;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.rg-inner h1{font-size:clamp(1.8rem,4vw,2.5rem);color:#fff;margin-bottom:8px;letter-spacing:-.01em}
.rg-inner>p{color:#9fb0c2;margin:0 0 30px}
.rg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rg-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;cursor:pointer;transition:.18s;color:#dfe6ee}
.rg-card:hover{background:rgba(47,155,214,.12);border-color:var(--blue);transform:translateY(-2px)}
.rg-ico{width:44px;height:44px;border-radius:12px;background:rgba(47,155,214,.18);display:grid;place-items:center;font-size:1.3rem;color:var(--blue-l)}
.rg-card b{font-size:1.1rem;color:#fff}
.rg-card>span:last-child{font-size:.86rem;color:#9fb0c2;line-height:1.45}

/* Views */
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Cards / layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:18px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.card-head h2{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* Reusable tabbed layout, used by Settings, Order Ingest, and anywhere a view
   has several independent sections that don't need to be seen side-by-side. */
.tabbed-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.tab-rail{display:flex;flex-direction:column;gap:3px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:8px;position:sticky;top:20px}
.tab-btn{display:flex;align-items:center;gap:10px;text-align:left;background:0;border:0;width:100%;
  padding:11px 12px;border-radius:9px;font-size:.87rem;font-weight:600;color:var(--slate-700);cursor:pointer;font-family:inherit}
.tab-btn .ico{width:20px;text-align:center;flex-shrink:0;font-size:1rem}
.tab-btn:hover{background:var(--bg)}
.tab-btn.active{background:var(--blue-soft);color:var(--blue-d)}
.tab-panels{min-width:0}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:os-pop .18s ease}

/* KPIs */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .k-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-500)}
.kpi .k-val{font-size:1.9rem;font-weight:800;margin-top:4px;line-height:1}
.kpi .k-sub{font-size:.78rem;color:var(--slate-500);margin-top:6px;font-weight:600}

/* Funnel */
.funnel{display:flex;flex-direction:column;gap:9px}
.funnel-row{display:grid;grid-template-columns:150px 1fr 38px;align-items:center;gap:10px;font-size:.85rem}
.funnel-bar{height:22px;border-radius:7px;background:linear-gradient(90deg,#2f9bd6,#10b981);min-width:6px}
.funnel-row .fn{font-weight:600}

/* Carrier mix */
.carrier-mix{display:flex;flex-direction:column;gap:12px}
.cm-row{display:flex;align-items:center;gap:12px;font-size:.9rem}
.cm-badge{font-weight:800;padding:5px 9px;border-radius:8px;color:#fff;min-width:64px;text-align:center;font-size:.78rem}
.cm-bar{flex:1;height:10px;background:var(--slate-100);border-radius:6px;overflow:hidden}
.cm-bar i{display:block;height:100%;background:var(--slate-700)}

/* Tables */
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.86rem}
.data-table th{text-align:left;color:var(--slate-500);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line)}
.data-table td{padding:11px 10px;border-bottom:1px solid var(--slate-100)}
.data-table tr{cursor:pointer}
.data-table tbody tr:hover{background:var(--slate-100)}
.mono{font-family:"Consolas",ui-monospace,monospace;font-size:.82rem}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-Won{background:#ede9fe;color:#6d28d9}
.st-Intake{background:#e0f2fe;color:#0369a1}
.st-PickedUp{background:#fef3c7;color:#b45309}
.st-Staged{background:#ffedd5;color:#c2410c}
.st-InTransit{background:#dbeafe;color:#1d4ed8}
.st-OutforDelivery{background:#cffafe;color:#0e7490}
.st-Delivered{background:#dcfce7;color:#15803d}
.pill.sla-ok{background:#dcfce7;color:#15803d}
.pill.sla-risk{background:#fef3c7;color:#b45309}
.pill.sla-late{background:#fee2e2;color:#b91c1c}

/* Role home (field mode) */
.home-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:20px}
.home-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);text-align:center}
.home-tile.attn{border-color:#fca5a5;background:#fff7f7}
.home-tile .ht-val{font-size:2.7rem;font-weight:800;line-height:1;color:var(--ink)}
.home-tile.attn .ht-val{color:#b91c1c}
.home-tile .ht-label{margin-top:8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);font-weight:700}
.home-cta{display:flex;align-items:center;justify-content:center;width:100%;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;border:0;border-radius:var(--radius);padding:26px;font-size:1.35rem;font-weight:800;cursor:pointer;box-shadow:0 12px 28px rgba(47,155,214,.32);margin-bottom:20px;letter-spacing:.01em}
.home-cta:hover{filter:brightness(1.06)}
.home-cta:active{transform:translateY(1px)}
.home-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
.home-action{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;cursor:pointer;box-shadow:var(--shadow);transition:.15s;font-family:inherit}
.home-action:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.home-action .ha-ico{font-size:1.7rem;color:var(--blue)}
.home-action .ha-title{font-weight:700;font-size:1.06rem;color:var(--ink)}
.home-action .ha-sub{font-size:.83rem;color:var(--slate-500)}

/* Alerts */
.alerts-list{display:flex;flex-direction:column;gap:8px}
.alert-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid #fecaca;background:#fef5f5;border-radius:11px;cursor:pointer}
.alert-row:hover{background:#fdecec}
.alert-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0;box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.alert-main{flex:1;min-width:0;font-size:.9rem}
.alert-reason{font-size:.8rem;color:#b91c1c;margin-top:2px}
.exc-banner{margin-top:10px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:9px;padding:9px 12px;font-size:.86rem;font-weight:600}

/* Buttons */
.btn{background:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.85rem;color:var(--slate-700);transition:.13s}
.btn:hover{background:var(--slate-100);border-color:var(--slate-200)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue-d)}
.btn.primary:hover{background:var(--blue-d)}
.btn.primary:disabled{opacity:.5;cursor:default}
.btn.ok{background:var(--emerald);color:#fff;border-color:#059669}
.btn.sm{padding:6px 10px;font-size:.78rem}
.btn.danger{color:#b91c1c;border-color:#fecaca;background:#fef2f2}
.btn.danger:hover{background:#fee2e2}

/* Connectors */
.connectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.connector{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.connector .c-top{display:flex;justify-content:space-between;align-items:center}
.connector .c-name{font-weight:700}
.connector .c-status{font-size:.76rem;font-weight:700;color:var(--emerald);display:flex;align-items:center;gap:6px}
.connector .c-meta{font-size:.8rem;color:var(--slate-500)}
.ingest-feed{display:flex;flex-direction:column;gap:10px}
.ingest-item{border:1px solid var(--line);border-radius:11px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;animation:fade .3s}
.ingest-item .src{font-size:.72rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.04em}
.ingest-item code{font-size:.78rem;color:var(--slate-500)}

/* Pickup / stage / tracking lists */
.pickup-list,.stage-list,.tracking-list{display:flex;flex-direction:column;gap:10px;max-height:64vh;overflow:auto}
.row-item{border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;gap:14px;align-items:center}
.row-item .ri-main{flex:1;min-width:0}
.row-item .ri-title{font-weight:700;font-size:.92rem}
.row-item .ri-sub{font-size:.8rem;color:var(--slate-500);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item.selectable{cursor:pointer}
.row-item.selectable:hover{border-color:var(--blue);background:var(--blue-soft)}
.row-item.selected{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:var(--slate-100)}

/* Manifest builder */
.manifest-builder{display:flex;flex-direction:column;gap:14px}
.manifest-builder label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--slate-700)}
.manifest-builder select,#scan-select{padding:10px;border:1px solid var(--line);border-radius:10px;font-size:.9rem;background:#fff}
.manifest-selected{border:1px dashed var(--line);border-radius:11px;padding:12px;font-size:.85rem;color:var(--slate-600);min-height:54px}
.chip{display:inline-block;background:var(--slate-100);border:1px solid var(--line);border-radius:8px;padding:4px 9px;margin:3px 4px 0 0;font-size:.78rem}

/* Scanner */
.scan-card .scanner{display:flex;flex-direction:column;gap:12px}
.scan-window{position:relative;height:170px;border-radius:14px;background:repeating-linear-gradient(45deg,#0f172a,#0f172a 12px,#111c30 12px,#111c30 24px);display:grid;place-items:center;color:#64748b;overflow:hidden;border:1px solid var(--slate-700)}
.scan-line{position:absolute;left:8%;right:8%;height:3px;background:#ef4444;box-shadow:0 0 12px #ef4444;border-radius:3px;animation:scan 2s ease-in-out infinite}
@keyframes scan{0%,100%{top:20%}50%{top:78%}}
.scan-result{min-height:120px}
.scan-result .field{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--slate-100);font-size:.9rem}
.scan-result .field b{color:var(--slate-500);font-weight:600}

/* Chain of custody timeline */
.coc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.coc-meta .chip{background:var(--slate-100)}
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--slate-200)}
.tl-node{position:relative;padding:0 0 20px}
.tl-node::before{content:"";position:absolute;left:-26px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--slate-300)}
.tl-node.done::before{background:var(--emerald);border-color:var(--emerald)}
.tl-node.current::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.tl-stage{font-weight:700;font-size:.92rem}
.tl-time{font-size:.76rem;color:var(--slate-500)}
.tl-note{font-size:.83rem;color:var(--slate-600);margin-top:2px}

/* Barcode */
.barcode{display:block;max-width:100%;height:auto}
.label-card{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;background:#fff}
.label-card .lbl-key{font-family:"Consolas",monospace;font-weight:700;letter-spacing:1px;margin-top:8px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:50;backdrop-filter:blur(2px)}
.modal-backdrop.open{display:flex}
.modal{background:var(--card);border-radius:18px;max-width:780px;width:100%;max-height:88vh;overflow:auto;padding:24px;box-shadow:0 30px 80px rgba(2,6,23,.4)}
.modal h2{margin-bottom:4px}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}
.modal .photos{display:flex;gap:10px;flex-wrap:wrap}
.modal .photos img{width:120px;height:120px;border-radius:11px;object-fit:cover;border:1px solid var(--line)}
.close-x{float:right;border:0;background:var(--slate-100);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:1.1rem}

/* Toasts */
.toast-stack{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;z-index:80}
.toast{background:var(--slate-900);color:#fff;padding:12px 16px;border-radius:12px;font-size:.86rem;box-shadow:0 12px 30px rgba(2,6,23,.35);display:flex;align-items:center;gap:10px;animation:slideIn .25s;max-width:340px}
.toast .t-ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;flex-shrink:0}
.toast.ok .t-ico{background:var(--emerald)}
.toast.api .t-ico{background:var(--blue)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* Order intake form + CSV import */
.head-actions{display:flex;gap:8px}
.order-form{display:flex;flex-direction:column;gap:11px}
.ff{display:flex;flex-direction:column;gap:5px;flex:1}
.ff label{font-size:.74rem;font-weight:600;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em}
.ff input,.ff select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:.9rem;background:#fff;font-family:inherit}
.ff input:focus,.ff select:focus,.search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,155,214,.15)}
.ff-row{display:flex;gap:10px}
.import-box{display:flex;flex-direction:column;gap:12px}
.import-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 18px;
  border:2px dashed var(--line);border-radius:13px;cursor:pointer;transition:.15s;background:var(--slate-100)}
.import-drop:hover{border-color:var(--blue);background:#eef6fb}
.import-drop .id-ico{font-size:1.8rem;color:var(--blue)}
.import-drop b{font-size:.95rem}
.chk{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--slate-700);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--blue)}

/* Search */
.search-input{padding:8px 12px;border:1px solid var(--line);border-radius:20px;font-size:.85rem;min-width:220px;background:#fff;font-family:inherit}

/* Code block (API examples) */
.code-block{background:#0e1a2b;color:#cfe6f5;border-radius:10px;padding:14px 16px;font-family:"Consolas",ui-monospace,monospace;font-size:.78rem;line-height:1.5;overflow-x:auto;white-space:pre;margin:0 0 12px;border:1px solid var(--line)}

/* Activity log */
.activity-feed{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.act-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--line);border-radius:11px}
.act-row .pill{flex-shrink:0;min-width:120px;justify-content:center}
.act-main{flex:1;min-width:0}
.act-top{font-size:.9rem}
.act-note{font-size:.8rem;color:var(--slate-500);margin-top:2px}
.act-time{font-size:.78rem;color:var(--slate-500);white-space:nowrap}

/* Role selector */
.role-box{display:flex;flex-direction:column;gap:5px}
.role-box label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate-400)}
.role-box select{background:#1e293b;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:9px 10px;font-size:.86rem;font-family:inherit}

/* Reset button */
.btn-reset{background:transparent;color:#94a3b8;border:1px solid rgba(255,255,255,.14);padding:9px;border-radius:10px;
  font-weight:600;cursor:pointer;font-size:.82rem;transition:.15s}
.btn-reset:hover{background:rgba(239,68,68,.14);color:#fecaca;border-color:rgba(239,68,68,.4)}

/* Live scan video */
#scan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
#scan-video.on{display:block}

/* Bottom tab bar: full styling lives here so it's identical everywhere it's
   turned on (the customer role unconditionally, ops roles on narrow screens
   via the 980px tier below). Hidden by default. */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);
  border-top:1px solid var(--line);padding:6px 6px max(6px,env(safe-area-inset-bottom,0px));
  justify-content:space-around;box-shadow:0 -4px 20px rgba(16,24,40,.07)}
.bn-item{flex:1;background:0;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;color:var(--slate-500);font-size:.62rem;font-weight:600;cursor:pointer;border-radius:10px;min-width:0;font-family:inherit}
.bn-item .bn-ico{font-size:1.18rem;line-height:1}
.bn-item.active{color:var(--blue-d)}
.bn-item span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Print: only the label prints */
.print-root{display:none}
@media print{
  body{background:#fff}
  body *{visibility:hidden}
  #print-root,#print-root *{visibility:visible}
  #print-root{display:block;position:absolute;left:0;top:0;width:100%}
  .plabel{width:4in;margin:0 auto;padding:14px;border:2px solid #000;font-family:Arial,sans-serif;color:#000}
  .pl-h{font-size:20px;font-weight:800;letter-spacing:.5px}
  .pl-sub{font-size:12px;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:8px;font-weight:700}
  .pl-lbl{font-size:10px;color:#444;font-weight:700}
  .pl-to{font-size:15px;line-height:1.4;margin-bottom:10px}
  .pl-bc{text-align:center}
  .pl-bc svg{max-width:100%}
  .pl-key{text-align:center;font-family:"Courier New",monospace;font-weight:700;letter-spacing:2px;font-size:15px;margin-top:4px}
  .pmanifest{width:7.5in;margin:0 auto;font-family:Arial,sans-serif;color:#000}
  .pmanifest .pl-h{font-size:20px;font-weight:800}
  .pmanifest .pl-sub{font-size:13px;font-weight:700;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px}
  .pm-tbl{width:100%;border-collapse:collapse;font-size:13px}
  .pm-tbl th,.pm-tbl td{border:1px solid #000;padding:6px 8px;text-align:left}
  .pm-tbl th{background:#eee}
  .pm-foot{margin-top:10px;font-weight:700;font-size:13px}
}

/* ---- Chain-of-custody master→detail (mobile) ---- */
.coc-back{display:none;background:transparent;border:0;color:var(--blue-d);font-weight:700;cursor:pointer;font-size:.88rem;padding:4px 0;margin-right:6px}

/* ---- Form grouping labels (cleaner intake form) ---- */
.form-group-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--slate-400);margin-top:8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.order-form .form-group-label:first-child{margin-top:0}

/* ---- Consistent empty states across lists ---- */
.pickup-list>p.muted,.stage-list>p.muted,.tracking-list>p.muted,.activity-feed>p.muted,
.alerts-list>p.muted,.ingest-feed>p.muted,#coc-detail>p.muted{
  text-align:center;padding:30px 18px;border:1px dashed var(--line);border-radius:12px;margin:0;font-size:.88rem
}

/* ---- UX polish: graceful wrapping, tap targets, keyboard focus ---- */
.card-head{flex-wrap:wrap}
.head-actions{flex-wrap:wrap;align-items:center}
.row-item{flex-wrap:wrap}
.search-input{min-width:0}
.card-head .search-input{flex:1 1 200px}

/* Visible keyboard focus (accessibility) */
.btn:focus-visible,.nav-item:focus-visible,.icon-btn:focus-visible,.role-badge:focus-visible,
.search-trigger:focus-visible,.home-action:focus-visible,.home-cta:focus-visible,.rg-card:focus-visible,
.cmd-item:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== Boot preloader ===== */
.preloader{position:fixed;inset:0;z-index:200;background:#0a1622;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s ease}
.preloader.hide{opacity:0;pointer-events:none}
.preloader .pre-name{color:#9fb0c2;font-size:.7rem;letter-spacing:.24em;font-weight:700}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--blue-l);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Login ===== */
.login-screen{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px));
  background:radial-gradient(900px 500px at 75% -10%,#1d3a55,transparent 55%),#0a1622}
.login-screen.open{display:flex}
.login-card{width:100%;max-width:380px;background:var(--card);border-radius:18px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:fade .3s ease}
.login-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin-bottom:20px;font-size:1.02rem}
.login-brand strong{color:var(--blue-d);margin-left:.12em}
.login-card h1{font-size:1.5rem;margin:0 0 4px;letter-spacing:-.01em}
.login-sub{color:var(--slate-500);font-size:.9rem;margin:0 0 20px}
.login-card .ff{margin-bottom:13px}
.login-err{color:#b91c1c;font-size:.85rem;min-height:1.1em;margin-bottom:8px}
.login-submit{width:100%;justify-content:center;padding:12px;font-size:.95rem}
.login-alt{margin-top:16px;text-align:center;font-size:.86rem;color:var(--slate-500)}
.linkbtn{background:0;border:0;color:var(--blue-d);font-weight:700;cursor:pointer;font-size:.86rem;font-family:inherit}
.linkbtn:hover{text-decoration:underline}

/* ===== User chip + sidebar foot ===== */
.user-chip{display:flex;align-items:center;gap:9px;padding:8px 6px 10px}
.user-chip .uc-avatar{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#042235;display:grid;place-items:center;font-weight:800;font-size:.82rem;flex-shrink:0}
.user-chip .uc-text{min-width:0;line-height:1.25}
.user-chip .uc-text b{display:block;color:#fff;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .uc-text span{font-size:.66rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em}
.foot-row{display:flex;gap:8px}
.foot-row .btn-reset{flex:1}

/* ===== Customer Home tab ===== */
.chome-hero{margin-bottom:20px}
.chome-hero h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.chome-hero p{margin:0;font-size:.95rem}

/* ===== Customer Account tab ===== */
.acct-head{display:flex;align-items:center;gap:14px}
.acct-avatar{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3rem;flex-shrink:0}
.acct-id{min-width:0;line-height:1.35}
.acct-id b{display:block;color:var(--ink);font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-id span{font-size:.86rem;color:var(--slate-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.acct-switch{display:block;width:100%;text-align:center;margin-top:16px;font-size:.82rem}

/* ===== Customer ordering flow (default experience) ===== */
.order-hero{margin-bottom:20px}
.order-hero h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.order-hero p{color:var(--slate-500);max-width:62ch;margin:0;font-size:.95rem;line-height:1.5}
.order-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:start}
.order-form{display:flex;flex-direction:column;gap:13px}
.order-form .ff-sm{max-width:96px;flex:0 0 auto}
/* Guided step indicator */
.order-steps{display:flex;align-items:center;gap:6px;margin-bottom:20px}
.ostep{display:flex;align-items:center;gap:8px;min-width:0}
.ostep:not(:last-child){flex:1}
.ostep:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px;transition:.2s}
.ostep.done:not(:last-child)::after{background:var(--emerald)}
.ostep .os-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;
  background:var(--slate-100);color:var(--slate-500);border:1px solid var(--line);flex-shrink:0;transition:.2s}
.ostep .os-name{font-size:.78rem;font-weight:600;color:var(--slate-500);white-space:nowrap;transition:.2s}
.ostep.active .os-dot{background:var(--blue);color:#fff;border-color:var(--blue-d);box-shadow:0 0 0 4px rgba(47,155,214,.15)}
.ostep.active .os-name{color:var(--ink)}
.ostep.done .os-dot{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.ostep.done .os-name{color:var(--slate-700)}
/* Steps */
.order-step{display:none;flex-direction:column;gap:13px}
.order-step.active{display:flex;animation:os-pop .22s ease}
.step-head h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.step-head p{font-size:.86rem;color:var(--slate-500);margin:0;line-height:1.45}
.step-nav{display:flex;gap:10px;margin-top:6px}
.step-nav .btn{flex:1}
.step-err{color:#b91c1c;font-size:.83rem;min-height:1em;text-align:center;font-weight:600}
.ff input.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.btn.block{width:100%;justify-content:center;padding:12px;font-size:.95rem;margin-top:6px}
.cust-orders{display:flex;flex-direction:column;gap:10px}
.cust-order{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;font-family:inherit;transition:.15s}
.cust-order:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,155,214,.1)}
.cust-order .co-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.cust-order .co-main b{color:var(--ink);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cust-order .co-meta{font-size:.76rem;color:var(--slate-500)}
.empty-state{text-align:center;padding:34px 18px;color:var(--slate-500)}
.empty-state .es-ico{font-size:2.2rem;margin-bottom:8px}
.empty-state b{display:block;color:var(--ink);font-size:1rem;margin-bottom:4px}
.empty-state span{font-size:.88rem;max-width:44ch;margin:0 auto;display:block;line-height:1.5}
.empty-state .btn{margin-top:16px}
/* "How it works" mini strip inside the empty orders state */
.es-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0;flex-wrap:wrap}
.es-step{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:var(--slate-500);max-width:80px}
.es-step-ico{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;font-size:1.1rem}
.es-step-arrow{color:var(--slate-300);font-size:1rem}
/* Order confirmation / success state */
.order-success{display:none;text-align:center;padding:8px 4px 4px}
.order-card.is-success .card-head,.order-card.is-success .order-form{display:none}
.order-card.is-success .order-success{display:block;animation:os-pop .28s ease}
@keyframes os-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.os-check{width:54px;height:54px;margin:6px auto 14px;border-radius:50%;background:var(--emerald);color:#fff;
  display:grid;place-items:center;font-size:1.7rem;font-weight:800;box-shadow:0 6px 16px rgba(16,185,129,.32)}
.order-success h3{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.order-success>p{color:var(--slate-500);font-size:.9rem;line-height:1.5;max-width:38ch;margin:0 auto 18px}
.os-ticket{display:flex;flex-direction:column;gap:4px;align-items:center;border:1px dashed var(--blue);background:var(--blue-soft);
  border-radius:12px;padding:14px;margin-bottom:16px}
.os-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-d)}
.os-id{font-size:1.5rem;font-weight:800;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.os-summary{margin:0 0 18px;display:flex;flex-direction:column;gap:0}
.os-summary>div{display:flex;justify-content:space-between;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line);text-align:left}
.os-summary>div:last-child{border-bottom:0}
.os-summary dt{font-size:.8rem;color:var(--slate-500);margin:0;flex-shrink:0}
.os-summary dd{font-size:.86rem;font-weight:600;color:var(--ink);margin:0;text-align:right;min-width:0}
.btn.ghost{background:transparent;border-color:transparent;color:var(--blue-d);box-shadow:none}
.btn.ghost:hover{background:var(--blue-soft)}
.btn.block+.btn.block{margin-top:8px}
/* Customer order tracker (clean status timeline) */
.cust-detail-head{margin:4px 0 8px}
.cust-detail-head h2{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:10px 0 4px}
.cust-detail-head .muted{font-size:.85rem}
.cust-detail-sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--slate-400);font-weight:700;margin:20px 0 14px}
.cust-timeline .tl-node.upcoming::before{background:var(--card);border-color:var(--slate-200)}
.cust-timeline .tl-node.upcoming .tl-stage{color:var(--slate-400);font-weight:600}
.cust-timeline .tl-node.current .tl-stage{color:var(--blue-d)}
/* Customer role: a single, purpose-built app shell, not the ops sidebar platform.
   No sidebar at any width, no header account dropdown (that's the Account tab
   now), and the bottom tab bar is the one and only navigation, always on. */
body[data-role="Customer"] #app{grid-template-columns:1fr}
body[data-role="Customer"] .sidebar,
body[data-role="Customer"] .sidebar-backdrop,
body[data-role="Customer"] .menu-btn,
body[data-role="Customer"] .account-wrap,
body[data-role="Customer"] #search-trigger,
body[data-role="Customer"] #theme-btn,
body[data-role="Customer"] #run-demo,
body[data-role="Customer"] #reset-data{display:none}
body[data-role="Customer"] .bottom-nav{display:flex}
body[data-role="Customer"] .view-wrap{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
/* Account menu (header) */
.account-wrap{position:relative}
.rb-caret{font-size:.66rem;color:var(--slate-400);margin-left:1px}
.account-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.16);padding:6px;z-index:60;display:none}
.account-menu.open{display:block;animation:os-pop .16s ease}
.am-head{display:flex;align-items:center;gap:10px;padding:9px 10px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.am-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.am-id{min-width:0;line-height:1.3}
.am-id b{display:block;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-id span{font-size:.74rem;color:var(--slate-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.am-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:0;border:0;padding:9px 10px;border-radius:8px;
  font-size:.86rem;font-weight:600;color:var(--slate-700);cursor:pointer;font-family:inherit}
.am-item>span{width:18px;text-align:center;flex-shrink:0}
.am-item:hover{background:var(--bg)}
.am-item.danger{color:#b91c1c}
.am-item.danger:hover{background:rgba(239,68,68,.08)}
/* Confirm dialog (app-styled replacement for window.confirm) */
.confirm-backdrop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(10,18,30,.5);padding:max(20px,env(safe-area-inset-top,0px)) 20px max(20px,env(safe-area-inset-bottom,0px))}
.confirm-backdrop.open{display:flex}
.confirm-card{width:100%;max-width:340px;background:var(--card);border-radius:16px;padding:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);text-align:center;animation:os-pop .18s ease}
.confirm-card h3{font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.confirm-card p{font-size:.88rem;color:var(--slate-500);margin:0 0 20px;line-height:1.5}
.confirm-actions{display:flex;gap:10px}
.confirm-actions .btn{flex:1;margin-top:0}
/* Welcome tour (first-run walkthrough, shown once after registering) */
.welcome-backdrop{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
  background:rgba(10,18,30,.55);padding:max(20px,env(safe-area-inset-top,0px)) 20px max(20px,env(safe-area-inset-bottom,0px))}
.welcome-backdrop.open{display:flex}
.welcome-card{width:100%;max-width:400px;background:var(--card);border-radius:20px;padding:32px 26px 26px;
  box-shadow:0 40px 90px rgba(0,0,0,.4);text-align:center;animation:os-pop .22s ease}
.w-slide{display:none}
.w-slide.active{display:block;animation:os-pop .2s ease}
.w-ico{font-size:2.6rem;margin-bottom:14px;line-height:1}
.w-slide h2{font-size:1.28rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.w-slide p{font-size:.92rem;color:var(--slate-500);line-height:1.55;margin:0 auto;max-width:32ch}
.welcome-dots{display:flex;justify-content:center;gap:7px;margin:26px 0 22px}
.w-dot{width:7px;height:7px;border-radius:50%;background:var(--slate-200);transition:.2s}
.w-dot.active{background:var(--blue);width:20px;border-radius:4px}
.welcome-actions{display:flex;gap:10px}
.welcome-actions .btn{flex:1;margin-top:0}
/* Brand logo images (replaces inline SVG marks) */
.brand-mark{background:none}
.brand-mark img{display:block}
.pre-mark img{display:block}
.login-logo{border-radius:10px;display:block;flex-shrink:0}
.rg-brand img{display:block}
/* Login screen: navy hero band showcasing the full logo lockup */
.login-card{padding:0;overflow:hidden}
.login-hero{background:radial-gradient(130% 120% at 50% 0,#1d3a55,transparent 62%),#0f1b2c;padding:30px 24px 26px;text-align:center}
.login-hero-logo{width:min(220px,66%);height:auto;display:inline-block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.login-body{padding:24px 28px 28px}

/* =====================================================================
   RESPONSIVE: exactly three tiers, each declared once, placed last so
   every override in here reliably wins its cascade tie against the base
   rule it targets. Nothing above this section should contain a
   @media(max-width) rule.

   980px: nav-mode switch. Sidebar becomes an off-canvas drawer and the
          bottom tab bar takes over primary navigation (phones and narrow
          tablets). The topbar's hamburger stays hidden the whole time.
          The bottom nav's "Menu" tab is the one and only way to open
          the drawer, so there is never more than one way to reach it.
    760px: narrow content grids (Settings/Ingest tabs, the order form)
           drop from two columns to one for readability.
    600px: compact phone chrome. Condensed header, modals/command
           palette become bottom sheets, larger touch targets.
   ===================================================================== */

@media(max-width:980px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:calc(-1 * (var(--sidebar-w) + 6px));top:0;width:var(--sidebar-w);transition:left .25s ease;z-index:40}
  .sidebar.open{left:0;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .grid-2{grid-template-columns:1fr}
  .modal-grid{grid-template-columns:1fr}
  .global-search{display:none}
  .ff-row{flex-wrap:wrap}

  #view-tracking:not(.detail-open) .coc-detail-card{display:none}
  #view-tracking.detail-open .coc-list-card{display:none}
  #view-tracking.detail-open .coc-back{display:inline-flex;align-items:center;gap:4px}

  .bottom-nav{display:flex}
  .view-wrap{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:760px){
  .tabbed-layout{grid-template-columns:1fr}
  .tab-rail{flex-direction:row;overflow-x:auto;position:static;padding:6px;gap:2px}
  .tab-btn{white-space:nowrap;width:auto;flex:0 0 auto}
  .order-layout{grid-template-columns:1fr;gap:14px}
}

@media(max-width:600px){
  /* Clean single-row header: ☰  Title  ☾ 🔔 ⦿ */
  .topbar{gap:8px;padding:max(10px,env(safe-area-inset-top,0px)) 14px 10px}
  .tb-titles p{display:none}
  .tb-titles h1{font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-right{gap:8px}
  .search-trigger{display:none}            /* command palette is desktop; views have inline search */
  .icon-btn{width:36px;height:36px;font-size:1rem}
  .role-badge{padding:0;width:36px;height:36px;border-radius:50%;justify-content:center;flex-shrink:0}
  .role-badge #role-badge-text,.role-badge .rb-switch{display:none}
  .role-badge .rb-dot{width:11px;height:11px}
  .rg-grid{grid-template-columns:1fr}

  /* Calmer, more focused screens */
  .view-wrap{padding:16px 14px max(18px,env(safe-area-inset-bottom,0px))}
  .lead{font-size:.9rem;margin-bottom:14px}
  .card{padding:16px;margin-bottom:14px}
  .card-head h2{font-size:.98rem}
  .kpi .k-val{font-size:1.6rem}

  /* Modals + command palette as bottom sheets (native-app feel) */
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{max-width:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:20px 20px 0 0;padding:20px 18px max(20px,env(safe-area-inset-bottom,0px));animation:sheet .28s ease}
  .modal::before{content:"";display:block;width:38px;height:4px;border-radius:3px;background:var(--slate-200);margin:-6px auto 12px}
  .cmd-backdrop{align-items:flex-end;padding:0}
  .cmd{max-width:none;width:100%;border-radius:18px 18px 0 0}

  /* Comfortable touch targets + full-width row actions */
  .btn{padding:10px 14px}
  .btn.sm{padding:8px 12px;font-size:.8rem}
  .card-head .search-input{flex:1 1 100%}
  .row-item .head-actions{width:100%}
  .row-item .head-actions .btn{flex:1 1 auto}

  /* Order flow: the top bar already shows the screen title, so drop the
     duplicate hero heading and tighten spacing for an app-like feel. */
  .order-hero{margin-bottom:14px}
  .order-hero h2{display:none}
  .order-hero p{font-size:.9rem}
  .order-card{padding:16px}
  .order-steps{margin-bottom:16px}

  /* Compact "how it works" strip in the empty orders state */
  .es-steps{gap:4px}
  .es-step{max-width:64px;font-size:.68rem}
  .es-step-ico{width:32px;height:32px;font-size:.95rem}
}
@keyframes sheet{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}