/* ═══════════════════════════════════════════════════════════════════════════
   LabelPlug · "Obsidian" skin — dark premium / jewel aesthetic.
   Deep near-black canvas, a soft indigo→violet aurora, glassy cards and a
   jewel gradient accent. Display type: Bricolage Grotesque (headings, prices,
   balance, CTAs); body: Hanken Grotesk. Both self-hosted (no Google calls).

   IMPORTANT: this file keeps every class name the SPA (public/app.js) renders —
   .card .btn .rate .price .balance .seg .kv .pill .lbl .err .ok .mono … — so it
   is a pure re-skin; no JS changes. The base palette (bg/card/line/text/muted/
   accent/accent-d/accent2 + glow tints) is overridden per-instance by the
   <style id="brand-vars"> block server.js injects AFTER this file, so the look
   follows brand.json.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Bricolage-800.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Hanken-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Hanken-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Hanken-700.woff2') format('woff2')}

:root{
  --bg:#0a0b11; --card:#141621; --line:#242736; --text:#e9ecf6; --muted:#98a0ba;
  --accent:#a855f7; --accent-d:#8b3fd8; --accent2:#22d3ee; --danger:#ff5d7a;
  --r:18px;
  /* render native controls (the <select> popup, scrollbars, date pickers) in
     dark mode so the OS dropdown isn't a light box on the dark theme. */
  color-scheme:dark;
  --disp:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  /* accent-derived glow tints — brand-vars overrides these per instance. */
  --accent-glow-45:rgba(168,85,247,.45); --accent-glow-18:rgba(168,85,247,.18);
  --accent-glow-22:rgba(168,85,247,.22); --accent-glow-50:rgba(168,85,247,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
}

/* ── Obsidian backdrop: fixed jewel aurora + faint grain behind everything.
   Markup lives in index.html (<div class="obg">). ─────────────────────────── */
.obg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.obg .aur{position:absolute;top:-170px;left:6%;width:520px;height:420px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--accent),var(--accent2),#5ce0ff,var(--accent));
  filter:blur(92px);opacity:.20;animation:obfloat 20s ease-in-out infinite}
.obg .aur.a2{top:auto;bottom:-210px;left:auto;right:-130px;width:440px;height:440px;
  background:radial-gradient(circle,var(--accent2),transparent 66%);opacity:.16;filter:blur(84px);animation-duration:26s}
.obg .grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) .6px,transparent .6px);background-size:34px 34px;opacity:.045}
@keyframes obfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,22px)}}

/* ── header ─────────────────────────────────────────────────────────────── */
#hdr{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,11,17,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;
  font-size:20px;letter-spacing:-.02em}
.logo-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,var(--accent),var(--accent2));
  box-shadow:0 0 18px var(--accent-glow-45);flex:none;position:relative}
.logo-mark::after{content:"";position:absolute;inset:8px 6px auto 6px;height:3px;border-radius:2px;background:rgba(255,255,255,.9)}
.logo-img{width:34px;height:34px;object-fit:contain;flex:none;
  filter:drop-shadow(0 0 7px var(--accent-glow-45))}
.logo-wide{height:30px;width:auto;max-width:190px;object-fit:contain;flex:none;filter:drop-shadow(0 0 10px var(--accent-glow-22))}
/* Hero wordmark under the central logo (crisp live text). */
.hero-word{font-family:var(--disp);font-weight:800;font-size:33px;letter-spacing:-.03em;text-align:center;margin:0 0 18px;color:var(--accent)}
.hero-word b{font-weight:800;color:var(--accent2);-webkit-text-fill-color:var(--accent2)}
.logo-text{line-height:1;color:var(--accent)}
.logo-text b{font-weight:800;color:var(--accent2);-webkit-text-fill-color:var(--accent2)}
.hero-logo{display:block;width:112px;height:112px;border-radius:22px;object-fit:cover;margin:8px auto 18px;
  box-shadow:0 0 44px var(--accent-glow-22),0 20px 50px -18px #000}

#app{position:relative;z-index:1;padding:16px;max-width:620px;margin:0 auto}
.center{text-align:center}.muted{color:var(--muted)}

/* ── headings ───────────────────────────────────────────────────────────── */
h2{font-family:var(--disp);font-weight:800;font-size:29px;letter-spacing:-.03em;
  margin:4px 0 16px;
  background:linear-gradient(94deg,#fff 28%,var(--accent) 72%,var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── cards ──────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;position:relative;
  box-shadow:0 20px 44px -30px rgba(0,0,0,.8)}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 40%);opacity:.7}
