/* Delivery calculator — styles follow the Conifer Collection style guide (Figma "Style Guide").
   Neutral surfaces, green only as an accent. Light theme: white and greys from the guide.
   Dark theme: neutral, Linear-like. Spacing on a 4/8 px grid. */

/* ---------- tokens ---------- */
:root{
  /* brand */
  --primary-1:#5fb872;
  --primary-2:#3f8f5b;
  --grad:linear-gradient(90deg,#5fb872 0%,#3f8f5b 100%);
  --error:#ff4a4a;
  /* light (default of the guide) */
  --bg:#f8f9fa;
  --surface:#ffffff;
  --surface-2:#f2f3f5;
  --surface-3:#ebedf0;
  --line:#e3e6eb;
  --line-strong:#c7ced9;
  --text:#1d1d1d;
  --text-2:#28313d;
  --muted:#556070;
  --quiet:#6b7480;
  --accent:#3f8f5b;
  --accent-soft:rgba(95,184,114,.1);
  --accent-line:rgba(95,184,114,.45);
  --info:#1f64c8;
  --info-soft:#eef4fd;
  --info-line:#cddff7;
  --warning:#c2410c;
  --warning-soft:#fff4ec;
  --warning-line:#fbd5bf;
  --shadow-1:0 0 2px rgba(40,48,61,.04),0 4px 16px rgba(142,152,166,.16);
  --shadow-2:0 2px 4px rgba(40,48,61,.04),0 8px 24px rgba(142,152,166,.16);
  --shadow-3:0 2px 8px rgba(40,48,61,.04),0 16px 32px rgba(142,152,166,.16);
  --shadow-green:0 2px 4px rgba(149,219,160,.16),0 16px 16px rgba(95,184,114,.08),0 2px 8px rgba(63,143,91,.08);
  --shadow-green-2:0 2px 8px rgba(149,219,160,.16),0 16px 24px rgba(95,184,114,.16),0 2px 16px rgba(63,143,91,.08);
  --radius:12px;
  --radius-field:6px;
  --font-body:'PT Sans','Segoe UI',system-ui,sans-serif;
  --font-head:'Raleway','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* text styles from the guide (Typography → Text styles); nothing else is used */
  --t-h2:600 32px/40px var(--font-head);     /* page title */
  --t-h4:600 18px/28px var(--font-head);     /* section and block titles */
  --t-h5:600 16px/24px var(--font-head);     /* card title */
  --t-h6:600 14px/20px var(--font-head);     /* small headings */
  --t-price:700 24px/32px var(--font-head);  /* H3 Bold: the client price */
  --t-label:500 14px/16px var(--font-head);  /* UI label, button text */
  --t-nav:500 14px/20px var(--font-head);    /* navigation, chips, disclosures */
  --t-caps:500 12px/16px var(--font-head);   /* small caps labels */
  --t-body1:400 16px/24px var(--font-body);
  --t-body2:400 14px/20px var(--font-body);
  --t-body3:400 12px/18px var(--font-body);
  --t-bold2:700 14px/20px var(--font-body);
  color-scheme:light;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#08090a;
  --surface:#111214;
  --surface-2:#17181b;
  --surface-3:#1e1f23;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);
  --text:#f7f8f8;
  --text-2:#d0d6e0;
  --muted:#a3a8b0;
  --quiet:#868b94;
  --accent:#6cc47e;
  --accent-soft:rgba(95,184,114,.1);
  --accent-line:rgba(95,184,114,.4);
  --info:#8bb8f8;
  --info-soft:rgba(96,150,240,.1);
  --info-line:rgba(96,150,240,.28);
  --warning:#f5a06a;
  --warning-soft:rgba(245,160,106,.1);
  --warning-line:rgba(245,160,106,.3);
  --shadow-1:0 0 0 1px rgba(255,255,255,.02),0 4px 16px rgba(0,0,0,.25);
  --shadow-2:0 0 0 1px rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.35);
  --shadow-3:0 0 0 1px rgba(255,255,255,.04),0 16px 40px rgba(0,0,0,.5);
  --shadow-green:0 4px 16px rgba(0,0,0,.4);
  --shadow-green-2:0 8px 24px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Lining tabular figures everywhere: Raleway defaults to old-style digits, and every `font`
   shorthand resets numeric settings, so they are forced on each element. */
*,*::before,*::after{font-variant-numeric:lining-nums tabular-nums!important}
html,body{margin:0;min-height:100%}
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto}
body{font:var(--t-body1);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:600;color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--primary-1);outline-offset:2px}
::selection{background:rgba(95,184,114,.25)}
.muted{color:var(--quiet)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shell ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;z-index:30;display:flex;flex-direction:column;padding:20px 12px 16px;background:var(--surface);border-right:1px solid var(--line)}
.brand{display:block;padding:4px 8px 28px}
.company-logo{display:block;width:165px;height:48px;object-fit:contain;object-position:left center}
.logo-dark{display:none}
:root[data-theme=dark] .logo-dark{display:block}
:root[data-theme=dark] .logo-light{display:none}
.workspace-label{margin:0 12px 8px;font:var(--t-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
nav{display:grid;gap:2px}
.nav-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:var(--t-nav);letter-spacing:.2px;text-align:left;transition:background .15s,color .15s,transform .15s var(--ease)}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--text)}
.nav-item.active svg{color:var(--accent)}
.nav-item .count{margin-left:auto;min-width:24px;padding:0 6px;border-radius:6px;background:var(--surface-2);font:var(--t-body3);line-height:20px;text-align:center;color:var(--muted)}
.nav-item.active .count{background:var(--surface)}
.sidebar-carriers{margin-top:28px}
#carrier-status{display:grid;gap:2px}
.carrier-row{display:grid;grid-template-columns:6px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:1px;width:100%;padding:7px 12px;border:0;border-radius:8px;background:transparent;text-align:left;transition:background .15s}
.carrier-row:hover{background:var(--surface-2)}
.carrier-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-body2);color:var(--text-2)}
.carrier-row .connection{grid-column:2;overflow:hidden;text-overflow:ellipsis;font:var(--t-body3);color:var(--quiet);white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--line-strong);flex:none}
.dot.green{background:var(--primary-1);box-shadow:0 0 0 3px var(--accent-soft)}
.dot.yellow{background:#e0a33a;box-shadow:0 0 0 3px rgba(224,163,58,.15)}
.dot.red{background:#d9534f;box-shadow:0 0 0 3px rgba(217,83,79,.15)}
.dot.blue{background:#4a8fe0;box-shadow:0 0 0 3px rgba(74,143,224,.15)}
.theme-switch{margin-top:auto;margin-bottom:8px}
.theme-switch-track{position:relative;flex:none;width:30px;height:18px;margin-left:auto;border-radius:999px;background:var(--line-strong);transition:background .2s}
.theme-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.theme-switch[aria-checked=true] .theme-switch-track{background:var(--accent)}
.theme-switch[aria-checked=true] .theme-switch-track::after{transform:translateX(12px)}
.sidebar-bottom{display:flex;align-items:center;gap:8px;padding:12px 4px 0;border-top:1px solid var(--line)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font:var(--t-caps);flex:none}
.sidebar-user{flex:1;min-width:0;font:var(--t-h6);color:var(--text)}
.sidebar-user span{display:block;line-height:18px;overflow-wrap:anywhere}
.sidebar-user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user small{font:var(--t-body3);color:var(--quiet)}
.shell{margin-left:248px;min-height:100vh}
/* the top bar exists only on phones */
.topbar{display:none}
.icon-button{display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted);flex:none;transition:background .15s,color .15s,transform .15s var(--ease)}
.icon-button:hover{background:var(--surface-2);color:var(--text)}
.icon-button:active,.v3-chips button:active,.v3-seg button:active,.v3-mini-seg button:active{transform:scale(.96)}
main{padding:32px 40px 40px;max-width:1440px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.eyebrow{margin-bottom:8px;font:var(--t-caps);letter-spacing:.1em;color:var(--accent)}
.page-heading h1{font:var(--t-h2)}
.page-heading p{margin:8px 0 0;font:var(--t-body2);color:var(--muted)}
.page-footer{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font:var(--t-body3);color:var(--quiet)}

/* ---------- calculator layout ---------- */
.calculator-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.85fr);grid-template-areas:'head head' 'form results';gap:24px;align-items:start}
.calculator-layout>.page-heading{grid-area:head;margin-bottom:0}
.form-column{grid-area:form;display:grid;gap:16px;min-width:0}
.results-column{grid-area:results;position:sticky;top:80px;min-width:0}
/* Floats above the page: appearing must not push the content down. */
.stale-note{position:fixed;left:50%;top:16px;z-index:150;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:8px 16px;border:1px solid var(--info-line);border-radius:10px;background:var(--info-soft);color:var(--info);font:var(--t-body2);box-shadow:var(--shadow-3);transform:translateX(-50%);animation:toastIn .25s var(--ease)}
:root[data-theme=dark] .stale-note{background:#24201a}
:root[data-theme=dark] .stale-note{border-color:rgba(227,194,122,.25)}

/* ---------- panels ---------- */
.panel{position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);animation:fadeUp .4s var(--ease) both}
/* Each panel is its own layer (entry animation): the one with an open popover or list goes on top. */
.panel:focus-within,.panel:has(.v3-popover:not([hidden])){z-index:20}
.section-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-heading h2{font:var(--t-h4)}
.section-description{margin:-8px 0 16px;font:var(--t-body2);color:var(--muted)}

/* ---------- fields (Text fields) ---------- */
/* one label style for every field (UI label), one hint style under it (Body 3) */
label{display:block;font:var(--t-label);letter-spacing:.1px;color:var(--text-2)}
.v3-label{display:block;margin-bottom:8px;font:var(--t-label);letter-spacing:.1px;color:var(--text-2)}
.v3-hint{display:block;margin-top:4px;font:var(--t-body3);letter-spacing:0;color:var(--quiet)}
.input-wrapper,.search-input-wrap{position:relative;display:flex;align-items:center;margin-top:8px}
.route-input{margin-top:0}
input[type=text],input[type=number],input[type=password],input[type=date],input:not([type]),select{
  width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-field);
  background:var(--surface);color:var(--text);font:var(--t-body2);letter-spacing:0;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:hover,select:hover{border-color:var(--line-strong)}
input:focus,select:focus{border-color:var(--quiet);box-shadow:0 0 0 3px var(--accent-soft)}
input:focus-visible,select:focus-visible{outline:none}
:root[data-theme=dark] input,:root[data-theme=dark] select{background:var(--surface-2)}
input::placeholder{color:var(--quiet)}
/* a field with a problem: red outline and a short line under it */
[aria-invalid=true]{border-color:rgba(255,74,74,.7)!important;box-shadow:0 0 0 3px rgba(255,74,74,.1),0 4px 14px rgba(255,74,74,.1)!important;background-color:rgba(255,74,74,.04)!important}
[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(255,74,74,.16),0 4px 14px rgba(255,74,74,.12)!important}
.field-error{display:block;margin-top:6px;font:var(--t-body3);letter-spacing:0;color:var(--error);animation:pop .2s var(--ease)}
label:has(.field-error)>.v3-hint,.order-goods:has(.field-error)>.v3-hint,.v3-picker:has(.field-error) .lookup-status{display:none}
:root[data-theme=dark] .field-error{color:#ff7a7a}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select{appearance:none;padding-right:32px}
/* ---------- dropdowns (select.mjs): the native select is hidden, the button and the list are ours ---------- */
.select{position:relative;display:block;width:100%}
.select>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface);color:var(--text);font:var(--t-body2);letter-spacing:0;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
:root[data-theme=dark] .select-trigger{background:var(--surface-2)}
.select-trigger:hover{border-color:var(--line-strong)}
.select-trigger:focus-visible,.select-trigger[aria-expanded=true]{outline:none;border-color:var(--quiet);box-shadow:0 0 0 3px var(--accent-soft)}
.select-trigger:disabled{cursor:default;opacity:.6}
.select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-chevron{flex:none;width:16px;height:16px;color:var(--muted);transition:transform .2s var(--ease)}
.select-trigger[aria-expanded=true] .select-chevron{transform:rotate(180deg);color:var(--accent)}
.select-sm .select-trigger{height:32px;padding:0 8px 0 10px}
.select-md .select-trigger{height:36px}
.select-list{position:fixed;z-index:220;max-width:min(420px,calc(100vw - 16px));max-height:320px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-3);font:var(--t-body2);color:var(--text);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top center;transition:opacity .15s,transform .18s var(--ease)}
.select-list.is-up{transform-origin:bottom center;transform:translateY(4px) scale(.98)}
.select-list.is-open{opacity:1;transform:none}
:root[data-theme=dark] .select-list{background:var(--surface-2);border-color:var(--line-strong)}
.select-option{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 8px;border-radius:6px;cursor:pointer;white-space:nowrap}
.select-option.is-active{background:var(--surface-2)}
:root[data-theme=dark] .select-option.is-active{background:var(--surface-3)}
.select-option[aria-selected=true]{color:var(--accent)}
.select-option.is-disabled{opacity:.45;cursor:default}
.select-check{flex:none;width:16px;height:16px;opacity:0}
.select-option[aria-selected=true] .select-check{opacity:1}
.input-wrapper>svg,.route-input>svg{position:absolute;left:12px;color:var(--quiet);pointer-events:none}
.route-input input{padding-left:38px}
.input-wrapper input{padding-right:36px}
.input-suffix{position:absolute;right:12px;font:var(--t-body3);color:var(--quiet);pointer-events:none}
.error-text{margin:0;padding:8px 12px;border:1px solid var(--error);border-radius:var(--radius-field);background:rgba(255,74,74,.06);color:var(--error);font:var(--t-body2)}
small.error-text{display:block;padding:4px 8px;margin-top:4px;font:var(--t-body3)}

