:root {
  /* Canonical Doveryai light theme. The first visit is intentionally light. */
  --bg:#f5f7fb; --page:#ffffff; --panel:#ffffff; --panel2:#f8fafc;
  --panel3:#eef2f7; --line:#e1e7f0; --line-strong:#cfd8e6;
  --text:#0e1726; --text-soft:#344258; --muted:#64748b; --muted2:#8b98aa;
  --accent:#064cea; --accent-hover:#0540c0; --accent-ink:#043aa9;
  --accent2:#0f9f90; --accent-tint:#e7ecff; --trust-tint:#e6faf7;
  --danger:#c0392b; --danger-tint:#fbe9e7; --warn:#a86511; --warn-tint:#fbf0dd;
  --success:#0f8b70; --success-tint:#e5f7f1;
  /* Полупрозрачные панели темизируются ЦВЕТОМ, а не альфой: rgba(255,255,255,.9). */
  --panel-rgb:255,255,255;
  /* Источник заказа «партнёр» помечен собственным (фиолетовым) тоном — это смысл, а не
     украшение: по нему в списке видно, чей заказ. Тон нужен в обеих темах, поэтому он токен. */
  --partner-tint:#f1ebff; --partner-ink:#6941c6;
  --radius-xs:8px; --radius-sm:10px; --radius:14px; --radius-lg:20px;
  --shadow-xs:0 1px 2px rgba(14,30,80,.05);
  --shadow:0 8px 24px rgba(14,30,80,.08);
  --shadow-lg:0 20px 56px rgba(14,30,80,.14);
  --shadow-accent:0 10px 26px rgba(6,76,234,.22);
  --glass-bg:rgba(255,255,255,.7); --glass-strong:rgba(255,255,255,.92);
  --glass-line:rgba(255,255,255,.9); --glass-chip:rgba(255,255,255,.5);
  --glass-aura:rgba(6,76,234,.15); --glass-opaque:#f9fbff;
  --glass-shadow:0 18px 48px rgba(14,30,80,.14),inset 0 1px 0 rgba(255,255,255,.92);
  --shell:1440px; --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}

html[data-theme="dark"] {
  --bg:#0b1220; --page:#0d1524; --panel:#111b2d; --panel2:#162236;
  --panel3:#1c2a40; --line:#27364d; --line-strong:#3a4c67;
  --text:#f4f7fb; --text-soft:#d4dcea; --muted:#a6b3c6; --muted2:#7f90a8;
  --accent:#78a1ff; --accent-hover:#94b4ff; --accent-ink:#bdd0ff;
  --accent2:#50d5c2; --accent-tint:rgba(91,137,255,.18); --trust-tint:rgba(80,213,194,.14);
  --danger:#ff8d83; --danger-tint:rgba(255,102,91,.14); --warn:#f2bd69; --warn-tint:rgba(242,189,105,.14);
  --success:#5ed7b7; --success-tint:rgba(94,215,183,.14);
  --panel-rgb:17,27,45;
  --partner-tint:rgba(179,148,255,.16); --partner-ink:#c4aeff;
  --shadow-xs:0 1px 2px rgba(0,0,0,.24); --shadow:0 10px 28px rgba(0,0,0,.24);
  --shadow-lg:0 24px 64px rgba(0,0,0,.4); --shadow-accent:0 10px 30px rgba(63,111,226,.25);
  --glass-bg:rgba(13,21,36,.72); --glass-strong:rgba(20,31,53,.9);
  --glass-line:rgba(169,194,255,.2); --glass-chip:rgba(255,255,255,.065);
  --glass-aura:rgba(95,141,255,.24); --glass-opaque:#111b2d;
  --glass-shadow:0 20px 54px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.09);
  color-scheme:dark;
}

html.theme-transitioning::view-transition-old(root),
html.theme-transitioning::view-transition-new(root) {
  animation-duration:.64s;
  animation-timing-function:var(--ease);
  mix-blend-mode:normal;
}
html.theme-transitioning::view-transition-old(root) { z-index:0; animation:none; }
html.theme-transitioning::view-transition-new(root) { z-index:1; animation-name:theme-reveal; }
@keyframes theme-reveal {
  from { clip-path:circle(0 at var(--theme-x) var(--theme-y)); }
  to { clip-path:circle(var(--theme-radius) at var(--theme-x) var(--theme-y)); }
}

@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/assets/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Onest"; font-style:normal; font-weight:900; font-display:swap;
  src:url("/assets/fonts/onest-black.woff2") format("woff2");
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.5 "Manrope","Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,var(--panel) 0,var(--panel2) 240px,var(--bg)); color:var(--text); min-height:100vh; }
a { color:var(--accent); }
.muted { color:var(--muted); }
.prio-badge { display:inline-flex; align-items:center; gap:4px; background:var(--accent-tint);
  color:var(--accent); border:1px solid #cdd9fb; border-radius:999px;
  padding:1px 9px; font-size:12px; font-weight:600; vertical-align:middle; white-space:nowrap; }
.spacer { flex:1; }
.hidden { display:none !important; }

#topbar { display:flex; align-items:center; gap:16px; padding:12px 20px; background:rgba(var(--panel-rgb), .96);
  border-bottom:1px solid var(--line); box-shadow:0 3px 14px rgba(14,30,80,.05); position:sticky; top:0; z-index:10; }
.brand { font-weight:800; font-size:17px; color:var(--accent); letter-spacing:-.02em; }
#nav { display:flex; gap:4px; flex-wrap:wrap; }
#nav a { padding:7px 12px; border-radius:999px; color:var(--muted); text-decoration:none; font-weight:700; cursor:pointer; }
#nav a:hover { background:var(--accent-tint); color:var(--accent); }
#nav a.active { background:var(--accent-tint); color:var(--accent); }
#whoami { font-size:13px; }