.card>*{position:relative}
.card.center .balance{margin-top:2px}

/* contact pills (home) */
.contact-card{padding:2px 0 8px}
.contact-card .ct-title{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-bottom:10px}
.contact-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cpill{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--line);border-radius:11px;
  background:rgba(255,255,255,.03);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,transform .1s,box-shadow .15s}
.cpill:hover{border-color:var(--accent)}
.cpill:active{border-color:var(--accent);transform:scale(.97);box-shadow:0 0 0 1px var(--accent-glow-45)}

/* balance — big premium number */
.balance{font-family:var(--disp);font-weight:800;font-size:47px;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(96deg,#fff,var(--accent) 66%,var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:block;width:100%;border:none;border-radius:15px;padding:15px;cursor:pointer;
  font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:-.01em;margin-top:11px}
.btn-primary{color:#080a12;background:linear-gradient(96deg,var(--accent),var(--accent2));position:relative;overflow:hidden;
  box-shadow:0 14px 36px -10px var(--accent-glow-50),0 0 0 1px rgba(255,255,255,.06) inset}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:osheen 3.2s ease-in-out infinite}
.btn-primary:active{filter:brightness(.95)}
.btn-ghost{background:rgba(255,255,255,.045);color:var(--text);border:1px solid var(--line)}
.btn-ghost:active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow-45)}
.btn:disabled{opacity:.5}
@keyframes osheen{0%,60%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.btn-primary::after{animation:none;display:none}.obg .aur{animation:none}}

/* ── form controls ──────────────────────────────────────────────────────── */
label{display:block;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--muted);margin:12px 0 4px;letter-spacing:.02em}
input,select,textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;padding:12px;
  color:var(--text);font-size:16px;font-family:'Hanken Grotesk',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow-22)}
textarea{resize:vertical;min-height:118px;line-height:1.5}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}
/* native <select> dropdown popup — dark to match the Obsidian theme */
select option{background:var(--card);color:var(--text)}
select option:checked{background:var(--accent-d)}

/* autocomplete suggestions + selected line */
.sugg{padding:11px 12px;border:1px solid var(--line);border-top:none;background:rgba(0,0,0,.25);cursor:pointer;font-size:14px}
.sugg:first-child{border-top:1px solid var(--line);border-radius:8px 8px 0 0}
.sugg:last-child{border-radius:0 0 8px 8px}
.sugg:active{background:var(--card)}
/* Dozens of localities can share one postal code (PL 87-600 has 49), so the
   list scrolls instead of being cut short. overscroll-behavior keeps the drag
   inside the box — otherwise Telegram reads it as swipe-to-close the app. */