/* ---------- route ---------- */
.v3-route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;align-items:start}
.v3-field{position:relative;display:block}
.v3-locked{display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 0 12px;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface-2);font:var(--t-body2)}
.v3-locked>svg{color:var(--quiet)}
.v3-locked>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.v3-info{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:6px;background:transparent;color:var(--quiet);transition:color .15s,background .15s}
.v3-info:hover,.v3-info[aria-expanded=true]{color:var(--accent)}
.v3-popover{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:min(420px,calc(100vw - 48px));padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-3);animation:pop .18s var(--ease)}
.v3-popover-title{margin:0 0 8px;font:var(--t-h6)}
.v3-origin-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.v3-origin-row p{margin:0;font:var(--t-body2);color:var(--muted)}
.v3-origin-row b{display:block;font-weight:700;color:var(--text)}
.city-field{position:relative}
.place-suggestions,.search-suggestions{position:absolute;left:0;right:0;z-index:70;max-height:320px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-3);animation:pop .15s var(--ease)}
.place-suggestions{top:76px}
.place-suggestions button,.search-suggestions button{display:block;width:100%;padding:8px 12px;border:0;border-radius:6px;background:transparent;text-align:left}
.place-suggestions button:hover,.search-suggestions button:hover,.place-suggestions button.active,.search-suggestions button.active{background:var(--surface-2)}
.place-suggestions strong,.search-suggestions strong{display:block;font:var(--t-bold2);color:var(--text)}
.place-suggestions span,.search-suggestions span{display:block;font:var(--t-body3);color:var(--quiet)}