main { padding:24px; max-width:1280px; margin:0 auto; }
.loader,.empty { color:var(--muted); padding:36px; text-align:center; }
h1 { font-size:22px; margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 18px; }
h2 { font-size:16px; margin:0 0 12px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow); }
.order-link-target { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint),0 12px 28px rgba(6,76,234,.14); }
.order-link-target:focus { outline:2px solid var(--accent); outline-offset:2px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.stat { background:var(--panel2); border-radius:var(--radius); padding:16px; }
.stat .v { font-size:23px; font-weight:700; }
.stat .k { color:var(--muted); font-size:13px; margin-top:4px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:999px; padding:9px 15px; font-weight:700; cursor:pointer; background:var(--accent); color:#fff; font-size:14px; line-height:1.1; white-space:nowrap; box-shadow:0 7px 18px rgba(6,76,234,.18); }
.btn:hover { filter:brightness(1.08); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.ghost { background:var(--panel); border:1px solid #d7deea; color:var(--text); box-shadow:none; }
.btn.ok { background:var(--accent2); color:#fff; }
.btn.warn { background:var(--warn-tint); color:var(--warn); }
.btn.danger { background:var(--danger); }
.btn.sm { padding:5px 10px; font-size:13px; }
.btn.tg { background:#229ED9; color:#fff; text-decoration:none; }
.btn.tg:hover { filter:brightness(1.08); }
.btnrow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.itemrow { display:grid; grid-template-columns:2fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input,select,textarea { width:100%; padding:10px 12px; border-radius:11px; border:1px solid #d7deea;
  background:var(--panel); color:var(--text); font:inherit; }
input:focus,select:focus,textarea:focus { outline:3px solid var(--accent-tint); border-color:var(--accent); }
form.narrow { max-width:440px; }
/* Even, auto-wrapping form fields (replaces ragged flex rows). */
.formgrid { display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); align-items:end; }
.formgrid > div { min-width:0; }
.formgrid label { margin-top:0; }
/* Two-column section grid for the merchant order form (collapses on mobile). */
.ordgrid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.ordgrid .card { margin-bottom:0; }
/* Inline field validation: red border + message under the field. */
.input-err { border-color:var(--danger) !important; box-shadow:0 0 0 2px rgba(229,72,77,.18); }
.field-err { color:var(--danger); font-size:.85rem; margin:4px 0 6px; }

/* Tabbed detail panes (order card). */
.tabnav { display:flex; gap:4px; border-bottom:1px solid var(--line,#2a2f3a); margin:0 0 14px; flex-wrap:wrap; }
.tab { background:none; border:none; color:var(--muted,#8b93a7); padding:8px 14px; cursor:pointer; font-size:.95rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--text); }
.tab.on { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.tabpane { display:none; }
.tabpane.on { display:block; }

/* Dynamic multi-point route: one card per stop (A→B→C→…). */
.stopslist { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:12px; }
.stopcard { margin-bottom:0; border-left:3px solid var(--accent,#2d7ff9); }
.stopcard .st-head { font-size:1rem; }
/* Inline notice card. */
.banner { display:flex; gap:8px; align-items:flex-start; }
.banner.danger { border-color:var(--danger); }
.banner.warn { border-color:var(--warn); }
.banner.cash { border-left:4px solid var(--warn); }
/* cash-settlement state line (courier collected client cash, hands it to the shop) */
.cashstate { font-weight:600; }
.cashstate.held { color:var(--warn); }
.cashstate.awaiting { color:var(--accent); }
.cashstate.confirmed { color:var(--accent2); }
/* courier documents in the admin card: thumbnail + meta + inline review */
.doclist { display:flex; flex-direction:column; gap:10px; }
.docitem { display:flex; gap:12px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:10px; }
.docthumb { width:84px; height:84px; flex:0 0 84px; border-radius:8px; background:var(--panel2); display:grid; place-items:center; overflow:hidden; }
.docthumb img { width:100%; height:100%; object-fit:cover; cursor:pointer; }
.docmeta { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.docmeta .actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
/* courier support conversation (admin inbox + courier cabinet) */
.supthread { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; margin-bottom:12px; padding:4px; }
.supmsg { max-width:80%; padding:8px 11px; border-radius:12px; background:var(--panel3); }
.supmsg.in { align-self:flex-start; border-bottom-left-radius:4px; }
.supmsg.out { align-self:flex-end; background:rgba(108,123,255,.18); border-bottom-right-radius:4px; }
.supwho { font-size:12px; margin-bottom:3px; }

/* Prominent merchant debt block. */
.debtbox { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.debtbox .dk { text-transform:uppercase; font-size:12px; letter-spacing:.04em; color:var(--muted); }
.debtbox .amt { font-size:30px; font-weight:800; line-height:1.15; margin:2px 0; }
.debtbox.owing { border-color:var(--danger); background:linear-gradient(180deg,var(--danger-tint),var(--panel)); }
.debtbox.owing .amt { color:var(--danger); }
.debtbox.clear { border-color:var(--accent2); }
.debtbox.clear .amt { color:var(--accent2); }
.debtbox.today { border-color:#f1b00e; background:linear-gradient(180deg,rgba(241,176,14,.08),var(--panel)); }
.debtbox.today .amt { color:#f1b00e; }
.debtbox .amt.amt-link { background:none; border:0; padding:0; font-family:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:4px; }
.debtbox .amt.amt-link:hover { text-decoration-style:solid; }
td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.num.credit { color:var(--accent2); }
.danger-zone { border-color:var(--danger); }
.delrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.delrow:last-child { border-bottom:0; }
/* Make native dropdown options readable on the dark theme + custom arrow. */
select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa0bf' d='M6 8 1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
select option { background:var(--panel2); color:var(--text); }

/* Password field with a show/hide toggle. */
.pw { position:relative; }
.pw input { padding-right:44px; }
.pw-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:auto;
  background:transparent; border:0; cursor:pointer; font-size:16px; color:var(--muted); padding:4px 6px; line-height:1; }
.pw-toggle:hover { color:var(--text); }

/* Custom dropdown (replaces native <select>). */
.cselect { position:relative; width:100%; }
.cselect[data-inline] { display:inline-block; width:auto; min-width:150px; vertical-align:middle; }
.cselect-ctrl { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:11px; border:1px solid #d7deea; background:var(--panel);
  color:var(--text); font:inherit; cursor:pointer; text-align:left; }
.cselect[data-inline] .cselect-ctrl { padding:6px 10px; font-size:13px; }
.cselect-ctrl:hover { border-color:var(--accent); }
.cselect.open .cselect-ctrl { outline:2px solid var(--accent); border-color:transparent; }
.cselect-arr { color:var(--muted); font-size:12px; }
.cselect-menu { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px); background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:5px; max-height:280px; overflow:auto;
  box-shadow:0 12px 34px rgba(14,30,80,.16); }
.cselect[data-inline] .cselect-menu { right:auto; min-width:100%; white-space:nowrap; }
.cselect-opt { display:block; width:100%; padding:9px 11px; border:0; border-radius:7px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.cselect-opt:hover,.cselect-opt:focus-visible { outline:0; background:var(--panel2); }

/* Custom calendar date field. */
.cdate { position:relative; width:100%; min-width:160px; }
.cdate-ctrl { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:11px; border:1px solid #d7deea; background:var(--panel);
  color:var(--text); font:inherit; cursor:pointer; text-align:left; }
.cdate-ctrl:hover { border-color:var(--accent); }
.cdate.open .cdate-ctrl { outline:2px solid var(--accent); border-color:transparent; }
.cdate-val.ph { color:var(--muted); }
.cdate-ic { font-size:14px; }
.cdate-pop { position:absolute; z-index:45; left:0; top:calc(100% + 4px); width:266px; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:0 12px 34px rgba(14,30,80,.16); }
.cdate-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cdate-title { font-weight:600; }
.cdate-nav { background:transparent; border:1px solid var(--line); color:var(--text); border-radius:8px;
  width:30px; height:30px; cursor:pointer; font-size:17px; line-height:1; }
.cdate-nav:hover { border-color:var(--accent); }
.cdate-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; width:100%; }
.cdate-wd { display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); height:24px; }
.cdate-day { display:flex; align-items:center; justify-content:center; width:100%; height:32px; min-width:0; padding:0;
  margin:0; background:transparent; border:0; color:var(--text); border-radius:8px; cursor:pointer; font:inherit; line-height:1; }
.cdate-day:hover:not(.empty) { background:var(--panel2); }
.cdate-day.empty { cursor:default; pointer-events:none; }
.cdate-day.today { outline:1px solid var(--line); outline-offset:-1px; }
.cdate-day.sel { background:var(--accent); color:#fff; font-weight:700; }
.cdate-foot { display:flex; justify-content:space-between; margin-top:8px; }
.cdate-act { background:transparent; border:0; color:var(--accent); cursor:pointer; font:inherit; font-size:13px; padding:4px 6px; }
.cdate-act:hover { text-decoration:underline; }

table { width:100%; border-collapse:collapse; }
.table-scroll {
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}
.table-scroll:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
th,td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
tr:hover td { background:var(--panel2); }

.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge.gray { background:var(--panel3); color:var(--muted); }
.badge.green { background:var(--trust-tint); color:var(--success); }
.badge.blue { background:var(--accent-tint); color:var(--accent); }
.badge.amber { background:var(--warn-tint); color:var(--warn); }
.badge.red { background:var(--danger-tint); color:var(--danger); }
.badge.graceitem { display:inline-flex; align-items:center; gap:6px; }
/* Order source badges — colour the order's origin (Маркетплейс/Партнёр/Магазин/Частный)
   so marketplace & partner orders stand out from ordinary shop/client orders. */
.badge.src { letter-spacing:.01em; }
.badge.src-marketplace { background:var(--accent-tint); color:var(--accent); box-shadow:inset 0 0 0 1px #c7d5fb; }
.badge.src-partner { background:var(--partner-tint); color:var(--partner-ink); box-shadow:inset 0 0 0 1px #ddcffc; }
.badge.src-merchant { background:var(--panel3); color:var(--muted); }
.badge.src-client { background:var(--panel3); color:var(--muted); }
/* tiny ✕ to remove an item shown inside a chip/badge (e.g. clear a debt grace) */
.chipx { border:none; background:transparent; color:inherit; cursor:pointer; font-weight:700; font-size:13px; line-height:1; padding:0 2px; opacity:.7; }
.chipx:hover { opacity:1; color:var(--danger); }

.center { min-height:84vh; display:grid; place-items:center; }
.auth { width:360px; }
.auth h1 { text-align:center; }
.linkrow { text-align:center; margin-top:14px; font-size:14px; }
.code { font-family:ui-monospace,monospace; font-size:24px; letter-spacing:3px; background:var(--panel2);
  padding:14px; border-radius:9px; text-align:center; margin:10px 0; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filters select,.filters input { width:auto; min-width:150px; }
small.mono { font-family:ui-monospace,monospace; color:var(--muted); }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--panel2);
  border:1px solid var(--line); padding:12px 18px; border-radius:10px; z-index:50; max-width:90vw; }
.toast.err { border-color:var(--danger); }
.toast.ok { border-color:var(--accent2); }
.actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
td.mid { vertical-align:middle; }
/* Couriers table: each action is its own column → buttons line up across rows.
   Buttons fill their column so every row's button has identical width. */
.couriers td.act, .orders td.act { padding:8px 6px; }
.couriers td.act .btn, .orders td.act .btn { width:100%; }
.couriers .cselect[data-inline], .orders .cselect[data-inline] { min-width:0; width:100%; }
/* High-value toggle: ✓/✗ marker has a fixed width so the label never shifts. */
.hvbtn { justify-content:flex-start; }
.hvbtn .mk { display:inline-block; width:12px; text-align:center; }
.tglink { font-family:ui-monospace,monospace; font-size:13px; white-space:nowrap; }

/* Documents: one folder per courier. */
.folder { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:14px; background:var(--panel2); }
.folder-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:15px; }
.folder table { background:transparent; }

/* Modal (in-app prompt). */
.modal-ov { position:fixed; inset:0; background:rgba(6,8,18,.6); display:grid; place-items:center; z-index:100; }
.modal { width:360px; max-width:92vw; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:0 18px 50px rgba(14,30,80,.18); }
.modal h3 { margin:0 0 12px; font-size:17px; }
.modal .pw { margin-top:4px; }
.modal-err { color:var(--danger); font-size:13px; margin-top:8px; }
.modal-row { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.modal.wide { width:680px; max-height:86vh; overflow:auto; position:relative; }
.modal.cod-modal { width:440px; }
.cod-exact { grid-template-columns:1fr; }
.cod-exact .kv { align-items:flex-start; }
.cod-modal .modal-row { flex-wrap:wrap; }
.modal-x { position:absolute; top:10px; right:12px; background:transparent; border:0; color:var(--muted);
  font-size:18px; cursor:pointer; line-height:1; padding:4px 6px; }
.modal-x:hover { color:var(--text); }
.modal h3 { font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:18px 0 8px; }
.qr-camera { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#070910; border:1px solid var(--line); border-radius:8px; }
.qr-camera video { width:100%; height:100%; display:block; object-fit:cover; }
.qr-frame { position:absolute; inset:18%; border:2px solid rgba(255,255,255,.9); border-radius:8px; box-shadow:0 0 0 999px rgba(0,0,0,.24); pointer-events:none; }
[data-qr-manual] .row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.kvs { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.kv .k { color:var(--muted); }
.kv .v { text-align:right; font-weight:600; }
.linkbtn { background:none; border:0; padding:0; margin:0; color:var(--accent); cursor:pointer; font:inherit; text-align:left; }
.linkbtn:hover { text-decoration:underline; }

/* Segmented buttons (weight, yes/no) bound to a hidden input. */
.seg { display:inline-flex; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel2); }
.seg-opt { background:transparent; border:0; color:var(--text); padding:9px 16px; cursor:pointer; font:inherit; }
.seg-opt + .seg-opt { border-left:1px solid var(--line); }
.seg-opt.on { background:var(--accent); color:#fff; font-weight:600; }
label.chk { display:flex; align-items:center; gap:8px; color:var(--text); cursor:pointer; }
label.chk input { width:auto; }

/* ── Mobile (≤ 720px): stack forms, compact topbar, tables → cards ───────── */
@media (max-width: 720px) {
  #topbar { flex-wrap:wrap; gap:8px 10px; padding:10px 12px; position:sticky; }
  .brand { font-size:15px; }
  #nav { width:100%; order:3; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  #nav a { white-space:nowrap; padding:7px 11px; }
  #whoami { font-size:12px; }
  main { padding:14px 12px; }
  h1 { font-size:19px; }
  .card { padding:14px; }

  /* Forms & filters stack full-width with comfortable tap targets. */
  .row { flex-direction:column; align-items:stretch; gap:10px; }
  .row > div, .row > .cselect, .row > input, .row > button, form.narrow { width:100%; max-width:none; }
  .filters { flex-direction:column; }
  .filters .cselect[data-inline], .filters select, .filters input { width:100%; min-width:0; }
  .auth { width:100%; }
  input, select, textarea, .cselect-ctrl, .btn { font-size:16px; } /* 16px avoids iOS zoom-on-focus */
  .grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }

  /* Modals fill the screen; key/value pairs single column. */
  .modal, .modal.wide { width:94vw; max-width:94vw; }
  .modal.cod-modal { width:94vw; }
  .kvs { grid-template-columns:1fr; }
  .cdate-pop { width:min(94vw,300px); }

  /* Segmented buttons span the row. */
  .seg { width:100%; }
  .seg-opt { flex:1; text-align:center; }

  /* Tables → stacked label/value cards (data-label set by labelizeTables). */
  .card table, .card thead, .card tbody, .card tr, .card td { display:block; width:100%; }
  .card thead { position:absolute; left:-9999px; }
  .card tr { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:10px; background:var(--panel2); }
  .card tr:hover td { background:transparent; }
  .card td { display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right; border:0; padding:7px 0; }
  .card td + td { border-top:1px dashed var(--line); }
  .card td::before { content:attr(data-label); color:var(--muted); font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; text-align:left; flex:0 0 38%; white-space:nowrap; }
  .card td[colspan] { text-align:center; }
  .card td[colspan]::before { content:none; }
  .card td.act, .card td.actions { justify-content:flex-end; flex-wrap:wrap; }
  .card td.act::before { display:none; }
  .couriers td.act .btn, .orders td.act .btn, .card td.act .btn { width:auto; }
  .couriers .cselect[data-inline], .orders .cselect[data-inline] { width:auto; min-width:150px; }
  /* Rich rows: the first cell becomes a full-width card header and «wide» cells
     (route) span the full width left-aligned, instead of the cramped right-aligned
     label/value split. Long addresses wrap rather than overflow the card. */
  .card td.cardhead, .card td.cardwide { display:block; text-align:left; }
  .card td.cardhead::before, .card td.cardwide::before { content:none; }
  .card td.cardhead { font-size:15px; padding:0 0 8px; border-bottom:1px solid var(--line); }
  .card td.cardhead + td { border-top:0; }
  .card td.cardwide { padding-top:8px; }
  .card td, .card td small, .card td a, .card td .mono { overflow-wrap:anywhere; }
  .folder { padding:10px; }
}

/* Order detail timeline. */
.timeline { display:flex; flex-direction:column; gap:0; }
.tl-item { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.tl-item span:last-child { text-align:right; }
.tl-item.costtotal { border-top:2px solid var(--line); border-bottom:none; font-size:15px; padding-top:10px; margin-top:2px; }
tbody tr.me td { background:rgba(37,99,235,.10); font-weight:600; }

/* --- service activity calendar --- */
.actcal-head { display:flex; align-items:center; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
.actcal-title { font-weight:700; font-size:18px; min-width:172px; text-align:center; }
.actcal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.actcal-wd { text-align:center; color:var(--muted); font-size:12px; padding:2px 0 6px; }
.actcal-day { position:relative; min-height:88px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel2); padding:8px; display:flex; flex-direction:column; gap:6px; align-items:stretch;
  cursor:default; color:var(--text); font:inherit; text-align:left; }
.actcal-day.empty { background:transparent; border:0; }
.actcal-day.dim { opacity:.4; }
.actcal-day.has { cursor:pointer; }
.actcal-day.has:hover { border-color:var(--accent); background:var(--panel); }
.actcal-day.today { outline:2px solid var(--accent); outline-offset:-2px; }
.actcal-num { font-weight:600; font-size:14px; }
.actcal-total { position:absolute; top:7px; right:8px; background:var(--accent-tint); color:var(--accent);
  border-radius:999px; font-size:12px; font-weight:700; padding:1px 8px; }
.actcal-dots { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; }
.adot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.adot.order { background:#6c7bff; } .adot.courier { background:#4cd1a0; } .adot.merchant { background:#c08cff; }
.adot.admin { background:#ffb454; } .adot.payout { background:#4cc9f0; } .adot.payment { background:#ff9eb5; }
.adot.account { background:#b8c0ff; } .adot.doc { background:#7ee0c0; } .adot.blocked-dot { background:var(--danger); }
.actcal-day.blocked { outline:2px solid var(--danger); outline-offset:-2px; }
.actcal-lock { margin-top:auto; font-size:11px; color:var(--danger); font-weight:600; }
.actcal-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; color:var(--muted); font-size:12px; }
.actcal-legend span { display:inline-flex; align-items:center; gap:6px; }
/* --- activity calendar: отчётность сверху (K1/K2) + поиск курьера ---------- */
.actcal-earn { margin-bottom:16px; }
.actcal-earn.loading { padding:14px 18px; }
.actcal-earn-head { font-size:14px; color:var(--muted); margin-bottom:12px; }
.actcal-earn-note { font-size:12px; margin:12px 0 0; }
.actcal-stats { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.actcal-stat { background:var(--panel2); border-radius:10px; padding:13px 14px; border:1px solid transparent; }
.actcal-stat .v { font-size:21px; font-weight:700; }
.actcal-stat .k { color:var(--muted); font-size:12px; margin-top:4px; }
.actcal-stat.warn { border-color:rgba(255,180,84,.45); }
.actcal-stat.warn .v { color:var(--warn); }
.actcal-stat.ok { border-color:rgba(76,209,160,.4); }
.actcal-stat.ok .v { color:var(--accent2); }
.actcal-pick { margin-bottom:14px; }
.actcal-pick-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.actcal-pick-row input { flex:1; min-width:240px; }
.actcal-pick-res { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.actcal-pick-item { display:block; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; color:var(--text); cursor:pointer; }
.actcal-pick-item:hover { border-color:var(--accent); background:var(--panel); }
.actrow { display:grid; grid-template-columns:46px 24px 1fr; gap:8px; align-items:start; padding:9px 6px; border-bottom:1px solid var(--line); }
.actrow:last-child { border-bottom:0; }
.actrow.lk { cursor:pointer; border-radius:8px; }
.actrow.lk:hover { background:var(--panel2); }
.actrow-t { padding-top:1px; font-size:12px; }
.actrow-ic { font-size:15px; line-height:1.4; }
@media (max-width:720px) {
  .actcal-grid { gap:5px; }
  .actcal-day { min-height:62px; padding:5px; border-radius:8px; }
  .actcal-num { font-size:12px; }
  .actcal-total { font-size:11px; padding:0 6px; top:5px; right:5px; }
}

/* --- order map (merchant «Новый заказ» on a real map) -------------------- */
.maporder { position:fixed; inset:0; z-index:40; background:var(--bg); overflow:hidden; }
/* z-index:0 makes the map its own stacking context so Leaflet's internal pane/
   control z-indexes (200–800) stay contained and never paint over the panel. */
.maporder-map { position:absolute; inset:0; background:#eaf0f8; z-index:0; }
/* Keep map tiles natural in the light brand theme; pins and route colors carry
   the Delivery state without a dark recoloring filter. */
.maporder .leaflet-tile-pane { filter:none; }
.maporder .leaflet-container { background:#eaf0f8; font:inherit; }
.maporder .leaflet-bar a, .maporder .leaflet-control-zoom a {
  background:var(--panel); color:var(--text); border-color:var(--line); }
.maporder .leaflet-bar a:hover { background:var(--panel2); }
.maporder .leaflet-control-attribution {
  background:rgba(255,255,255,.9); color:var(--muted); font-size:10px; }
.maporder .leaflet-control-attribution a { color:var(--accent); }
.maporder .leaflet-bottom.leaflet-left { left:392px; } /* clear the left panel on desktop */
/* Zoom buttons: pinned to the right edge, vertically centred. */
.maporder .leaflet-top.leaflet-right { top:50%; transform:translateY(-50%); }

/* Map pins (divIcon): a coloured disc with the stop letter. */
.mp-pinwrap { background:none; border:0; }
.mp-pin { width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:13px; border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 7px rgba(0,0,0,.55); background:var(--accent); }
.mp-pin-a { background:var(--accent2); color:#fff; }
.mp-pin-b { background:var(--danger); }
.mp-pin-mid { background:var(--accent); }
.mp-pin.bad { background:#d48a20; color:#fff; }

/* Left side panel (desktop) holding the whole order form. */
.maporder-panel { position:absolute; top:0; left:0; bottom:0; width:382px; max-width:92vw; z-index:30;
  background:rgba(var(--panel-rgb), .98); border-right:1px solid var(--line); display:flex; flex-direction:column;
  box-shadow:0 0 32px rgba(14,30,80,.16); }
.mp-head { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); }
.mp-head strong { font-size:15px; }
.mp-body { padding:10px 14px 14px; overflow:auto; flex:1; -webkit-overflow-scrolling:touch; }
.mp-h { margin:16px 0 6px; font-size:15px; }
.route-legend { background:rgba(var(--panel-rgb), .95); border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; font-size:12px; color:var(--text); line-height:1.6; max-width:220px; }
.route-legend b { display:block; margin-bottom:4px; font-size:11px; font-weight:700; color:var(--muted); }
.route-legend span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.route-legend i { width:18px; height:4px; border-radius:2px; flex:0 0 18px; }
.mp-hint { margin:6px 0 0; font-size:12px; line-height:1.4; color:var(--warn);
  background:rgba(255,180,84,.10); border:1px solid rgba(255,180,84,.35); border-radius:8px; padding:7px 9px; }
.mp-field { display:block; margin-top:8px; }
.maporder-panel label { display:block; margin-top:8px; font-size:13px; color:var(--muted); }
.maporder-panel input[type=number], .maporder-panel input[type=text], .maporder-panel input:not([type]),
.maporder-panel input[type=datetime-local], .maporder-panel select { width:100%; box-sizing:border-box; }

/* Stop cards. */
.mpstops { display:flex; flex-direction:column; gap:8px; }
.mpstop { border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--panel); cursor:pointer; }
.mpstop.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.mpstop.badpin { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn) inset; }
.mp-strow { display:flex; align-items:center; }
.mp-sthead { font-size:13px; font-weight:700; }
.mp-pinst { font-size:12px; margin:3px 0 6px; }
.mp-okp { color:var(--accent2); }
.mp-bad { color:var(--warn); }
.mp-warnp { color:var(--warn); } /* address resolved only to the street — nudge the pin onto the house */
.mpstop.warnpin { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn) inset; }
.mp-addrrow { display:flex; gap:6px; align-items:stretch; position:relative; }
.mp-addrrow .mp-addr { flex:1; min-width:0; }
.mp-addrrow .btn { flex:0 0 auto; }
/* Address autocomplete dropdown. */
.mp-suggest { position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:50; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; max-height:210px; overflow:auto; box-shadow:0 8px 20px rgba(14,30,80,.14); }
.mp-sopt { padding:7px 10px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--line); }
.mp-sopt:last-child { border-bottom:0; }
.mp-sopt:hover,.mp-sopt.active { background:var(--accent-tint); color:var(--text); }
/* Map-free autocomplete (classic order form, «Добавить шаблон»): the input gets
   wrapped in a positioned box so the shared .mp-suggest dropdown anchors to it. */
.plain-suggest-wrap { position:relative; }
#mpMetro.active { border-color:var(--accent); color:var(--text); }
.mp-tmplrow { margin-top:6px; }
.mp-tmplrow select { width:100%; box-sizing:border-box; }
.mp-det { margin-top:6px; }
.mp-det summary { cursor:pointer; font-size:12px; color:var(--muted); }
.mp-det input { margin-top:6px; }

/* Live stats overlay (distance / time / cost) — top-right of the map. */
.maporder-stats { position:absolute; top:54px; right:12px; z-index:30; display:flex; flex-wrap:wrap; gap:8px 20px;
  background:rgba(var(--panel-rgb), .96); border:1px solid var(--line); border-radius:14px; padding:12px 20px;
  box-shadow:0 6px 22px rgba(14,30,80,.14); align-items:center; max-width:calc(100vw - 24px); }
.mp-stat { display:flex; flex-direction:column; align-items:center; min-width:64px; }
.mp-statn { font-size:27px; font-weight:800; line-height:1.05; white-space:nowrap; }
.mp-statl { font-size:16px; color:var(--muted); }
.mp-statcost .mp-statn { color:var(--accent2); }
/* Metro itinerary breakdown — full-width line under the headline figures. */
.mp-transit { flex-basis:100%; font-size:13px; color:var(--muted); border-top:1px solid var(--line);
  padding-top:7px; margin-top:1px; line-height:1.4; }
.mp-transit b { color:var(--text); font-weight:700; }

/* «Маршрут примерный» note — shown under the stats overlay when the route is a
   straight-line estimate (no road router), so the merchant knows why it's straight. */
.maporder-routehint { position:absolute; top:120px; right:12px; z-index:30; max-width:300px;
  background:rgba(255,180,84,.12); color:var(--warn); border:1px solid rgba(255,180,84,.4);
  border-radius:10px; padding:8px 11px; font-size:12px; line-height:1.35; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.maporder-routehint[hidden] { display:none; }
.maporder-routehint b { color:var(--text); }

/* «Оформить заказ» — bottom-right floating button (desktop). */
.maporder-submit { position:absolute; right:18px; bottom:18px; z-index:31; padding:12px 22px; font-size:15px;
  box-shadow:0 8px 26px rgba(0,0,0,.45); }

/* Panel toggle (mobile only). */
.maporder-toggle { display:none; position:absolute; top:12px; left:12px; z-index:32; }

/* «Мои заказы» — top-right button + dropdown list + read-only view banner. */
.maporder-orders { position:absolute; top:12px; right:12px; z-index:33; }
.maporder-orderlist { position:absolute; top:54px; right:12px; z-index:34; width:320px; max-width:calc(100vw - 24px);
  max-height:70vh; display:flex; flex-direction:column; background:rgba(var(--panel-rgb), .98); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(14,30,80,.16); overflow:hidden; }
/* display:flex above would override the [hidden] attribute — keep hide working. */
.maporder-orderlist[hidden], .maporder-viewbanner[hidden] { display:none; }
.mp-ol-head { display:flex; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line); }
.mp-ol-body { overflow:auto; }
.mp-ol-item { padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.mp-ol-item:last-child { border-bottom:0; }
.mp-ol-item:hover { background:var(--panel2); }
.mp-ol-row { display:flex; align-items:center; gap:6px; }
.mp-ol-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.maporder-viewbanner { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:33;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 24px);
  background:rgba(var(--panel-rgb), .97); border:1px solid var(--line); border-radius:12px; padding:7px 12px;
  box-shadow:0 6px 22px rgba(14,30,80,.14); }
/* While viewing an existing order, hide the new-order form so the map is the focus. */
.maporder.viewing .maporder-panel, .maporder.viewing .maporder-submit, .maporder.viewing .maporder-toggle { display:none; }

@media (max-width:720px) {
  /* Map fills the screen; the form becomes a collapsible bottom sheet, the
     submit button a full-width bar pinned to the very bottom. */
  .maporder .leaflet-bottom.leaflet-left { left:0; }
  .maporder .leaflet-control-zoom { display:none; } /* pinch-zoom on touch */
  .maporder-toggle { display:inline-flex; }
  .maporder-stats { top:58px; left:8px; right:8px; gap:8px; justify-content:space-around; padding:9px 10px; }
  .mp-stat { min-width:0; }
  .mp-statn { font-size:22px; }
  .mp-statl { font-size:13px; }
  .maporder-routehint { top:118px; left:8px; right:8px; max-width:none; }
  .maporder-panel { top:auto; left:0; right:0; bottom:52px; width:auto; max-width:none; height:56vh;
    border-right:0; border-top:1px solid var(--line); border-radius:16px 16px 0 0; transition:transform .22s ease; }
  .maporder-panel.collapsed { transform:translateY(calc(56vh - 46px)); }
  .maporder-submit { left:0; right:0; bottom:0; width:100%; border-radius:0; padding:14px; font-size:16px;
    box-shadow:0 -4px 18px rgba(0,0,0,.45); }
  .maporder-orderlist { top:54px; left:8px; right:8px; width:auto; max-height:64vh; }
  /* While viewing an order the form is hidden, so put the view banner at the bottom. */
  .maporder.viewing .maporder-viewbanner { top:auto; bottom:12px; left:8px; right:8px; transform:none; flex-wrap:wrap; justify-content:center; }
}

/* --- admin live map (all active orders) ---------------------------------- */
/* Reuses .maporder (full-screen overlay + tile recolour + .mp-pin) with its own
   top bar instead of the order form. No left panel, so keep the attribution in
   the corner rather than clearing a 392px gutter. */
.adminmap .leaflet-bottom.leaflet-left { left:0; }
.adminmap-bar { position:absolute; top:0; left:0; right:0; z-index:33; display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:rgba(var(--panel-rgb), .96); border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(14,30,80,.12); }
.adminmap-bar strong { font-size:15px; }
.adminmap-bar .spacer { min-width:0; }
.adminmap-upd { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Push the «Список» button + list below the top bar (they sit at top:12px/54px
   in the merchant map, which the admin bar now occupies). */
.adminmap .maporder-orders { top:54px; }
.adminmap .maporder-orderlist { top:96px; }
/* Courier position marker (bonus): a person disc, distinct from the order pins. */
.adminmap-courier { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:16px;
  background:var(--panel); border:2px solid var(--accent); box-shadow:0 2px 7px rgba(0,0,0,.6); }
/* Colour swatch in the order list, matching each order's route/pins. */
.adminmap-dot { display:inline-block; width:11px; height:11px; border-radius:50%; flex:0 0 auto; margin-right:2px;
  border:1px solid rgba(255,255,255,.5); }

@media (max-width:720px) {
  .adminmap-bar { gap:8px; padding:8px 10px; }
  .adminmap-bar strong { font-size:14px; }
  .adminmap-upd { font-size:11px; }
  .adminmap .maporder-orders { top:50px; }
  .adminmap .maporder-orderlist { top:90px; left:8px; right:8px; width:auto; }
}

/* Admin: tariffs & metro panel */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--panel3); color:var(--muted); border:1px solid var(--line); }
.pill.ok { background:rgba(46,190,44,.15); color:#39c13a; border-color:rgba(46,190,44,.4); }
.pill.err { background:rgba(224,53,53,.15); color:var(--danger); border-color:rgba(224,53,53,.4); }
.metrolines { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:6px; }
.metroline { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.metroline i { width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.mp-issues { margin:10px 0 0; padding-left:18px; color:var(--danger); font-size:13px; }
.mp-issues li { margin:2px 0; }
.mp-import { margin-top:10px; font-size:13px; }
.mp-import .mp-bad { color:var(--danger); }

/* ========================================================================== */
/* DOVERYAI DELIVERY UI — MARKET-SHAPED PRODUCT LAYER                         */
/*
   This final layer deliberately wins over the legacy utility rules above.
   It keeps their API and Leaflet geometry intact while giving every public,
   courier, merchant and operator surface one shared Doveryai visual language.
   ========================================================================== */

html {
  min-width:320px;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}

body {
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.52;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  transition:background-color .24s var(--ease),color .24s var(--ease);
}

body::selection { background:var(--accent-tint); color:var(--text); }
button,input,select,textarea { font-family:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
img,svg,video { max-width:100%; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--accent-hover); }
#app { min-width:0; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 74%,transparent);
  outline-offset:3px;
}

h1,h2,h3,h4 {
  color:var(--text);
  font-weight:800;
  letter-spacing:-.032em;
  text-wrap:balance;
}
h1 { font-size:clamp(24px,2.2vw,34px); line-height:1.12; }
h2 { font-size:clamp(18px,1.6vw,24px); line-height:1.2; }
h3 { font-size:17px; line-height:1.28; }
p { text-wrap:pretty; }
.muted,.sub { color:var(--muted); }
.sub { max-width:72ch; }

main {
  width:100%;
  max-width:calc(var(--shell) + 48px);
  padding:30px 24px 48px;
}

/* Shared mascot contract. The SVG/image stays asset-owned; CSS only stages it. */
.mascot,.mascot-hero,.mascot-empty {
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  transform-origin:50% 78%;
}
.mascot img,.mascot svg,
.mascot-hero img,.mascot-hero svg,
.mascot-empty img,.mascot-empty svg {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(6,76,234,.16));
}
.mascot { width:42px; height:42px; }

/* ── Authenticated shell ────────────────────────────────────────────────── */
#topbar {
  min-height:68px;
  gap:18px;
  padding:10px max(20px,calc((100vw - var(--shell))/2));
  background:color-mix(in srgb,var(--panel) 91%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  box-shadow:0 4px 22px rgba(14,30,80,.05);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  backdrop-filter:blur(20px) saturate(1.35);
  z-index:80;
}
.brand,.public-brand,.auth-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-family:"Onest",var(--font);
  font-weight:900;
  letter-spacing:-.04em;
  text-decoration:none;
  white-space:nowrap;
}
.brand { font-size:19px; }
.brand:hover,.public-brand:hover,.auth-brand:hover { color:var(--text); }
.brand-mark,.public-brand .mascot,.auth-brand .mascot { width:38px; height:38px; }

#nav { gap:3px; align-items:center; }
#nav a {
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
  line-height:1.2;
  transition:background-color .18s,color .18s,transform .18s;
}
#nav a:hover { background:var(--panel2); color:var(--text); }
#nav a.active { background:var(--accent-tint); color:var(--accent); }
#whoami {
  max-width:220px;
  overflow:hidden;
  color:var(--muted);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.theme-toggle,.theme-btn,[data-theme-toggle] {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:background-color .18s,border-color .18s,transform .18s;
}
.theme-toggle:hover,.theme-btn:hover,[data-theme-toggle]:hover {
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent);
  transform:translateY(-1px);
}
.theme-toggle svg,.theme-btn svg,[data-theme-toggle] svg { width:19px; height:19px; }

/* ── Dense operational primitives ───────────────────────────────────────── */
.card {
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-xs);
}
.card:hover { border-color:color-mix(in srgb,var(--line-strong) 84%,var(--accent)); }
.grid { gap:12px; }
.stat {
  padding:15px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel2);
}
.stat .v { color:var(--text); font-size:24px; font-weight:800; letter-spacing:-.025em; }
.stat .k { color:var(--muted); font-size:12px; font-weight:650; }

.btn {
  min-height:44px;
  padding:11px 17px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:750;
  line-height:1.2;
  box-shadow:var(--shadow-accent);
  transition:background-color .18s var(--ease),border-color .18s,box-shadow .18s,transform .18s var(--ease),opacity .18s;
}
.btn:hover:not(:disabled) {
  background:var(--accent-hover);
  color:#fff;
  filter:none;
  box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 26%,transparent);
  transform:translateY(-1px);
}
.btn:active:not(:disabled) { transform:translateY(0); box-shadow:var(--shadow-xs); }
.btn:disabled { opacity:.5; box-shadow:none; cursor:not-allowed; }
.btn.ghost {
  border-color:var(--line-strong);
  background:var(--panel);
  color:var(--text);
  box-shadow:none;
}
.btn.ghost:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-tint); color:var(--accent); }
.btn.ok { background:var(--success); }
.btn.warn { border-color:color-mix(in srgb,var(--warn) 34%,var(--line)); background:var(--warn-tint); color:var(--warn); box-shadow:none; }
.btn.danger { background:var(--danger); color:#fff; }
.btn.sm { min-height:36px; padding:8px 11px; font-size:12px; border-radius:8px; }
.btnrow,.actions { gap:8px; }

label {
  color:var(--text-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:.005em;
}
input,select,textarea,.cselect-ctrl,.cdate-ctrl {
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(14,30,80,.02);
  transition:border-color .16s,box-shadow .16s,background-color .16s;
}
textarea { min-height:104px; resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--muted2); opacity:1; }
input:hover,select:hover,textarea:hover,.cselect-ctrl:hover,.cdate-ctrl:hover { border-color:color-mix(in srgb,var(--line-strong) 58%,var(--accent)); }
input:focus,select:focus,textarea:focus,.cselect.open .cselect-ctrl,.cdate.open .cdate-ctrl {
  border-color:var(--accent);
  outline:0;
  box-shadow:0 0 0 4px var(--accent-tint);
}
select option { background:var(--panel); color:var(--text); }
.pw-toggle { width:36px; min-width:36px; height:36px; border-radius:8px; }
.pw-toggle:hover { background:var(--panel2); }
.formgrid { gap:14px; }
.ordgrid { gap:14px; }

.cselect-menu,.cdate-pop {
  border-color:var(--line);
  background:var(--panel);
  box-shadow:var(--shadow-lg);
}
.cselect-opt { min-height:40px; }
.cselect-opt:hover,.cselect-opt[aria-selected="true"] { background:var(--accent-tint); color:var(--accent); }
.cdate-day { min-height:34px; }
.cdate-day:hover:not(.empty) { background:var(--panel2); }

table { border-spacing:0; }
th,td { padding:11px 10px; border-bottom-color:var(--line); font-size:13px; }
th {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.055em;
}
tbody tr { transition:background-color .14s; }
tr:hover td { background:var(--panel2); }
tbody tr.me td { background:var(--accent-tint); }
.folder { border-color:var(--line); background:var(--panel2); }

.badge,.pill,.prio-badge { border:1px solid transparent; font-weight:750; }
.badge.gray,.pill { border-color:var(--line); background:var(--panel2); color:var(--muted); }
.badge.green,.pill.ok { border-color:color-mix(in srgb,var(--success) 25%,transparent); background:var(--success-tint); color:var(--success); }
.badge.blue,.prio-badge,.badge.src-marketplace { border-color:color-mix(in srgb,var(--accent) 22%,transparent); background:var(--accent-tint); color:var(--accent); }
.badge.amber { border-color:color-mix(in srgb,var(--warn) 24%,transparent); background:var(--warn-tint); color:var(--warn); }
.badge.red,.pill.err { border-color:color-mix(in srgb,var(--danger) 24%,transparent); background:var(--danger-tint); color:var(--danger); }
.badge.src-partner { border-color:color-mix(in srgb,var(--accent) 20%,transparent); background:var(--accent-tint); color:var(--accent); box-shadow:none; }
.badge.src-merchant,.badge.src-client { background:var(--panel2); color:var(--muted); }

.tabnav { gap:4px; border-bottom-color:var(--line); }
.tab {
  min-height:44px;
  padding:10px 13px;
  color:var(--muted);
  font-family:inherit;
  font-weight:700;
}
.tab:hover { color:var(--text); background:var(--panel2); }
.tab.on { color:var(--accent); border-bottom-color:var(--accent); }
.seg { min-height:44px; border-color:var(--line-strong); border-radius:10px; background:var(--panel2); }
.seg-opt { min-height:42px; }
.seg-opt.on { background:var(--accent); color:#fff; }

/* ── Public shell and header ────────────────────────────────────────────── */
main:has(.public-shell),main:has(.landing-shell),main:has(.auth-shell) {
  max-width:none;
  padding:0;
}
.public-shell,.landing-shell {
  width:100%;
  min-height:100svh;
  overflow-x:clip;
  overflow-y:visible;
  background:var(--page);
  color:var(--text);
}
.public-header {
  position:sticky;
  top:10px;
  z-index:90;
  display:flex;
  align-items:center;
  isolation:isolate;
  gap:18px;
  width:min(calc(100% - 28px),var(--shell));
  min-height:64px;
  margin:10px auto;
  padding:7px 8px 7px 14px;
  border:1px solid var(--glass-line);
  border-radius:22px;
  background:
    radial-gradient(circle at 78% -70%,var(--glass-aura),transparent 44%),
    linear-gradient(135deg,var(--glass-strong),var(--glass-bg));
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  backdrop-filter:blur(26px) saturate(1.8);
}
.public-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:1px;
  border-radius:20px;
  background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 34%,transparent 72%,rgba(112,154,255,.08));
  pointer-events:none;
}
.public-brand { margin-right:auto; font-size:21px; }
.public-nav { display:flex; align-items:center; gap:2px; padding:4px; border:1px solid color-mix(in srgb,var(--glass-line) 70%,transparent); border-radius:14px; background:var(--glass-chip); }
.public-nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:9px;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
  text-decoration:none;
}
.public-nav a:hover { background:var(--panel2); color:var(--text); }
.public-actions { display:flex; align-items:center; gap:7px; }
.public-actions .btn { min-height:42px; }
.public-header .theme-toggle,.public-header .btn.ghost { border-color:color-mix(in srgb,var(--glass-line) 76%,var(--line)); background:var(--glass-chip); }
.public-courier-short { display:none; }
.public-business-short { display:none; }
.public-login .ui-icon { display:none; }
.public-courier-entry {
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--accent2) 34%,var(--glass-line)) !important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 14%,var(--glass-chip)),var(--glass-chip)) !important;
  color:color-mix(in srgb,var(--accent2) 76%,var(--text)) !important;
}
.public-courier-entry::after {
  content:"";
  position:absolute;
  inset:-60% auto -60% -45%;
  width:34%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  animation:courier-entry-shine 6.8s ease-in-out infinite;
  pointer-events:none;
}
.public-courier-entry .ui-icon { color:var(--accent2); }
.public-courier-entry:hover { border-color:var(--accent2) !important; color:var(--text) !important; transform:translateY(-1px); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .public-header { background:var(--glass-opaque); }
}
.public-home-short { display:none; }

/* ── Landing ────────────────────────────────────────────────────────────── */
.landing { display:grid; width:100%; max-width:none; margin:0; padding:0; background:var(--page); }
.landing-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;
  gap:clamp(36px,6vw,92px);
  min-height:clamp(620px,calc(100svh - 72px),820px);
  padding:72px max(24px,calc((100vw - var(--shell))/2)) 82px;
  overflow:hidden;
  background:
    radial-gradient(720px 420px at 86% 14%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 68%),
    radial-gradient(560px 360px at 4% 92%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 70%),
    linear-gradient(180deg,var(--panel2),var(--page));
}
.landing-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:6%;
  right:-9%;
  width:min(54vw,780px);
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:50%;
  box-shadow:0 0 0 70px color-mix(in srgb,var(--accent) 2.8%,transparent),0 0 0 150px color-mix(in srgb,var(--accent) 2%,transparent);
}
.hero-copy {
  position:relative;
  z-index:3;
  display:grid;
  justify-items:start;
  gap:20px;
  max-width:690px;
}
.hero-copy > * { margin-top:0; margin-bottom:0; }
.hero-copy h1 {
  max-width:12.5ch;
  font-family:"Onest",var(--font);
  font-size:clamp(46px,5.8vw,78px);
  font-weight:900;
  line-height:.99;
  letter-spacing:-.055em;
}
.hero-copy h1 em { color:var(--accent); font-style:normal; }
.landing-kicker,.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:999px;
  background:var(--accent-tint);
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.hero-lede,.hero-copy > p {
  max-width:56ch;
  color:var(--text-soft);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.5;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.hero-actions .btn { min-height:50px; padding:14px 22px; font-size:15px; text-decoration:none; }
.courier-apply-cta {
  justify-content:flex-start;
  border-color:color-mix(in srgb,var(--accent2) 36%,var(--line)) !important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 12%,var(--panel)),var(--panel)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 10px 28px color-mix(in srgb,var(--accent2) 9%,transparent) !important;
}
.courier-apply-cta > .ui-icon { width:21px; height:21px; color:var(--accent2); }
.courier-apply-cta > span { display:grid; gap:3px; text-align:left; }
.courier-apply-cta strong { color:var(--text); font-size:13px; line-height:1.1; }
.courier-apply-cta small { color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.015em; }
.courier-apply-cta:hover { border-color:var(--accent2) !important; background:var(--success-tint) !important; color:var(--text) !important; }
.hero-trust,.hero-note { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:650; }
.hero-trust::before,.hero-note::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px var(--success-tint); }

.hero-stage {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:470px;
  perspective:1100px;
}
.route-stage {
  position:relative;
  width:min(100%,530px);
  aspect-ratio:1.12;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line-strong) 78%,transparent);
  border-radius:28px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--line) 62%,transparent) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(color-mix(in srgb,var(--line) 62%,transparent) 1px,transparent 1px) 0 0/44px 44px,
    color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 38px 80px rgba(14,30,80,.16),inset 0 1px 0 rgba(255,255,255,.7);
  transform:rotateY(-5deg) rotateX(2deg);
}
.route-stage::before {
  content:"";
  position:absolute;
  inset:14% 8%;
  border:2px dashed color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:48% 52% 44% 56%/52% 42% 58% 48%;
}
.route-stage::after {
  content:"";
  position:absolute;
  inset:auto -12% -35% 20%;
  height:64%;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  filter:blur(42px);
}
.route-path {
  position:absolute;
  z-index:1;
  inset:12%;
  width:76%;
  height:76%;
  color:var(--accent);
  pointer-events:none;
}
.route-path path {
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:9 10;
  animation:delivery-route 16s linear infinite;
}
.route-node {
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  max-width:190px;
  padding:8px 12px 8px 8px;
  border:1px solid color-mix(in srgb,var(--line-strong) 82%,transparent);
  border-radius:13px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  color:var(--text);
  font-size:12px;
  font-weight:750;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.route-node::before {
  content:attr(data-marker);
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:850;
}
.route-node:nth-of-type(1),.route-node--a,.route-node[data-stop="a"] { top:12%; left:7%; }
.route-node:nth-of-type(2),.route-node--b,.route-node[data-stop="b"] { right:7%; bottom:12%; }
.route-node--proof,.route-node[data-stop="proof"] { top:12%; right:7%; }
.route-node--proof::before,.route-node[data-stop="proof"]::before { content:"✓"; background:var(--success); }
.mascot-hero {
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  width:min(46%,238px);
  aspect-ratio:1;
  transform:translate(-50%,-48%);
  animation:mascot-breathe 5s ease-in-out infinite;
}
.mascot-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:20%;
  right:20%;
  bottom:7%;
  height:12%;
  border-radius:50%;
  background:rgba(14,30,80,.18);
  filter:blur(10px);
  animation:mascot-shadow 5s ease-in-out infinite;
}

@keyframes delivery-route { to { stroke-dashoffset:-380; } }
@keyframes mascot-breathe { 0%,100% { transform:translate(-50%,-48%) rotate(-1deg); } 50% { transform:translate(-50%,-54%) rotate(1deg); } }
@keyframes mascot-shadow { 0%,100% { transform:scale(1); opacity:.55; } 50% { transform:scale(.82); opacity:.35; } }
@keyframes courier-entry-shine { 0%,64% { left:-45%; } 86%,100% { left:130%; } }

.courier-hiring-rail {
  position:relative;
  z-index:8;
  isolation:isolate;
  width:min(calc(100% - 48px),var(--shell));
  min-height:142px;
  margin:-42px auto 42px;
  padding:24px 26px;
  display:grid;
  grid-template-columns:68px minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:radial-gradient(260px 180px at 8% 20%,rgba(85,133,255,.3),transparent 72%),
    radial-gradient(300px 200px at 82% 120%,rgba(84,220,188,.2),transparent 70%),
    linear-gradient(125deg,#10244d,#0b1730 72%);
  color:#fff;
  box-shadow:0 28px 64px rgba(14,30,80,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
.courier-hiring-rail::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-88px;
  right:19%;
  width:210px;
  aspect-ratio:1;
  border:1px solid rgba(129,169,255,.16);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(129,169,255,.035),0 0 0 62px rgba(129,169,255,.022);
  animation:courier-orbit-drift 10s ease-in-out infinite alternate;
}
.courier-hiring-signal {
  position:relative;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.courier-hiring-signal .ui-icon { width:30px; height:30px; color:#9cc0ff; }
.courier-hiring-signal i { position:absolute; right:7px; top:7px; width:10px; height:10px; border:2px solid #10244d; border-radius:50%; background:#69d8bd; box-shadow:0 0 0 5px rgba(105,216,189,.14); }
.courier-hiring-copy { display:grid; gap:8px; }
.courier-hiring-copy > p { display:flex; align-items:center; gap:8px; margin:0; color:#8be4d1; font-size:10px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.courier-hiring-copy .status-dot { width:7px; height:7px; background:#69d8bd; box-shadow:0 0 0 5px rgba(105,216,189,.14); }
.courier-hiring-copy h2 { max-width:720px; margin:0; color:#fff; font-size:clamp(20px,2.2vw,30px); line-height:1.12; letter-spacing:-.035em; }
.courier-hiring-copy > div { display:flex; flex-wrap:wrap; gap:7px; }
.courier-hiring-copy > div span { padding:5px 8px; border:1px solid rgba(255,255,255,.11); border-radius:999px; background:rgba(255,255,255,.055); color:rgba(235,240,250,.7); font-size:10px; font-weight:700; }
.courier-hiring-cta { position:relative; z-index:1; min-height:50px; padding-inline:20px; text-decoration:none; }
@keyframes courier-orbit-drift { to { transform:translate3d(26px,18px,0) rotate(14deg); } }

.landing-section {
  width:100%;
  padding:88px max(24px,calc((100vw - var(--shell))/2));
  background:var(--page);
}
.landing-section#how { background:var(--panel2); }
.landing-section-head { display:grid; gap:10px; max-width:720px; margin:0 0 34px; }
.landing-section-head h2 { margin:0; font-size:clamp(30px,3.2vw,46px); }
.landing-section-head p { margin:0; color:var(--muted); font-size:16px; }
.role-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.role-panel {
  position:relative;
  display:grid;
  align-content:start;
  gap:14px;
  min-height:280px;
  padding:28px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--panel);
  box-shadow:var(--shadow-xs);
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s;
}
.role-panel:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:var(--shadow); }
.role-panel::after {
  content:"";
  position:absolute;
  right:-62px;
  bottom:-82px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:var(--accent-tint);
}
.role-panel > * { position:relative; z-index:1; }
.role-panel h3 { margin:0; font-size:26px; }
.role-panel p { margin:0; max-width:48ch; color:var(--muted); }
.role-panel ul { display:grid; gap:8px; margin:2px 0 8px; padding:0; list-style:none; }
.role-panel li { display:flex; gap:8px; color:var(--text-soft); font-size:13px; }
.role-panel li::before { content:"✓"; color:var(--success); font-weight:850; }
.role-panel .btn { justify-self:start; margin-top:auto; text-decoration:none; }
.role-application-proof { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:750; }
.role-application-proof .status-dot { width:7px; height:7px; }

.process-steps {
  counter-reset:delivery-step;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.landing-step,.process-steps > * {
  counter-increment:delivery-step;
  position:relative;
  display:grid;
  align-content:start;
  gap:10px;
  min-height:190px;
  padding:26px 22px 20px 0;
  border-bottom:1px solid var(--line);
}
.landing-step + .landing-step,.process-steps > * + * { padding-left:22px; border-left:1px solid var(--line); }
.landing-step::before,.process-steps > *::before {
  content:"0" counter(delivery-step);
  width:max-content;
  color:var(--accent);
  font-size:13px;
  font-weight:850;
  letter-spacing:.08em;
}
.landing-step h3,.process-steps > * h3 { margin:0; font-size:18px; }
.landing-step p,.process-steps > * p { margin:0; color:var(--muted); font-size:13px; }

.ecosystem-strip {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(150px,.5fr));
  align-items:center;
  gap:20px;
  padding:34px;
  border-radius:var(--radius-lg);
  background:#10244d;
  color:#fff;
  box-shadow:var(--shadow-lg);
}
.ecosystem-strip h2,.ecosystem-strip h3 { color:#fff; }
.ecosystem-strip p { margin:4px 0 0; color:#c9d6ec; }
.ecosystem-strip > a,.ecosystem-strip > div:not(:first-child) {
  display:grid;
  place-items:center;
  min-height:78px;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-weight:750;
  text-align:center;
  text-decoration:none;
}
.landing-footer {
  position:relative;
  isolation:isolate;
  display:block;
  overflow:hidden;
  border:0;
  background:#0b1424;
  color:#fff;
  font-size:13px;
}
.landing-footer::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-320px;
  left:-140px;
  width:720px;
  height:580px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(36,94,236,.24),rgba(36,94,236,.04) 48%,transparent 70%);
  pointer-events:none;
}
.landing-footer::after {
  content:"";
  position:absolute;
  z-index:-1;
  right:-120px;
  bottom:-180px;
  width:420px;
  aspect-ratio:1;
  border:1px solid rgba(122,217,207,.11);
  border-radius:50%;
  box-shadow:0 0 0 44px rgba(122,217,207,.025),0 0 0 92px rgba(122,217,207,.018);
  pointer-events:none;
}
.landing-footer-main {
  width:min(calc(100% - 48px),var(--shell));
  margin:0 auto;
  padding:clamp(42px,5vw,64px) 0 38px;
  display:grid;
  grid-template-columns:minmax(300px,1.25fr) repeat(2,minmax(180px,.72fr));
  gap:clamp(30px,5vw,72px);
}
.landing-footer-brand { display:grid; align-content:start; justify-items:start; gap:17px; }
.landing-footer .brand-lockup { color:#fff; }
.landing-footer .brand-lockup:hover { color:#fff; }
.landing-footer .brand-copy strong { font-size:20px; }
.landing-footer .brand-copy small { color:rgba(235,240,250,.55); }
.landing-footer-brand > p { max-width:430px; margin:0; color:rgba(235,240,250,.6); font-size:13px; line-height:1.65; }
.landing-footer-contacts { display:grid; justify-items:start; gap:11px; margin-top:2px; }
.landing-footer-contacts > span { color:rgba(235,240,250,.5); font-size:11px; font-weight:700; }
.landing-footer-phone { display:inline-flex; align-items:center; gap:9px; color:#fff; text-decoration:none; }
.landing-footer-phone .ui-icon { width:18px; height:18px; color:#7ad9cf; }
.landing-footer-phone strong { font-size:19px; letter-spacing:-.02em; }
.landing-footer-phone:hover { color:#cfe0ff; }
.landing-footer-social { display:flex; flex-wrap:wrap; gap:8px; }
.landing-social-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  background:rgba(255,255,255,.055);
  color:rgba(235,240,250,.76);
  font-size:11px;
  font-weight:750;
  text-decoration:none;
  transition:transform .18s var(--ease),border-color .18s,background .18s,color .18s;
}
.landing-social-chip svg { width:16px; height:16px; color:#9cc0ff; flex:0 0 auto; }
.landing-social-chip:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.11); color:#fff; }
.landing-footer-column { display:grid; align-content:start; justify-items:start; gap:12px; }
.landing-footer-column h2 { margin:0 0 5px; color:#fff; font-size:14px; font-weight:850; }
.landing-footer-column a { color:rgba(235,240,250,.64); font-size:13px; font-weight:680; text-decoration:none; }
.landing-footer-column a:hover { color:#fff; }
.landing-footer-column > span { color:rgba(235,240,250,.64); font-size:10px; line-height:1.45; }
.landing-footer-column .landing-footer-highlight {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  margin-bottom:2px;
  padding:9px 11px;
  border:1px solid rgba(100,145,255,.24);
  border-radius:10px;
  background:rgba(47,98,224,.13);
  color:#dbe6ff;
}
.landing-footer-column .landing-footer-highlight.courier { border-color:rgba(122,217,207,.22); background:rgba(68,181,160,.1); color:#d7fff5; }
.landing-footer-highlight .ui-icon { width:15px; height:15px; }
.landing-footer-bar { border-top:1px solid rgba(255,255,255,.09); }
.landing-footer-bar > div {
  width:min(calc(100% - 48px),var(--shell));
  min-height:62px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  color:rgba(235,240,250,.48);
  font-size:11px;
}
.landing-footer-bar-copy { display:flex; flex-wrap:wrap; gap:6px 16px; }
.landing-footer-legal { display:flex; flex-wrap:wrap; gap:18px; }
.landing-footer-legal a { color:rgba(235,240,250,.52); text-decoration:none; }
.landing-footer-legal a:hover { color:#fff; }

/* ── Authentication, registration and pending states ───────────────────── */
.auth-shell {
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr);
  min-height:100svh;
  background:var(--page);
}
.auth-showcase {
  position:relative;
  display:grid;
  align-content:space-between;
  gap:44px;
  min-height:100svh;
  padding:clamp(30px,4vw,64px);
  overflow:hidden;
  background:radial-gradient(520px 380px at 92% 12%,rgba(90,139,255,.32),transparent 70%),
    radial-gradient(480px 380px at 10% 92%,rgba(63,209,190,.18),transparent 70%),
    #10244d;
  color:#fff;
}
.auth-showcase::after {
  content:"";
  position:absolute;
  right:-16%;
  bottom:-6%;
  width:58%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  box-shadow:0 0 0 56px rgba(255,255,255,.035),0 0 0 116px rgba(255,255,255,.025);
}
.auth-showcase > * { position:relative; z-index:1; }
.auth-showcase .auth-brand { color:#fff; font-size:22px; }
.auth-showcase h1 { max-width:12ch; margin:0; color:#fff; font-family:"Onest",var(--font); font-size:clamp(38px,4vw,58px); font-weight:900; line-height:1; }
.auth-showcase p { max-width:48ch; color:#cbd8ee; font-size:15px; }
.auth-showcase .mascot-hero { position:relative; left:auto; top:auto; width:min(230px,54%); transform:none; animation:auth-mascot 5s ease-in-out infinite; }
.auth-benefits { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.auth-benefits li { display:flex; gap:10px; align-items:flex-start; color:#dce5f4; font-size:13px; }
.auth-benefits li::before { content:"✓"; display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:7px; background:rgba(99,219,193,.16); color:#7de2ca; font-weight:900; }
@keyframes auth-mascot { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(1deg); } }

.auth-panel {
  display:grid;
  align-items:center;
  justify-items:center;
  padding:48px clamp(24px,6vw,88px);
  background:var(--page);
}
.auth-card {
  width:min(100%,560px);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.auth-card > h1 { margin:0 0 8px; font-size:clamp(30px,3vw,42px); }
.auth-card > .sub { margin-bottom:24px; }
.auth-card form { display:grid; gap:14px; }
.auth-card form label { margin:0 0 5px; }
.auth-brand { margin-bottom:34px; font-size:20px; }
.auth-choice {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 22px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
}
.auth-choice > * {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-weight:750;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.auth-choice > *.active,.auth-choice > *[aria-selected="true"] { border-color:var(--line); background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs); }
.auth-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.auth-form-grid > * { min-width:0; }
.auth-section { display:grid; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.auth-section h2,.auth-section h3 { margin:0; }
.auth-card .btn[type="submit"] { width:100%; min-height:50px; margin-top:4px; }
.auth-card .linkrow { color:var(--muted); }
.auth-card .linkrow a { font-weight:750; }
.auth-success {
  display:grid;
  justify-items:center;
  gap:16px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--panel);
  text-align:center;
  box-shadow:var(--shadow);
}
.auth-success .mascot,.auth-success .mascot-empty { width:130px; height:130px; }
.auth-success h1,.auth-success h2,.auth-success p { margin:0; }
.auth-success p { max-width:48ch; color:var(--muted); }

/* ── Role cockpit ───────────────────────────────────────────────────────── */
.page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.page-head h1,.page-head p { margin-top:0; }
.page-head h1 { margin-bottom:5px; }
.page-head p { margin-bottom:0; color:var(--muted); }
.page-head .actions { justify-content:flex-end; }

.cockpit { display:grid; gap:16px; }
.cockpit-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  align-items:stretch;
  gap:22px;
  min-height:280px;
  padding:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  background:radial-gradient(440px 240px at 92% 4%,rgba(129,169,255,.35),transparent 72%),
    linear-gradient(135deg,#10244d,#064cea);
  color:#fff;
  box-shadow:0 24px 60px rgba(6,42,121,.22);
}
.cockpit-hero::after {
  content:"";
  position:absolute;
  right:-70px;
  bottom:-120px;
  width:310px;
  height:310px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 48px rgba(255,255,255,.04),0 0 0 96px rgba(255,255,255,.025);
}
.cockpit-hero > * { position:relative; z-index:1; }
.cockpit-hero h1,.cockpit-hero h2,.cockpit-hero h3 { color:#fff; }
.cockpit-hero .muted,.cockpit-hero .sub { color:#d2def1; }
.cockpit-hero .btn.ghost { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); color:#fff; }
.cockpit-hero .btn.ghost:hover { border-color:#fff; background:var(--panel); color:var(--text); }
.shift-state { display:grid; align-content:center; justify-items:start; gap:12px; }
.shift-state h1,.shift-state h2 { margin:0; font-size:clamp(32px,3vw,46px); line-height:1.02; }
.shift-state p { max-width:52ch; margin:0; color:#d2def1; }
.shift-state .btn { min-height:52px; margin-top:6px; padding-inline:24px; background:var(--panel); color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.shift-state .btn:hover:not(:disabled) { background:var(--accent-tint); color:var(--accent); }
.shift-dot {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.shift-dot::before { content:""; width:8px; height:8px; border-radius:50%; background:#9aaac2; box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.shift-dot.on::before,.shift-dot.active::before,[data-shift="on"] .shift-dot::before { background:#61e3b4; box-shadow:0 0 0 4px rgba(97,227,180,.15); }
.shift-dot.off::before { background:#ffca76; box-shadow:0 0 0 4px rgba(255,202,118,.14); }

.readiness-grid,.cockpit-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  align-content:center;
}
.readiness-item,.cockpit-grid > * {
  display:grid;
  gap:4px;
  min-height:94px;
  padding:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.readiness-item b,.cockpit-grid > * b { color:#fff; font-size:13px; }
.readiness-item span,.cockpit-grid > * span { color:#cbd7eb; font-size:11px; line-height:1.35; }
.readiness-item.ok { border-color:rgba(97,227,180,.25); background:rgba(51,176,142,.12); }
.readiness-item.warn { border-color:rgba(255,202,118,.26); background:rgba(183,122,26,.12); }

.metric-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-xs);
}
.metric-item { display:grid; gap:4px; min-width:0; padding:18px; }
.metric-item + .metric-item { border-left:1px solid var(--line); }
.metric-item b,.metric-item .v { color:var(--text); font-size:clamp(20px,2vw,27px); font-weight:850; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.metric-item span,.metric-item .k { color:var(--muted); font-size:11px; font-weight:700; }

.active-order-peek {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.active-order-peek h2,.active-order-peek h3,.active-order-peek p { margin-top:0; }
.active-order-peek p:last-child { margin-bottom:0; color:var(--muted); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.settings-grid > .card { margin:0; }

/* ── Courier orders ─────────────────────────────────────────────────────── */
.orders-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.orders-head h1,.orders-head p { margin-top:0; }
.orders-head p { margin-bottom:0; color:var(--muted); }
.order-tabs {
  display:flex;
  gap:5px;
  margin-bottom:20px;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
  scrollbar-width:none;
}
.order-tabs::-webkit-scrollbar { display:none; }
.order-tabs > * {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 15px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.order-tabs > *.active,.order-tabs > *[aria-selected="true"] { border-color:var(--line); background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs); }
.order-section { display:grid; gap:12px; margin-bottom:26px; }
.order-section > h2 { margin:0 0 2px; }
.courier-order-card,.order-card {
  display:grid;
  gap:16px;
  margin:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-xs);
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.courier-order-card:hover,.order-card:hover { border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); box-shadow:var(--shadow); transform:translateY(-1px); }
.courier-order-card.is-active,.order-card.is-active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint),var(--shadow); }
.order-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.order-card-head h2,.order-card-head h3,.order-card-head p { margin:0; }
.order-card-head h3 { font-size:17px; }
.order-card-head p { margin-top:3px; color:var(--muted); font-size:12px; }
.order-card-head .badge { flex:0 0 auto; }
.order-route { position:relative; display:grid; gap:0; }
.route-stop {
  position:relative;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:10px;
  min-height:58px;
  padding:4px 0 12px;
  color:var(--text);
}
.route-stop::before {
  content:"";
  z-index:2;
  width:13px;
  height:13px;
  margin:4px 0 0 6px;
  border:3px solid var(--panel);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px var(--accent);
}
.route-stop::after {
  content:"";
  position:absolute;
  z-index:1;
  top:20px;
  bottom:-4px;
  left:12px;
  width:2px;
  background:var(--line-strong);
}
.route-stop:last-child::before { background:var(--success); box-shadow:0 0 0 2px var(--success); }
.route-stop:last-child::after { display:none; }
.route-stop > div { min-width:0; }
.route-stop b { display:block; font-size:13px; }
.route-stop span,.route-stop small { display:block; margin-top:2px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.order-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.order-facts > * { display:grid; gap:3px; min-width:0; padding:11px 12px; border-radius:10px; background:var(--panel2); }
.order-facts span,.order-facts .k { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.order-facts b,.order-facts .v { overflow-wrap:anywhere; color:var(--text); font-size:13px; font-weight:800; }
/* Pre-accept honesty line under the route facts: what is already visible and
   what only opens after the courier takes the order. */
.stop-contacts-hint { margin:0; font-size:12px; line-height:1.45; }
.order-primary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding-top:2px; }
.order-primary > .btn { min-width:170px; }
.order-secondary { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.order-more { border-top:1px solid var(--line); }
.order-more > summary { min-height:44px; display:flex; align-items:center; color:var(--muted); font-size:12px; font-weight:750; cursor:pointer; }
.order-more[open] > summary { color:var(--text); }
.order-more > :not(summary) { margin-top:10px; }
.cash-alert {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--warn) 32%,var(--line));
  border-radius:11px;
  background:var(--warn-tint);
  color:var(--text);
}
.cash-alert::before { content:"₽"; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--warn); color:#fff; font-weight:900; }
.cash-alert b { color:var(--warn); }

.empty-state {
  display:grid;
  justify-items:center;
  gap:12px;
  min-height:300px;
  padding:44px 24px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--panel2);
  text-align:center;
}
.mascot-empty { width:120px; height:120px; margin-bottom:4px; }
.empty-state h2,.empty-state h3,.empty-state p { margin:0; }
.empty-state p { max-width:50ch; color:var(--muted); }
.data-unavailable {
  position:relative;
  isolation:isolate;
  display:grid;
  justify-items:center;
  gap:12px;
  width:min(720px,calc(100% - 32px));
  min-height:430px;
  margin:clamp(28px,8vh,88px) auto;
  padding:clamp(30px,6vw,64px);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--accent-tint) 42%,var(--panel)));
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.data-unavailable::before,.data-unavailable::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;
  height:220px;
  border-radius:42% 58% 62% 38%;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  filter:blur(1px);
  animation:delivery-blob 11s ease-in-out infinite alternate;
}
.data-unavailable::before { top:-110px; right:-64px; rotate:18deg; }
.data-unavailable::after { bottom:-128px; left:-58px; rotate:-24deg; animation-delay:-5s; }
.data-unavailable .mascot-empty { width:132px; height:132px; filter:drop-shadow(0 18px 24px rgba(34,87,255,.16)); }
.data-unavailable .eyebrow { margin:0; }
.data-unavailable h1 { max-width:14ch; margin:0; font-size:clamp(28px,5vw,46px); letter-spacing:-.045em; }
.data-unavailable > p:not(.eyebrow) { max-width:54ch; margin:0; color:var(--muted); }
.data-unavailable > small { max-width:58ch; color:var(--muted); overflow-wrap:anywhere; }
.data-unavailable .btnrow { justify-content:center; margin-top:8px; }
.loader,.empty { color:var(--muted); }

/* ── Dialogs, notifications and secondary legacy surfaces ──────────────── */
.modal-ov {
  padding:20px;
  background:rgba(3,9,20,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.modal {
  width:min(440px,100%);
  max-width:100%;
  max-height:min(88svh,760px);
  overflow:auto;
  padding:22px;
  border-color:var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 30px 90px rgba(0,0,0,.32);
}
.modal.wide { width:min(760px,100%); }
.modal h3 { margin:0 36px 14px 0; color:var(--text); font-size:18px; letter-spacing:-.02em; text-transform:none; }
.modal-row { gap:8px; padding-top:16px; border-top:1px solid var(--line); }
.modal-x { display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:10px; }
.modal-x:hover { background:var(--panel2); }
.toast {
  bottom:max(22px,env(safe-area-inset-bottom));
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:48px;
  padding:13px 16px;
  border-color:var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow-lg);
  font-weight:650;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.toast.err { border-color:var(--danger); }
.toast.ok { border-color:var(--success); }
.banner { border-left:4px solid var(--accent); }
.banner.warn,.banner.cash { border-left-color:var(--warn); }
.banner.danger { border-left-color:var(--danger); }
.supmsg { background:var(--panel2); }
.supmsg.out { background:var(--accent-tint); }
.debtbox.owing { background:linear-gradient(180deg,var(--danger-tint),var(--panel)); }
.debtbox.today { background:linear-gradient(180deg,var(--warn-tint),var(--panel)); }
.debtbox.clear { background:linear-gradient(180deg,var(--success-tint),var(--panel)); }
.docitem { border-color:var(--line); background:var(--panel); }
.docthumb { background:var(--panel2); }
.qr-camera { background:#050a13; }

/* ── Leaflet/map surfaces: preserve geometry and interaction, theme chrome ─ */
.maporder { background:var(--bg); color:var(--text); }
.maporder-map,.maporder .leaflet-container { background:#dfe8f3; }
.maporder-panel,.adminmap-bar {
  border-color:var(--line);
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  color:var(--text);
}
.maporder-panel { box-shadow:20px 0 44px rgba(14,30,80,.12); }
.adminmap-bar { box-shadow:0 8px 30px rgba(14,30,80,.12); }
.maporder .leaflet-bar a,.maporder .leaflet-control-zoom a {
  border-color:var(--line);
  background:var(--panel);
  color:var(--text);
}
.maporder .leaflet-bar a:hover { background:var(--panel2); }
.maporder .leaflet-control-attribution { background:color-mix(in srgb,var(--panel) 90%,transparent); color:var(--muted); }
.route-legend,.maporder-stats,.maporder-orderlist,.maporder-viewbanner {
  border-color:var(--line);
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  color:var(--text);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.mpstop,.mp-suggest { border-color:var(--line); background:var(--panel); }
.mp-sopt:hover,.mp-ol-item:hover { background:var(--panel2); }
.mp-hint,.maporder-routehint { border-color:color-mix(in srgb,var(--warn) 35%,transparent); background:var(--warn-tint); color:var(--warn); box-shadow:var(--shadow); }
.maporder-submit { border-radius:10px; box-shadow:var(--shadow-accent); }

/* Dark is an explicit user choice. Cover every legacy surface that formerly
   carried a literal white background without changing its behavior. */
html[data-theme="dark"] body { background:var(--bg); }
html[data-theme="dark"] #topbar,
html[data-theme="dark"] .public-header { box-shadow:0 8px 28px rgba(0,0,0,.25); }
html[data-theme="dark"] .route-stage { box-shadow:0 38px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .cselect-ctrl,
html[data-theme="dark"] .cdate-ctrl { background:var(--panel); color:var(--text); }
html[data-theme="dark"] .maporder .leaflet-tile-pane { filter:brightness(.7) saturate(.62) contrast(1.08); }
html[data-theme="dark"] .maporder-map,
html[data-theme="dark"] .maporder .leaflet-container { background:#152136; }
html[data-theme="dark"] .mp-pin { border-color:rgba(255,255,255,.78); box-shadow:0 3px 10px rgba(0,0,0,.5); }
html[data-theme="dark"] .maporder-panel,
html[data-theme="dark"] .adminmap-bar,
html[data-theme="dark"] .maporder-stats,
html[data-theme="dark"] .maporder-orderlist,
html[data-theme="dark"] .maporder-viewbanner,
html[data-theme="dark"] .route-legend { box-shadow:0 16px 40px rgba(0,0,0,.32); }
html[data-theme="dark"] .qr-frame { border-color:rgba(255,255,255,.78); }
html[data-theme="dark"] .badge.src-marketplace,
html[data-theme="dark"] .badge.src-partner { box-shadow:none; }
html[data-theme="dark"] .auth-panel { background:var(--page); }

/* ── Responsive shell: bottom nav is the courier's thumb-first control ─── */
@media (max-width:980px) {
  .public-header { gap:12px; }
  .public-nav { display:none; }
  .landing-hero { grid-template-columns:minmax(0,1fr) minmax(340px,.78fr); gap:28px; }
  .hero-copy h1 { font-size:clamp(42px,6vw,62px); }
  .process-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-steps > :nth-child(3),.landing-step:nth-child(3) { border-left:0; }
  .ecosystem-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ecosystem-strip > :first-child { grid-column:1/-1; }
  .auth-shell { grid-template-columns:minmax(310px,.72fr) minmax(430px,1.28fr); }
  .auth-showcase { padding:34px; }
}

@media (max-width:720px) {
  html { scroll-padding-top:70px; }
  body { padding-bottom:env(safe-area-inset-bottom); }
  main {
    padding:18px 14px calc(96px + env(safe-area-inset-bottom));
  }
  main:has(.public-shell),main:has(.landing-shell),main:has(.auth-shell) { padding:0; }

  #topbar {
    min-height:62px;
    flex-wrap:nowrap;
    gap:8px;
    padding:8px max(12px,env(safe-area-inset-left)) 8px max(12px,env(safe-area-inset-right));
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    transform:none;
  }
  .brand { min-width:0; overflow:hidden; font-size:16px; text-overflow:ellipsis; }
  .brand-mark { width:36px; height:36px; }
  #whoami { display:none; }
  #topbar > .spacer { display:block; }
  #topbar .btn.sm { min-height:44px; }
  #nav {
    position:fixed;
    z-index:95;
    left:0;
    right:0;
    bottom:0;
    order:initial;
    display:flex;
    width:auto;
    height:calc(68px + env(safe-area-inset-bottom));
    gap:2px;
    padding:6px max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));
    overflow-x:auto;
    border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--panel) 94%,transparent);
    box-shadow:0 -10px 28px rgba(14,30,80,.1);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    backdrop-filter:blur(20px) saturate(1.3);
    scrollbar-width:none;
  }
  #nav::-webkit-scrollbar { display:none; }
  #nav a {
    flex:1 0 72px;
    min-width:68px;
    min-height:54px;
    padding:8px 7px;
    border-radius:10px;
    font-size:10px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }
  #nav a.active { background:var(--accent-tint); }

  .public-header {
    top:8px;
    width:calc(100% - 20px);
    min-height:64px;
    margin:8px auto;
    padding:8px max(14px,env(safe-area-inset-left)) 8px max(14px,env(safe-area-inset-right));
    border-radius:18px;
  }
  .public-brand { font-size:17px; }
  .public-brand .mascot { width:36px; height:36px; }
  .public-actions { margin-left:auto; }
  .public-actions .btn:not(.ghost) { display:none; }
  .public-actions .btn.ghost { min-width:44px; padding-inline:12px; }
  .theme-toggle,.theme-btn,[data-theme-toggle] { width:44px; min-width:44px; height:44px; }

  .landing-hero {
    grid-template-columns:minmax(0,1fr);
    gap:30px;
    min-height:auto;
    padding:50px 18px 58px;
  }
  .landing-hero::before { top:auto; right:-45%; bottom:2%; width:115vw; }
  .hero-copy { gap:16px; }
  .hero-copy h1 { max-width:13ch; font-size:clamp(40px,12vw,54px); line-height:1.01; }
  .hero-lede,.hero-copy > p { font-size:16px; }
  .hero-actions { display:grid; width:100%; grid-template-columns:1fr; }
  .hero-actions .btn { width:100%; min-height:52px; }
  .hero-stage { min-height:330px; }
  .route-stage { width:min(100%,390px); border-radius:22px; transform:none; }
  .route-node { max-width:150px; min-height:44px; padding:6px 9px 6px 6px; font-size:10px; }
  .route-node::before { width:30px; height:30px; flex-basis:30px; }
  .mascot-hero { width:min(44%,170px); }
  .landing-section { padding:58px 18px; }
  .landing-section-head { margin-bottom:24px; }
  .landing-section-head h2 { font-size:30px; }
  .role-grid { grid-template-columns:1fr; }
  .role-panel { min-height:0; padding:22px; }
  .process-steps { grid-template-columns:1fr; border-top:0; }
  .landing-step,.process-steps > * { min-height:0; padding:20px 0; border-top:1px solid var(--line); border-left:0 !important; }
  .landing-step + .landing-step,.process-steps > * + * { padding-left:0; }
  .ecosystem-strip { grid-template-columns:1fr; padding:24px; }
  .ecosystem-strip > :first-child { grid-column:auto; }
  .ecosystem-strip > a,.ecosystem-strip > div:not(:first-child) { min-height:60px; }

  .auth-shell { grid-template-columns:1fr; }
  .auth-showcase { min-height:auto; padding:22px 18px 26px; gap:22px; }
  .auth-showcase h1 { max-width:15ch; font-size:32px; }
  .auth-showcase p { margin:0; }
  .auth-showcase .mascot-hero,.auth-benefits { display:none; }
  .auth-panel { min-height:calc(100svh - 210px); padding:34px 18px calc(40px + env(safe-area-inset-bottom)); align-items:start; }
  .auth-card { width:100%; }
  .auth-card > h1 { font-size:30px; }
  .auth-brand { margin-bottom:24px; }
  .auth-form-grid { grid-template-columns:1fr; }
  .auth-success { padding:24px 18px; }

  .page-head,.orders-head { align-items:flex-start; flex-direction:column; gap:12px; }
  .page-head .actions,.orders-head .actions { width:100%; justify-content:stretch; }
  .page-head .actions .btn,.orders-head .actions .btn { flex:1; }
  .cockpit-hero { grid-template-columns:1fr; min-height:0; padding:22px; }
  .shift-state h1,.shift-state h2 { font-size:34px; }
  .readiness-grid,.cockpit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-item { padding:14px; }
  .metric-item:nth-child(odd) { border-left:0; }
  .metric-item:nth-child(n+3) { border-top:1px solid var(--line); }
  .active-order-peek { grid-template-columns:1fr; }
  .active-order-peek .btn { width:100%; }
  .settings-grid { grid-template-columns:1fr; }

  .order-tabs { margin-inline:-2px; }
  .courier-order-card,.order-card { padding:16px; }
  .order-card-head { gap:10px; }
  .order-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .order-primary { grid-template-columns:1fr; }
  .order-primary > .btn { width:100%; min-width:0; }
  .order-secondary .btn { flex:1 1 140px; }

  .card { padding:15px; }
  .card tr { border-color:var(--line); border-radius:10px; background:var(--panel2); }
  .card td::before { color:var(--muted); }
  .modal-ov { padding:10px; align-items:end; }
  .modal,.modal.wide,.modal.cod-modal { width:100%; max-width:100%; max-height:92svh; padding:20px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:18px 18px 10px 10px; }
  .modal-row { position:sticky; bottom:0; margin-inline:-16px; padding:14px 16px max(2px,env(safe-area-inset-bottom)); background:var(--panel); }
  .toast { bottom:calc(82px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); max-width:none; }

  .maporder-panel { bottom:calc(58px + env(safe-area-inset-bottom)); }
  .maporder-submit { min-height:58px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}

@media (max-width:390px) {
  .public-header { gap:6px; }
  .public-brand { font-size:15px; }
  .public-brand .mascot { width:34px; height:34px; }
  .public-actions { gap:5px; }
  .public-actions .btn.ghost { max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .public-home-full { display:none; }
  .public-home-short { display:inline; }
  .hero-copy h1 { font-size:39px; }
  .hero-stage { min-height:292px; }
  .route-stage { width:100%; }
  .route-node:nth-of-type(1),.route-node--a,.route-node[data-stop="a"] { top:8%; left:5%; }
  .route-node:nth-of-type(2),.route-node--b,.route-node[data-stop="b"] { right:5%; bottom:8%; }
  .route-node--proof,.route-node[data-stop="proof"] { top:8%; right:5%; }
  .readiness-grid,.cockpit-grid { grid-template-columns:1fr; }
  .readiness-item,.cockpit-grid > * { min-height:78px; }
  .metric-item b,.metric-item .v { font-size:20px; }
  .auth-choice > * { padding-inline:7px; font-size:12px; }
}

@media (max-width:340px) {
  .brand { font-size:14px; }
  #topbar { gap:5px; padding-inline:8px; }
  #topbar .theme-toggle,#topbar .theme-btn,#topbar [data-theme-toggle] { width:42px; min-width:42px; }
  .public-brand span:not(.mascot) { max-width:122px; overflow:hidden; text-overflow:ellipsis; }
  .hero-copy h1 { font-size:35px; }
  .landing-hero,.landing-section { padding-left:14px; padding-right:14px; }
  .route-node { max-width:126px; }
  .role-panel { padding:19px; }
  .cockpit-hero { padding:18px; }
  .order-facts { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .route-path path,.mascot-hero,.mascot-hero::after,.auth-showcase .mascot-hero {
    animation:none !important;
  }
  html.theme-transitioning::view-transition-old(root),
  html.theme-transitioning::view-transition-new(root) { animation:none !important; }
}

@media (prefers-contrast:more) {
  :root { --line:#bcc8d8; --line-strong:#8fa0b6; }
  html[data-theme="dark"] { --line:#52647d; --line-strong:#71839a; }
  .btn,.badge,.pill,input,select,textarea { border-width:2px; }
}

/* ── Exact SPA markup integration ─────────────────────────────────────────
   These selectors bind the design layer to the dependency-free render helpers
   in app.js. Keep them last: they also correct legacy pseudo-element shapes. */
.ui-icon,.nav-icon {
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  pointer-events:none;
}
.nav-icon { width:17px; height:17px; flex-basis:17px; }
.btn .ui-icon { width:17px; height:17px; flex-basis:17px; }
.brand-lockup {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:var(--text);
  text-decoration:none;
}
.brand-lockup:hover { color:var(--text); }
.brand-mascot { width:40px; height:40px; }
.brand-copy { display:grid; gap:0; min-width:0; line-height:1; }
.brand-copy strong {
  color:inherit;
  font-family:"Onest",var(--font);
  font-size:17px;
  font-weight:900;
  letter-spacing:-.045em;
  text-transform:lowercase;
}
.brand-copy small {
  margin-top:3px;
  color:var(--muted);
  font-family:var(--font);
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.public-header .brand-lockup { margin-right:auto; }
.public-header .brand-copy strong { font-size:19px; }
.auth-brand .brand-lockup { font-family:var(--font); }
.theme-label {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.chrome-icon-button {
  display:inline-grid;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}
.chrome-icon-button > svg { width:19px; height:19px; }
.nav-toggle { display:none; }
#nav { flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
#nav::-webkit-scrollbar { display:none; }
#nav a { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; }
#topbar > .spacer { flex:0 0 0; }
.btn-lg { min-height:50px; padding:14px 22px; font-size:15px; }
.btn.light { border-color:#fff; background:var(--panel); color:var(--text); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.btn.light:hover:not(:disabled) { background:var(--accent-tint); color:var(--accent); }

.public-nav-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
}
.public-nav-link:hover { background:var(--panel2); color:var(--text); }
.public-actions .theme-toggle { box-shadow:none; }

.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px;
  color:var(--accent);
  font-size:11px;
  font-weight:850;
  letter-spacing:.085em;
  line-height:1.35;
  text-transform:uppercase;
}
.status-dot {
  display:inline-block;
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px var(--success-tint);
}
.hero-copy h1 span { color:var(--accent); }
.hero-lead { max-width:56ch; margin:0; color:var(--text-soft); font-size:clamp(16px,1.35vw,20px); line-height:1.5; }
.hero-proof { display:flex; flex-wrap:wrap; gap:9px 16px; color:var(--muted); font-size:12px; font-weight:700; }
.hero-proof span { display:inline-flex; align-items:center; gap:6px; }
.hero-proof .ui-icon { width:15px; height:15px; flex-basis:15px; color:var(--success); }
.route-path { inset:0; width:100%; height:100%; }
.route-path path { animation:none; }
.route-path .route-shadow { stroke:color-mix(in srgb,var(--accent) 14%,transparent); stroke-width:15; stroke-dasharray:none; }
.route-path .route-line { stroke:var(--accent); stroke-width:3; stroke-dasharray:8 10; animation:delivery-route 16s linear infinite; }
.route-node:has(> span)::before { display:none; }
.route-node > span {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:850;
}
.route-node > div { display:grid; min-width:0; }
.route-node b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-node small { color:var(--muted); font-size:9px; white-space:nowrap; }
.route-node-a { top:12%; left:7%; }
.route-node-b { right:7%; bottom:12%; }
.route-status {
  position:absolute;
  z-index:8;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.route-status > div { display:grid; }
.route-status small { color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; }
.route-status b { color:var(--text); font-size:11px; }
.route-status-live { left:7%; bottom:10%; }
.route-status-eta { top:10%; right:6%; }
.route-status-eta > .ui-icon { display:grid; place-items:center; width:32px; height:32px; padding:7px; border-radius:9px; background:var(--success-tint); color:var(--success); }

.section-heading { display:grid; gap:8px; max-width:760px; margin:0 0 34px; }
.section-heading > * { margin-top:0; margin-bottom:0; }
.section-heading h2 { font-size:clamp(30px,3.2vw,46px); }
.section-heading > p:last-child { color:var(--muted); font-size:16px; }
.section-heading.compact { margin-bottom:18px; }
.section-heading.compact h2 { font-size:24px; }
.process-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.landing-step:has(> span)::before,.process-steps > *:has(> span)::before { display:none; }
.landing-step > span,.process-steps > * > span { color:var(--accent); font-size:12px; font-weight:850; letter-spacing:.08em; }
.landing-step .step-icon { width:28px; height:28px; color:var(--accent); }
.role-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.role-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--accent-tint);
  color:var(--accent);
}
.role-icon .ui-icon { width:22px; height:22px; }
.role-kicker { color:var(--accent) !important; font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.ecosystem-strip { grid-template-columns:150px minmax(0,1fr) auto; margin:30px max(24px,calc((100vw - var(--shell))/2)) 88px; }
.ecosystem-strip > div:first-child { display:grid; place-items:center; }
.ecosystem-mascot { width:126px; height:126px; }
.ecosystem-strip > div:nth-child(2) {
  display:block;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  text-align:left;
}
.ecosystem-strip > div:nth-child(2) h2 { margin:4px 0 7px; }
.ecosystem-strip > .btn { min-height:50px; padding:14px 20px; }

.auth-shell { min-height:calc(100svh - 72px); }
.auth-showcase { min-height:calc(100svh - 72px); }
.auth-showcase h2 { max-width:13ch; margin:0; color:#fff; font-family:"Onest",var(--font); font-size:clamp(38px,4vw,58px); font-weight:900; line-height:1; }
.auth-visual { position:relative; display:grid; place-items:center; min-height:230px; }
.auth-mascot { position:relative; z-index:3; width:190px; height:190px; animation:auth-mascot 5s ease-in-out infinite; }
.auth-route-line { position:absolute; left:12%; right:12%; top:52%; height:0; border-top:2px dashed rgba(255,255,255,.34); }
.auth-point { position:absolute; top:calc(52% - 18px); display:grid; place-items:center; width:36px; height:36px; border:3px solid #10244d; border-radius:10px; background:var(--panel); color:var(--accent); font-weight:850; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.auth-point.point-a { left:8%; }
.auth-point.point-b { right:8%; background:#69d8bd; color:var(--text); }
.auth-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.auth-benefits > div,.auth-benefits > li { display:grid; gap:7px; min-width:0; padding:12px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(255,255,255,.07); }
.auth-benefits > li::before { display:none; }
.auth-benefits > div .ui-icon,.auth-benefits > li .ui-icon { color:#81a9ff; }
.auth-benefits > div span,.auth-benefits > li span { color:#dce5f4; font-size:11px; font-weight:700; line-height:1.35; }
.auth-brand { margin-bottom:30px; }
.auth-copy { margin:0 0 24px; color:var(--muted); }
.auth-form { display:grid; gap:14px; }
.field { display:grid; align-content:start; min-width:0; }
.field label { margin:0 0 5px; }
.field > small,.form-consent { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.field-wide { grid-column:1/-1; }
.file-field input[type="file"] { min-height:58px; padding:8px; }
.file-field input[type="file"]::file-selector-button { min-height:40px; margin-right:10px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--text); font:inherit; font-weight:750; cursor:pointer; }
.auth-section { margin:0; padding:18px 0 0; border:0; border-top:1px solid var(--line); }
.auth-section legend { margin:0 0 12px; padding:0; color:var(--text); font-size:13px; font-weight:800; }
.auth-section legend span { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:7px; border-radius:8px; background:var(--accent-tint); color:var(--accent); font-size:11px; }
.form-alert { margin:0; padding:11px 12px; border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line)); border-radius:10px; background:var(--danger-tint); color:var(--danger); font-size:12px; font-weight:700; }
.auth-footer { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.auth-footer a { font-weight:750; text-decoration:none; }
.success-mark { display:grid; place-items:center; width:58px; height:58px; border-radius:17px; background:var(--success-tint); color:var(--success); }
.success-mark .ui-icon { width:27px; height:27px; }
.auth-success ol { display:grid; width:100%; gap:0; margin:6px 0; padding:0; list-style:none; text-align:left; }
.auth-success li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:10px 0; }
.auth-success li > span { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--muted); font-size:11px; font-weight:800; }
.auth-success li.done > span { border-color:transparent; background:var(--success-tint); color:var(--success); }
.auth-success li b,.auth-success li small { display:block; }
.auth-success li small { margin-top:2px; color:var(--muted); font-size:10px; }

.cockpit-hero { grid-template-columns:minmax(0,1fr) auto 150px; align-items:center; }
.shift-state { grid-template-columns:auto minmax(0,1fr); align-items:start; }
.shift-state > div { display:grid; gap:7px; }
.shift-state > div > small { color:#cbd7eb; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.shift-state.on .shift-dot::before { background:#61e3b4; box-shadow:0 0 0 4px rgba(97,227,180,.15); }
.cockpit-action { display:grid; justify-items:center; gap:8px; min-width:170px; }
.cockpit-action .btn { width:100%; min-height:52px; }
.cockpit-action > small { color:#cbd7eb; font-size:10px; }
.cockpit-mascot { position:relative; z-index:2; width:142px; height:142px; }
.metric-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric-item { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
.metric-item > span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent-tint); color:var(--accent); }
.metric-item > div { display:grid; min-width:0; }
.metric-item small { color:var(--muted); font-size:10px; font-weight:700; }
.cockpit-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.65fr); gap:16px; align-items:stretch; }
.cockpit-grid > * { min-height:0; color:var(--text); }
.cockpit-grid > * b { color:var(--text); }
.active-order-peek { grid-template-columns:1fr; align-content:start; }
.active-order-head,.active-order-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.active-order-head h2,.active-order-head p { margin:0; }
.active-order-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.active-order-foot > div { display:grid; }
.active-order-foot small { color:var(--muted); font-size:10px; }
.readiness-grid { display:grid; grid-template-columns:1fr; gap:8px; align-content:start; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-xs); }
.readiness-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:10px; }
.readiness-head h2,.readiness-head p { margin:0; }
.readiness-head > span { display:grid; place-items:center; min-width:38px; min-height:30px; padding:5px 8px; border-radius:9px; background:var(--accent-tint); color:var(--accent); font-size:11px; font-weight:850; }
.readiness-item {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:68px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  color:var(--text);
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.readiness-item:hover { border-color:var(--accent); color:var(--text); }
.readiness-item > span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--panel); color:var(--accent); }
.readiness-item > div { display:grid; min-width:0; }
.readiness-item b { color:var(--text); font-size:12px; }
.readiness-item small { color:var(--muted); font-size:10px; }
.readiness-item > .ui-icon:last-child { color:var(--success); }
.settings-section { margin-top:12px; }
.settings-card { display:grid; align-content:start; gap:15px; margin:0; }
.settings-card-wide { grid-column:1/-1; }
.settings-card-head { display:flex; align-items:flex-start; gap:12px; }
.settings-card-head > span { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:var(--accent-tint); color:var(--accent); }
.settings-card-head h2,.settings-card-head p { margin:0; }
.settings-card-head h2 { font-size:17px; }
.settings-card-head p { margin-top:3px; color:var(--muted); font-size:11px; }
.settings-privacy { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.admin-credential { min-width:230px; }
.admin-credential > small { display:block; max-width:260px; margin-top:5px; color:var(--muted); font-size:9px; line-height:1.4; }
.credential-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.credential-actions .btn { min-height:34px; padding:7px 9px; }

.pod-upload { display:grid; gap:14px; }
.pod-upload > * { margin:0; }
.pod-upload h2 { margin-top:-8px; padding-right:40px; font-size:25px; letter-spacing:-.035em; }
.pod-lead { max-width:65ch; color:var(--muted); font-size:13px; line-height:1.6; }
.pod-shot-guide {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:12px;
  background:var(--accent-tint);
}
.pod-shot-guide > span { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--panel); color:var(--accent); }
.pod-shot-guide > span .ui-icon { width:17px; height:17px; }
.pod-shot-guide > div { display:grid; gap:2px; min-width:0; }
.pod-shot-guide b { font-size:11px; }
.pod-shot-guide small { color:var(--muted); font-size:10px; line-height:1.45; }
.pod-upload form { display:grid; gap:10px; }
.pod-file {
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 20px;
  align-items:center;
  gap:11px;
  min-height:78px;
  padding:12px;
  overflow:hidden;
  border:1.5px dashed color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:13px;
  background:linear-gradient(135deg,var(--accent-tint),color-mix(in srgb,var(--panel) 88%,var(--accent-tint)));
  cursor:pointer;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.pod-file:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 12%,transparent); }
.pod-file:focus-within { outline:3px solid color-mix(in srgb,var(--accent) 22%,transparent); outline-offset:2px; border-color:var(--accent); }
.pod-file input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.pod-file > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.pod-file b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.pod-file small { color:var(--muted); font-size:10px; }
.pod-file-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--panel); color:var(--accent); box-shadow:var(--shadow-xs); }
.pod-file-icon .ui-icon { width:20px; height:20px; }
.pod-file > .ui-icon { width:18px; height:18px; color:var(--accent); }
.pod-preview { display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:12px; padding:9px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.pod-preview img { width:84px; height:64px; border-radius:9px; object-fit:cover; background:var(--panel3); }
.pod-preview figcaption { min-width:0; overflow-wrap:anywhere; color:var(--muted); font-size:11px; }
.pod-progress { height:6px; overflow:hidden; border-radius:99px; background:var(--panel3); }
.pod-progress > i { display:block; width:36%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#718fff,var(--accent2)); animation:pod-upload-progress 1.05s ease-in-out infinite alternate; }
.pod-upload-status { min-height:20px; margin:0; font-size:11px; line-height:1.5; }
.pod-upload-success { color:var(--success); font-weight:750; }
@keyframes pod-upload-progress { from { transform:translateX(-15%); } to { transform:translateX(190%); } }
.profile-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }

.order-list { display:grid; gap:12px; }
.order-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.order-section-head h2,.order-section-head p { margin:0; }
.order-section-head > span { display:grid; place-items:center; min-width:36px; min-height:30px; padding:5px 9px; border-radius:9px; background:var(--panel2); color:var(--muted); font-size:11px; font-weight:850; }
.order-identity { display:grid; gap:4px; min-width:0; }
.order-identity > small,.order-payout > small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
/* Когда заказ создан: строка под номером в шапке карточки и в обзоре смены. Надзаголовки
   вокруг набраны капслоком в 9px, а здесь читается время — обычный регистр и обычный размер. */
.order-identity > small.order-created,.active-order-head small.order-created { color:var(--muted); font-size:11px; font-weight:650; letter-spacing:0; text-transform:none; }
.order-identity > div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.order-payout { display:grid; justify-items:end; flex:0 0 auto; }
.order-payout b { font-size:20px; letter-spacing:-.025em; }
.route-stop:has(> span)::before { display:none; }
.route-stop > span,.stop-marker {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  margin:0;
  border:2px solid var(--panel);
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-weight:850;
  box-shadow:0 0 0 1px var(--accent);
}
.route-stop:last-child > span { background:var(--success); box-shadow:0 0 0 1px var(--success); }
.route-stop::after { top:24px; left:11px; }
.stop-copy { min-width:0; }
.stop-copy > small { margin:0; color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
/* П16: ориентир — первая строка под адресом и читается сильнее имени контакта: по нему курьер
   находит дверь. Имя контакта остаётся приглушённым, как и раньше. Свой визуальный язык не
   заводим — это те же блочные строки .route-stop span, только с разным весом. */
.stop-landmark { color:var(--text-soft); font-weight:650; }
.stop-contact { color:var(--muted); }
/* Пункт А: состояние передачи прямо в строке остановки — магазин, где курьер уже
   забрал товар, обязан выглядеть иначе, чем тот, куда он только едет. .route-stop
   раскладывает span'ы блоками, поэтому бейдж возвращается в строку явно. */
.route-stop .stop-state { display:inline-block !important; margin-top:5px; font-size:10px !important; }
.stop-meta { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:5px; }
.stop-phone,.stop-metro,.stop-route { display:inline-flex !important; align-items:center; gap:5px; color:var(--muted); font-size:10px !important; text-decoration:none; }
/* П56: «Маршрут» — действие, а не справка, поэтому единственная активная подпись в строке. */
.stop-route { color:var(--accent); font-weight:800; text-decoration:underline; }
.stop-phone .ui-icon { width:13px; height:13px; flex-basis:13px; }
.order-facts small { color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.cash-alert:has(> span)::before { display:none; }
.cash-alert > span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--warn); color:#fff; }
.cash-alert > div { display:grid; }
.cash-alert small { color:var(--warn); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.cash-alert em { color:var(--muted); font-size:10px; font-style:normal; font-weight:650; }
.cash-alert.return { border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); background:var(--accent-tint); }
.cash-alert.return > span:first-child { background:var(--accent); }
.cash-alert.return small,.cash-alert.return b { color:var(--accent); }
.order-notice { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); }
.order-notice > div,.order-notice:not(:has(>div)) { color:var(--text); }
.order-notice b,.order-notice span { display:block; }
.order-notice b { font-size:12px; }
.order-notice span { margin-top:2px; color:var(--muted); font-size:10px; }
.order-notice.ready { border-color:color-mix(in srgb,var(--success) 24%,var(--line)); background:var(--success-tint); }
.order-notice.wait,.order-notice.shift-off { border-color:color-mix(in srgb,var(--warn) 24%,var(--line)); background:var(--warn-tint); }
/* Пункт Б: запрет — это собственный тон. «Расхождение записано, ход у оператора»
   не жёлтое ожидание и точно не зелёная готовность. */
.order-notice.blocked { border-color:color-mix(in srgb,var(--danger) 26%,var(--line)); background:var(--danger-tint); }
/* Пункт А: состояний передач в поездке столько же, сколько магазинов, поэтому
   уведомление становится списком строк, а не одной. Строки читаются как текст —
   выравнивание по верху, иначе на 390px они болтаются по центру блока. */
.handoff-notice { align-items:flex-start; }
.handoff-notice span { margin-top:4px; font-size:11px; line-height:1.45; }
.order-notice.proof-accepted { border-left:3px solid var(--success); }
.order-notice .proof-accepted-state { flex:0 0 auto; margin:0; padding:4px 9px; border:1px solid color-mix(in srgb,var(--success) 25%,transparent); border-radius:999px; background:var(--panel); color:var(--success); font-size:11px; font-weight:750; white-space:nowrap; }
.order-more summary { justify-content:space-between; gap:10px; }
.order-more summary > span { display:grid; place-items:center; transition:transform .18s; }
.order-more[open] summary > span { transform:rotate(90deg); }
.order-more-body { display:grid; gap:14px; padding-top:4px; }
.order-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.order-detail-grid > div { display:grid; gap:3px; min-width:0; padding:11px; border-radius:10px; background:var(--panel2); }
.order-detail-grid small { color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.order-detail-grid b,.order-detail-grid span { overflow-wrap:anywhere; font-size:11px; }
/* «Что везём»: состав заказа с фото — курьер должен узнать товар глазами. */
.goods-cell { grid-column:1/-1; }
/* Пункт В: состав вынесен НА ЛИЦО карточки. Внутри «Детали и дополнительные
   действия» его не видел никто: экран, на котором курьер сверяет конфигурацию,
   не может прятать конфигурацию под раскрывашку. Оформление — то же, что у
   соседних блоков карточки (.order-facts), нового языка не заводим. */
.order-goods { display:grid; gap:4px; padding:11px 12px; border-radius:10px; background:var(--panel2); }
.order-goods > small { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.order-goods .muted { font-size:10px; }
.goods-list { display:grid; gap:6px; margin:2px 0 0; padding:0; list-style:none; }
.goods-item { display:flex; gap:8px; align-items:center; min-width:0; font-size:11px; font-weight:650; overflow-wrap:anywhere; }
.goods-photo { flex:0 0 auto; width:38px; height:38px; border-radius:8px; object-fit:cover; background:var(--panel2); }
.goods-photo-empty { display:inline-block; border:1px dashed var(--line); background:transparent; }
.manifest-line { display:grid; gap:4px; }
.manifest-line .goods-line { display:flex; gap:8px; align-items:center; min-width:0; }
.manifest-line .goods-meta { color:var(--muted); font-size:10px; font-weight:650; }
/* П8: у сверки ТРИ кнопки («Отмена» + два исхода), а .modal-row рассчитан на две и
   не переносит — на снимке 1280px «Отмена» уезжала за край и обрезалась, на 390px
   уехали бы и исходы. Перенос обязателен: кнопка, до которой нельзя дотянуться,
   это отсутствующая кнопка. */
.manifest-actions { flex-wrap:wrap; }
/* П8: выбор причины расхождения — строка-радиокнопка, палец попадает по всей строке. */
.reason-line { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:12px; font-weight:650; }
.reason-line:has(input:checked) { border-color:var(--danger); }
/* Пункт А/Б: экран исхода передачи — «забрал здесь, дальше туда-то». Те же
   плитки, что в карточке заказа, ничего нового. */
.handoff-goods { margin:2px 0 10px; }
.handoff-progress { margin:0 0 10px; color:var(--muted); font-size:12px; }
.handoff-next { display:grid; gap:3px; margin:0 0 4px; padding:11px 12px; border-radius:10px; background:var(--panel2); }
.handoff-next small { color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.handoff-next b { font-size:13px; }
.handoff-next span { color:var(--muted); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.order-primary { display:flex; justify-content:flex-end; }
.empty-state.compact { min-height:160px; padding:24px 18px; }

.support-page,.analytics-page,.leaderboard-page { display:grid; gap:16px; }
.support-grid { grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); }
.support-tips { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.support-tips li { display:flex; gap:8px; color:var(--text-soft); font-size:12px; }
.support-tips li::before { content:"✓"; color:var(--success); font-weight:850; }
.form-actions { display:flex; justify-content:flex-end; padding-top:4px; }
.earnings-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px;
  align-items:center;
  min-height:240px;
  padding:30px;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#10244d,#064cea);
  color:#fff;
  box-shadow:0 22px 54px rgba(6,42,121,.2);
}
.earnings-hero::after { content:""; position:absolute; right:-70px; bottom:-130px; width:310px; height:310px; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 48px rgba(255,255,255,.04); }
.earnings-hero > * { position:relative; z-index:1; }
.earnings-hero > div { display:grid; gap:7px; }
.earnings-hero small { color:#cbd7eb; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.earnings-hero strong { color:#fff; font-size:clamp(42px,5vw,64px); line-height:1; letter-spacing:-.05em; }
.earnings-hero p { margin:0; color:#d5e0f0; }
.earnings-mascot { width:160px; height:160px; }
.analytics-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.analytics-note { display:flex; align-items:flex-start; gap:12px; }
.analytics-note > span { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:var(--accent-tint); color:var(--accent); }
.analytics-note h2,.analytics-note p { margin:0; }
.analytics-note h2 { font-size:16px; }
.analytics-note p { margin-top:4px; color:var(--muted); font-size:12px; }

@media (max-width:980px) {
  .role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .role-panel:last-child { grid-column:1/-1; }
  .ecosystem-strip { grid-template-columns:120px minmax(0,1fr); }
  .ecosystem-strip > .btn { grid-column:1/-1; justify-self:start; }
  .cockpit-hero { grid-template-columns:minmax(0,1fr) auto; }
  .cockpit-mascot { display:none; }
  .cockpit-grid { grid-template-columns:1fr; }
  .readiness-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .readiness-head { grid-column:1/-1; }
}

@media (max-width:720px) {
  #nav { flex:initial; }
  #nav a { display:grid; justify-items:center; align-content:center; gap:4px; }
  #nav a .nav-icon { width:20px; height:20px; }
  .public-header .brand-copy strong { font-size:16px; }
  .hero-lead { font-size:16px; }
  .hero-proof { display:grid; grid-template-columns:1fr; }
  .route-status { min-height:44px; padding:6px 8px; }
  .route-status-live { left:4%; bottom:5%; }
  .route-status-eta { top:5%; right:4%; }
  .route-status b { font-size:9px; }
  .route-status-eta > .ui-icon { width:28px; height:28px; }
  .section-heading { margin-bottom:24px; }
  .section-heading h2 { font-size:30px; }
  .process-steps { grid-template-columns:1fr; }
  .role-grid { grid-template-columns:1fr; }
  .role-panel:last-child { grid-column:auto; }
  .ecosystem-strip { grid-template-columns:1fr; margin:18px 14px 58px; text-align:center; }
  .ecosystem-strip > div:nth-child(2) { text-align:center; }
  .ecosystem-strip > .btn { grid-column:auto; justify-self:stretch; }
  .ecosystem-mascot { width:110px; height:110px; }
  .auth-shell { min-height:calc(100svh - 64px); }
  .auth-showcase { display:none; }
  .auth-panel { min-height:calc(100svh - 64px); padding-top:28px; }
  .auth-panel .auth-brand { display:none; }
  .auth-form-grid,.profile-form { grid-template-columns:1fr; }
  .field-wide { grid-column:auto; }
  .cockpit-hero { grid-template-columns:1fr; gap:18px; }
  .shift-state { grid-template-columns:auto minmax(0,1fr); }
  .cockpit-action { justify-items:stretch; min-width:0; }
  .cockpit-action > small { text-align:center; }
  .metric-strip,.analytics-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-item:nth-child(odd) { border-left:0; }
  .metric-item:nth-child(n+3) { border-top:1px solid var(--line); }
  .cockpit-grid { grid-template-columns:1fr; }
  .readiness-grid { grid-template-columns:1fr; }
  .readiness-head { grid-column:auto; }
  .active-order-head,.active-order-foot { align-items:flex-start; flex-direction:column; }
  .active-order-foot .btn { width:100%; }
  .settings-card-wide { grid-column:auto; }
  .order-detail-grid { grid-template-columns:1fr; }
  .order-notice { align-items:flex-start; flex-direction:column; }
  .order-notice .btn { width:100%; }
  .support-grid { grid-template-columns:1fr; }
  .form-actions .btn { width:100%; }
  .earnings-hero { grid-template-columns:minmax(0,1fr) 100px; min-height:190px; padding:22px; }
  .earnings-mascot { width:100px; height:100px; }
  .earnings-hero strong { font-size:38px; }
}

@media (max-width:390px) {
  .public-header .brand-copy small { display:none; }
  .public-header .brand-mascot { width:34px; height:34px; }
  .route-status-eta { display:none; }
  .auth-showcase { padding-top:18px; }
  .auth-visual { min-height:102px; }
  .auth-mascot { width:96px; height:96px; }
  .auth-point { width:30px; height:30px; top:calc(52% - 15px); }
  .metric-strip,.analytics-metrics { grid-template-columns:1fr; }
  .metric-item + .metric-item { border-left:0; border-top:1px solid var(--line); }
  .earnings-hero { grid-template-columns:1fr; }
  .earnings-mascot { position:absolute; right:8px; bottom:2px; opacity:.36; }
}

@media (prefers-reduced-motion: reduce) {
  .route-path .route-line,.auth-mascot { animation:none !important; }
}

/* ── Merchant operations-first cockpit ─────────────────────────────────── */
.merchant-cockpit,.merchant-order-page,.merchant-orders-page {
  display:grid;
  gap:18px;
}
.merchant-page-head { margin-bottom:0; }
.merchant-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(210px,.45fr) 180px;
  align-items:center;
  gap:26px;
  min-height:290px;
  padding:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  background:radial-gradient(440px 260px at 91% 5%,rgba(124,164,255,.33),transparent 72%),
    linear-gradient(135deg,#10244d,#064cea);
  color:#fff;
  box-shadow:0 24px 60px rgba(6,42,121,.22);
}
.merchant-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  right:-82px;
  bottom:-142px;
  width:340px;
  height:340px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 52px rgba(255,255,255,.04),0 0 0 104px rgba(255,255,255,.025);
}
.merchant-hero-copy { display:grid; justify-items:start; gap:13px; }
.merchant-hero-copy > * { margin:0; }
.merchant-hero-copy .eyebrow { color:#a9c1ff; }
.merchant-hero-copy h2 {
  max-width:14ch;
  color:#fff;
  font-family:"Onest",var(--font);
  font-size:clamp(32px,3.2vw,48px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.045em;
}
.merchant-hero-copy > p:not(.eyebrow) { max-width:54ch; color:#d4e0f2; }
.merchant-hero-copy .btnrow { margin-top:5px; }
.merchant-hero-copy .btn.ghost { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; }
.merchant-hero-copy .btn.ghost:hover { border-color:#fff; background:var(--panel); color:var(--text); }
.merchant-hero-state {
  display:grid;
  align-content:center;
  justify-items:start;
  min-height:180px;
  padding:20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.merchant-hero-state > small { color:#cbd8ed; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.merchant-hero-state > strong { margin:5px 0 0; color:#fff; font-size:54px; line-height:1; letter-spacing:-.05em; }
.merchant-hero-state > span { color:#d4e0f2; font-size:11px; }
.merchant-hero-debt { margin-top:15px; padding:7px 10px; border-radius:9px; font-size:10px; font-weight:800; }
.merchant-hero-debt.ok { background:rgba(94,215,183,.16); color:#8de8cf; }
.merchant-hero-debt.warn { background:rgba(255,202,118,.16); color:#ffd38e; }
.merchant-hero-mascot { position:relative; z-index:1; width:174px; height:174px; }
.merchant-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.merchant-operation-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,.62fr);
  align-items:start;
  gap:16px;
}
.merchant-focus { display:grid; gap:12px; min-width:0; }
.merchant-focus > .order-section-head { min-height:52px; }
.merchant-focus > .order-section-head > a { font-size:12px; font-weight:750; text-decoration:none; }
.merchant-focus .merchant-order-card { margin:0; }
.merchant-order-card.compact .order-route { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.merchant-order-card.compact .route-stop { min-height:50px; }
.merchant-readiness {
  display:grid;
  align-content:start;
  gap:9px;
  margin:0;
  padding:18px;
}
.merchant-readiness .settings-card-head { margin-bottom:4px; }
.merchant-readiness .readiness-item { min-height:70px; }
.merchant-readiness .readiness-item.ok { border-color:color-mix(in srgb,var(--success) 22%,var(--line)); background:var(--success-tint); }
.merchant-readiness .readiness-item.warn { border-color:color-mix(in srgb,var(--warn) 24%,var(--line)); background:var(--warn-tint); }
.merchant-readiness .readiness-item > .btn { width:auto; min-width:74px; min-height:38px; }
.merchant-settings {
  scroll-margin-top:86px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-xs);
}
.merchant-settings > summary {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:14px 18px;
  border-radius:inherit;
  cursor:pointer;
  list-style:none;
}
.merchant-settings > summary::-webkit-details-marker { display:none; }
.merchant-settings > summary:hover { background:var(--panel2); }
.merchant-settings > summary > span:nth-child(2) { display:grid; gap:2px; }
.merchant-settings > summary b { color:var(--text); font-size:14px; }
.merchant-settings > summary small { color:var(--muted); font-size:11px; }
.merchant-settings-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--accent-tint); color:var(--accent); }
.merchant-settings-chevron { color:var(--muted); transition:transform .18s var(--ease); }
.merchant-settings[open] .merchant-settings-chevron { transform:rotate(90deg); }
.merchant-settings[open] > summary { border-bottom:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; }
.merchant-settings-grid { padding:16px; }

.merchant-order-form { display:grid; gap:14px; }
.merchant-order-mobile-action { display:none; }
.merchant-order-page .merchant-route-card { margin:0; }
.merchant-order-page .ordgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.merchant-order-page .ordgrid > .card { min-width:0; }
.section-heading-inline { display:flex; align-items:center; gap:9px; }
.section-heading-inline > span { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--accent-tint); color:var(--accent); }
.section-heading-inline .ui-icon { width:17px; height:17px; }
.merchant-orders-page > .orders-head { margin-bottom:0; }
.merchant-orders-list {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));
  align-items:start;
}
.merchant-orders-list .merchant-order-card { height:100%; }

/* Activity is dense by nature, but its controls stay touchable and the count
   moves away from the date on narrow seven-column calendars. */
.actcal-head .btn {
  min-width:44px;
  min-height:44px;
  padding:9px 12px;
}
.actcal-head [data-actnav] { width:44px; padding:0; font-size:19px; }

/* ── Desktop admin navigation: explicit, keyboard-friendly mega menu ────── */
@media (min-width:721px) {
  #topbar[data-role="admin"] { overflow:visible; }
  #topbar[data-role="admin"] > .spacer { flex:1 1 auto; }
  #topbar[data-role="admin"] .nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    min-width:126px;
    padding:0 14px;
    border-color:var(--line-strong);
    font-weight:750;
  }
  #topbar[data-role="admin"] .nav-toggle:hover,
  #topbar[data-role="admin"].nav-open .nav-toggle {
    border-color:var(--accent);
    background:var(--accent-tint);
    color:var(--accent);
  }
  #topbar[data-role="admin"] .nav-toggle-label { font-size:12px; }
  #topbar[data-role="admin"] #nav {
    position:absolute;
    z-index:120;
    top:calc(100% + 8px);
    left:50%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    width:min(980px,calc(100vw - 40px));
    max-height:calc(100svh - 96px);
    padding:12px;
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--panel);
    box-shadow:var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,-8px);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;
  }
  #topbar[data-role="admin"].nav-open #nav {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
    transition-delay:0s;
  }
  #topbar[data-role="admin"] #nav a {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:9px;
    min-width:0;
    min-height:52px;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:10px;
    white-space:normal;
  }
  #topbar[data-role="admin"] #nav a .nav-icon {
    width:32px;
    height:32px;
    padding:7px;
    border-radius:9px;
    background:var(--panel2);
    color:var(--muted);
  }
  #topbar[data-role="admin"] #nav a span {
    min-width:0;
    overflow-wrap:anywhere;
    font-size:12px;
    line-height:1.25;
  }
  #topbar[data-role="admin"] #nav a:hover { border-color:var(--line); background:var(--panel2); }
  #topbar[data-role="admin"] #nav a.active { border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); background:var(--accent-tint); }
  #topbar[data-role="admin"] #nav a.active .nav-icon { background:var(--panel); color:var(--accent); }
}

@media (max-width:980px) {
  .merchant-hero { grid-template-columns:minmax(0,1fr) minmax(190px,.45fr); }
  .merchant-hero-mascot { display:none; }
  .merchant-operation-grid { grid-template-columns:1fr; }
  .merchant-readiness { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .merchant-readiness > .settings-card-head { grid-column:1/-1; }
  .merchant-readiness .readiness-item { height:100%; }
  .merchant-order-page .ordgrid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .merchant-cockpit,.merchant-order-page,.merchant-orders-page { gap:14px; }
  .merchant-page-head .actions { display:none; }
  .merchant-hero {
    grid-template-columns:1fr;
    gap:18px;
    min-height:0;
    padding:22px;
  }
  .merchant-hero-copy h2 { max-width:15ch; font-size:34px; }
  .merchant-hero-copy .btnrow { display:grid; width:100%; }
  .merchant-hero-copy .btn { width:100%; }
  .merchant-hero-state { min-height:0; padding:15px; }
  .merchant-hero-state > strong { font-size:42px; }
  .merchant-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .merchant-operation-grid { grid-template-columns:1fr; }
  .merchant-order-card.compact .order-route { grid-template-columns:1fr; }
  .merchant-readiness { grid-template-columns:1fr; }
  .merchant-readiness > .settings-card-head { grid-column:auto; }
  .merchant-settings > summary { min-height:68px; padding:12px 14px; }
  .merchant-settings-grid { padding:12px; }
  .merchant-order-page { padding-bottom:78px; }
  .merchant-order-mobile-action {
    position:fixed;
    z-index:94;
    right:12px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    left:12px;
    display:inline-flex;
    width:calc(100vw - 24px);
    min-height:52px;
    box-shadow:0 14px 36px rgba(6,76,234,.32),0 0 0 5px color-mix(in srgb,var(--panel) 92%,transparent);
  }
  .merchant-orders-page .orders-head .actions { width:100%; }
  .merchant-orders-page .orders-head .actions .btn { width:100%; }
  .merchant-orders-list { grid-template-columns:1fr; }
  .actcal-total { top:auto; right:4px; bottom:4px; }
  .actcal-day .actcal-dots { display:none; }
}

@media (max-width:340px) {
  .merchant-order-page .itemrow {
    grid-template-columns:minmax(0,1fr) 44px;
    gap:8px;
  }
  .merchant-order-page .itemrow .it-desc { grid-column:1/-1; }
  .merchant-order-page .itemrow .it-val { grid-column:1; min-width:0; }
  .merchant-order-page .itemrow .it-del { grid-column:2; width:44px; min-width:44px; min-height:44px; padding:0; }
  .merchant-hero-copy h2 { font-size:31px; }
}

@media (prefers-reduced-motion: reduce) {
  .merchant-settings-chevron,
  #topbar[data-role="admin"] #nav { transition:none !important; }
}

/* ── Courier payout lifecycle ─────────────────────────────────────────── */
.payout-metric[data-state="awaiting"] > span { background:var(--warn-tint); color:var(--warn); }
.payout-metric[data-state="pending"] > span { background:var(--accent-tint); color:var(--accent); }
.payout-metric[data-state="paid"] > span { background:var(--success-tint); color:var(--success); }
.payout-metric[data-state="blocked"] > span { background:var(--danger-tint); color:var(--danger); }
.earnings-breakdown { display:grid; gap:16px; }
.earnings-list { display:grid; gap:8px; }
.earning-row {
  position:relative;
  display:grid;
  grid-template-columns:minmax(170px,.8fr) minmax(170px,.65fr) minmax(240px,1.2fr);
  align-items:center;
  gap:16px;
  min-width:0;
  padding:15px 16px 15px 19px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
}
.earning-row::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent); }
.earning-row[data-state="awaiting"]::before { background:var(--warn); }
.earning-row[data-state="pending"]::before { background:var(--accent); }
.earning-row[data-state="paid"]::before { background:var(--success); }
.earning-row[data-state="blocked"]::before { background:var(--danger); }
.earning-order { display:grid; gap:3px; min-width:0; color:var(--text); text-decoration:none; }
.earning-order:hover b { color:var(--accent); }
.earning-order small,.earning-amount small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.earning-order b { overflow-wrap:anywhere; font-size:14px; transition:color .16s var(--ease); }
.earning-order time { color:var(--muted); font-size:10px; }
.earning-amount { display:grid; justify-items:start; gap:3px; min-width:0; }
.earning-amount strong { color:var(--text); font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.earning-amount > span { color:var(--success); font-size:10px; font-weight:700; }
.earning-state { display:grid; justify-items:start; gap:6px; min-width:0; }
.earning-state-pill { display:inline-flex; align-items:center; min-height:25px; padding:4px 8px; border:1px solid transparent; border-radius:999px; font-size:10px; font-weight:800; }
.earning-state p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.earning-row[data-state="awaiting"] .earning-state-pill { border-color:color-mix(in srgb,var(--warn) 24%,transparent); background:var(--warn-tint); color:var(--warn); }
.earning-row[data-state="pending"] .earning-state-pill { border-color:color-mix(in srgb,var(--accent) 22%,transparent); background:var(--accent-tint); color:var(--accent); }
.earning-row[data-state="paid"] .earning-state-pill { border-color:color-mix(in srgb,var(--success) 24%,transparent); background:var(--success-tint); color:var(--success); }
.earning-row[data-state="blocked"] .earning-state-pill { border-color:color-mix(in srgb,var(--danger) 24%,transparent); background:var(--danger-tint); color:var(--danger); }
.earnings-breakdown > .empty-state { min-height:250px; }

@media (max-width:720px) {
  .earning-row { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; padding:14px 14px 14px 17px; }
  .earning-amount { justify-items:end; text-align:right; }
  .earning-state { grid-column:1/-1; padding-top:11px; border-top:1px solid var(--line); }
  .earnings-breakdown > .empty-state { min-height:220px; }
}

@media (max-width:390px) {
  .earning-row { grid-template-columns:1fr; }
  .earning-amount { justify-items:start; text-align:left; }
  .earning-state { grid-column:auto; }
}

/* ── Authoritative account status gate ───────────────────────────────── */
.account-status-card { position:relative; }
.account-status-card .status-orbit {
  position:absolute;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid color-mix(in srgb,var(--warn) 24%,var(--line));
  border-radius:50%;
  background:var(--warn-tint);
  color:var(--warn);
}
.account-status-card.blocked .status-orbit {
  border-color:color-mix(in srgb,var(--danger) 24%,var(--line));
  background:var(--danger-tint);
  color:var(--danger);
}
.account-status-card .status-orbit svg { width:19px; height:19px; }
.account-status-actions { display:grid; width:100%; gap:10px; margin-top:4px; }
.account-status-actions .btn { width:100%; }
.account-status-actions .account-logout { justify-self:center; min-height:44px; padding:8px 14px; color:var(--muted); }
.account-status-card .form-alert { width:100%; text-align:left; }
.status-check-main {
  display:grid;
  place-items:center;
  min-height:calc(100svh - 90px);
  padding:clamp(20px,5vw,64px);
}
.status-check-main .empty-state { width:min(720px,100%); min-height:330px; }
.status-check-main .empty-state h1 { margin:4px 0 8px; font-size:clamp(28px,4vw,46px); letter-spacing:-.04em; }

.quote-location-review {
  display:grid;
  gap:12px;
  margin-top:16px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));
  border-radius:12px;
  background:var(--warn-tint);
}
.quote-location-review-head { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; align-items:start; }
.quote-location-review-head > svg { width:36px; height:36px; padding:8px; border-radius:10px; background:var(--panel); color:var(--warn); }
.quote-location-review-head b,.quote-location-review-head p { display:block; margin:0; }
.quote-location-review-head p { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.5; }
.quote-location-confirm {
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--warn) 22%,var(--line));
  border-radius:10px;
  background:var(--panel);
  cursor:pointer;
  font-size:12px;
  font-weight:750;
  line-height:1.4;
}
.quote-location-confirm input { flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:var(--accent); }

@media (max-width:720px) {
  .account-status-card .status-orbit { top:12px; right:12px; width:38px; height:38px; }
  .status-check-main { min-height:calc(100svh - 72px); padding:16px; }
  .status-check-main .empty-state { min-height:0; }
}

/* ── B2B-first public wow layer + courier onboarding wizard ───────────── */
.role-grid.role-grid-business { grid-template-columns:repeat(2,minmax(0,1fr)); }
.role-grid.role-grid-business .role-panel:last-child { grid-column:auto; }
.role-grid-business .role-panel::before {
  content:"";
  position:absolute;
  z-index:1;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--accent),#6d8fff,var(--accent2));
}
.role-grid-business .role-business {
  background:radial-gradient(320px 180px at 100% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%),
    var(--panel);
}
.role-grid-business .role-courier {
  background:radial-gradient(320px 180px at 100% 0,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 72%),
    var(--panel);
}
.landing-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:36%;
  bottom:-25%;
  width:min(42vw,620px);
  aspect-ratio:1;
  border-radius:37% 63% 61% 39%/42% 35% 65% 58%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent));
  filter:blur(2px);
  animation:delivery-blob 14s ease-in-out infinite alternate;
}
.hero-stage::before,.hero-stage::after {
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero-stage::before {
  inset:4% 2% auto auto;
  width:88px;
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  box-shadow:inset 0 0 0 15px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 22px color-mix(in srgb,var(--accent) 3%,transparent);
  animation:delivery-orbit 10s linear infinite;
}
.hero-stage::after {
  left:0;
  bottom:5%;
  width:52px;
  aspect-ratio:1;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 30%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));
  animation:delivery-float 6s ease-in-out infinite;
}
.hero-stage .route-stage { z-index:1; }

.courier-onboarding-intro {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  align-items:center;
  gap:18px;
  margin:0 0 22px;
  padding:22px 20px 22px 24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:radial-gradient(260px 170px at 98% 2%,rgba(112,154,255,.34),transparent 74%),
    radial-gradient(240px 180px at 8% 110%,rgba(61,213,187,.18),transparent 72%),
    linear-gradient(135deg,#10244d 0%,#0a3caa 62%,#075be8 100%);
  color:#fff;
  box-shadow:0 18px 44px rgba(6,42,121,.19);
}
.courier-onboarding-intro::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.18;
  background:linear-gradient(90deg,rgba(var(--panel-rgb), .22) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(var(--panel-rgb), .22) 1px,transparent 1px) 0 0/34px 34px;
  -webkit-mask-image:linear-gradient(100deg,transparent 0,#000 68%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0,#000 68%,#000 100%);
}
.courier-onboarding-intro::after {
  content:"";
  position:absolute;
  z-index:-1;
  right:-75px;
  bottom:-120px;
  width:250px;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.025);
}
.onboarding-intro-copy { position:relative; z-index:2; display:grid; gap:8px; min-width:0; }
.onboarding-intro-copy h2 { max-width:19ch; margin:0; color:#fff; font-size:22px; line-height:1.1; letter-spacing:-.025em; }
.onboarding-intro-copy > p { max-width:48ch; margin:0; color:#d5e2f6; font-size:12px; line-height:1.5; }
.onboarding-badge {
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.onboarding-prereqs { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.onboarding-prereqs > span {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.075);
  color:#edf4ff;
  font-size:9px;
  font-weight:700;
}
.onboarding-prereqs .ui-icon { width:13px; height:13px; color:#8ce3d0; }
.onboarding-visual { position:relative; display:grid; place-items:center; width:132px; height:132px; }
.onboarding-mascot { position:relative; z-index:3; width:112px; height:112px; animation:onboarding-float 5s ease-in-out infinite; }
.onboarding-orbit {
  position:absolute;
  z-index:1;
  inset:8px;
  border:1px dashed rgba(255,255,255,.34);
  border-radius:50%;
  animation:onboarding-orbit 18s linear infinite;
}
.onboarding-orbit::before,.onboarding-orbit::after {
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#7de2ca;
  box-shadow:0 0 0 5px rgba(125,226,202,.13);
}
.onboarding-orbit::before { top:8px; left:19px; }
.onboarding-orbit::after { right:10px; bottom:18px; background:#a9c1ff; box-shadow:0 0 0 5px rgba(169,193,255,.13); }

.onboarding-form { gap:18px; }
.onboarding-progress {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(24px,.38fr) minmax(0,1fr) minmax(24px,.38fr) minmax(0,1fr);
  align-items:center;
  gap:7px;
  margin:0;
}
.onboarding-progress > button {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:0 8px;
  min-width:0;
  min-height:52px;
  padding:7px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.onboarding-progress > button:not(:disabled):hover { border-color:var(--line); background:var(--panel2); transform:translateY(-1px); }
.onboarding-progress > button:disabled { cursor:default; opacity:.58; }
.onboarding-progress > button > span {
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line-strong);
  border-radius:11px;
  background:var(--panel2);
  color:var(--muted);
  font-size:11px;
  font-weight:850;
}
.onboarding-progress > button b { min-width:0; overflow:hidden; color:var(--text); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.onboarding-progress > button small { min-width:0; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.onboarding-progress > button[aria-current="step"] { border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); background:var(--accent-tint); }
.onboarding-progress > button[aria-current="step"] > span { border-color:transparent; background:linear-gradient(145deg,var(--accent),#638eff); color:#fff; box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 28%,transparent); }
.onboarding-progress > button.done > span { border-color:color-mix(in srgb,var(--success) 25%,var(--line)); background:var(--success-tint); color:var(--success); }
.onboarding-progress > i { display:block; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--accent) 34%,var(--line)),var(--line)); }
.onboarding-step-status {
  margin:-5px 0 0;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  text-align:center;
}
.wizard-step { animation:wizard-in .28s var(--ease) both; }
.wizard-step > legend:focus { outline:2px solid var(--accent); outline-offset:5px; border-radius:4px; }
.wizard-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:4px; }
.wizard-actions .draft-note { display:inline-flex; align-items:center; gap:6px; margin-right:auto; color:var(--muted); font-size:9px; font-weight:700; }
.wizard-actions .draft-note .ui-icon { width:14px; height:14px; color:var(--success); }
.passport-field { position:relative; }
.passport-drop > input[type="file"] {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:.01;
}
.passport-drop {
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 22px;
  align-items:center;
  gap:12px;
  min-height:86px;
  margin:0;
  padding:14px;
  border:1.5px dashed color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent-tint),color-mix(in srgb,var(--panel) 85%,var(--accent-tint)));
  color:var(--text);
  cursor:pointer;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.passport-drop:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 13%,transparent); }
.passport-drop:focus-within,.passport-drop:focus-visible { outline:3px solid var(--accent-tint); outline-offset:2px; border-color:var(--accent); }
.passport-drop > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.passport-drop b { font-size:12px; }
.passport-drop small { color:var(--muted); font-size:9px; line-height:1.4; }
.passport-drop > .ui-icon { width:18px; height:18px; color:var(--accent); }
.passport-drop-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--panel); color:var(--accent); box-shadow:var(--shadow-xs); }
.passport-drop-icon .ui-icon { width:20px; height:20px; }
.passport-state {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  margin-top:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  color:var(--muted);
  font-size:10px;
}
.passport-state > span:first-child { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:8px; background:var(--panel); }
.passport-state .ui-icon { width:14px; height:14px; }
.passport-state > span:last-child { display:grid; min-width:0; }
.passport-state b { overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; }
.passport-state small { color:var(--muted); font-size:9px; }
.passport-state.ready { border-color:color-mix(in srgb,var(--success) 25%,var(--line)); background:var(--success-tint); color:var(--success); }
.passport-state.invalid { border-color:color-mix(in srgb,var(--danger) 28%,var(--line)); background:var(--danger-tint); color:var(--danger); }
.password-meter { height:5px; margin-top:7px; overflow:hidden; border-radius:99px; background:var(--panel3); }
.password-meter > i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--danger),var(--warn),var(--success)); transition:width .25s var(--ease); }
.field-ok { margin-top:5px; color:var(--success); font-size:10px; font-weight:750; }
.field-error { margin-top:5px; color:var(--danger); font-size:10px; font-weight:750; }
.onboarding-next {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:start;
  gap:11px;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--accent2) 25%,var(--line));
  border-radius:12px;
  background:var(--trust-tint);
}
.onboarding-next > span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--panel); color:var(--accent2); }
.onboarding-next > span .ui-icon { width:18px; height:18px; }
.onboarding-next b,.onboarding-next p { margin:0; }
.onboarding-next b { color:var(--text); font-size:12px; }
.onboarding-next p { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.45; }

html[data-theme="dark"] .courier-onboarding-intro { box-shadow:0 20px 50px rgba(0,0,0,.34); }
html[data-theme="dark"] .passport-drop { background:linear-gradient(135deg,var(--accent-tint),var(--panel2)); }

.kvs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kv { min-width:0; }
.kv .k { flex:0 1 38%; min-width:0; }
.kv .v { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.kvs > .kv-wide { grid-column:1/-1; }
.kv-tracking { align-items:center; gap:18px; }
.kv-tracking .v { display:flex; justify-content:flex-end; }

.tracking-share {
  display:grid;
  grid-template-columns:38px minmax(170px,1fr) auto auto;
  align-items:center;
  gap:9px;
  width:min(100%,620px);
  padding:10px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:13px;
  background:linear-gradient(135deg,var(--accent-tint),color-mix(in srgb,var(--panel) 92%,var(--accent-tint)));
  text-align:left;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent);
}
.tracking-share-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--panel); color:var(--accent); box-shadow:var(--shadow-xs); }
.tracking-share-icon .ui-icon { width:19px; height:19px; }
.tracking-share > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.tracking-share b { color:var(--text); font-size:11px; }
.tracking-share small { color:var(--muted); font-size:9px; line-height:1.35; }
.tracking-share .btn { min-height:32px; padding:7px 10px; white-space:nowrap; }

@keyframes delivery-blob {
  0% { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  100% { transform:translate3d(34px,-24px,0) rotate(18deg) scale(1.08); }
}
@keyframes delivery-orbit { to { transform:rotate(360deg); } }
@keyframes delivery-float { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-13px) rotate(6deg); } }
@keyframes onboarding-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes onboarding-orbit { to { transform:rotate(360deg); } }
@keyframes wizard-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:720px) {
  #topbar[data-role="courier"] #nav,
  #topbar[data-role="merchant"] #nav { overflow-x:visible; }
  #topbar[data-role="courier"] #nav a,
  #topbar[data-role="merchant"] #nav a { flex:1 1 0; min-width:0; padding-inline:3px; }
  #topbar[data-role="admin"] { overflow:visible; }
  #topbar[data-role="admin"] .nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
  }
  #topbar[data-role="admin"] .nav-toggle-label { display:none; }
  #topbar[data-role="admin"] #nav {
    position:fixed;
    z-index:120;
    top:70px;
    right:max(12px,env(safe-area-inset-right));
    bottom:auto;
    left:max(12px,env(safe-area-inset-left));
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    width:auto;
    max-height:calc(100svh - 86px - env(safe-area-inset-bottom));
    padding:10px;
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--panel);
    box-shadow:var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;
  }
  #topbar[data-role="admin"].nav-open #nav {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
  }
  #topbar[data-role="admin"] #nav a {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    justify-items:start;
    align-content:center;
    gap:7px;
    min-width:0;
    min-height:48px;
    padding:7px 8px;
    text-align:left;
  }
  #topbar[data-role="admin"] #nav a .nav-icon { width:28px; height:28px; padding:5px; }
  #topbar[data-role="admin"] #nav a span { min-width:0; overflow-wrap:anywhere; font-size:10px; }
  .kvs { grid-template-columns:1fr; }
  .kv-tracking { display:grid; grid-template-columns:1fr; align-items:start; }
  .kv-tracking .k { max-width:none; }
  .kv-tracking .v { display:block; width:100%; }
  .role-grid.role-grid-business { grid-template-columns:1fr; }
  .landing-hero::after { left:8%; bottom:-9%; width:92vw; }
  .hero-stage::before { right:0; width:64px; }
  .hero-stage::after { left:3%; bottom:1%; width:42px; }
  .courier-onboarding-intro { grid-template-columns:minmax(0,1fr) 94px; gap:10px; padding:18px; border-radius:17px; }
  .onboarding-intro-copy h2 { font-size:19px; }
  .onboarding-prereqs { display:grid; grid-template-columns:1fr; }
  .onboarding-prereqs > span:nth-child(n+3) { display:none; }
  .onboarding-visual { width:94px; height:94px; }
  .onboarding-mascot { width:82px; height:82px; }
  .onboarding-orbit { inset:4px; }
  .onboarding-progress { gap:3px; grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr); }
  .onboarding-progress > button { grid-template-columns:29px minmax(0,1fr); min-height:48px; padding:5px; gap:0 5px; }
  .onboarding-progress > button > span { width:29px; height:29px; border-radius:9px; }
  .onboarding-progress > button b { font-size:9px; }
  .onboarding-progress > button small { font-size:7px; }
  .wizard-actions { align-items:stretch; flex-wrap:wrap; }
  .wizard-actions .draft-note { flex:1 0 100%; order:3; margin:0; justify-content:center; text-align:center; }
  .wizard-actions .btn { flex:1; min-width:0; }
  .tracking-share { grid-template-columns:38px minmax(0,1fr); }
  .tracking-share .btn { width:100%; }
  .pod-shot-guide { grid-template-columns:34px minmax(0,1fr); }
  .pod-upload .modal-row { display:grid; grid-template-columns:1fr; }
  .pod-upload .modal-row .btn { width:100%; }
}