.sugglist{max-height:320px;max-height:min(320px,52dvh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sugglist::-webkit-scrollbar{width:7px}
.sugglist::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.sugglist::-webkit-scrollbar-track{background:transparent}
.sel{font-size:13px;margin-top:6px;color:var(--accent);min-height:16px;font-weight:700}

/* segmented control (crypto picker, tabs) */
.seg{display:flex;gap:6px;margin-top:6px}
.seg button{flex:1;padding:11px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;cursor:pointer}
.seg button.on{color:#080a12;background:linear-gradient(150deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 0 20px -4px var(--accent-glow-50)}

/* ── rate rows (the money list) ─────────────────────────────────────────── */
.rate{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 12px 16px;
  border:1px solid var(--line);border-radius:15px;margin-bottom:10px;cursor:pointer;background:var(--card);
  position:relative;overflow:hidden;transition:border-color .15s,transform .08s}
.rate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--accent2))}
.rate:first-of-type{border-color:rgba(122,162,255,.4)}
.rate:first-of-type::before{background:linear-gradient(var(--accent),#5ce0ff)}
.rate:active{border-color:var(--accent);transform:scale(.995)}
.rate .carrier{font-weight:700;font-size:15px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.rate .name{font-size:12.5px;margin-top:1px}
.rate .price{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;white-space:nowrap;
  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* delivery-type badges */
.pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill-home{background:rgba(122,162,255,.12);border-color:rgba(122,162,255,.34);color:#bcd0ff}
.pill-point{background:rgba(185,140,255,.14);border-color:rgba(185,140,255,.4);color:#d3bcff}
.pill-locker{background:rgba(92,224,255,.12);border-color:rgba(92,224,255,.36);color:#9fe8ff}

/* pickup-point picker: sticky search + capped scroll box */
.ptsearch{margin-bottom:11px}
.ptscroll{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:3px}
.ptscroll::-webkit-scrollbar{width:7px}
.ptscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.ptscroll::-webkit-scrollbar-track{background:transparent}

/* label-history / locked-location / generic bordered row */
.lbl{padding:13px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--card)}

/* key/value rows, big figures, mono */
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border:none}
.big{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;font-size:13px}
small{color:var(--muted);font-weight:600;letter-spacing:.01em}

/* status notices */
.err{background:rgba(255,93,122,.12);border:1px solid rgba(255,93,122,.34);color:#ffa3b3;padding:11px 13px;border-radius:12px;margin:10px 0;font-size:14px}
.ok{background:rgba(122,162,255,.10);border:1px solid rgba(122,162,255,.32);color:#bcd0ff;padding:11px 13px;border-radius:12px;margin:10px 0}

/* spinner */
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── language selector ──────────────────────────────────────────────────── */
#lang{margin-left:auto;position:relative}
#langbtn{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:10px;padding:5px 8px;cursor:pointer;font-family:inherit}
#langbtn img{width:24px;height:16px;object-fit:cover;border-radius:3px;display:block}
#langbtn .chev{color:var(--muted);font-size:11px;line-height:1}
#langdd{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;min-width:158px;box-shadow:0 12px 32px rgba(0,0,0,.6);z-index:30}
.langopt{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;cursor:pointer;font-weight:700}
.langopt:active{background:rgba(255,255,255,.05)}
.langopt img{width:24px;height:16px;object-fit:cover;border-radius:3px}

/* ── rate-search loading overlay (obsidian glass) ───────────────────────── */
.search-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,17,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.search-loader.open{opacity:1;visibility:visible;pointer-events:auto}
.sl-card{width:min(90vw,380px);padding:2rem 1.8rem 1.6rem;text-align:center;border-radius:20px;
  background:rgba(20,22,33,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 64px rgba(0,0,0,.6);position:relative;transform:translateY(8px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.search-loader.open .sl-card{transform:translateY(0) scale(1)}
.sl-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8}
.sl-icon{position:relative;width:56px;height:56px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.sl-logo{width:34px;height:34px;border-radius:9px;object-fit:contain;display:block;animation:sl-bob 1.6s ease-in-out infinite;-webkit-user-select:none;user-select:none}
.sl-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-glow-22);border-top-color:var(--accent);animation:sp .9s linear infinite}
.sl-title{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--text);margin-bottom:5px}
.sl-msg{font-size:13.5px;color:var(--muted);min-height:1.2em;margin-bottom:16px;transition:opacity .22s ease;font-family:ui-monospace,Menlo,Consolas,monospace}
.sl-track{height:6px;border-radius:100px;overflow:hidden;background:rgba(255,255,255,.08);margin-bottom:8px}
.sl-bar{height:100%;width:0%;border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--accent-glow-50);transition:width .18s ease-out}
.sl-pct{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em}
@keyframes sl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.sl-logo,.sl-ring{animation:none}.sl-card{transition:none;transform:none}.sl-bar{transition:none}.search-loader{transition:opacity .1s linear}}

/* ─── Customer surveys (.sv-*) ───────────────────────────────────────────────
   The Home prompt card + the one-question-per-screen sheet. Deliberately
   HEX-FREE: every colour is one of the nine :root vars every fork declares, or
   a neutral rgba(). Inset surfaces use rgba(0,0,0,.25) rather than a literal so
   they darken whatever --card the fork ships instead of painting this brand's
   palette onto a white-label. Buttons, glyphs and rings all key off --accent,
   so a fork gets its own colour for free. */
.sv-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:14px;margin-bottom:14px;box-shadow:0 0 18px var(--accent-glow-18,transparent)}
.sv-eyebrow{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.sv-c-t{font-weight:700;font-size:15px;line-height:1.35}
.sv-c-m{font-size:12.5px;color:var(--muted);margin-top:3px}
.sv-c-a{display:flex;gap:8px;margin-top:12px}
.sv-c-a .btn{flex:1;margin-top:0;padding:12px;font-size:14px}
.sv-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sv-prog{flex:1;height:6px;border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden}
.sv-bar{height:100%;width:0;border-radius:99px;background:var(--accent2,var(--accent));transition:width .25s ease}
.sv-step{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-q{font-size:18px;font-weight:700;line-height:1.35;margin-bottom:6px}
.sv-help,.sv-intro{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px;white-space:pre-line}
.sv-opts{display:flex;flex-direction:column;gap:8px}
/* Real <button> rows: keyboard-reachable, >=44px tall, state in aria-pressed
   and mirrored by a TEXT glyph (Tor "Safest" blocks SVG). */
.sv-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px 14px;text-align:left;
  background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;color:var(--text);
  font-family:inherit;font-size:15px;line-height:1.35;cursor:pointer}
.sv-box{flex:none;width:20px;color:var(--muted);font-size:16px;line-height:1}
.sv-opt[aria-pressed="true"]{border-color:var(--accent)}
.sv-opt[aria-pressed="true"] .sv-box{color:var(--accent)}
.sv-opt:disabled{opacity:.45;cursor:default}
.sv-stars{display:flex;gap:4px;justify-content:center;margin:4px 0 2px}
.sv-star{min-width:44px;min-height:44px;padding:4px;background:none;border:none;border-radius:10px;
  color:var(--muted);font-family:inherit;font-size:26px;line-height:1;cursor:pointer}
.sv-star.on{color:var(--accent)}
.sv-ends{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted)}
/* 11 pills: two rows of 6+5 on a 360px phone, one row once there is room for
   each pill to stay a comfortable target. */
.sv-nps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:4px 0 6px}
@media (min-width:560px){.sv-nps{grid-template-columns:repeat(11,1fr)}}
.sv-pill{min-height:44px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.sv-pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.sv-ex{margin-top:12px}
.sv-ex-p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:6px}
.sv-cnt{font-size:11.5px;color:var(--muted);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
.sv-cnt.hot{color:var(--danger)}
/* The Telegram keyboard eats half the viewport, so the forward control rides
   the bottom edge instead of scrolling away under it. */
.sv-foot{position:sticky;bottom:0;z-index:2;padding:10px 0 4px;background:var(--bg)}
.sv-foot .btn{margin-top:0}
.sv-foot:empty{display:none}
.sv-thx{text-align:center;padding:26px 6px}
.sv-thx-i{font-size:34px;line-height:1;margin-bottom:10px;color:var(--accent)}
.sv-thx-t{font-size:19px;font-weight:800;margin-bottom:6px}
.sv-opt:focus-visible,.sv-pill:focus-visible,.sv-star:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sv-bar{transition:none}}

/* The prompt as a floating panel. Anchored high rather than dead-centre: on a
   phone the thumb sits low and a centred panel lands under it, and a card
   further down the page is simply never seen — MRTRACKING stacks a hero logo,
   six contact buttons and the balance above it, so the inline card fell below
   the fold. This is NOT a modal: the backdrop dismisses on tap, the page keeps
   scrolling behind it, and the inline card stays put so the survey is still
   findable afterwards. z-index sits BELOW .smsg (9500) so a support message
   always wins if the two ever coincide. */
.sv-pop{position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-start;
  justify-content:center; padding:16px; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility .18s ease}
.sv-pop.on{opacity:1; visibility:visible; pointer-events:auto}
.sv-pop-in{position:relative; width:100%; max-width:380px; margin-top:13vh;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:16px 16px 14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 18px var(--accent-glow-18,transparent);
  transform:translateY(-10px); transition:transform .18s ease}
.sv-pop.on .sv-pop-in{transform:none}
.sv-pop-x{position:absolute; top:8px; right:10px; background:none; border:0; color:var(--muted);
  font-size:20px; line-height:1; padding:6px 8px; cursor:pointer; font-family:inherit}
.sv-pop-x:hover{color:var(--text)}
.sv-pop-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sv-pop,.sv-pop-in{transition:none}}

/* ═══ SIGNATURE RATE ROW — InPost locker→locker ══════════════════════════════
   The one product no competitor sells. A near-black card inside a 1.5px bezel
   with two speculars circulating in opposite directions (8.5s / 13s), tinted to
   the labelplug palette. Carrier line carries the "InPost by <Vinted>" lockup.
   Pure CSS, no JS. Mirror of the upstream .rate-card--signature, adapted from
   .rate-card to this fork's .rate class. Hook lives in public/app.js
   (ratesScreen): a rate is signature when the API flags it as such
   (the neutral `signature` boolean). Never a pack (resellers have no pack tier).
   ═══════════════════════════════════════════════════════════════════════════ */
.rate--signature{position:relative;isolation:isolate;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(203,213,225,0.05) 0%,rgba(168,85,247,0.03) 55%,rgba(34,211,238,0) 100%),#090a10;
  transition:transform .15s ease,box-shadow .2s ease}
.rate--signature::before,.rate--signature::after{content:'';position:absolute;inset:-1px;border-radius:15px;padding:1.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .25s ease}
.rate--signature::before{z-index:1;background-image:repeating-linear-gradient(100deg,#242736 0px,#33304d 16px,#22d3ee 58px,#cbd5e1 100px,#efe6ff 122px,#a855f7 142px,#a855f7 168px,#ddd3ff 190px,#7d3fc0 220px,#22d3ee 252px,#3aa8c8 296px,#2a2740 340px,#33304d 404px,#242736 480px);animation:sig-bezel 8.5s linear infinite}
.rate--signature::after{z-index:2;opacity:.9;background-image:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0) 360px,rgba(233,224,255,0.30) 412px,rgba(245,240,255,0.95) 438px,rgba(168,85,247,0.55) 466px,rgba(34,211,238,0.30) 498px,rgba(255,255,255,0) 556px,rgba(255,255,255,0) 620px);animation:sig-comet 13s linear infinite}
@keyframes sig-bezel{from{background-position:0 0}to{background-position:487px 0}}
@keyframes sig-comet{from{background-position:0 0}to{background-position:-630px 0}}
@media (max-width:560px){
  .rate--signature::before{background-image:repeating-linear-gradient(100deg,#242736 0px,#33304d 10px,#22d3ee 37px,#cbd5e1 64px,#efe6ff 78px,#a855f7 91px,#a855f7 107px,#ddd3ff 121px,#7d3fc0 140px,#22d3ee 161px,#3aa8c8 189px,#2a2740 217px,#33304d 258px,#242736 306px);animation-name:sig-bezel-sm}
  .rate--signature::after{background-image:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0) 230px,rgba(233,224,255,0.30) 263px,rgba(245,240,255,0.95) 280px,rgba(168,85,247,0.55) 297px,rgba(34,211,238,0.30) 318px,rgba(255,255,255,0) 355px,rgba(255,255,255,0) 396px);animation-name:sig-comet-sm}
}
@keyframes sig-bezel-sm{from{background-position:0 0}to{background-position:311px 0}}
@keyframes sig-comet-sm{from{background-position:0 0}to{background-position:-402px 0}}
.rate--signature:nth-of-type(even)::before{animation-delay:-2.1s}
.rate--signature:nth-of-type(even)::after{animation-delay:-3.3s}
.rate--signature:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,85,247,0.12)}
.rate--signature:hover::after{opacity:1}
/* Co-brand "InPost by <Vinted>" on the carrier line (V5). */
.rate--signature .cb-carrier{display:inline-flex;align-items:center;gap:.28rem;margin-left:.4rem;vertical-align:baseline}
.rate--signature .cb-carrier .cb-by{font-size:11px;font-weight:400;color:var(--muted)}
.rate--signature .cb-carrier img{height:11px;width:auto;display:block;margin-bottom:-1px;flex-shrink:0}
@media (prefers-reduced-motion:reduce){
  .rate--signature::before,.rate--signature::after{animation:none;transition:none}
  .rate--signature::before{background-position:0 0}
  .rate--signature::after{background-position:0 0}
}
/* LabelPlug-only: the bezel replaces the 4px left accent bar. */
.rate--signature{overflow:visible}
.rate--signature::before{width:auto;background-color:transparent}
.rate--signature .cb-carrier{margin-left:0}