/* segmented control */
.v3-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:10px;background:var(--surface-2)}
.v3-seg button{display:grid;gap:2px;padding:8px 12px;border:1px solid transparent;border-radius:7px;background:transparent;text-align:left;color:var(--muted);transition:background .2s,box-shadow .2s,color .15s,transform .15s var(--ease)}
.v3-seg button strong{font:var(--t-h6);color:inherit}
.v3-seg button span{font:var(--t-body3);color:var(--quiet)}
.v3-seg button:hover{color:var(--text)}
.v3-seg button[aria-checked=true]{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-1)}
:root[data-theme=dark] .v3-seg button[aria-checked=true]{background:var(--surface-3)}
.v3-seg button[aria-checked=true] strong{color:var(--accent)}
.v3-seg-modes{margin-top:24px}
/* Route: how we hand parcels over and how the client receives them. */
.v3-ways{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px 12px;margin-top:24px}
.v3-way-seg{display:flex;width:100%;padding:4px;border-radius:var(--radius-field)}
.v3-way-seg button{flex:1;padding:8px 10px}
@media (max-width:640px){.v3-ways{grid-template-columns:1fr;gap:6px}.v3-ways .v3-label:not(:first-child){margin-top:8px}.v3-way-seg button{flex:1 1 auto;min-width:0;padding:8px 6px;white-space:normal;line-height:1.2}}
.v3-advanced:empty,.v3-advanced.is-empty{display:none}
.v3-mode-help{margin:8px 4px 0}
.v3-advanced{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);animation:fadeUp .3s var(--ease)}
/* Only the hand-over points are left: one divider (the block's own), not two. */
.v3-advanced:not(:has(>.v3-pickers:not([hidden]))){padding-top:0}
.v3-advanced:not(:has(>.v3-pickers:not([hidden])))>.v3-origins{margin-top:0;border-top:0}
.v3-pickers{display:grid;gap:12px;margin-top:16px}
.v3-picker{position:relative;display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
:root[data-theme=dark] .v3-picker{background:var(--surface-2)}
.v3-picker-head{display:flex;align-items:center;gap:10px;min-height:24px}
.v3-picker-head label{font:var(--t-h6);color:var(--text)}
.v3-picker .search-input-wrap{margin-top:0}
.v3-picker .search-suggestions{top:104px}
.lookup-status{margin-top:-4px;font:var(--t-body3);color:var(--quiet)}
.v3-picker input{text-overflow:ellipsis}
.lookup-all{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:2px 0;border:0;background:none;color:var(--accent);font:var(--t-body2)}
.lookup-all svg{width:15px;height:15px}
/* the dashed line marks the link text only, not the icon */
.lookup-all span{border-bottom:1px dashed currentColor}
.lookup-all:hover span{border-bottom-style:solid}
.v3-origins,.v3-date{margin-top:16px;border-top:1px solid var(--line)}
.v3-origins summary,.v3-date summary{display:flex;align-items:center;gap:8px;padding:12px 0;font:var(--t-nav);color:var(--text-2);cursor:pointer;list-style:none}
.v3-origins summary::-webkit-details-marker,.v3-date summary::-webkit-details-marker{display:none}
.v3-origins summary::before,.v3-date summary::before{content:'';width:6px;height:6px;margin-right:4px;border-right:1.5px solid var(--quiet);border-bottom:1.5px solid var(--quiet);transform:rotate(-45deg);transition:transform .2s var(--ease)}
details[open]>summary::before{transform:rotate(45deg)}
.v3-origins summary span,.v3-date summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-body2);color:var(--quiet)}
.v3-origins-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:8px 0 16px}
.v3-origins-grid label{display:grid;gap:8px}
.v3-origins-grid .v3-hint{grid-column:1/-1;margin:0}
.v3-date-body{display:grid;gap:12px;max-width:320px;padding-bottom:16px}
.date-picker{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface)}
.date-picker-head{display:flex;align-items:center;justify-content:space-between}
.date-picker-month{font:var(--t-h6);color:var(--text)}
.date-picker-month::first-letter{text-transform:uppercase}
.date-picker-nav{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--quiet);transition:color .15s,background .15s}
.date-picker-nav:hover{background:var(--surface-2);color:var(--text)}
.date-picker-nav svg{width:16px;height:16px;transform:rotate(90deg)}
.date-picker-nav[data-shift="1"] svg{transform:rotate(-90deg)}
.date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.date-picker-weekday{padding:4px 0;font:var(--t-body3);color:var(--quiet)}
.date-picker-grid button{height:36px;padding:0;border:0;border-radius:8px;background:transparent;font:var(--t-body2);font-variant-numeric:tabular-nums;color:var(--text-2);transition:background .15s,color .15s}
.date-picker-grid button:hover{background:var(--surface-2);color:var(--text)}
.date-picker-grid button.is-today{box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent)}
.date-picker-grid button[aria-pressed=true]{background:var(--accent);color:#fff;box-shadow:none}
.date-picker-today{justify-self:start;padding:4px 0;border:0;background:none;font:var(--t-body2);color:var(--accent)}
.date-picker-today:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- packages ---------- */
#packages{display:grid;gap:12px}
.package{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);animation:fadeUp .3s var(--ease) both}
:root[data-theme=dark] .package{background:var(--surface-2)}
.package-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.package-name{display:flex;align-items:center;gap:8px;font:var(--t-h6);color:var(--text)}
.package-name svg{color:var(--quiet)}
.package-actions{display:flex;gap:2px}
.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.package-api{margin-top:8px;font:var(--t-body3);color:var(--quiet)}
.nowrap{white-space:nowrap}
.add-package{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:transparent;color:var(--muted);font:var(--t-label);transition:color .15s,border-color .15s}
.add-package:hover{color:var(--accent);border-color:var(--accent-line)}
.add-package:disabled{opacity:.4;cursor:not-allowed}
.package-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.package-totals span{display:block;font:var(--t-body3);color:var(--quiet)}
.package-totals strong{display:block;margin-top:4px;font:var(--t-h4);color:var(--text)}
.rounding-note{margin-top:16px;font:var(--t-body3);color:var(--quiet)}

/* ---------- money & services ---------- */
.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v3-note{margin:16px 0 0;padding:8px 12px;border-radius:var(--radius-field);background:var(--info-soft);color:var(--text-2);font:var(--t-body2)}
.service-grid{display:grid;gap:8px}
/* step 03: who pays on receipt (as tall as a field) and what each carrier gets from the rules */
.v3-mini-seg.v3-payer{display:flex;width:100%;padding:4px;border-radius:var(--radius-field)}
.v3-payer button{flex:1 1 auto;min-height:36px;white-space:nowrap}
/* step 03: the payment choice; goods sum and declared value open on request */
.order-question{display:grid;gap:0}
.order-extras{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.order-extra{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text-2);font:var(--t-body2);transition:border-color .15s,color .15s,background .15s}
.order-extra:hover{border-color:var(--line-strong);color:var(--text)}
.order-extra b{font-weight:400;color:var(--accent)}
.order-extra svg{width:16px;height:16px;color:var(--quiet);transition:transform .2s var(--ease)}
.order-extra[aria-expanded=true] svg{transform:rotate(180deg)}
.order-goods{max-width:360px;margin-top:16px}
.order-goods>label{display:block;margin-bottom:8px}
.order-goods-row{display:flex;align-items:center;gap:8px}
.order-goods-row .input-wrapper{flex:1;margin-top:0}
.declared-panel{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:10px;animation:fadeUp .25s var(--ease)}
.declared-mode{justify-self:start}
.declared-manual{max-width:320px}
.declared-summary{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.declared-summary li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;font:var(--t-body2);color:var(--text-2)}
.declared-summary b{font:var(--t-h6);color:var(--text)}
.rule-edit{justify-self:start;padding:0;border:0;border-bottom:1px dashed currentColor;background:none;color:var(--accent);font:var(--t-body3)}
.service-option.service-sms{grid-template-columns:36px minmax(0,1fr);padding:0;border:0;cursor:default}
.sms-carriers{display:flex;flex-wrap:wrap;gap:8px;grid-column:2}
.sms-carrier{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:8px;font:var(--t-body2);color:var(--text-2);cursor:pointer;transition:border-color .15s,background .15s}
.sms-carrier:hover{border-color:var(--line-strong)}
.service-option .sms-carrier input.toggle{position:relative;opacity:1;pointer-events:auto;width:34px;height:20px}
.service-option .sms-carrier input.toggle::after{width:14px;height:14px}
.service-option .sms-carrier input.toggle:checked::after{transform:translateX(14px)}
.link-button{padding:0;border:0;background:none;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.service-option{position:relative;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;font:var(--t-body2);cursor:pointer;transition:border-color .15s}
.service-option:hover{border-color:var(--line-strong)}
.service-option:has(input:checked){border-color:var(--accent-line)}
.service-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--surface-2);color:var(--quiet);transition:background .15s,color .15s}
.service-option:has(input:checked) .service-icon{background:var(--accent-soft);color:var(--accent)}
.service-option strong{display:block;font:var(--t-h6);color:var(--text)}
.service-option small{display:block;margin-top:2px;font:var(--t-body3);color:var(--quiet)}
.service-option input{position:absolute;opacity:0;pointer-events:none}
.switch{position:relative;width:40px;height:24px;border-radius:999px;background:var(--line-strong);transition:background .2s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(40,48,61,.25);transition:transform .2s var(--ease)}
.service-option input:checked~.switch{background:var(--grad)}
.service-option input:checked~.switch::after{transform:translateX(16px)}
.service-option input:focus-visible~.switch{outline:2px solid var(--primary-1);outline-offset:2px}