@media (max-width:390px) {
  .courier-onboarding-intro { grid-template-columns:minmax(0,1fr) 72px; padding:15px; }
  .onboarding-intro-copy h2 { font-size:17px; }
  .onboarding-intro-copy > p { font-size:10px; }
  .onboarding-prereqs { display:none; }
  .onboarding-visual { width:72px; height:72px; }
  .onboarding-mascot { width:64px; height:64px; }
  .onboarding-progress > button { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .onboarding-progress > button > span { grid-row:auto; }
  .onboarding-progress > button small { display:none; }
  .onboarding-progress > button b { max-width:100%; }
  .passport-drop { grid-template-columns:40px minmax(0,1fr); min-height:82px; padding:11px; }
  .passport-drop > .ui-icon { display:none; }
  .passport-drop-icon { width:40px; height:40px; }
  .wizard-actions { display:grid; grid-template-columns:1fr; }
  .wizard-actions .draft-note { order:3; }
}

/* Public recruitment and shared-brand footer stay compact without hiding the
   courier's route into the application wizard. */
@media (max-width:980px) {
  .landing-footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-footer-brand { grid-column:1/-1; }
}

@media (max-width:720px) {
  .public-header .brand-copy { display:none; }
  .public-actions .public-join { display:inline-flex !important; min-width:68px; padding-inline:9px; }
  .public-business-full { display:none; }
  .public-business-short { display:inline; }
  .public-courier-full { display:none; }
  .public-courier-short { display:inline; }
  .public-courier-entry { max-width:none !important; padding-inline:10px !important; }
  .public-courier-entry .ui-icon { width:17px; height:17px; }
  .public-login { width:44px; min-width:44px !important; padding:0 !important; }
  .public-login .ui-icon { display:block; width:17px; height:17px; }
  .public-login > span { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
  .public-join > .ui-icon { display:none; }
  .courier-apply-cta { min-height:62px !important; }
  .courier-hiring-rail {
    width:calc(100% - 28px);
    min-height:0;
    margin:-28px auto 28px;
    padding:19px;
    grid-template-columns:52px minmax(0,1fr);
    gap:14px;
    border-radius:20px;
  }
  .courier-hiring-signal { width:52px; height:52px; border-radius:16px; }
  .courier-hiring-signal .ui-icon { width:24px; height:24px; }
  .courier-hiring-copy { gap:7px; }
  .courier-hiring-copy h2 { font-size:20px; }
  .courier-hiring-copy > div span { font-size:9px; }
  .courier-hiring-cta { grid-column:1/-1; width:100%; }
  .landing-footer-main {
    width:calc(100% - 36px);
    padding:96px 0 30px;
    gap:28px 22px;
  }
  .landing-footer-bar > div {
    width:calc(100% - 36px);
    padding:17px 0 calc(17px + env(safe-area-inset-bottom));
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }
  .landing-footer-bar-copy { display:grid; gap:7px; }
  .landing-social-chip,.landing-footer-column .landing-footer-highlight { min-height:44px; }
}

@media (max-width:480px) {
  .landing-footer-main { grid-template-columns:1fr; }
  .landing-footer-brand { grid-column:auto; }
  .landing-footer-column { padding-top:2px; }
  .landing-footer-column + .landing-footer-column { padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
  .landing-footer-social { gap:7px; }
  .landing-social-chip { flex:1 1 calc(50% - 7px); justify-content:flex-start; }
}

@media (max-width:370px) {
  .public-courier-entry { width:44px; min-width:44px !important; padding:0 !important; }
  .public-courier-short { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
  .public-actions .public-join { min-width:66px; padding-inline:8px; }
}

@media (prefers-reduced-motion:reduce) {
  .landing-hero::after,.hero-stage::before,.hero-stage::after,.public-courier-entry::after,.courier-hiring-rail::before,
  .onboarding-mascot,.onboarding-orbit,.wizard-step,.pod-progress > i { animation:none !important; }
  .passport-drop,.onboarding-progress > button,.pod-file { transition:none !important; }
}

/* ── Canonical Delivery brand, direct cabinet navigation and safe demos ── */
:root {
  --delivery-sidebar:260px;
  --delivery-light-blue:rgba(6,76,234,.24);
  --delivery-light-mint:rgba(15,159,144,.16);
}

.brand-wordmark {
  display:block;
  width:102px;
  height:21px;
  background:currentColor;
  -webkit-mask:url("/assets/dovery-wordmark.svg") center/contain no-repeat;
  mask:url("/assets/dovery-wordmark.svg") center/contain no-repeat;
}
.public-header .brand-wordmark { width:112px; height:23px; }
.landing-footer .brand-wordmark { width:116px; height:24px; }
.brand-copy small { margin-top:4px; }
.role-panel-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:auto; }
.role-panel-actions .btn { margin-top:0; }

html:not([data-theme="dark"]) .landing-hero {
  background:
    radial-gradient(760px 450px at 86% 12%,var(--delivery-light-blue),transparent 66%),
    radial-gradient(620px 390px at 2% 94%,var(--delivery-light-mint),transparent 68%),
    linear-gradient(180deg,#f7f9ff 0%,#fff 78%);
}
html:not([data-theme="dark"]) .landing-section#how {
  background:
    radial-gradient(520px 230px at 92% 8%,rgba(6,76,234,.11),transparent 72%),
    radial-gradient(440px 220px at 8% 96%,rgba(15,159,144,.09),transparent 74%),
    #f7f9fc;
}
html:not([data-theme="dark"]) .route-stage {
  border-color:#c7d5f5;
  box-shadow:0 38px 84px rgba(6,54,158,.2),inset 0 1px 0 #fff;
}
html:not([data-theme="dark"]) .role-panel {
  border-color:#d5def0;
  box-shadow:0 16px 42px rgba(31,62,128,.09),inset 0 1px 0 #fff;
}

@media (min-width:769px) {
  body.authenticated-view { background:var(--bg); }
  body.authenticated-view #topbar {
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:var(--delivery-sidebar);
    height:100svh;
    min-height:0;
    padding:22px 16px 18px;
    overflow-x:hidden;
    overflow-y:auto;
    border:0;
    border-right:1px solid var(--line);
    background:radial-gradient(300px 240px at 4% -2%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 72%),
      color-mix(in srgb,var(--panel) 96%,transparent);
    box-shadow:8px 0 30px rgba(14,30,80,.07);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
    backdrop-filter:blur(20px) saturate(1.2);
  }
  body.authenticated-view #topbar > .brand-lockup { width:100%; min-height:48px; padding:2px 7px 13px; border-bottom:1px solid var(--line); }
  body.authenticated-view #topbar .brand-mascot { width:42px; height:42px; }
  body.authenticated-view #topbar #nav {
    display:grid;
    flex:0 0 auto;
    align-content:start;
    gap:5px;
    width:100%;
    margin-top:14px;
    overflow:visible;
  }
  /* The legacy admin mega-menu has more specific selectors above. Reset every
     popover-only property so admin receives the same permanent left rail as
     courier and merchant instead of an invisible absolute menu. */
  body.authenticated-view #topbar[data-role="admin"] .nav-toggle { display:none; }
  body.authenticated-view #topbar[data-role="admin"] #nav {
    position:static;
    inset:auto;
    grid-template-columns:1fr;
    width:100%;
    max-height:none;
    margin-top:14px;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:none;
  }
  body.authenticated-view #topbar #nav a {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:9px;
    width:100%;
    min-height:46px;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:11px;
    font-size:13px;
  }
  body.authenticated-view #topbar #nav a .nav-icon { width:18px; height:18px; margin:auto; }
  body.authenticated-view #topbar #nav a:hover { border-color:var(--line); background:var(--panel2); }
  body.authenticated-view #topbar #nav a.active {
    border-color:color-mix(in srgb,var(--accent) 23%,var(--line));
    background:linear-gradient(135deg,var(--accent-tint),color-mix(in srgb,var(--panel) 92%,var(--accent-tint)));
    box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 8%,transparent);
  }
  body.authenticated-view #topbar > .spacer { display:block; flex:1 1 auto; min-height:24px; }
  body.authenticated-view #whoami { display:block; max-width:none; padding:12px 8px 10px; border-top:1px solid var(--line); font-size:11px; line-height:1.45; white-space:normal; overflow-wrap:anywhere; }
  body.authenticated-view #themeToggle { align-self:flex-start; margin:0 0 8px 7px; }
  body.authenticated-view #logout { width:100%; min-height:42px; }
  body.authenticated-view #app {
    width:calc(100% - var(--delivery-sidebar));
    max-width:calc(var(--shell) + 48px);
    min-height:100svh;
    /* Centre the content in the space beside the fixed sidebar. The left margin
       clears the sidebar and then grows with the right (auto) margin so a wide
       viewport no longer dumps all the slack on the right (content hugging the rail). */
    margin:0 auto 0 max(var(--delivery-sidebar), calc((100% - var(--shell) - 48px) / 2));
    padding:32px 28px 52px;
  }
}