/* ── Caution "kraft" row ─────────────────────────────────────────────────────
   The cheapest rates on the board, from a source whose issuing genuinely fails
   more often than the rest of the catalogue. upstream flags the row with a
   NEUTRAL `caution` boolean (never the provider key — the mini-app token hides
   it), exactly like `signature`.

   The DELIBERATE INVERSE of .rate--signature: not a dimmer highlight but a
   different MATERIAL. Signature is machined metal (an animated bezel); this is
   cardboard — matte brown plane, 3% diagonal fibre, sepia frame, no motion, no
   brand accent. A dimmer bezel would read as "signature, but broken"; a different
   material reads as a different thing, which is the message: cheap, honest, plain.
   Brand-agnostic on purpose, so this block is identical in every fork. Dark-only,
   like the rest of the storefront. ── */
.rate--caution{
  border-color:#4a3a26;
  background:
    repeating-linear-gradient(46deg,rgba(201,168,119,.030) 0 1.5px,transparent 1.5px 5px),
    linear-gradient(180deg,rgba(201,168,119,.055) 0%,rgba(201,168,119,.012) 100%),
    #16120c;
}
.rate--caution:active{border-color:#7a613e}
/* Price → flat champagne. `background:none` + text-fill reset is REQUIRED: some
   forks paint the price as a brand gradient clipped to the text, and a bare
   `color` would be overridden by `-webkit-text-fill-color:transparent`. Flat,
   never the pack/brand gradient — a premium-looking price fights the message. */
.rate--caution .price{background:none;-webkit-text-fill-color:#d9b877;color:#d9b877}
/* The advisory as a FOOTNOTE not a chip: the refund promise is the half that
   turns "the shop is broken" into "I picked the cheap one", and two words cannot
   carry it. The one full sentence in the rate list, on the row with most cause. */
.rate-caution-note{margin-top:6px;font-size:12px;line-height:1.45;color:#b99a6b;display:flex;gap:5px;align-items:flex-start}
.rate-caution-note .rcn-mark{flex:none;opacity:.85}
/* Blue clock — a measured ETA ("~10 min") or the generic deferred-issuing chip.
   Same .pill family as the delivery badges (shape inherited per fork); explicit
   margin because some forks' .pill carries none. The storefront rendered NEITHER
   timing chip before, so locker/card-checkout rates showed no ETA at all. */
.pill-clock{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.42);color:#93c5fd;margin-left:6px}

/* ── Low-reliability tariff filter (Settings › Shipping) ─────────────────────
   The card wears the same kraft material as the rows it governs — matte brown
   plane, 3% diagonal fibre, sepia frame — so the switch reads as belonging to
   THOSE rows and not to the shipping defaults under it. Brand-agnostic on
   purpose, exactly like .rate--caution: this block is identical in every fork. */
.card--kraft{
  border-color:#4a3a26;
  background:
    repeating-linear-gradient(46deg,rgba(201,168,119,.030) 0 1.5px,transparent 1.5px 5px),
    linear-gradient(180deg,rgba(201,168,119,.055) 0%,rgba(201,168,119,.012) 100%),
    #16120c;
}
.kr-row{display:flex;align-items:center;gap:12px}
.kr-row .kr-txt{flex:1;min-width:0}
.kr-row .kr-txt b{display:block;font-size:14.5px;color:#e8d9b8}
.kr-row .pill{margin:4px 0 0;display:inline-block;background:#0d0b07;border-color:#4a3a26;color:#b99a6b}
.kr-help{font-size:12.5px;line-height:1.45;margin-top:8px;color:#b99a6b}
.kr-saved{font-size:12px;font-weight:700;color:#d9b877;margin-top:9px;min-height:15px}
.kr-saved.err{color:#fca5a5}
/* The switch — the one component the storefront did not have. Pure CSS (no
   image, nothing to load) on a <button role="switch">, so it is keyboard- and
   screen-reader-operable and the state lives in aria-checked, not in a class. */
.switch{flex:none;width:46px;height:27px;border-radius:99px;cursor:pointer;border:1px solid #4a3a26;background:#0d0b07;padding:0;position:relative;transition:background .18s,border-color .18s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#6b5a3c;transition:transform .18s,background .18s}
.switch[aria-checked="true"]{background:rgba(217,184,119,.20);border-color:#d9b877}
.switch[aria-checked="true"]::after{transform:translateX(19px);background:#d9b877}
.switch:disabled{opacity:.55;cursor:default}
/* "N hidden · Show" footer under a filtered rate list, and the same block as
   the whole-screen message when EVERY rate on the route was filtered out. */
.rate-hidden-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #4a3a26;border-radius:12px;color:#b99a6b;font-size:12.5px;background:rgba(201,168,119,.03)}
.rate-hidden-line b{color:#d9b877;cursor:pointer;font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.switch,.switch::after{transition:none}}

/* ---------- support-message popup ---------- */
/* Blocking dialog: a one-shot support message, or an unread ticket reply. Sits
   at z-index 9500, above the search loader, and outside #app so a repaint can't
   wipe it. Tapping the button is what POSTs the read receipt. */
.smsg{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.smsg.open{opacity:1; visibility:visible; pointer-events:auto}
.smsg-card{
  width:min(92vw,420px); padding:18px;
  border-radius:16px; background:var(--card);
  border:1px solid var(--accent-glow-45);
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 24px var(--accent-glow-18);
}
.smsg-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.smsg-head img{width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none}
.smsg-brand{font-weight:800; letter-spacing:.6px; font-size:14px}
.smsg-brand b{color:var(--accent)}
.smsg-title{font-size:12.5px; color:var(--muted); font-weight:700}
.smsg-date{font-size:11px; color:var(--muted); margin-bottom:8px}
.smsg-body{
  white-space:pre-wrap; overflow-wrap:anywhere; font-size:14.5px; line-height:1.5;
  max-height:48vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px;
}

/* ---------- support tickets ---------- */
.tk-badge{display:inline-block;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:2px 6px;border-radius:999px;margin-left:6px;vertical-align:middle}
.tk-inc{display:block;text-decoration:none;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-top:8px}
.tk-inc:active{border-color:var(--accent)}
.tk-inc-t{font-weight:700;font-size:13.5px}
.tk-inc-s{font-size:12.5px;margin-top:3px}
.tk-row{display:block;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:10px}
.tk-row:active{border-color:var(--accent)}
.tk-chat{display:flex;flex-direction:column;gap:10px}
.tk-msg{max-width:88%;align-self:flex-start}
.tk-msg.me{align-self:flex-end;text-align:right}
.tk-from{font-size:11.5px;font-weight:700;margin-bottom:3px}
.tk-bubble{display:inline-block;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.tk-msg.me .tk-bubble{background:var(--accent-glow-18);border-color:var(--accent-glow-45)}
.tk-when{font-size:10.5px;margin-top:3px}

/* ── account + log out, in the app bar ──────────────────────────────────────
   Where you are signed in, and how to leave, on every screen. Logging out used
   to be buried at the bottom of the Account screen: three taps and a scroll
   from anywhere else in the app, and a customer arriving in a browser never
   found it at all. Painted by renderAcct() in app.js; empty markup is the
   correct signed-out state, which is why #acct collapses when it is empty. */
#acct{display:flex;align-items:center;gap:8px;margin-left:8px}
#acct:empty{display:none}
.acctbtn{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:700;color:var(--muted);padding:8px 12px;line-height:1;
  transition:border-color .15s,color .15s}
.acctbtn:hover,.acctbtn.on{border-color:var(--accent);color:var(--text)}
/* 14ch fits the usernames people actually pick; past that it truncates rather
   than pushing the door off the bar. */
.acctbtn .who{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbtn .whoin{display:none;font-weight:800}
/* Under 560px the name goes and its initial stands in: at that width the brand,
   a language flag, a whole username and a door do not fit on one bar. Swapped
   rather than dropped, because an empty button beside a door says nothing about
   whose account it is. */
@media (max-width:559px){
  .acctbtn .who{display:none}
  .acctbtn .whoin{display:inline}
  .acctbtn{padding:8px 10px}
}
/* A door, drawn in CSS: a frame, and the leaf leaving it. NOT an SVG (Tor's
   "Safest" refuses inline SVG and the icon would vanish with no error and no
   gap) and not an emoji, which is a different picture on every platform. */
.exitbtn{display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  padding:9px 10px;line-height:0;color:var(--muted);transition:border-color .15s,color .15s}
.exitbtn:hover{border-color:var(--accent);color:var(--text)}
.exitbtn i{display:inline-block;position:relative;width:13px;height:14px;
  border:2px solid currentColor;border-right:0}
.exitbtn i::before{content:"";position:absolute;top:50%;right:-8px;width:8px;height:2px;
  background:currentColor;transform:translateY(-1px)}
.exitbtn i::after{content:"";position:absolute;top:50%;right:-8px;width:5px;height:5px;
  border:2px solid currentColor;border-left:0;border-bottom:0;transform:translateY(-3.5px) rotate(45deg)}

/* On /web the header logo is a real <a> back to the public homepage. It has to
   keep reading as the brand, not as a link. */
.logo{text-decoration:none;color:inherit}

/* The six home actions live in a wrapper so the browser view can lay them out
   as a bento (public/desktop.css). display:contents keeps the Mini App exactly
   as it was: the buttons stay direct flow children and stack full width. */
.dgrid{display:contents}

/* The "why is this carrier here three times?" note above the rate list.
   Amber like every other advisory in the app. The BODY takes the normal text
   colour on purpose: a whole paragraph of amber-on-amber is unreadable. */
.dupq{margin-bottom:12px;padding:9px 12px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.32);border-radius:12px;font-size:12.5px;line-height:1.5}
.dupq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:700;color:#fbbf24;user-select:none}
.dupq summary::-webkit-details-marker{display:none}
.dupq summary::after{content:'\25BE';margin-left:auto;transition:transform .2s}
.dupq[open] summary::after{transform:rotate(180deg)}
.dupq-b{margin-top:8px;color:var(--text);opacity:.85}

/* ============================================================
   ORDER REVIEW — the screen that spends the money
   ============================================================
   The last screen before the charge: what is being bought, to
   whom, and what was declared, with the surcharge warning as the
   top band of the very card that carries the buy button. Nothing
   can come between the warning and the button.

   Written once and shared by all six forks: it is built only out
   of the brand tokens every skin defines (--card --line --text
   --muted --accent --danger --r), so each shop renders it in its
   own colours with no per-fork edit.

   Icons are CSS geometry, never emoji: the arrow and the warning
   triangle have to survive a stripped-down browser.
   Prefix: .orv-
   ------------------------------------------------------------ */
.orv-card, .orv-pay {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.orv-card { margin-bottom: 10px; }

/* Route strip: the corridor being bought, in the shop's mono face */
.orv-route {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .02em; color: var(--muted);
}
.orv-route b { color: var(--text); font-weight: 700; }
.orv-arrow { flex: none; position: relative; width: 22px; height: 8px; }
.orv-arrow::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 1.5px;
  background: var(--accent); border-radius: 1px;
}
.orv-arrow::after {
  content: ""; position: absolute; right: 2px; top: .5px; width: 6px; height: 6px;
  border: solid var(--accent); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
}

/* What is being bought */
.orv-svc { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.orv-svc + .orv-sec, .orv-sec + .orv-sec { border-top: 1px solid var(--line); }
/* White plate so dark wordmarks (SEUR, Correos, DHL) read on a dark skin */
.orv-logo {
  flex: none; width: 42px; height: 30px; display: flex; align-items: center;
  justify-content: center; background: rgba(255, 255, 255, .92);
  border-radius: 7px; padding: 3px;
}
.orv-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.orv-svc-t { min-width: 0; flex: 1 }
.orv-svc-n { font-weight: 700; font-size: 14px; line-height: 1.3; }
.orv-svc-s { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 1px; }

/* Sender / recipient */
.orv-sec { padding: 12px 14px; }
.orv-lab {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.orv-nm { font-weight: 700; font-size: 14px; line-height: 1.35; word-break: break-word; }
.orv-line { color: var(--text); font-size: 13px; line-height: 1.5; word-break: break-word; }
.orv-dim { color: var(--muted); font-size: 12.5px; line-height: 1.5; word-break: break-word; }
/* The pickup point, by the name the recipient will look for */
.orv-point { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.orv-point b { color: var(--text); }

/* Declared facts — weight and dimensions first: they are what the
   warning below says the carrier re-measures on its own scale. */
.orv-facts { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 14px; border-top: 1px solid var(--line); }
.orv-fact {
  min-width: 0; padding: 5px 9px; border-radius: 9px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.orv-fact i {
  display: block; font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1px;
}
.orv-fact b { font-size: 13px; font-weight: 600; color: var(--text); }

/* ---------- the pay card ----------
   Warning band, then the money and the two buttons. */
.orv-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(245, 158, 11, .10);
  border-bottom: 1px solid rgba(245, 158, 11, .38);
  text-align: left;
}
/* Triangle + bar, drawn with borders — not an emoji */
.orv-warn-ic { flex: none; width: 20px; height: 18px; position: relative; margin-top: 1px; }
.orv-warn-ic::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 17px solid #fbbf24;
}
.orv-warn-ic::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 8px;
  margin-left: -1px; background: var(--card); border-radius: 1px;
}
.orv-warn-t { min-width: 0 }
.orv-warn-h { font-size: 13px; font-weight: 700; color: #fcd34d; line-height: 1.35; margin-bottom: 2px; }
.orv-warn-p { font-size: 12.5px; line-height: 1.5; color: var(--text); margin: 0; }

.orv-money { padding: 12px 14px 4px; }
.orv-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.orv-tot-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.orv-tot-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.orv-bal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.orv-bal span { font-size: 12.5px; color: var(--muted); }
.orv-bal b { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.orv-acts { padding: 8px 14px 14px; }
.orv-acts .btn { margin-top: 8px; }