/* ---------- buttons (Buttons) ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font:var(--t-label);letter-spacing:.1px;transition:color .15s,border-color .15s,background .15s,box-shadow .2s,filter .15s,transform .15s var(--ease)}
.button:hover{color:var(--accent);border-color:var(--accent-line)}
.button:active{filter:brightness(.97);transform:scale(.98)}
.button:disabled{opacity:.5;cursor:not-allowed}
.button.primary{border:0;background:var(--grad);color:#fff;box-shadow:var(--shadow-green)}
.button.primary:hover{color:#fff;background:linear-gradient(90deg,#68c27b 0%,#4a9b66 100%);box-shadow:var(--shadow-green-2)}
.button.primary:active{background:var(--primary-2);box-shadow:none}
.button.primary:disabled{background:var(--surface-3);color:var(--quiet);box-shadow:none}
.button.ghost{background:transparent}
.button.secondary{background:transparent;border-color:var(--accent-line);color:var(--accent)}
.button svg{width:16px;height:16px;stroke-width:1.6}
:root[data-theme=dark] .button:not(.primary){background:var(--surface-2);border-color:var(--line-strong)}

/* sticky calculate bar */
.v3-calc-bar{position:sticky;bottom:16px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 20px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:var(--shadow-3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.v3-calc-summary{display:grid;gap:2px;min-width:0}
.v3-calc-summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-h6);color:var(--text)}
.v3-calc-summary strong.is-error{color:var(--error)}
.v3-calc-summary span{font:var(--t-body3);color:var(--quiet)}
.v3-calc-actions{display:flex;align-items:center;gap:8px;flex:none}
.v3-calc-bar .button{min-height:48px;padding:0 28px;border-radius:10px;flex:none}
.v3-calc-bar .button.ghost{padding:0 18px;color:var(--muted)}
.v3-calc-bar .button.ghost:hover{color:var(--text);border-color:var(--line-strong)}
.v3-calc-bar .button svg{transition:transform .2s var(--ease)}
.v3-calc-bar .button:hover svg{transform:translateX(3px)}