/* The cabinet demo is the real operational shell with an immutable local
   projection. The banner is the only extra chrome; page hierarchy and role
   navigation intentionally reuse courier/merchant production classes. */
body.demo-cabinet-view {
  background:radial-gradient(760px 500px at 92% 4%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%),
    var(--bg);
}
#topbar[data-demo="true"] { border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
#topbar[data-demo="true"] #whoami { color:var(--accent); font-weight:800; }
#topbar .demo-chrome-action { width:100%; min-height:42px; }
.demo-cabinet { min-width:0; }
.demo-cabinet-banner {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:13px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-tint) 82%,var(--panel)),var(--panel));
  box-shadow:var(--shadow-xs);
}
.demo-cabinet-banner-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--panel); color:var(--accent); }
.demo-cabinet-banner-icon .ui-icon { width:19px; height:19px; }
.demo-cabinet-banner > div:nth-child(2) { display:grid; min-width:0; gap:2px; }
.demo-cabinet-banner b { font-size:12px; }
.demo-cabinet-banner small { color:var(--text-soft); font-size:10px; line-height:1.45; }
.demo-cabinet-banner-actions { display:flex; align-items:center; gap:7px; }
.demo-cabinet a.readiness-item { text-decoration:none; }
.demo-fixed-form { display:grid; gap:16px; }
.demo-fixed-form .merchant-order-submit-card { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.demo-fixed-form .merchant-order-submit-card h2 { margin:0; }
.demo-field { display:grid; gap:3px; padding:12px 0; border-bottom:1px solid var(--line); }
.demo-field:last-child { border-bottom:0; }
.demo-field small { color:var(--muted); font-size:10px; }
.demo-message { display:grid; gap:5px; max-width:620px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.demo-message p,.demo-message small { margin:0; }
.demo-message p { color:var(--text-soft); }
.demo-message small { color:var(--muted); }
.registration-demo-choice {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:13px;
  background:linear-gradient(135deg,var(--accent-tint),var(--panel));
}
.registration-demo-choice > span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--panel); color:var(--accent); }
.registration-demo-choice > div { display:grid; min-width:0; gap:2px; }
.registration-demo-choice b { font-size:11px; }
.registration-demo-choice small { color:var(--muted); font-size:9px; line-height:1.45; }