/* ---------- results ---------- */
.results-heading-row{margin-bottom:12px}
.quote-controls{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1)}
.results-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.results-top h2{display:flex;align-items:center;gap:8px;font:var(--t-h4)}
.count{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 6px;border-radius:6px;background:var(--surface-2);color:var(--muted);font:var(--t-body3)}
.results-top .select{width:auto}
.v3-chips{display:flex;flex-wrap:wrap;gap:8px}
.v3-chips::-webkit-scrollbar{display:none}
.v3-chips button{flex:none;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:var(--t-nav);transition:color .15s,border-color .15s,background .15s}
.v3-chips button:hover{color:var(--text);border-color:var(--line-strong)}
.v3-chips button{transition:color .15s,border-color .15s,background .15s,transform .15s var(--ease)}
.v3-chips button[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
/* delivery term slider */
.v3-days{display:grid;grid-template-columns:96px minmax(0,1fr) 72px;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.v3-days label{font:var(--t-body2);letter-spacing:0;color:var(--muted)}
.v3-days output{font:var(--t-nav);color:var(--text);text-align:right;white-space:nowrap}
#max-days{--fill:100%;width:100%;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
#max-days::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--primary-1) var(--fill),var(--surface-3) var(--fill))}
#max-days::-moz-range-track{height:4px;border-radius:2px;background:var(--surface-3)}
#max-days::-moz-range-progress{height:4px;border-radius:2px;background:var(--primary-1)}
#max-days::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:2px solid var(--primary-2);border-radius:50%;background:var(--surface);box-shadow:var(--shadow-1);transition:transform .15s var(--ease)}
#max-days::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--primary-2);border-radius:50%;background:var(--surface)}
#max-days:active::-webkit-slider-thumb{transform:scale(1.15)}
#max-days:focus{box-shadow:none}
#max-days:focus-visible{outline:2px solid var(--primary-1);outline-offset:4px;border-radius:4px}
.v3-quick{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.v3-quick-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.v3-quick-label{width:96px;font:var(--t-body2);color:var(--muted)}
.v3-mini-seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--surface-2)}
.v3-mini-seg button{padding:4px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font:var(--t-nav);white-space:nowrap;transition:background .2s,color .15s,box-shadow .2s,transform .15s var(--ease)}
.v3-mini-seg button:hover{color:var(--text)}
.v3-mini-seg button[aria-checked=true]{background:var(--surface);border-color:var(--line);color:var(--accent);box-shadow:var(--shadow-1)}
:root[data-theme=dark] .v3-mini-seg button[aria-checked=true]{background:var(--surface-3)}
.v3-mini-seg button:disabled{cursor:not-allowed}
.v3-quick-toggle{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px 0;border:0;background:none;color:var(--muted);font:var(--t-nav);transition:color .15s}
.v3-quick-toggle:hover,.v3-quick-toggle[aria-expanded=true]{color:var(--accent)}
.v3-quick-toggle svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.v3-quick-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.v3-quick-prices{display:grid;gap:12px;margin-top:12px}
.v3-quick-prices{gap:0}
.v3-quick-carrier{display:grid;border-top:1px solid var(--line)}
.v3-quick-carrier:first-child{border-top:0}
.v3-quick-head{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 0;border:0;background:none;text-align:left;color:var(--text)}
.v3-quick-head svg{flex:none;width:16px;height:16px;margin-left:auto;color:var(--quiet);transition:transform .25s var(--ease)}
.v3-quick-head[aria-expanded=true] svg{transform:rotate(180deg)}
.v3-quick-head:hover .v3-quick-name{color:var(--accent)}
.v3-quick-name{flex:none;font:var(--t-h6);color:var(--text);transition:color .15s}
.v3-quick-brief{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-body3);color:var(--quiet)}
.v3-quick-carrier.is-open .v3-quick-brief{visibility:hidden}
.v3-quick-body{display:grid;gap:4px;padding-bottom:12px}
/* One setting per line: name on the left, value on the right, the same at any width. */
.v3-quick-field{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;font:var(--t-body2);color:var(--text-2)}
.v3-quick-field .input-wrapper{flex:none;width:104px;margin-top:0}
.v3-quick-field input{height:36px}
.v3-quick-field .select{flex:none;width:210px;max-width:60%}
.v3-quick-note{font:var(--t-body2);color:var(--muted)}
.v3-quick-prices>.v3-hint{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
#results{display:grid;gap:12px}
.results-note{display:flex;gap:8px;margin-top:12px;padding:0 4px;font:var(--t-body3);color:var(--quiet)}
.results-note span{color:var(--accent)}
.results-note p{margin:0}

/* empty state */
.empty-result{display:flex;flex-direction:column;align-items:center;padding:48px 24px;border:1px dashed var(--line-strong);border-radius:var(--radius);text-align:center;color:var(--muted)}
.empty-result h3{font:var(--t-h4)}
.empty-result p{max-width:320px;margin:8px 0 0;font:var(--t-body2)}
.parcel-art{width:150px;height:124px;margin-bottom:16px;color:var(--quiet)}
.parcel-art>svg{width:100%;height:100%;stroke:none;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* tariff card: logo row, title + price, then two folded sections */
.v3-card{position:relative;padding:24px 24px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);animation:cardIn .35s var(--ease) both;transition:box-shadow .2s,border-color .2s,transform .2s var(--ease)}
.v3-card:nth-child(2){animation-delay:.03s}.v3-card:nth-child(3){animation-delay:.06s}.v3-card:nth-child(4){animation-delay:.09s}.v3-card:nth-child(5){animation-delay:.12s}.v3-card:nth-child(n+6){animation-delay:.15s}
.v3-card:hover{box-shadow:var(--shadow-2);border-color:var(--line-strong);transform:translateY(-1px)}
.v3-card.is-best{border-color:var(--accent-line)}
.v3-notice,.v3-loading{padding-bottom:24px}
.v3-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin-bottom:16px}
.v3-brand{display:flex;align-items:center;gap:8px}
.v3-badge{padding:0 6px;border-radius:4px;background:rgba(7,84,161,.08);color:#0754a1;font:var(--t-caps);line-height:20px;letter-spacing:.06em}
:root[data-theme=dark] .v3-badge{background:rgba(111,168,239,.12);color:#8fbcf3}
.v3-best,.v3-tag{padding:2px 8px;border-radius:6px;font:var(--t-caps);line-height:20px}
.v3-marks{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.v3-best{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent)}
.v3-best svg{width:14px;height:14px}
.v3-fast{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--text-2);font:var(--t-caps);line-height:20px}
.v3-fast svg{width:14px;height:14px;color:var(--accent)}
.v3-best,.v3-fast{animation:pop .3s var(--ease) both .15s}
.v3-tag{background:var(--surface-2);color:var(--muted)}
.v3-card-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.v3-card-title h3{font:var(--t-h5);letter-spacing:.1px}
.v3-official{margin:4px 0 0;font:var(--t-body3);color:var(--quiet)}
.v3-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;font:var(--t-body2);color:var(--muted)}
.v3-meta span{display:inline-flex;align-items:center;gap:6px}
.v3-meta svg{width:16px;height:16px;color:var(--quiet)}
.v3-price{text-align:right;white-space:nowrap}
.v3-price strong{display:block;font:var(--t-price);color:var(--text)}
.v3-card.is-best .v3-price strong{color:var(--accent)}
.v3-price .v3-approx{display:inline;margin:0 4px 0 0;font:inherit;font-weight:500;color:var(--quiet)}
.v3-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--info-line);border-radius:var(--radius);background:var(--info-soft);color:var(--text-2);animation:fadeUp .3s var(--ease)}
:root[data-theme=dark] .v3-banner{border-color:rgba(227,194,122,.2)}
.v3-banner>svg{color:var(--info)}
.v3-banner{flex-wrap:wrap}
.v3-banner p{flex:1 1 220px;margin:0;font:var(--t-body2)}
.v3-banner .button{min-height:32px;padding:0 12px;flex:none}
.v3-price span{display:block;margin-top:4px;font:var(--t-body3);color:var(--quiet)}
.v3-price span+span{margin-top:0}
.v3-price .v3-alt{margin-top:2px;color:var(--muted)}
#results.is-stale .v3-card{opacity:.55;transition:opacity .2s}
#results.is-stale .v3-card:hover{opacity:.85}
.v3-twins{display:flex;align-items:center;gap:6px;margin:10px 0 0;font:var(--t-body3);color:var(--muted)}
.v3-twins svg{flex:none;width:14px;height:14px;color:var(--quiet)}
/* Settings: the courier pickup point on the map. */
.pickup-lookup{position:relative;display:grid;gap:6px}
/* Settings: standard boxes. */
.box-rows{display:grid;gap:10px;margin-bottom:12px}
.box-rows:empty{display:none}
.box-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)) 36px;align-items:end;gap:8px}
.box-row .icon-button{margin-bottom:4px}
@media (max-width:640px){.box-row{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:10px;border-bottom:1px solid var(--line)}.box-row label:first-child{grid-column:1/-1}}
/* Form: a package made of a standard box. */
.package-header .package-name{white-space:nowrap}
.package-box{flex:0 1 auto;margin-left:auto;margin-right:8px;width:auto;min-width:0;max-width:60%;height:32px;padding:0 28px 0 10px;font:var(--t-body2)}
.package-tare{margin-top:6px;font:var(--t-body3);color:var(--quiet)}
.search-suggestions span.point-misfit{color:var(--error)}
.pickup-map{position:relative;height:300px;margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.pickup-map .maplibregl-canvas-container,.pickup-map canvas{outline:none}
.v3-compare-sum{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;margin:4px 0 8px;font:var(--t-bold2);color:var(--text)}
.v3-compare-sum .v3-help-icon{position:relative;top:2px;vertical-align:0}
.v3-hint .v3-help-icon{vertical-align:-4px}
.v3-compare-sum.is-less{color:var(--accent)}
.v3-warn{margin:16px 0 0;padding:6px 12px;border-radius:var(--radius-field);background:var(--warning-soft);color:var(--warning);font:var(--t-body3)}
.v3-warnings{margin:12px 0 0;padding-left:18px;font:var(--t-body3);color:var(--muted)}
.v3-disclosures{margin-top:16px;border-top:1px solid var(--line)}
.v3-details+.v3-details{border-top:1px solid var(--line)}
.v3-details summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;font:var(--t-nav);color:var(--text-2);cursor:pointer;list-style:none;transition:color .15s}
.v3-details summary:hover,.v3-details[open] summary{color:var(--accent)}
.v3-details[open] summary::after{border-color:var(--accent)}
.v3-details summary::-webkit-details-marker{display:none}
.v3-details summary::after{content:'';width:6px;height:6px;margin-right:4px;border-right:1.5px solid var(--quiet);border-bottom:1.5px solid var(--quiet);transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.v3-details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.v3-details-body{padding:0 0 16px;animation:fadeUp .25s var(--ease)}
/* price breakdown: groups of rows divided by one hairline; the client price closes it */
.v3-group{padding:8px 0}
.v3-group:first-child{padding-top:0}
.v3-group+.v3-group,.v3-note+.v3-group{border-top:1px solid var(--line)}
.v3-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0;font:var(--t-body2)}
.v3-row>span{min-width:0;color:var(--muted)}
.v3-row b{display:inline-flex;align-items:baseline;gap:0}
.v3-sep{margin-left:10px;padding-left:10px;border-left:1px solid var(--line-strong)}
.v3-row small{display:block;margin-top:2px;font:var(--t-body3);color:var(--quiet)}
.v3-row b{flex:none;font-weight:400;white-space:nowrap;text-align:right;color:var(--text)}
.v3-row-head span,.v3-row-head b{font:var(--t-h6);color:var(--text)}
.v3-caption{margin:0 0 6px;font:var(--t-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.v3-group:not(:first-child) .v3-caption{margin-top:4px}
.v3-row-param b{color:var(--text-2)}
/* "+" drawn with two bars: the font plus sign looks odd in Raleway and PT Sans at this size. */
.v3-sign{position:relative;display:inline-block;flex:none;width:9px;height:9px;margin-right:7px;vertical-align:1px;color:var(--quiet)}
.v3-sign::before,.v3-sign::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1.5px;border-radius:1px;background:currentColor}
.v3-sign::after{transform:rotate(90deg)}
.v3-row-sub{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line-strong)}
.v3-row-sub>span{color:var(--text)}
.v3-row-sub b{font-weight:700}
.v3-row-cost{margin-top:4px;padding-top:8px}
.v3-row-cost>span{color:var(--muted)}
.v3-row-total{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.v3-row-total>span{font:var(--t-h5);color:var(--text)}
.v3-row-total b{font:var(--t-h4);font-weight:700;color:var(--text)}
.v3-details .v3-note{margin:4px 0 8px;font:var(--t-body3)}
.v3-source{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;padding:8px 12px;border-radius:8px;background:var(--surface-2);font:var(--t-body3);color:var(--muted)}
.v3-source svg{width:16px;height:16px;margin-top:1px;color:var(--quiet)}
.v3-help{position:relative;display:inline-block;margin-top:8px}
.v3-help-button{display:inline-flex;align-items:center;gap:6px;padding:2px 0;border:0;background:none;color:var(--quiet);font:var(--t-body3);transition:color .15s}
.v3-help-button svg{width:16px;height:16px}
.v3-help-button:hover,.v3-help-button[aria-expanded=true]{color:var(--accent)}
.v3-help-pop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:min(400px,calc(100vw - 64px));padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .15s,transform .15s var(--ease),visibility 0s .15s}
.v3-help-button[aria-expanded=true]+.v3-help-pop{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .2s var(--ease)}
.v3-card:has(.v3-help-button[aria-expanded=true]){z-index:5}
.v3-help-pop p{margin:0;font:var(--t-body2);color:var(--text-2)}
.v3-help-pop p+p{margin-top:8px}
.v3-help-icon{margin:0 0 0 6px;vertical-align:-3px}
.v3-help-icon .v3-help-button{padding:0}
.v3-help-icon .v3-help-pop{width:min(320px,calc(100vw - 64px))}
.v3-help-pop.is-floating{position:fixed;z-index:300;max-height:calc(100vh - 32px);overflow:auto}
.v3-help-pop.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .2s var(--ease)}
.v3-terms{display:grid;gap:8px;margin:0}
.v3-terms div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px}
.v3-terms dt{font:var(--t-body2);color:var(--muted)}
.v3-terms dd{margin:0;font:var(--t-body2);color:var(--text-2)}
.v3-notice p{margin:0 0 16px;font:var(--t-body2);color:var(--muted)}
.loading-line{height:8px;width:70%;margin-top:4px;border-radius:999px;background:linear-gradient(90deg,var(--surface-2) 20%,var(--surface-3) 50%,var(--surface-2) 80%);background-size:250% 100%;animation:shimmer 1.4s linear infinite}
.v3-loading::after{content:'';display:block;width:45%;height:8px;margin-top:12px;border-radius:999px;background:linear-gradient(90deg,var(--surface-2) 20%,var(--surface-3) 50%,var(--surface-2) 80%);background-size:250% 100%;animation:shimmer 1.4s linear infinite .15s}
@keyframes shimmer{from{background-position:150% 0}to{background-position:-100% 0}}
.v3-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px;font:var(--t-body3);color:var(--quiet)}
.v3-actions>div{display:flex;gap:8px}
.v3-actions .button{min-height:32px;padding:0 16px}
.v3-excluded{padding:12px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.v3-excluded summary{display:flex;align-items:center;gap:8px;font:var(--t-nav);color:var(--muted);cursor:pointer;list-style:none}
.v3-excluded summary::-webkit-details-marker{display:none}
.v3-excluded summary::before{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease)}
.v3-excluded ul{margin:8px 0 0;padding:0;list-style:none}
.v3-excluded li{display:grid;gap:2px;padding:8px 0;border-top:1px solid var(--line);font:var(--t-body2);color:var(--text-2)}
.v3-excluded li b{font:var(--t-h6)}
.v3-excluded li span{font:var(--t-body3);color:var(--quiet)}
.quote-empty{border-style:solid}

/* ---------- carrier logos (sprites tuned to the supplied artwork) ---------- */
.carrier-logo{display:inline-block;flex-shrink:0;background-repeat:no-repeat;overflow:hidden;border-radius:4px}
.carrier-logo.cdek{width:71px;height:22px;background:url('assets/cdek-horizontal.svg') left center/contain no-repeat;border-radius:0}
.carrier-logo.post{width:122px;height:17px;background:url('assets/logo-post.webp') left center/contain no-repeat;border-radius:0}
.carrier-logo.ems{width:100px;height:22px;background:url('assets/ems-horizontal.png') center -25px/114px 64.125px no-repeat;border-radius:0}
/* Courier services: the supplied files as they are (Яндекс 1113×178, Достависта 1097×139). */
.carrier-logo.yandex{width:138px;height:22px;background:url('assets/logo-yandex.svg') left center/contain no-repeat;border-radius:0}
:root[data-theme=dark] .carrier-logo.yandex{background-image:url('assets/logo-yandex-dark.svg')}
/* Post blue is too dark on the dark surface: lift it without touching the logo file. */
:root[data-theme=dark] .carrier-logo.post{filter:brightness(2.1) saturate(.85)}
.carrier-logo.dostavista{width:142px;height:18px;background:url('assets/logo-dostavista.svg') left center/contain no-repeat;border-radius:0}
.v3-picker-head .carrier-logo,.v3-origin-row .carrier-logo{height:20px}
.v3-picker-head .carrier-logo.cdek,.v3-origin-row .carrier-logo.cdek{width:65px}
.v3-picker-head .carrier-logo.post,.v3-origin-row .carrier-logo.post{width:108px;height:15px}
.history-prices .carrier-logo{height:20px;background-position:left center}
.history-prices .carrier-logo.cdek{width:65px}
.history-prices .carrier-logo.post{width:100px;height:14px}
.history-prices .carrier-logo.yandex{width:100px;height:16px}
.history-prices .carrier-logo.dostavista{width:104px;height:13px}
/* Settings list: the same height of the letters (not of the files): CDEK letters fill half of
   its file, Post letters all of it, Yandex and Dostavista about three quarters. */
.v3-carrier-tab .carrier-logo{height:24px;background-position:left center}
.v3-carrier-tab .carrier-logo.cdek{width:72px;height:22px;margin:1px 0}
.v3-carrier-tab .carrier-logo.post{width:107px;height:15px;margin:4px 0 5px}
.v3-carrier-tab .carrier-logo.yandex{width:120px;height:19px;margin:2px 0 3px}
.v3-carrier-tab .carrier-logo.dostavista{width:134px;height:17px;margin:3px 0 4px}

/* ---------- history ---------- */
#history-list{max-width:1080px}
.history-table{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.history-row{display:grid;grid-template-columns:150px minmax(0,.8fr) minmax(0,1.5fr) auto;align-items:center;gap:24px;padding:20px 24px;animation:fadeUp .3s var(--ease) both;transition:background .15s}
.history-row+.history-row{border-top:1px solid var(--line)}
.history-row>*{min-width:0}
.history-row:hover{background:var(--surface-2)}
.history-where strong{display:block;font:var(--t-h5);color:var(--text)}
.history-where span,.history-what span{display:block;font:var(--t-body3);color:var(--quiet)}
.history-what span:first-child{font:var(--t-body2);color:var(--text-2)}
.history-prices{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none}
.history-prices li{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:12px}
.history-option{display:grid;min-width:0}
.history-option>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:pretty;font:var(--t-body2);color:var(--text-2)}
.history-option small{display:flex;align-items:center;gap:4px;font:var(--t-body3);color:var(--quiet)}
.history-option small{flex-wrap:wrap;gap:2px 10px}
.history-mark{display:inline-flex;align-items:center;gap:3px;color:var(--accent)}
.history-mark svg{width:13px;height:13px}
.history-prices b{font:var(--t-bold2);white-space:nowrap;color:var(--text)}
.history-row .button{min-height:36px;padding:0 16px;margin-left:16px}
.history-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1)}
.history-card strong{font:var(--t-h5)}
.history-card p{margin:4px 0 0;font:var(--t-body2);color:var(--muted)}
.history-empty{padding:40px;border:1px dashed var(--line-strong);border-radius:var(--radius);text-align:center;color:var(--muted)}