@media (max-width:768px) {
  #topbar .demo-chrome-action { width:auto; min-width:88px; min-height:44px; padding-inline:10px; }
  .demo-cabinet-banner { grid-template-columns:36px minmax(0,1fr); }
  .demo-cabinet-banner-icon { width:36px; height:36px; }
  .demo-cabinet-banner-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
  .demo-cabinet-banner-actions .btn { width:100%; }
  .demo-fixed-form .merchant-order-submit-card { align-items:stretch; flex-direction:column; }
  .demo-fixed-form .merchant-order-submit-card .btn { width:100%; }
  .registration-demo-choice { grid-template-columns:36px minmax(0,1fr); }
  .registration-demo-choice > span { width:36px; height:36px; }
  .registration-demo-choice > .btn { grid-column:1/-1; width:100%; }
}

@media (max-width:390px) {
  #topbar .demo-chrome-action { order:5; width:44px; min-width:44px; padding:0; font-size:0; }
  #topbar .demo-chrome-action::before { content:"+"; font-size:20px; }
}

@media (max-width:768px) {
  body.authenticated-view #app { width:100%; max-width:none; margin:0; padding:18px 14px calc(48px + env(safe-area-inset-bottom)); }
  body.authenticated-view #topbar {
    position:sticky;
    top:0;
    z-index:110;
    display:flex;
    flex-direction:row;
    align-items:center;
    min-height:64px;
    padding:8px max(11px,env(safe-area-inset-right)) 8px max(11px,env(safe-area-inset-left));
    overflow:visible;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--panel) 97%,transparent);
    box-shadow:0 8px 28px rgba(14,30,80,.1);
  }
  body.authenticated-view #topbar > .brand-lockup { order:1; }
  body.authenticated-view #topbar .brand-copy { display:none; }
  body.authenticated-view #topbar .brand-mascot { width:40px; height:40px; }
  body.authenticated-view #topbar .nav-toggle { order:2; display:inline-flex; width:auto; min-width:44px; padding:0 10px; gap:7px; }
  body.authenticated-view #topbar .nav-toggle-label { display:inline; font-size:10px; font-weight:800; }
  body.authenticated-view #topbar > .spacer { order:3; display:block; flex:1; }
  body.authenticated-view #whoami { display:none; }
  body.authenticated-view #themeToggle { order:4; }
  body.authenticated-view #logout { order:5; width:44px; min-width:44px; height:44px; padding:0; font-size:0; }
  body.authenticated-view #logout::before { content:"↗"; font-size:17px; transform:rotate(45deg); }
  body.authenticated-view #topbar #nav,
  body.authenticated-view #topbar[data-role="admin"] #nav {
    position:fixed;
    z-index:125;
    top:72px;
    right:max(11px,env(safe-area-inset-right));
    bottom:auto;
    left:max(11px,env(safe-area-inset-left));
    order:initial;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    width:auto;
    height:auto;
    min-height:0;
    max-height:calc(100svh - 88px - env(safe-area-inset-bottom));
    padding:10px;
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--panel);
    box-shadow:var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;
  }
  body.authenticated-view #topbar.nav-open #nav {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
  }
  body.authenticated-view #topbar #nav a,
  body.authenticated-view #topbar[data-role="admin"] #nav a {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    justify-items:start;
    align-content:center;
    gap:7px;
    min-width:0;
    min-height:50px;
    padding:8px;
    border:1px solid transparent;
    border-radius:10px;
    text-align:left;
  }
  body.authenticated-view #topbar #nav a.active { border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); }
  body.authenticated-view #topbar #nav a span { min-width:0; overflow-wrap:anywhere; font-size:10px; }
}

@media (max-width:390px) {
  body.authenticated-view #topbar .nav-toggle { width:44px; padding:0; }
  body.authenticated-view #topbar .nav-toggle-label { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
}

/* Оформление заказа на карте: сайдбар скрыт, всё пространство — карте и панели точек.
   Кнопка «☰ Меню» возвращает хром; любой переход из экрана тоже возвращает (setChrome). */
body.map-immersive #topbar { display:none !important; }
/* Нижний левый угол свободен (зум справа, «Оформить» справа снизу, панель сверху не достаёт). */
.maporder-menu { position:absolute; bottom:12px; left:396px; z-index:33; }
@media (max-width:900px) { .maporder-menu { left:auto; right:12px; bottom:56px; } }
.maporder-menu-hide { position:fixed; top:12px; right:12px; z-index:95; }