/* ---------- settings ---------- */
.v3-settings-layout{display:grid;grid-template-columns:240px minmax(0,840px);gap:24px;align-items:start}
/* The left column starts level with the first block on the right (below the panel title). */
.v3-settings-side{position:sticky;top:24px;display:grid;gap:16px;margin-top:48px}
.v3-settings-nav{display:grid;gap:8px}
.v3-carrier-tab{display:grid;gap:10px;justify-items:start;padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:left;color:var(--text);transition:border-color .15s,box-shadow .15s}
.v3-carrier-tab:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.v3-carrier-tab[aria-selected=true]{border-color:var(--accent-line);box-shadow:var(--shadow-1)}
.v3-carrier-status{display:flex;align-items:center;gap:8px;font:var(--t-body3);color:var(--muted)}
.v3-common-tab{grid-auto-flow:column;align-items:center;justify-content:start;font:var(--t-nav)}
.v3-common-tab svg{color:var(--quiet)}
.settings-page{display:grid;gap:16px}
.carrier-settings-panel{display:grid;gap:16px;animation:fadeUp .25s var(--ease)}
.v3-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px;padding:0 4px}
.v3-panel-head h2{font:var(--t-h4)}
.v3-panel-head .toggle-row{margin:0}
.toggle-row,.settings-block label.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;font:var(--t-body2);color:var(--text);cursor:pointer}
.toggle-row small{display:block;font:var(--t-body3);color:var(--quiet)}
.toggle-group{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.toggle-group-plain{padding-top:0;border-top:0}
input.toggle[type=checkbox]{position:relative;width:40px;height:24px;margin:0;border-radius:999px;background:var(--line-strong);-webkit-appearance:none;appearance:none;cursor:pointer;flex:none;transition:background .2s}
input.toggle[type=checkbox]::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(40,48,61,.25);transition:transform .2s var(--ease)}
input.toggle[type=checkbox]:checked{background:var(--grad)}
input.toggle[type=checkbox]:checked::after{transform:translateX(16px)}
input.toggle[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.carrier-enabled small{display:block;font:var(--t-body3);color:var(--quiet)}
.tariff-checkbox:has(input:disabled){color:var(--muted)}
.account-list{display:grid;gap:8px;margin:0}
.account-list div{display:grid;grid-template-columns:120px 1fr;gap:12px}
.account-list dt{font:var(--t-body2);color:var(--muted)}
.account-list dd{margin:0;font:var(--t-body2);color:var(--text)}
.settings-block{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1)}
.settings-block h3{margin:0;font:var(--t-h5)}
.settings-block>*{margin-top:0;margin-bottom:0}
.settings-block h4{margin:8px 0 -8px;font:var(--t-h6)}
.settings-block label{display:grid;gap:8px}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.setting-help{margin:0;font:var(--t-body3);color:var(--quiet)}
.carrier-enabled,.settings-block label.carrier-enabled{display:flex;align-items:center;gap:10px;margin:0;font:var(--t-body2);color:var(--text);cursor:pointer}
input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--primary-2);flex:none}
.with-help{display:flex;align-items:center;gap:8px}
.help-toggle{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--quiet);line-height:0;transition:color .15s}
.help-toggle svg{display:block;width:18px;height:18px}
.help-toggle:hover,.help-toggle[aria-expanded=true]{color:var(--accent)}
.help-box{margin:0;padding:12px 16px;border-radius:var(--radius-field);background:var(--surface-2);font:var(--t-body2);color:var(--text-2);animation:pop .15s var(--ease)}
.help-box ol{margin:0;padding-left:18px}
.help-box a{display:inline-block;margin-top:8px}
.connection-status{display:flex;align-items:center;gap:8px;margin:0;font:var(--t-body2);color:var(--warning)}
.connection-status.ok{color:var(--accent)}
.settings-actions{display:flex;flex-wrap:wrap;gap:8px}
.origin-rows{display:grid;gap:8px}
.origin-row{display:grid;grid-template-columns:20px 112px minmax(0,1fr) 36px;gap:8px;align-items:center}
.carrier-tariff-list{display:grid;max-height:420px;overflow:auto;border-top:1px solid var(--line)}
.tariff-checkbox,.settings-block label.tariff-checkbox{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);font:var(--t-body2);color:var(--text);cursor:pointer}
.tariff-checkbox span{margin-left:auto;font:var(--t-body3);color:var(--quiet)}
.settings-footer{position:sticky;bottom:16px;z-index:20;display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:var(--shadow-3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}

/* ---------- login ---------- */
.login-body{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-shell{width:100%;max-width:400px}
.login-card{display:grid;gap:16px;padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-3)}
.login-card .company-logo{justify-self:start;margin-bottom:8px}
.login-card .eyebrow{margin:0}
.login-card h1{font:var(--t-h2)}
.login-card label{display:grid;gap:8px}
.login-card .button{min-height:48px;margin-top:8px}

/* ---------- map of pickup points ---------- */
body.modal-open{overflow:hidden}
.map-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;background:rgba(8,9,10,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeUp .2s var(--ease)}
.map-sheet{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1100px,100%);height:min(720px,100%);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-3);overflow:hidden}
.map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 16px 24px;border-bottom:1px solid var(--line)}
.map-head h2{font:var(--t-h4)}
.map-count{margin:2px 0 0;font:var(--t-body3);color:var(--quiet)}
.map-body{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:0}
.map-side{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;min-height:0;padding:16px;border-right:1px solid var(--line)}
.map-note{margin:0;font:var(--t-body3);color:var(--muted)}
.map-list{min-height:0;margin:0 -8px;padding:0;overflow:auto;list-style:none}
.map-list li{display:grid;gap:2px;padding:10px 8px;border-radius:8px;cursor:pointer;transition:background .15s}
.map-list li:hover,.map-list li[aria-selected=true]{background:var(--surface-2)}
.map-list li[aria-selected=true] b{color:var(--accent)}
.map-list li b{font:var(--t-h6);color:var(--text)}
.map-list li span{font:var(--t-body3);color:var(--quiet)}
.map-list .map-empty{cursor:default;color:var(--quiet);font:var(--t-body2)}
.map-canvas{position:relative;min-height:0;background:var(--surface-2)}
.map-loading{display:grid;place-items:center;height:100%;padding:24px;text-align:center;font:var(--t-body2);color:var(--muted)}
.map-modal.is-closing{opacity:0;transition:opacity .18s}
.map-sheet{animation:cardIn .3s var(--ease)}
.map-search-field{position:relative;display:block}
.map-search-field svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--quiet);pointer-events:none}
.map-search{width:100%;height:44px;padding:0 12px 0 38px;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface);color:var(--text);font:var(--t-body2);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.map-search::-webkit-search-cancel-button{-webkit-appearance:none;width:14px;height:14px;background:var(--quiet);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;cursor:pointer}
:root[data-theme=dark] .map-search{background:var(--surface-2)}
.map-search:hover{border-color:var(--line-strong)}
.map-search:focus{border-color:var(--quiet);box-shadow:0 0 0 3px var(--accent-soft)}
.map-search::placeholder{color:var(--quiet)}
.map-canvas .maplibregl-map{position:absolute!important;inset:0;width:100%;height:100%}
.map-canvas .maplibregl-popup-content{padding:14px 16px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow-3)}
.map-canvas .maplibregl-popup-close-button{top:4px;right:6px;font-size:18px;color:var(--quiet)}
.map-canvas .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--surface)}
.map-canvas .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--surface)}
.map-canvas .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--surface)}
.map-canvas .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--surface)}
:root[data-theme=dark] .map-canvas .maplibregl-popup-content{background:var(--surface-2)}
:root[data-theme=dark] .map-canvas .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--surface-2)}
:root[data-theme=dark] .map-canvas .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--surface-2)}
.map-canvas .maplibregl-ctrl-group,.route-map .maplibregl-ctrl-group{border-radius:8px;box-shadow:var(--shadow-1)}
:root[data-theme=dark] .map-canvas .maplibregl-ctrl-group{background:var(--surface-3)}
:root[data-theme=dark] .map-canvas .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
:root[data-theme=dark] .map-canvas .maplibregl-ctrl-attrib{background:rgba(17,18,20,.8);color:var(--quiet)}
.map-popup{display:grid;gap:4px;padding-right:12px;font:var(--t-body3);color:var(--muted)}
.map-popup b{font:var(--t-h6);color:var(--text)}
.map-popup .button{min-height:36px;margin-top:8px;padding:0 14px}
.map-info{display:grid;gap:6px;margin:4px 0 0;max-height:260px;overflow:auto}
.map-info div{display:grid;gap:1px}
.map-info dt{font:var(--t-body3);color:var(--quiet)}
.map-info dd{margin:0;font:var(--t-body2);color:var(--text-2)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:16px;z-index:200;transform:translateX(-50%);max-width:min(480px,calc(100vw - 32px));padding:12px 18px;border-radius:10px;background:var(--text);color:var(--bg);box-shadow:var(--shadow-3);font:var(--t-body2);animation:toastIn .25s var(--ease)}
.toast.error{background:var(--error);color:#fff}

/* ---------- motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- responsive (Layout Grid breakpoints) ---------- */
@media (max-width:1200px){
  .calculator-layout{grid-template-columns:1fr;grid-template-areas:'head' 'form' 'results'}
  .results-column{position:static}
}
@media (max-width:960px){
  /* phones and small tablets: top bar with logo, bottom tab bar with labels */
  .topbar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px 0 16px;background:color-mix(in srgb,var(--bg) 85%,transparent);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .topbar-logo{display:block;height:28px;width:auto}
  :root[data-theme=dark] .topbar-logo.logo-light,:root:not([data-theme=dark]) .topbar-logo.logo-dark{display:none}
  .sidebar{inset:auto 0 0 0;width:auto;height:calc(64px + env(safe-area-inset-bottom));flex-direction:row;align-items:stretch;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .brand,.sidebar-carriers,.sidebar-bottom,.theme-switch{display:none}
  nav{display:flex;flex:1;gap:4px}
  .nav-item{flex:1;flex-direction:column;justify-content:center;gap:2px;min-height:0;padding:4px;font:var(--t-caps);letter-spacing:0;text-align:center}
  .nav-item svg{width:22px;height:22px}
  .nav-item.active{background:transparent;color:var(--accent)}
  .nav-item .count{display:none}
  .shell{margin-left:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .toast{top:64px;width:max-content;max-width:calc(100vw - 32px)}
  .stale-note{top:64px}
  main{padding:20px 16px 32px}
  .page-heading{margin-bottom:16px}
  .page-heading h1{font:var(--t-h3, 600 24px/32px var(--font-head))}
  .page-heading .button{min-height:40px;padding:0 14px}
  .v3-calc-bar,.settings-footer{bottom:calc(76px + env(safe-area-inset-bottom))}
  .v3-settings-layout{grid-template-columns:1fr}
  .v3-settings-side{position:static;margin-top:0}
  .v3-settings-nav{position:static;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;scrollbar-width:none}
  .history-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:16px}
  .history-what,.history-prices{grid-column:1/-1}
  .history-row .button{grid-row:1;grid-column:2}
}
@media (max-width:760px){
  .map-modal{padding:0}
  .map-sheet{width:100%;height:100%;border-radius:0}
  .map-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 38%}
  .map-side{order:2;border-right:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .panel,.settings-block{padding:16px}
  .section-heading{margin-bottom:12px}
  .section-heading h2{font:var(--t-h5)}
  .package-grid{grid-template-columns:1fr 1fr}
  .money-grid,.v3-origins-grid{grid-template-columns:1fr}
  .v3-route-grid{gap:12px}
  /* segmented controls stay side by side; the second line is dropped */
  .v3-seg button{padding:8px 10px}
  .v3-seg button span{display:none}
  .v3-card{padding:16px 16px 4px}
  .v3-notice,.v3-loading{padding-bottom:16px}
  .v3-price strong{font:var(--t-h4);font-weight:700}
  .v3-terms div{grid-template-columns:1fr;gap:0}
  .declared-summary li{grid-template-columns:1fr;gap:0}
  .order-goods,.declared-manual{max-width:none}
  .declared-mode{justify-self:stretch}
  .declared-mode button{flex:1}
  .v3-days{grid-template-columns:minmax(0,1fr) auto}
  .v3-days input{grid-column:1/-1;grid-row:2}
  .v3-quick-label{width:auto}
  .v3-quick-toggle{margin-left:0}
  .v3-banner{flex-wrap:wrap}
  .v3-calc-bar{padding:8px 8px 8px 16px;gap:12px}
  .v3-calc-bar .button{min-height:44px;padding:0 18px}
  .v3-calc-summary{display:none}
  .v3-calc-actions{flex:1}
  .v3-calc-actions .button.primary{flex:1}
  /* help cards sit above the tab bar instead of running off the screen edge */
  .v3-help-pop,.v3-help-icon .v3-help-pop{position:fixed;left:16px;right:16px;top:auto;bottom:calc(88px + env(safe-area-inset-bottom));width:auto;max-height:50vh;overflow:auto;z-index:60}
  .v3-help-pop.is-floating{max-height:50vh}
  .icon-button{width:40px;height:40px}
  /* comfortable touch targets */
  .v3-chips button,.v3-mini-seg button{min-height:36px}
  .help-toggle{width:36px;height:36px}
  .origin-row{grid-template-columns:20px 88px minmax(0,1fr) 40px}
  .page-footer{flex-direction:column;gap:4px}
  .settings-footer{flex-direction:column-reverse}
  .settings-footer .button{width:100%}
  .account-list div{grid-template-columns:100px 1fr}
  .sms-carriers{grid-column:1/-1;flex-direction:column}
  .sms-carrier{flex:1;justify-content:space-between}
}
#new-calculation{flex:none;white-space:nowrap}

/* ---------- route map (step 01) ---------- */
.route-map{position:relative;height:260px;margin:16px 0 4px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);animation:fadeUp .3s var(--ease)}
.route-map-canvas{position:absolute!important;inset:0;width:100%;height:100%}
.route-map.is-loading .route-map-canvas{opacity:.55;transition:opacity .2s}
.route-map-legend{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 140px);pointer-events:none}
.route-map-chip{display:inline-flex;align-items:center;max-width:100%;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow-1);font:var(--t-body3);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.route-map .maplibregl-ctrl-group{border-radius:8px;box-shadow:var(--shadow-1)}
.route-map .maplibregl-ctrl-attrib{font-size:10px}
:root[data-theme=dark] .route-map .maplibregl-ctrl-group{background:var(--surface-3)}
:root[data-theme=dark] .route-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
:root[data-theme=dark] .route-map .maplibregl-ctrl-attrib{background:rgba(17,18,20,.8);color:var(--quiet)}
:root[data-theme=dark] .route-map .maplibregl-ctrl-attrib a{color:var(--muted)}
@media (max-width:640px){.route-map{height:200px}}
/* Switching sections: the new one slides in softly. */
[data-view-panel]:not([hidden]){animation:fadeUp .35s var(--ease) both}
.v3-calc-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A field of the form has a problem: the bar is outlined red and nudges once; the reason is under the field. */
.v3-calc-bar.is-invalid{border-color:rgba(255,74,74,.4);box-shadow:0 0 0 3px rgba(255,74,74,.08),0 10px 30px rgba(255,74,74,.16),0 2px 8px rgba(255,74,74,.08);animation:nudge .4s var(--ease)}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
:root[data-theme=dark] .v3-calc-bar.is-invalid{border-color:rgba(255,122,122,.4);box-shadow:0 0 0 3px rgba(255,90,90,.1),0 10px 30px rgba(255,74,74,.18)}
/* ---------- settings: connection, segmented choices, reference settings ---------- */
.seg-field{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:9px;background:var(--surface-2);justify-self:start}
:root[data-theme=dark] .seg-field{background:var(--surface-3)}
.settings-block .seg-field label{display:block;margin:0;cursor:pointer}
.seg-field input{position:absolute;opacity:0;pointer-events:none}
.seg-field span{display:block;padding:6px 14px;border-radius:7px;font:var(--t-nav);color:var(--muted);white-space:nowrap;transition:background .2s,color .15s,box-shadow .2s}
.seg-field label:hover span{color:var(--text)}
.seg-field input:checked+span{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-1)}
:root[data-theme=dark] .seg-field input:checked+span{background:var(--surface-2)}
.seg-field input:focus-visible+span{outline:2px solid var(--accent-line);outline-offset:1px}
.settings-block h4.with-help{display:flex;align-items:center;gap:6px;margin:4px 0 0}
.connection-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.connection-row .settings-actions{margin:0}
.cred-form{display:grid;gap:16px}
.module-off{margin:0 0 16px;padding:12px 16px;border-radius:var(--radius-field);background:var(--warning-soft);color:var(--warning)}
/* settings profiles */
.v3-profiles-tab span{display:grid;gap:2px}
.v3-profiles-tab small{font:var(--t-body3);color:var(--quiet)}
.v3-profiles-tab small.is-same{color:var(--accent)}
.v3-profiles-tab small.is-diff{color:var(--info)}
.profile-state{display:flex;align-items:center;gap:8px;margin:0;font:var(--t-body2)}
.profile-state svg{width:16px;height:16px;flex:none}
.profile-state.is-same{color:var(--accent)}
.profile-state.is-diff{color:var(--info)}
.profile-diff{display:grid;gap:6px;margin:0;padding-left:20px;font:var(--t-body2);color:var(--text-2)}
.profile-diff li span{display:block}
.profile-diff-values{font:var(--t-body3);color:var(--quiet)}
.profile-diff-values b{font-weight:600;color:var(--text-2)}
.profile-list{display:grid;margin:0;padding:0;list-style:none}
.profile-row{display:grid;gap:8px;padding:14px 0}
.profile-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.icon-link{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:none;color:var(--quiet);cursor:pointer;transition:background .15s,color .15s}
.icon-link:hover{background:var(--surface-2);color:var(--accent)}
.icon-link svg{width:15px;height:15px}
.profile-rename{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.profile-rename input{width:240px;height:32px}
.profile-more{display:inline-flex;align-items:center;gap:4px;justify-self:start;padding:0;border:0;background:none;font:var(--t-body3);color:var(--muted);cursor:pointer}
.profile-more:hover{color:var(--accent)}
.profile-more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.profile-more[aria-expanded=true] svg{transform:rotate(180deg)}
.profile-details{padding:12px 14px;border-radius:var(--radius-field);background:var(--surface-2)}
:root[data-theme=dark] .profile-details{background:var(--surface-3)}
.profile-summary{display:grid;gap:8px;margin:0}
.profile-line{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;font:var(--t-body3)}
.profile-line dt{font-weight:700;color:var(--text-2)}
.profile-line dd{margin:0;color:var(--muted)}
.profile-line.is-diff dt,.profile-line.is-diff dd{color:var(--info)}
.profile-changes{margin:10px 0 0;font:var(--t-body3);color:var(--info)}
.profile-row+.profile-row{border-top:1px solid var(--line)}
.profile-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.profile-name b{font:var(--t-h6);color:var(--text)}
.profile-name small{flex-basis:100%;font:var(--t-body3);color:var(--quiet)}
.profile-badge,.profile-same{padding:2px 8px;border-radius:999px;font:var(--t-caps)}
.profile-badge{background:var(--accent-soft);color:var(--accent)}
.profile-same{background:var(--surface-2);color:var(--muted)}
.profile-actions{display:flex;flex-wrap:wrap;gap:6px}
.button.button-sm{min-height:32px;padding:0 12px;font:var(--t-label)}
.button.is-confirm{border-color:rgba(255,74,74,.45);color:var(--error)}
.profile-new{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.profile-new label{flex:1;min-width:220px}
.profile-new .button{min-height:44px}
[data-credentials]{display:grid;gap:12px}
[data-pricing-note]{display:grid;gap:12px}
#profiles-body{display:grid;gap:16px}
.package-header .select{flex:0 1 auto;width:auto;min-width:0;max-width:60%;margin:0 8px 0 auto}