/* U Get Space — vanilla CSS, mobile-first. Brand green #1B7F4B, amber #F2A341. */

/* Route transit glyph (transit.js): a cross-border plane that gently flies, and a
   same-country car whose wheels spin. Each wheel <g> rotates around its own centre
   (transform-box:fill-box). Disabled under reduce-motion. */
@keyframes tg-fly { from { transform: translateY(-1.2px); } to { transform: translateY(1.2px); } }
@keyframes tg-spin { to { transform: rotate(360deg); } }
.tg-plane { animation: tg-fly 1.5s ease-in-out infinite alternate; }
.tg-car .tg-wheel { transform-box: fill-box; transform-origin: center; animation: tg-spin .65s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tg-plane, .tg-car .tg-wheel { animation: none; } }

/* Animated ellipsis trailing the "…put to work" tagline — a slow, staggered opacity pulse. The dots
   inherit the tagline's gold colour. Reduced-motion → static, fully-opaque dots. */
@keyframes tgDot { 0%, 70%, 100% { opacity: .28; } 35% { opacity: 1; } }
.tg-dots .tg-dot { animation: tgDot 1.5s ease-in-out infinite both; font-size: 1.15em; } /* 15% larger than the tagline */
.tg-dots .tg-dot:nth-child(2) { animation-delay: .22s; }
.tg-dots .tg-dot:nth-child(3) { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) { .tg-dots .tg-dot { animation: none; opacity: 1; } }

/* Global UI scale. The whole web app renders at this zoom on BODY (html-level zoom does not
   widen the layout viewport in Chromium); vh/vw do NOT scale under CSS zoom, so every rule that
   means "fill the viewport" divides by var(--uiz), kept in lockstep with the LITERAL below
   (var() does not substitute into `zoom`).
   HISTORY: 0.75 → 0.825 (a1-a7.jpg) → 1.03125 (0.825 x 1.25) → 0.928125 = 1.03125 x 0.9 — the
   user's 90%-zoom view (11.jpg) over the 1.03125 default IS the new intended 100% (across all web
   pages EXCEPT the admin console). */
body { zoom: 0.928125; }
/* The ADMIN CONSOLE is deliberately EXCLUDED from the scale change (per request): counter-zoom it
   back to its unchanged 0.825 effective scale (0.928125 x 0.888889 = 0.825) and give it a matching
   --uiz so its own calc(100vh / var(--uiz)) viewport math stays correct under the nested zoom.
   Everything scoped under .admin-shell (console + the admin passkey gate) rides this. */
.admin-shell { zoom: 0.888889; --uiz: 0.825; }

:root {
  --uiz: 0.928125;
  --green: #1B7F4B;
  --green-dark: #145e37;
  --green-light: #e6f3ec;
  /* Default "my message" bubble fill — a LIGHT green (2.jpg), the green counterpart of the
     magenta "their" default; same 65%/45% treatment so the two sides pair. */
  --bub-mine: hsl(155, 65%, 45%);
  --amber: #F2A341;
  --amber-dark: #d4862a;
  --ink: #1c2421;
  --muted: #5d6b64;
  --line: #e2e8e3;
  --bg: #f6f8f6;
  --card: #ffffff;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --ok: #1B7F4B;
  --warn-bg: #fef6e7;
  --warn-ink: #8a5a12;      /* amber pill/warn TEXT — darkened from --amber-dark for AA (≥4.5:1 on --warn-bg) */
  --radius: 6px;
  /* Sticky Post-a-trip/-package cards pin 0.03125in (3px) below the navbar's
     freeze line: topbar 62.05px + navbar 51.9px + 3px. */
  --stick-under-nav: 117px;
  --shadow: 0 1px 3px rgba(20, 40, 30, 0.08), 0 4px 16px rgba(20, 40, 30, 0.04);
  /* Brand type — display headings (Plus Jakarta Sans) + body (Inter), per the home page. */
  --grotesk: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --inter: "Inter", "Plus Jakarta Sans", system-ui, sans-serif; /* UI controls: buttons, inputs, labels, chips (ground rule: Inter for interface, Jakarta for headers only) */
  color-scheme: light;
}

/* ── Dark theme ───────────────────────────────────────────────────────────────
   The boot script (index.html) resolves the user's Light/Dark/System pick to an
   explicit html[data-theme]; theme.js keeps it in sync when the OS theme changes.
   Overriding the design tokens flips everything that reads var(--x). Hardcoded
   `background: var(--card)` surfaces were retargeted to var(--card); `color:#fff` (text on
   coloured buttons/badges) is intentionally left white. Greens/ambers are brightened
   for legible text/icons/borders on dark surfaces. */
html[data-theme="dark"] {
  --green: #36b277;        /* brand green — brightened so links/accents read on dark */
  --green-dark: #2a9863;
  --green-light: #173225;  /* soft green pill/section background */
  --amber: #f0a64e;
  --amber-dark: #d4862a;
  --ink: #e7eae8;          /* primary text */
  --muted: #99a39c;        /* secondary text */
  --line: #2a322d;         /* borders / dividers */
  --bg: #0b0d0c;           /* page background (near-black) */
  --card: #16191b;         /* cards / sheets / surfaces */
  --danger: #f0796b;
  --danger-bg: #2d1b18;
  --ok: #36b277;
  --warn-bg: #2a2413;
  --warn-ink: #e6a24a;     /* amber pill/warn text on the dark warn bg (matches the scoped page palettes) */
  --bub-their: #232a31;    /* incoming chat bubble (b.jpg soft neutral, dark variant) */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* Several pages define their OWN scoped colour palette (--t-card/--t-ink/--a-ink/…)
   which the :root dark override above can't reach — so in dark mode those pages kept
   white cards + dark (invisible) headings/labels. Re-point every scoped palette to
   dark values here so cards/forms/text are correct on Notifications, Your packages,
   Find space, Prohibited, Matches, Trips, match detail and the auth split. */
html[data-theme="dark"] .auth-split,
html[data-theme="dark"] .trips-page,
html[data-theme="dark"] .find-page,
html[data-theme="dark"] .matches-page,
html[data-theme="dark"] .prohibited-page,
html[data-theme="dark"] .detail-page,
html[data-theme="dark"] .match-detail-page,
html[data-theme="dark"] .packages-page {
  /* greens (text/icons/accents on dark surfaces) */
  --pine:#6fd3a0; --emerald:#4fb985; --emerald-2:#53c892; --emerald-soft:#173225;
  --a-pine:#6fd3a0; --a-emerald:#4fb985; --a-emerald2:#53c892; --a-soft:#173225;
  /* surfaces + text */
  --t-card:#16191b; --t-paper:#1c2123; --t-ink:#e7eae8; --t-muted:#99a39c; --t-faint:#727c75; --faint:#727c75;
  --t-line:#2a322d; --t-field-line:#333a35;
  --a-ink:#e7eae8; --a-muted:#99a39c; --a-faint:#727c75; --a-line:#2a322d; --a-field:#333a35; --a-panel:#0f1315;
  /* Dark counterpart of the warm bone page. Kept a touch warm (not a blue-grey) so the
     light and dark themes feel like the same product; the inset panel's green reads
     against it without the halo a pure black would give. */
  --a-page:#14181A;
  /* The inset panel goes DARKER than the page in dark mode — inverting light mode,
     where it is darker than a light page. Either way it stays the recessed object. */
  --a-panel-top:#0F5238; --a-panel-bot:#07261B;
  /* status pills (bright ink on a dark tinted bg) */
  --open-ink:#6fd3a0; --open-bg:#15301f;
  --cancel-ink:#cbaeae; --cancel-bg:#2a2422;
  --done-ink:#74bbe2; --done-bg:#15262f;
  --active-ink:#8aa8ff; --active-bg:#1a2440;
  --closed-ink:#e7a398; --closed-bg:#2e2120;
  --declined-ink:#e7a398; --declined-bg:#2e2120;
  --danger:#f0938a; --danger-ink:#f0938a; --danger-bg:#2d1b18;
  --amber:#e6973f; --amber-ink:#e6a24a; --amber-bg:#2e2613;
  --warn-bg:#2a2413; --warn-ink:#e6a24a; --warn-border:#3a3320;
  --blue-ink:#74bbe2; --blue-bg:#15262f;
  --gray-ink:#aab0ad; --gray-bg:#22282a;
  --t-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.5);
}
/* Global blue status pill (e.g. .pill.blue) — light bg/ink → dark-tinted on dark. */
html[data-theme="dark"] .pill.blue { background: #15262f; color: #8aa8ff; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Always reserve the vertical scrollbar's space. Without this, a page whose content
   height lands right at the viewport boundary (e.g. the traveler "My trips" page)
   makes the scrollbar flip on/off in a loop — each toggle changes the content width,
   reflows the grid, and the page appears to "vibrate". A stable gutter breaks that
   feedback loop; overflow-y:scroll is the fallback for older engines. */
html { scrollbar-gutter: stable; overflow-y: scroll; }
body {
  font-family: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Inline icons (incl. arrows in front of / after text) sit centered on the text,
   not on the baseline. No effect on flex/grid children, so existing layouts are safe. */
svg { vertical-align: middle; }
/* Canonical route arrow between two cities / two countries (City → City). Black ink,
   vertically centered; the stroke width (set inline by ui.js arrowSvg) carries bold. */
.rt-arr { display: inline-flex; align-items: center; color: var(--ink); vertical-align: middle; margin: 0 .35em; }
.rt-arr svg { display: block; }
h1, h2, h3, h4 { font-family: var(--grotesk); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5rem; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 .6rem; }
small { color: var(--muted); }

/* ---------- boot / spinner ---------- */
.boot-splash { display: grid; place-content: center; gap: 1rem; height: calc(100vh / var(--uiz)); text-align: center; }
.boot-logo { width: 104px; height: 104px; border-radius: 23px; display: block; margin: 0 auto; }
/* View-level twin of the boot splash (000/c.jpg): pageLoadingNode() in ui.js. */
/* 69.jpg: the branded loader used to center inside each page's leftover content
   area, so it appeared at a different spot per page (headers/columns above it
   vary). Fixed + 50%/translate centers it on the VIEWPORT identically on every
   page — percentage coords are proportional, so this holds under the 0.75 UI
   zoom without unit compensation. */
.page-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-content: center; gap: 1rem; text-align: center; z-index: 5; }
.page-loading-logo { width: 88px; height: 88px; border-radius: 20px; display: block; margin: 0 auto; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--green);
  animation: spin .8s linear infinite; margin: 0 auto;
}
.spinner.sm { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- buttons ---------- */
button { font-family: inherit; font-size: inherit; cursor: pointer; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid transparent; border-radius: 10px;
  padding: .55rem .9rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; /* .btn also renders as <a> (Sign in, Verify now) — beat the global a:hover underline */
  /* Transitional green pill, matching the app's "Post a package" CTA (#1A8A66 → #0C3B2E).
     Danger/amber/ghost variants below override this by specificity, so they keep their fills. */
  background: linear-gradient(90deg, #1A8A66 0%, #0C3B2E 100%); color: #fff; transition: background .15s, filter .15s, opacity .15s;
}
.btn:hover { background: linear-gradient(90deg, #16795A 0%, #082A20 100%); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.amber { background: var(--amber); color: #3a2a08; }
.btn.amber:hover { background: var(--amber-dark); }
.btn.ghost { background: transparent; color: var(--green); border-color: var(--line); }
.btn.ghost:hover { background: var(--green-light); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #9e2f23; }
/* Ghost + danger (f.jpg: bell-dropdown "Clear all"): ghost's transparent background
   lost to .btn.danger's solid red (later rule, equal specificity) while the dropdown
   header rule turned the TEXT red too — red on red. A ghost danger button is
   transparent with danger-colored text; the red stays for hover feedback only. */
.btn.ghost.danger { background: transparent; color: var(--danger); }
.btn.ghost.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: .35rem .65rem; font-size: .85rem; border-radius: 8px; }
/* Two-option photo upload (Take photo / Choose from gallery) on the post-a-package form. */
.upload-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.upload-actions label { cursor: pointer; margin: 0; }
/* Multi-photo picker (post-a-package): thumbnail grid + add tile, camera/gallery per tile. */
/* Item-photo field — redesigned to u-get-bag-photo-card.html (6px card). */
.photo-lab { display: flex; align-items: center; gap: 8px; }
.photo-count { font-size: 11px; font-weight: 700; color: var(--brand, #0b8f5a); background: color-mix(in srgb, var(--brand, #0b8f5a) 12%, transparent); border-radius: 999px; padding: 2px 9px; line-height: 1.4; }
.photo-card { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.photo-drop { border: 1.5px dashed color-mix(in srgb, var(--brand, #0b8f5a) 40%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--brand, #0b8f5a) 4%, transparent); padding: 20px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.photo-drop .pd-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand, #0b8f5a) 12%, transparent); color: var(--brand, #0b8f5a); margin-bottom: 2px; }
.photo-drop .pd-1 { font-weight: 700; font-size: 14px; }
.photo-drop .pd-2 { font-size: 12px; color: var(--muted); max-width: 34ch; line-height: 1.45; }
.photo-drop .pd-btns { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.pd-btn { flex: 1; cursor: pointer; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--fg, inherit); }
.pd-btn:first-child { background: var(--brand, #0b8f5a); border-color: var(--brand, #0b8f5a); color: #fff; }
.photo-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-tile3 { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.photo-tile3 .photo-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-rm { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.photo-cover { position: absolute; left: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); border-radius: 999px; padding: 2px 7px 2px 6px; }
.photo-add3 { aspect-ratio: 1; cursor: pointer; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed color-mix(in srgb, var(--brand, #0b8f5a) 40%, var(--line)); border-radius: 6px; color: var(--brand, #0b8f5a); font-size: 12px; font-weight: 600; }
.photo-add3 .pa-ic { color: var(--brand, #0b8f5a); }
.photo-fine { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); }
.photo-fine svg { flex: none; margin-top: 1px; }
.photo-fine p { margin: 0; font-size: 11.5px; line-height: 1.45; }
/* Package-detail photo gallery — horizontal scroll strip of the full set. */
.photo-gallery { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.photo-gallery .photo-shot { height: 140px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; flex: 0 0 auto; }
.btn.block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- forms ---------- */
.field { margin-bottom: .85rem; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink);
  /* Force light native popups (select option lists, date pickers) even when the OS
     is in dark mode — the app UI is light-themed. */
  color-scheme: light;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-light); border-color: var(--green); }
textarea { resize: vertical; min-height: 70px; }
/* 27.jpg: suppress Chrome's native contacts/credentials autofill button on the admin
   business-identity billing email (a config field, not the admin's own address) so no stray
   mid-field icon shows. A third-party password-manager icon is browser-injected and outside CSS. */
input[name="ugs-billing-support-email"]::-webkit-contacts-auto-fill-button,
input[name="ugs-billing-support-email"]::-webkit-credentials-auto-fill-button {
  visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0;
}
/* Textarea with a live character counter pinned bottom-right (e.g. Post a send). */
.ta-wrap { position: relative; }
.ta-wrap textarea { padding-bottom: 22px; }
.ta-wrap .char-count { position: absolute; right: 10px; bottom: 7px; font-size: 11px; font-weight: 600;
  color: var(--muted); background: var(--card); padding: 0 3px; pointer-events: none; }
/* Landing WhatsApp hand-match link (revealed after a lead is captured). */
.home-join-wa { display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:10px 16px; border-radius:6px; background:#25D366; color:#0b3d24; font-weight:700; text-decoration:none; }
.home-join-wa svg { width:18px; height:18px; }
.home-join-wa:hover { filter:brightness(1.05); }
/* WhatsApp delivery toggle — card with icon + title + subtitle + switch (mockup; fixes 2.jpg). */
.auth-wa { display:flex; align-items:center; gap:12px; border:1px solid var(--a-field,#D8E0DB); border-radius:14px;
  padding:12px 14px; margin:4px 0 14px; cursor:pointer; background:var(--card,#fff); transition:.16s; }
.auth-wa.on { border-color:#BEE9CE; background:#E8FAEE; }
.auth-wa-ic { width:38px; height:38px; border-radius:11px; background:#25D366; display:grid; place-items:center; flex:none; }
.auth-wa-ic svg { width:22px; height:22px; display:block; }
.auth-wa-txt { flex:1; min-width:0; }
.auth-wa-t { font-family:var(--space,inherit); font-weight:600; font-size:14px; color:var(--a-ink,#16241F); }
.auth-wa-s { font-size:11.5px; color:var(--a-muted,#6E7C76); margin-top:2px; }
/* visually-hidden real checkbox (kept keyboard-focusable via the wrapping <label>) */
.auth-wa-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.auth-wa-sw { width:44px; height:26px; border-radius:999px; background:#cfd8d3; position:relative; flex:none; transition:.18s; }
.auth-wa-sw::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s; }
.auth-wa.on .auth-wa-sw { background:#25D366; }
.auth-wa.on .auth-wa-sw::after { transform:translateX(18px); }
.auth-wa:focus-visible { outline:none; box-shadow:0 0 0 3px var(--emerald-soft,#E7F2EC); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
@media (max-width: 675px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  /* Forest-green transition, brightest at the LEFT where the logo sits: the wordmark's
     "Space" is dark, so the logo zone is anchored to the lighter emerald (#1A8A66 →
     #15795C) so "Space" stays legible while white "UGet"/tagline keep contrast too. */
  background: linear-gradient(100deg, #1A8A66 0%, #15795C 100%); color: #fff;
  /* Premium pass: soft depth below the green header (casts over the sticky nav). */
  box-shadow: 0 2px 14px rgba(12, 59, 46, .18);
  display: flex; align-items: center; gap: .75rem;
  /* 50.jpg: the header sits on the SAME 2in gutter lines as the page content —
     brand-mark left edge and the Home tab's H on the left line, the avatar's
     right edge on the right line (mirrors .container's padding). */
  /* d.jpg: green stretched to the red line — ~13px visible below the tagline
     (0.0625in request + d.jpg's extra ~7px). Content below shifts naturally. */
  padding: .55rem 2in 11.85px;
}
@media (max-width: 1375px) { .topbar { padding-left: 16px; padding-right: 16px; } }
/* gap = mark↔wordmark spacing = 0.046875in = 4.5px. Box is vertically centered
   within the wordmark+tagline block (between the top of "UGetSpace" and the bottom
   of the tagline). */
.topbar .brand { font-weight: 800; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 4.5px; }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand-mark { height: 48px; width: 48px; border-radius: 7.4px; display: block; flex: none;
  /* 48 (not 50): x0.75 UI scale = 36 physical px EXACTLY — fractional sizes rasterize
     soft, which read as "not sharp" (user). Soft shadow lifts the tile off the green. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28); } /* ~+60% of the original 31px */
/* Wordmark + tagline stacked and left-aligned, so "C" (Carry) sits under "U"
   (UGetSpace); gap = wordmark↔tagline spacing = 0.0325in = 3.12px. */
.topbar .brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3.12px; }
.topbar .brand-logo { height: 28px; width: auto; display: block; } /* ~Claude-logo minus 20%; 28 = 21 physical px exactly under the 0.75 scale (27 was 20.25 = soft) */
.topbar span.brand-logo svg { height: 28px; width: auto; display: block; } /* inline-SVG variant (HD wordmark); 28 = 21 physical px exactly */
/* Words reduced a further 10% (9.2 → 8.28px); the "·" separators keep full size. */
.topbar .brand-tagline { color: #fff; font-size: .9rem; font-weight: 400; letter-spacing: 2px; line-height: 1; white-space: nowrap; } /* .9rem = the tabs' pre-17px size; unbolded per request */
.topbar .brand-tagline .dot { font-size: 11.5px; }
.topbar .spacer { flex: 1; }
/* topbar site-search (#22) */
.site-search { display: flex; align-items: center; position: relative; }
/* 67.jpg predictive search: suggestion listbox under the pill (cities + countries
   from cached /ref data + the raw-query row). Same surface language as .dropdown. */
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.18); overflow: hidden; z-index: 40; }
.ss-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13.5px; }
.ss-row:hover, .ss-row.active { background: var(--green-light); }
.ss-row .ss-ic { flex: none; font-size: 12px; }
.ss-row .ss-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row .ss-sub { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; padding-left: 12px; }
/* Width holds the full placeholder ("Search trips, packages, cities…") with no
   clipping; text-overflow:ellipsis is a belt-and-braces guard at narrow widths. */
.site-search-input { width: 300px; max-width: 42vw; height: 36px; border: none; border-radius: 999px; padding: 0 .95rem; font: inherit; font-size: .9rem; background: rgba(255,255,255,.16); color: #fff; outline: none; text-overflow: ellipsis; transition: background .15s; }
.site-search-input::placeholder { color: rgba(255,255,255,.92); }
/* Width stays fixed on focus (no expand) — typed text just scrolls within the box. */
.site-search-input:focus { background: #fff; color: #1c2421; }
@media (max-width: 800px) { .site-search { display: none; } }
.topbar .iconbtn {
  position: relative; background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; font-size: 1.1rem;
}
.topbar .iconbtn:hover { background: rgba(255,255,255,.22); }
.badge {
  position: absolute; top: -3px; right: -3px; background: var(--amber); color: #3a2a08;
  font-size: .62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px;
  display: grid; place-content: center; padding: 0 4px;
}

.roleswitch { display: inline-flex; background: rgba(0,0,0,.18); border-radius: 999px; padding: 3px; }
.roleswitch button {
  border: none; background: transparent; color: #eaf6ee; font-weight: 700; font-size: 17px; white-space: nowrap; /* 54.jpg size; nowrap: c.jpg showed the labels wrapping at high zoom */
  padding: .3rem .7rem; border-radius: 999px;
}
.roleswitch button.active { background: #fff; color: #145e37; }

.navbar {
  /* top = the topbar's LIVE height — shell.js measures and sets --topbar-h (and
     --stick-under-nav) so zoom changes can never misalign the freeze line (c.jpg). */
  position: sticky; top: var(--topbar-h, 69px); z-index: 20; background: var(--card);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .35rem; overflow-x: auto;
  /* Crisper strokes for the 17px labels under the 0.75 UI scale (they were
     reading as faded/soft). */
  -webkit-font-smoothing: antialiased;
  /* 50.jpg: "Home" TEXT starts on the same 2in line as the brand mark and the
     page content (the first tab's pill padding is pulled back out with a negative
     margin below, so the GLYPH stays on the line while its pill can bleed left). */
  padding: 0 2in;
}
.navbar a:first-child { margin-left: -0.95rem; }
@media (max-width: 1375px) {
  .navbar { padding: 0 16px; }
  .navbar a:first-child { margin-left: 0; }
}
.navbar a {
  /* Premium restyle (user request — tabs read faded): ink-colored semibold labels,
     rounded hover ghost, and the house transitional-green gradient pill on the
     active tab (same treatment as the By-air/land/sea segs + Android chips).
     17px kept from 51/52.jpg (claude.com "Meet Claude" scale). */
  padding: .5rem .95rem; margin: .4rem 0; color: var(--ink); font-weight: 600; font-size: 17px;
  letter-spacing: .01em; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.navbar a.active { background: linear-gradient(90deg, #1A8A66 0%, #0C3B2E 100%); color: #fff; }
.navbar a:hover:not(.active) { text-decoration: none; background: var(--green-light); color: var(--green-dark); }
.navbar a.active:hover { text-decoration: none; }

/* Shell pages stretch with a fixed 2in blank gutter each side (user-tuned from the
   earlier edge-to-edge pass): no centered max-width band, admin included. */
.container { max-width: none; margin: 0 auto; padding: 1rem 2in 4rem; }
.container.container-wide { max-width: none; }
@media (max-width: 1375px) { .container { padding-left: 16px; padding-right: 16px; } } /* 2in gutters would eat small screens */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card h3 { margin-top: 0; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.list-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem;
  margin-bottom: .65rem; display: flex; flex-direction: column; gap: .35rem; box-shadow: var(--shadow);
}
.list-item .row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.list-item .title { font-weight: 700; }
/* Login Activity list packed tighter: halve the inter-row gap (.85rem pad + .65rem margin = 2.35rem
   between entry lines) to ~1.175rem, mirroring the app's Login Activity screen. Scoped, so the
   shared .list-item spacing used by blocked users / trip detail is unaffected. */
.activity-list .list-item { padding-top: .425rem; padding-bottom: .425rem; margin-bottom: .325rem; }
.meta { color: var(--muted); font-size: .85rem; }
.kv { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .85rem; }
.kv b { font-weight: 600; }

/* ---------- pills / badges ---------- */
.pill {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
  background: var(--green-light); color: var(--green-dark); text-transform: capitalize; letter-spacing: .01em;
}
.pill.gray { background: var(--bg); color: var(--muted); }
.pill.amber { background: var(--warn-bg); color: var(--warn-ink); }
.pill.red { background: var(--danger-bg); color: var(--danger); }
.pill.blue { background: #e7eefb; color: #2f5bb7; }

/* ---------- auth ---------- */
/* ── Login / auth: split screen (brand panel left, form right) ──
   Matches 000/u-get-bag-web-signin.html. Scoped tokens keep it self-contained. */
.auth-split { --grotesk:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --a-emerald:#15795C; --a-emerald2:#1A8A66; --a-pine:#0C3B2E; --a-soft:#E7F2EC;
  --a-ink:#16241F; --a-muted:#5d6b64; --a-faint:#656e68; --a-line:#E6EAE7; --a-field:#D8E0DB; --a-panel:#F1F4F2;
  /* Warm bone page. Warm neutrals let the brand green read as deliberate instead of
     relentless; a cool near-white (the old #f6f8f6/#F1F4F2) carries a green cast of
     its own and quietly doubles down on the very note we are trying to calm. */
  --a-page:#F7F5F1;
  /* Deeper, calmer forest for the inset panel. The old ramp opened on #1d8a52 —
     a bright emerald across half the viewport. Saturation now belongs to ONE thing
     per screen: the primary CTA. */
  --a-panel-top:#146B47; --a-panel-bot:#0A3325;
  /* Left column sized in vw (which ignores scrollbar presence) so the taller
     register form — and the scrollbar it triggers — can't shift the brand panel
     at all. The right column takes whatever remains. */
  /* Form LEFT (flexible), brand RIGHT (fixed). Narrowed 51vw -> 46vw: the brand panel
     is now an inset object rather than a full-bleed wall, so it needs less width to
     hold its own, and the extra room goes to the task. Page is a WARM neutral —
     var(--card) was pure white and the old --a-panel was a cool green-tinted grey,
     both of which kept reinforcing the same green note. */
  min-height: calc(100vh / var(--uiz)); display: grid;
  grid-template-columns: 1fr calc(46vw / var(--uiz)); background: var(--a-page); }

/* left brand panel: deep-green gradient + globe/route motif */
/* align-self:start + fixed 100vh keeps the brand panel one viewport tall and
   pinned, so switching to the taller register form on the right never stretches
   it downward. */
/* INSET, not full-bleed. The panel used to run edge to edge for the full viewport
   height, so ~half the screen was one saturated field with no relief and a hard seam
   down the middle. Margin + radius turn it into an object sitting ON the page — the
   same treatment 7.jpg gives its photograph — which drops the perceived weight of the
   colour far more than lightening the green ever could. */
.auth-brand { position: sticky; top: 22px; align-self: start;
  height: calc((100vh / var(--uiz)) - 44px); margin: 22px 22px 22px 0;
  border-radius: 26px; overflow: hidden; color: #fff; display: flex; flex-direction: column;
  justify-content: flex-start; padding: 46px 44px;
  background: radial-gradient(130% 130% at 50% 0%,
    var(--a-panel-top) 0%, #10583A 46%, var(--a-panel-bot) 100%);
  box-shadow: 0 18px 44px rgba(12,59,46,.16); }
.auth-map { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.auth-map svg { width: 100%; height: 100%; display: block; }
/* Lift non-decorative children above the backdrop. .auth-photos and .auth-dots are EXCLUDED:
   they carry their own absolute positioning + z-index, and this rule's (0,5,0) specificity
   would otherwise force position:relative onto .auth-photos — collapsing it to 0 height (all
   its children are absolute) so the photo layers fill nothing and the panel shows only its
   #0b2f24 fallback. That was the "uploaded photo doesn't appear" bug. */
.auth-brand > *:not(.auth-map):not(.auth-globe):not(.auth-topo):not(.auth-scrim):not(.auth-photos):not(.auth-dots) { position: relative; z-index: 2; }

/* ── redesigned brand panel: rotating globe backdrop · logo+trust chips (top) ·
   headline + operator-gated live-routes board (bottom). Anchored to both edges so the
   panel never reads as "something hanging" in the middle. ── */
.auth-globe { position: absolute; top: -14%; right: -13%; width: 405px; max-width: 59.4%; z-index: 0; opacity: .6; pointer-events: none; }
/* px width (not %-of-vw) so the globe SCALES WITH browser zoom like the rest of the panel
   content — "unfreeze the globe": it grows on zoom-in and shrinks on zoom-out together with the
   chips, headline and board, instead of staying a fixed physical size. max-width caps it on
   narrow panels; overflow:hidden on .auth-brand clips any bleed. */
.auth-globe svg { width: 100%; height: auto; display: block; }
.auth-topo { position: absolute; inset: 0; z-index: 0; opacity: .32; pointer-events: none; }
.auth-topo svg { width: 100%; height: 100%; display: block; }
.auth-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,30,20,.78)); }
/* globe turns on its axis: continents scroll behind fixed latitude lines (seamless loop) */
.gmap { animation: ag-spin 60s linear infinite; }
@keyframes ag-spin { to { transform: translateX(-410px); } }

/* ── Sign-in panel: operator PHOTO mode (App/Web Appearance → Web Sign-in Page) ──
   A colour field says nothing; a photograph of a handover says "these are the people who
   will carry your package", which is the whole proposition. Green survives as the scrim, so
   the brand still reads. Everything below only applies when the operator has configured
   photos — .auth-brand with no .is-photo keeps the built-in gradient artwork untouched. */
.auth-brand.is-photo { background: #0b2f24; padding: 0; }
/* Built-in artwork steps aside for the photography. */
.auth-brand.is-photo .auth-globe,
.auth-brand.is-photo .auth-topo,
.auth-brand.is-photo .auth-brand-top,
.auth-brand.is-photo .auth-brand-foot { display: none; }
/* Operator-chosen panel silhouette. `full` gives up the inset entirely (edge-to-edge, no
   radius) for operators who want the photograph to bleed. */
.auth-brand.shape-soft { border-radius: 14px; }
.auth-brand.shape-square { border-radius: 0; }
.auth-brand.shape-full { margin: 0; border-radius: 0; height: calc(100vh / var(--uiz)); top: 0; }
/* 6 operator-added silhouettes. The default panel radius is 26px; these bend it. */
.auth-brand.shape-xl { border-radius: 40px; }
.auth-brand.shape-pill { border-radius: 64px; }
.auth-brand.shape-top { border-radius: 26px 26px 0 0; }
.auth-brand.shape-bottom { border-radius: 0 0 26px 26px; }
.auth-brand.shape-left { border-radius: 26px 0 0 26px; }
.auth-brand.shape-right { border-radius: 0 26px 26px 0; }

.auth-photos { position: absolute; inset: 0; z-index: 0; }
/* One layer per slide, crossfaded. background-image (not <img>) so the operator's focal
   point is a single background-position and a Ken Burns drift costs no reflow. */
.auth-photo { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity .9s ease; will-change: opacity; }
.auth-photo.on { opacity: 1; }
.auth-photos.kb .auth-photo.on { animation: auth-kb 18s ease-out forwards; }
@keyframes auth-kb { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Scrim strength is operator-set (--scrim, 0–1). Text over a photograph is only legible
   because of this, so the top stop stays fully transparent and the ramp does the work. */
.auth-brand.is-photo .auth-scrim { height: 100%; z-index: 1;
  background: linear-gradient(180deg, rgba(6,32,24,0) 22%,
    rgba(6,32,24,calc(var(--scrim, .72) * .78)) 62%, rgba(6,32,24,var(--scrim, .72)) 100%); }

.auth-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  gap: 16px; padding: 46px 44px; }
.auth-content.pos-top { justify-content: flex-start; }
.auth-content.pos-center { justify-content: center; }
.auth-content.pos-bottom { justify-content: flex-end; }
.auth-content.align-center { align-items: center; text-align: center; }
.auth-content.align-center .auth-eyebrow { justify-content: center; }
.auth-content.align-center .auth-chips { justify-content: center; }
.auth-content.align-right { align-items: flex-end; text-align: right; }
.auth-content.align-right .auth-eyebrow { justify-content: flex-end; }
.auth-content.align-right .auth-chips { justify-content: flex-end; }
.auth-content .auth-brand-copy { max-width: 26ch; }
.auth-content.align-center .auth-brand-copy { max-width: 32ch; }
.auth-content .auth-chips { margin-top: 0; }

/* (Carousel position dots removed — the auto-advancing photos need no indicator, and the
   white active pill read as a stray mark on the panel.) .auth-dots stays in the :not() list
   above so nothing regresses if a dot indicator is ever reintroduced. */

@media (prefers-reduced-motion: reduce) {
  .auth-photo { transition: none; }
  .auth-photos.kb .auth-photo.on { animation: none; }
}

.auth-brand-top { display: flex; flex-direction: column; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; max-width: 30ch; }
.auth-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.auth-chip-ic { display: inline-flex; color: var(--gold, #E9A53D); }
.auth-chip-ic svg { width: 14px; height: 14px; display: block; }

.auth-brand-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.auth-brand-copy { flex: 0 1 auto; max-width: 24ch; }
.auth-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--copy-font, inherit); font-size: calc(11.5px * var(--eb-scale, 1)); font-weight: var(--eb-weight, 800); letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #E9A53D); margin-bottom: 16px; }
.auth-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--gold, #E9A53D); border-radius: 2px; }

/* live-routes board (right of the headline) — hidden until the operator-gated data loads */
.auth-live { flex: 0 0 58%; max-width: 58%; min-width: 0; }
.lr-card { border-top: 1px solid rgba(255,255,255,.2); }
.lr-hr { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 9px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.lr-lr { display: inline-flex; align-items: center; gap: 9px; color: var(--gold, #E9A53D); }
.lr-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 9px #4ade80; }
.lr-live::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%,-50%); animation: lr-pulse 3s ease-out infinite; }
@keyframes lr-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 0 11px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.lr-tn { color: rgba(255,255,255,.5); }
/* Grid (not flex) so the DESTINATION city is right-aligned and every trailing flag lands in the same
   column — the last letter of each destination aligns vertically, and the flags form a clean vertical
   column. Columns: fromFlag | fromCity | → | toCity | toFlag | lead | count | status-dot. */
/* City columns are minmax(0,1fr) (NOT 1fr): pure fractional so the two city tracks stay EQUAL width
   regardless of name length — the destination-flag column can't drift, and a long name can't widen
   the row past the panel. Over-long names ellipsis-truncate (see .lr-city) instead of overflowing. */
.lr-row { display: grid; grid-template-columns: 24px 22px minmax(0,1fr) auto minmax(0,1fr) 22px minmax(24px,1fr) auto 8px; align-items: center; gap: 9px; padding: 11px 2px; border-top: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: background .15s, padding .15s; } /* col 1 = kind chip (a.jpg: pronounced) */
.lr-row .lr-kind { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; }
/* a.jpg: tinted chips make the three kinds legible at a glance — green = space
   available, gold = carrying now, amber = package waiting. */
.lr-row.k-trip_space .lr-kind, .lr-legend .k-trip_space .lr-kind { background: rgba(74,222,128,.14); color: #7EE2A8; }
.lr-row.k-trip_loaded .lr-kind, .lr-legend .k-trip_loaded .lr-kind { background: rgba(233,165,61,.16); color: #E9A53D; }
.lr-row.k-package .lr-kind, .lr-legend .k-package .lr-kind { background: rgba(242,163,65,.16); color: #F2A341; }
.lr-row.k-trip .lr-kind { background: rgba(74,222,128,.14); color: #7EE2A8; }
.lr-legend .lr-kind { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; } /* 92.jpg: plane = trip, parcel = package */
/* Hover mirrors 000/auth-blend-v5.html .row:hover (subtle lift + rounded inset). */
.lr-row:hover { background: rgba(255,255,255,.06); border-radius: 8px; padding-left: 9px; padding-right: 9px; }
.lr-row .lr-city:last-of-type { text-align: right; }   /* destination hugs its flag → last letters + flags align */
.lr-row.lr-swap { animation: lr-in .55s ease; }
@keyframes lr-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.lr-row .cflag { width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); overflow: hidden; }
.lr-row .cflag svg { width: 100%; height: 100%; display: block; }
.lr-city { font-family: var(--grotesk, 'Plus Jakarta Sans'), sans-serif; font-weight: 700; font-size: 16px; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-arr { color: var(--gold, #E9A53D); font-weight: 800; font-size: 15px; }
.lr-lead { flex: 1; border-bottom: 1.5px dotted rgba(255,255,255,.24); height: 1px; margin: 0 5px; }
.lr-cnt { font-size: 13px; color: #eaf6ee; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
/* The brand panel scales naturally with browser zoom — NO zoom-lock. The earlier --authzc
   counter-scaling pinned the content to its 100%-zoom size, but under zoom-OUT that scaled the
   .auth-brand-foot UP from its bottom-left origin, pushing the live-routes board past the panel's
   right edge into the sign-in (white) half. Removing it lets the whole panel — globe, chips,
   headline, board — zoom together and stay put relative to each other. */
/* Board at its MINIMUM size (a.jpg round 2): a constant 0.85 inside the already
   zoom-locked foot block — compact and physically identical at every zoom. */
/* Fill the column edge-to-edge (no fixed 534px, no 0.85 shrink) so the board stretches to align
   with the panel's content lines (0.jpg). */
.auth-live .lr-card { width: 100%; max-width: 100%; }
/* no max-width clamp: the counter-scale already shrinks the content exactly as
   much as zoom shrinks the panel's CSS width, so it always fits. */
/* width is FIXED in CSS px (panel-percentage width was already zoom-invariant, but
   the counter-scale needs both axes in CSS px to hold the whole card steady). */
.lr-st { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.7); }
/* 02.jpg three-state identity: dot color follows the row kind — green = trip with
   free space (awaiting packages), gold = trip carrying booked cargo, amber = posted
   package waiting for a carrier. (Replaces the old count-based .soon coloring.) */
.lr-row.k-trip_loaded .lr-st { background: var(--gold, #E9A53D); box-shadow: 0 0 8px rgba(233,165,61,.6); }
.lr-row.k-package .lr-st { background: #F2A341; box-shadow: 0 0 8px rgba(242,163,65,.6); }
/* Legend under the rows — the same glyphs with one-word meanings. */
.lr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 2px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.lr-legend .lr-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.lr-legend .lr-kind { display: flex; color: rgba(255,255,255,.55); }
/* short viewports: the board trims to 4 rows in JS; keep the headline+board from crowding */
/* a.jpg: the globe is EXEMPT from the short-viewport shrink — browser zoom-in
   reduces CSS vh and used to trip this rule, visibly shrinking the globe (its
   size must be zoom-invariant). Decorative + behind the scrim, so tall bleed on
   genuinely short windows is fine. */
@media (max-height: 760px) { .lr-row { padding: 9px 2px; } .lr-city { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .gmap { animation: none; } .lr-live::after { animation: none; } .lr-row.lr-swap { animation: none; } }
/* ── shared brand lockup: square mark tile + UGetSpace wordmark + tagline ── */
/* stretch (not center): brand-text fills the mark's height so the wordmark hugs the
   TOP of the green tile and the tagline's baseline sits on its BOTTOM edge (18.jpg) —
   the tile itself never moves. */
.ugs-brand { display: flex; align-items: stretch; gap: 11px; }
.ugs-brand:hover { text-decoration: none; }
.ugs-brand .brand-mark { width: 40px; height: 40px; border-radius: 11px; display: block; flex: none; }
.ugs-brand .brand-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.ugs-brand .brand-logo { height: 20px; width: auto; display: block; } /* 15 physical px exactly (22 was 16.5 = soft) */
/* HD wordmark swap (brand.js): the <img> becomes a span-wrapped inline SVG — the
   span inherits the img's .brand-logo height rules; the inner svg fills it. */
span.brand-logo { display: block; }
span.brand-logo > svg { height: 100%; width: auto; display: block; }
.ugs-brand .brand-tagline { color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.ugs-brand .brand-tagline .dot { font-size: 13px; }
/* light-background variant — pine wordmark (asset) + pine tagline */
/* Transitional green — the brand CTA gradient (light→dark green) filling the tagline
   glyphs (the "·" dots inherit the same clip). Light-variant only (on light backgrounds);
   the white dark-variant taglines stay white. */
/* Solid brand green (18.jpg follow-up) — was the transitional-green GRADIENT; now
   matches the "Space" letters of the wordmark (#1B7F4B via --green). */
.ugs-brand--ink .brand-tagline {
  color: var(--green);
  -webkit-text-fill-color: var(--green);
}
/* "Sign in" — AT REST: gradient on the TEXT only; the ghost pill outline is unchanged. */
.btn.ghost.home-btn-login {
  background: none;
  background-image: linear-gradient(100deg, #1A8A66 0%, #0C3B2E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
/* Dark theme: lighter gradient range so the text stays legible on a dark surface. */
/* (ink tagline is now solid var(--green) in both themes — dark's --green is the
   brightened #36b277, so no separate override needed.) */
[data-theme="dark"] .btn.ghost.home-btn-login {
  background-image: linear-gradient(100deg, #3FD49A 0%, #1A8A66 100%);
}
/* ON HOVER ONLY (mouse) — the pill fills with the transitional-green gradient and the text
   turns pure white. focus-visible mirrors it for keyboard users; the resting state is untouched.
   The fill uses the DARKER gradient in both themes so the white text keeps strong contrast.
   Placed last so it wins over the dark-theme rest override at equal specificity. */
.btn.ghost.home-btn-login:hover,
.btn.ghost.home-btn-login:focus-visible {
  background-color: transparent;
  background-image: linear-gradient(100deg, #1A8A66 0%, #0C3B2E 100%);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #fff; color: #fff;
  border-color: transparent;
}

/* auth: left brand panel (dark green bg → white wordmark) */
.auth-brandmark { margin-bottom: 60px; gap: 13px; }
.auth-brandmark .brand-mark { width: 44px; height: 44px; border-radius: 12px; }
.auth-brandmark .brand-logo { height: 26px; }
.auth-brandmark .brand-tagline { font-size: 9.5px; letter-spacing: 2.2px; }
/* Copy typography is operator-tunable (App/Web Appearance → Web Sign-in Page). The vars are
   set on .auth-brand by the client from /ref/signin-brand; the fallbacks here are the built-in
   defaults, so an unconfigured panel is byte-identical to before. */
.auth-brand-copy h2 { font-family: var(--copy-font, var(--grotesk)); font-size: calc(clamp(2rem, 3.4vw, 46px) * var(--hl-scale, 1)); font-weight: var(--hl-weight, 700);
  line-height: 1.05; letter-spacing: -.03em; max-width: 14ch; }
.auth-brand-copy p { margin-top: 18px; font-family: var(--copy-font, inherit); color: rgba(255,255,255,.82); font-size: calc(17px * var(--sub-scale, 1)); font-weight: var(--sub-weight, 400); max-width: 420px; line-height: 1.5; }
.auth-brand-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 500; color: #fff; }
.auth-brand-pill svg { flex: none; }


/* right form panel — column flex that scrolls within one viewport. The card uses
   margin:auto so a short form (login) stays vertically centred, while the taller
   register form top-anchors and the panel scrolls, keeping the bottom
   "Already have an account? Log in" switch reachable instead of clipped off. */
/* The form column now sits directly on the warm page. It used to carry its own tinted
   surface (--a-panel), which meant three competing greys plus the green wall; one page
   colour behind the card is calmer and makes the white card read as the focal object. */
.auth-form-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  max-height: calc(100vh / var(--uiz)); overflow-y: auto; overflow-x: hidden; padding: 48px; background: transparent;
  /* 5.jpg: this column's own scrollbar renders exactly on the seam with the photo panel and
     reads as a stray vertical divider (most visible when zoomed). The page already carries a
     stable scrollbar on <html>, so hide this one's chrome — the column still scrolls (wheel /
     trackpad / keyboard) for the taller register form. */
  scrollbar-width: none; -ms-overflow-style: none; }
.auth-form-panel::-webkit-scrollbar { width: 0; height: 0; }
/* Card centers in the growing area; the slim footer sits at the panel's bottom. */
.auth-form-main { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; }

/* ── Slim sign-in footer: © + legal links, then app-store badges + social icons. Compact by
   design so it never competes with the form; sits in the form column, aligned to the card. ── */
/* Slightly wider than the card (432px) + a hair smaller text so the © line and the legal
   links fit on ONE row (21.jpg) — copyright left, Terms · Privacy · Cookies right — instead
   of stacking, while staying close to the card's width. */
.auth-foot { width: 100%; max-width: 480px; margin: 8px auto 0; padding: 18px 0 2px; flex: 0 0 auto;
  border-top: 1px solid var(--a-line); display: flex; flex-direction: column; gap: 12px;
  font-size: 11.5px; color: var(--a-muted); }
.auth-foot-top { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; }
.auth-foot-copy { color: var(--a-faint); white-space: nowrap; }
.auth-foot-legal { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; flex-shrink: 0; }
.auth-foot-link { color: var(--a-muted); text-decoration: none; }
.auth-foot-link:hover { color: var(--a-emerald); text-decoration: underline; }
.auth-foot-dot { color: var(--a-line); }
.auth-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.auth-foot-stores { display: inline-flex; gap: 8px; }
.auth-foot-store { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--a-line); border-radius: 9px; color: var(--a-ink); background: var(--card); }
.auth-foot-store:hover { border-color: var(--a-field); }
.auth-foot-store svg { width: 18px; height: 18px; display: block; }
.auth-foot-socials { display: inline-flex; gap: 6px; }
.auth-foot-social { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; color: var(--a-muted); }
.auth-foot-social:hover { color: var(--a-emerald); background: rgba(0,0,0,.045); }
.auth-foot-social svg { width: 17px; height: 17px; display: block; }
@media (max-width: 1125px) {
  .auth-foot { max-width: 100%; }
}
/* Too narrow for one row (small phones): let the © line and legal links stack again. */
@media (max-width: 560px) {
  .auth-foot-top { flex-wrap: wrap; }
  .auth-foot-copy { white-space: normal; }
}
/* Was pinned top-right, which is now ON TOP of the brand panel. It belongs over the
   form column, which is the left side after the swap. */
.auth-topbar { position: fixed; top: 26px; left: 30px; right: auto; z-index: 6; }
/* The sign-in form sits inside a real CARD (20.jpg): its own surface + hairline
   border + soft shadow, set on a slightly tinted form panel (--a-panel) so a white
   card no longer disappears against a white background. --card is theme-aware, so on
   dark the card is a lighter surface than the darker panel and still lifts. */
.auth-card { width: 100%; max-width: 432px; margin: auto 0; background: var(--card);
  border: 1px solid var(--a-line); border-radius: 6px;
  padding: clamp(24px, 4.5vw, 34px) clamp(20px, 4vw, 32px);
  box-shadow: 0 16px 40px -16px rgba(20,40,30,.22), 0 3px 10px rgba(20,40,30,.07); }
.auth-back { display: inline-block; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--a-muted); text-decoration: none; }
.auth-back:hover { color: var(--a-emerald); text-decoration: underline; }
.auth-card .logo { margin-bottom: 28px; }
.auth-h1 { font-family: var(--grotesk); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--a-ink); }
.auth-card .tag { color: var(--a-muted); font-size: 14.5px; line-height: 1.4; margin: 8px 0 26px; }
.auth-switch { text-align: center; margin-top: 14px; font-size: 14px; color: var(--a-muted); }
.auth-switch a { color: var(--a-emerald); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
/* email/phone method toggle + phone OTP flow */
.auth-methods { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--a-field); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.auth-method { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 9px 10px; font-family: var(--inter); font-weight: 600; font-size: 13.5px; color: var(--a-muted); cursor: pointer; transition: .15s; }
.auth-method.on { background: var(--card); color: var(--a-ink); box-shadow: 0 1px 3px rgba(20,40,30,.12); }
.auth-method:hover:not(.on) { color: var(--a-ink); }
.auth-hint { font-size: 12.5px; color: var(--a-muted); margin: -2px 0 14px; line-height: 1.4; }
.auth-phone-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.auth-linkbtn { background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--a-emerald); cursor: pointer; }
.auth-linkbtn:hover { text-decoration: underline; }

/* label row with optional right-aligned link (Forgot password?) */
.auth-form .auth-lr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.auth-form .auth-lr label { margin: 0; }
.auth-form .forgot { font-size: 12.5px; font-weight: 600; color: var(--a-emerald); text-decoration: none; }
.auth-form .forgot:hover { text-decoration: underline; }
.auth-form .field label { font-family: var(--inter); font-size: 13px; font-weight: 600; color: var(--a-ink); }

/* social sign-in */
.auth-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--a-faint); font-size: 12.5px; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--a-line); }
.social { display: flex; flex-direction: column; gap: 10px; }
/* Horizontal pill row: Google / Apple / Facebook side by side (1.jpg). */
.social.row { flex-direction: row; }
.social.row .social-btn { flex: 1 1 0; min-width: 0; padding: 11px 8px; font-size: 13.5px; gap: 8px; }
.social.row .social-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  border-radius: 12px; padding: 13px; font-family: var(--inter); font-weight: 600; font-size: 14.5px; cursor: pointer;
  border: 1px solid var(--a-field); background: var(--card); color: var(--a-ink); transition: .16s; }
.social-btn:hover { background: var(--bg); border-color: var(--muted); }
.social-btn svg { width: 18px; height: 18px; flex: none; }

/* Explicit-acceptance line under the auth actions ("By continuing you agree…"). */
.auth-legal { text-align: center; margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: var(--a-faint); }
/* SMS consent sits just above the Terms line; tighten the gap between the two fine-print blocks. */
.auth-sms-consent + .auth-legal { margin-top: 8px; }
.auth-legal a { color: var(--a-muted); text-decoration: underline; }
.auth-legal a:hover { color: var(--a-ink); }

/* rounded inputs + gradient primary for the auth form */
.auth-form .field input, .auth-form .field select { border-radius: 11px; padding: 16px 14px; border: 1px solid var(--a-field);
  font-size: 15px; color: var(--a-ink); color-scheme: light; }
.auth-form .field input::placeholder { color: var(--a-faint); }
.auth-form .field input:focus, .auth-form .field select:focus { outline: none; border-color: var(--a-emerald); box-shadow: 0 0 0 3px var(--a-soft); }
/* Country-code phone input (22.jpg): flag+dial pill fused with the national number field in one
   bordered box, plus a searchable country dropdown. Chrome mirrors .field input above. */
.auth-ph { position: relative; display: flex; align-items: stretch; border: 1px solid var(--a-field); border-radius: 11px; background: #fff; }
.auth-ph:focus-within { border-color: var(--a-emerald); box-shadow: 0 0 0 3px var(--a-soft); }
/* 29.jpg: no divider — the country selector and number field flow together in one box. */
.auth-ph-cc { display: flex; align-items: center; gap: 5px; padding: 0 4px 0 12px; border: none;
  border-radius: 11px 0 0 11px; background: transparent; cursor: pointer; font: inherit; color: var(--a-ink); }
.auth-ph-cc:hover { color: var(--a-emerald); }
.auth-ph-flag { width: 26.45px; height: 19.84px; flex: none; border-radius: 2px; object-fit: cover; display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.auth-ph-dial { font-size: 15px; color: var(--a-ink); }
.auth-ph-caret { display: inline-flex; align-items: center; color: var(--a-faint); }
/* Higher specificity than `.auth-form .field input` (0,2,1) so this input truly loses its own
   border/radius/focus-ring — otherwise the number field keeps its border and it reads as a
   divider inside the pill (0.jpg). The border + focus now live only on the .auth-ph container. */
.auth-form .field input.auth-ph-num { flex: 1; min-width: 0; border: none; background: transparent;
  padding: 16px 14px 16px 6px; border-radius: 0 11px 11px 0; font-size: 15px; color: var(--a-ink); color-scheme: light; }
.auth-form .field input.auth-ph-num:focus { border: none; box-shadow: none; outline: none; }
.auth-form .field input.auth-ph-num::placeholder { color: var(--a-faint); }
.auth-ph-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #fff;
  border: 1px solid var(--a-field); border-radius: 12px; box-shadow: 0 18px 44px rgba(12,59,46,.16); overflow: hidden; }
.auth-ph-menu[hidden] { display: none; }
.auth-ph-search { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--a-line); padding: 16px 14px; font: inherit; font-size: 14px; }
.auth-ph-search:focus { outline: none; }
.auth-ph-list { max-height: 260px; overflow-y: auto; }
.auth-ph-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent;
  padding: 10px 14px; cursor: pointer; font: inherit; font-size: 14px; text-align: left; }
.auth-ph-opt:hover, .auth-ph-opt.on { background: var(--a-soft); }
.auth-ph-opt .auth-ph-nm { flex: 1; min-width: 0; color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-ph-opt .auth-ph-dial { color: var(--a-faint); }
.auth-ph-empty { padding: 14px; color: var(--a-faint); font-size: 13px; text-align: center; }
.auth-form .btn.block { border: none; border-radius: 12px; padding: 15px; font-family: var(--inter); font-weight: 600; font-size: 15px;
  color: #fff; background: linear-gradient(90deg, #1A8A66 0%, #0C3B2E 100%); box-shadow: 0 10px 22px -8px rgba(12,59,46,.5); transition: .18s; }
.auth-form .btn.block:hover { transform: translateY(-1px); }

/* password show/hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 2.9rem !important; }
.pw-eye { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; border-radius: 8px; color: var(--a-faint); cursor: pointer; }
.pw-eye:hover { color: var(--a-muted); background: var(--bg); }
.pw-eye svg { width: 19px; height: 19px; }
.pw-eye.on { color: var(--a-emerald); }

@media (max-width: 1125px) {
  /* Single column below 1125px: the brand panel is hidden entirely, so the form column
     is the whole page. grid-template-columns must be reset because the desktop rule now
     puts the FIXED column second (1fr 46vw) rather than first. */
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-panel { padding: 32px 24px; }
}
.lang-toggle { display: flex; justify-content: center; gap: .3rem; margin-top: 1.25rem; }

/* Flag chip + language dropdown (used on the login page and in-app chrome) */
.flag { display: inline-block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); flex: 0 0 auto; line-height: 0; background: var(--card); }
.flag svg { display: block; width: 100%; height: 100%; }

/* Trigger and menu share ONE fixed width so the closed pill and the open list align
   edge-to-edge (10.jpg — the pill used to be narrower than its dropdown). Same
   treatment the auth corner picker below already used; 180px fits the longest
   endonym ("Nederlands") with its flag chip. */
.lang-dd { position: relative; display: inline-block; width: 180px; }
.lang-trigger { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: .5rem;
  background: var(--card); color: var(--ink, #1c1b1f);
  border: 1px solid var(--line); border-radius: 10px; padding: .45rem .7rem; font-weight: 600; font-size: .9rem; cursor: pointer; }
.lang-trigger:hover { background: var(--bg, #f7f7f5); }
.lang-trigger .caret { color: var(--muted); font-size: .7rem; margin-left: .1rem; }
.lang-menu { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; transform: none; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  min-width: 0; overflow: hidden auto; max-height: min(60vh, 340px); z-index: 60; padding: .25rem; }
.lang-dd.up .lang-menu { top: auto; bottom: calc(100% + .4rem); }
.lang-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px;
  cursor: pointer; font-size: .9rem; color: var(--ink, #1c1b1f); white-space: nowrap; }
.lang-item:hover { background: var(--bg, #f0f7f3); }
.lang-item.active { background: var(--green-light); font-weight: 700; }
.lang-ditem .lang-trigger { border: none; padding: .25rem .4rem; }
/* Auth corner picker (j.jpg): the centered menu used to jut ~35px left of the
   trigger — riding over the Email/Phone method pills — and spill past the
   viewport on the right. Right-align it to the fixed corner anchor instead, and
   give the trigger and the open list ONE shared width so box and list read as a
   single column; the list's left edge then clears the Phone pill's vertical
   edge by ≥ 0.125in at desktop widths. */
.auth-topbar .lang-dd { width: 180px; }
/* BLEND with the page: the picker sits on the warm auth page, not on a card, so a white
   fill and a hairline border made it read as a floating chip. Same colour as --a-page and
   a transparent border at rest means the box itself disappears and only the flag + name +
   caret remain. The border fades in on hover/focus/open so the control still announces
   itself as interactive — invisible is the look we want, not unfindable. */
.auth-topbar .lang-trigger { width: 100%; justify-content: center;
  background: var(--a-page); border-color: transparent; box-shadow: none;
  transition: background .15s ease, border-color .15s ease; }
.auth-topbar .lang-trigger:hover,
.auth-topbar .lang-trigger:focus-visible,
.auth-topbar .lang-trigger[aria-expanded="true"] { background: var(--a-page); border-color: var(--a-line); }
/* The open list matches the page too; it reads as depth via the shadow, not via a
   different surface colour. */
.auth-topbar .lang-menu { left: auto; right: 0; transform: none; width: 100%; min-width: 0;
  background: var(--a-page); border-color: var(--a-line); }
.auth-topbar .lang-item:hover { background: rgba(0,0,0,.045); }
.auth-topbar .lang-item.active { background: var(--a-soft); }

/* ---------- banners / alerts ---------- */
/* email-verification nag (shell soft-gate) */
.verify-banner { background: var(--warn-bg); border-bottom: 1px solid #f0dcae; color: #6b4e16; padding: .55rem 1rem; font-size: .9rem; text-align: center; }
.verify-banner .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--green); font-weight: 600; cursor: pointer; text-decoration: underline; }
.banner { border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.banner.warn { background: var(--warn-bg); border: 1px solid #f0dcae; }
.banner.warn .btn { margin-left: auto; }
.banner.error { background: var(--danger-bg); border: 1px solid #efc9c3; color: var(--danger); }
.alert { border-radius: 9px; padding: .55rem .75rem; font-size: .9rem; margin-bottom: .75rem; }
.alert.error { background: var(--danger-bg); color: var(--danger); border: 1px solid #f3c6bf; }
.alert.ok { background: var(--green-light); color: var(--green-dark); border: 1px solid #c2e3cf; }
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

/* ---------- dropdown ---------- */
.menu { position: relative; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 86vw;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); overflow: hidden; z-index: 40;
}
.dropdown .dhead { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.dropdown .dhead .dhead-acts { display: flex; align-items: center; gap: .35rem; }
.dropdown .dhead .btn.danger { color: var(--danger, #c0392b); }
.dropdown .ditem { padding: .6rem .8rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.dropdown .ditem:hover { background: var(--bg); }
.dropdown .ditem.unread { background: var(--green-light); }
.dropdown .ditem .t { font-weight: 600; font-size: .9rem; }
.dropdown .ditem .b { font-size: .82rem; color: var(--muted); }
.dropdown .ditem .time { font-size: .72rem; color: var(--muted); }
.notif-list { max-height: 60vh; overflow: auto; }
.profile-menu .ditem { display: flex; align-items: center; gap: .5rem; }

/* ===== account menu (redesigned — rich identity header + sectioned items) ===== */
/* 60.jpg: stretched left (300 -> 335px) so the menu's left edge lands on the
   user's red line; the dropdown is right-anchored, so only the left edge moves. */
.acct-menu { width: 335px; padding: 8px; border-radius: 6px; border-color: #E7ECE9; overflow: visible; }
.acct-menu .acct-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 14px; }
.acct-menu .acct-av { width: 46px; height: 46px; border-radius: 50%; background: var(--green-light); color: var(--green);
  flex: none; display: grid; place-items: center; font-family: var(--grotesk); font-weight: 700; font-size: 18px; }
.acct-menu .acct-id { min-width: 0; }
.acct-menu .acct-nm { font-family: var(--grotesk); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-menu .acct-em { font-size: 12.5px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-menu .acct-vpill { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; background: var(--green-light);
  color: var(--green); border-radius: 999px; padding: 3px 9px; font-weight: 600; font-size: 10.5px; }
.acct-menu .acct-vpill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.acct-menu .acct-vic, .acct-menu .acct-vic svg { width: 11px; height: 11px; display: block; }
.acct-menu .acct-div { height: 1px; background: var(--line); margin: 6px 8px; }
.acct-menu .acct-item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 6px;
  cursor: pointer; transition: background .13s; text-decoration: none; color: var(--ink); border: 0; background: none; }
.acct-menu .acct-item:hover { background: var(--bg); text-decoration: none; }
.acct-menu .acct-ic { width: 20px; height: 20px; color: var(--muted); flex: none; display: grid; place-items: center; }
.acct-menu .acct-ic svg, .acct-menu .acct-chev svg { display: block; }
.acct-menu .acct-lbl { flex: 1; font-size: 14.5px; font-weight: 500; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-menu .acct-right { display: flex; align-items: center; gap: 8px; flex: none; }
.acct-menu .acct-chev { color: #656e68; display: grid; place-items: center; }
.acct-menu .acct-pill { background: var(--green-light); color: var(--green); border-radius: 999px; padding: 3px 9px;
  font-weight: 600; font-size: 10.5px; }
.acct-menu .acct-pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.acct-menu .acct-item.danger .acct-lbl { color: var(--danger); }
.acct-menu .acct-item.danger .acct-ic { color: var(--danger); }
.acct-menu .acct-item.danger:hover { background: var(--danger-bg); }
/* language row: reuse the working lang dropdown but strip its chrome so it reads as
   an inline value (flag + native name + caret) on the right of the row. */
.acct-menu .acct-lang { cursor: default; }
.acct-menu .acct-lang:hover { background: none; }
.acct-menu .acct-lang .lang-dd .lang-trigger { background: transparent; border: 0; box-shadow: none; padding: 0;
  gap: 7px; color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer; }
.acct-menu .acct-lang .lang-dd .lang-trigger:hover { background: transparent; }
/* Inside the account menu the dropdown sizes to its content (the global 180px
   fixed width was starving the row's label — "Langua…"); the OPEN list keeps a
   usable fixed width, right-aligned under the trigger. */
.acct-menu .acct-lang .lang-dd { width: auto; }
.acct-menu .acct-lang .lang-menu { width: 180px; left: auto; right: 0; }

/* ---------- appearance (expandable: Appearance ▸ System / Light / Dark) ---------- */
/* The Appearance row reads like Notifications (full label + chevron); clicking it
   expands the three theme choices below it. */
.acct-menu .acct-theme { width: 100%; border: 0; background: none; font: inherit; text-align: left;
  color: inherit; cursor: pointer; }
.acct-menu .acct-theme .acct-val { color: var(--muted); font-size: .9rem; font-weight: 600; }
.acct-menu .acct-theme .acct-chev { transition: transform .18s ease; }
.acct-menu .acct-theme.open .acct-chev { transform: rotate(90deg); }
.acct-submenu { display: flex; flex-direction: column; padding: 2px 0 4px; }
.acct-submenu.hide { display: none; }
.acct-subitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: 0; background: none; font: inherit; cursor: pointer; color: var(--ink);
  padding: 10px 14px 10px 50px; border-radius: 10px; }
.acct-subitem:hover { background: var(--bg); }
.acct-sub-lbl { font-size: .92rem; font-weight: 500; }
.acct-sub-check { display: none; color: var(--green); }
.acct-subitem.on .acct-sub-check { display: inline-flex; }
.acct-subitem.on .acct-sub-lbl { color: var(--green); font-weight: 600; }

/* ---------- stepper ---------- */
.stepper { display: flex; align-items: flex-start; overflow-x: auto; gap: .25rem; padding: .5rem 0 1rem; }
.step { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 78px; position: relative; flex: 1; }
.step .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-content: center; font-weight: 800; font-size: .8rem; z-index: 2; }
.step.done .dot { background: var(--green); color: #fff; }
.step.current .dot { background: var(--amber); color: #3a2a08; box-shadow: 0 0 0 4px var(--warn-bg); }
.step .lbl { font-size: .7rem; text-align: center; color: var(--muted); }
.step.done .lbl, .step.current .lbl { color: var(--ink); font-weight: 600; }
.step::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 3px; background: var(--bg); z-index: 1; }
.step:last-child::after { display: none; }
.step.done::after { background: var(--green); }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: 420px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.chat-log { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; background: var(--bg); }
.msg { max-width: 78%; padding: .45rem .7rem; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.msg.me { align-self: flex-end; background: var(--green); color: #fff; border-color: var(--green); }
.msg .who { font-size: .7rem; opacity: .8; margin-bottom: .1rem; }
.msg .time { font-size: .64rem; opacity: .7; margin-top: .15rem; text-align: right; }
.chat-form { display: flex; gap: .5rem; padding: .55rem; border-top: 1px solid var(--line); background: var(--card); }
.chat-form input { flex: 1; }

/* ---------- misc ---------- */
.stars { display: inline-flex; gap: 2px; font-size: 1.3rem; line-height: 1; }
.star { background: none; border: none; color: #d9dcda; padding: 0 1px; }
.star.on { color: var(--amber); }
.thumb { width: 100%; max-width: 280px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); display: block; }
.thumb.sm { width: 64px; height: 64px; object-fit: cover; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .9rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.stat .n { font-size: 1.8rem; font-weight: 800; color: var(--green); }
.stat .l { font-size: .82rem; color: var(--muted); }
.stat.hero { grid-column: 1 / -1; background: linear-gradient(120deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; }
.stat.hero .n, .stat.hero .l { color: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
table.data th, table.data td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
table.data th { background: var(--bg); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.tablewrap { overflow-x: auto; }
.toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 100; width: min(420px, 92vw); }
.toast { background: #222; color: #fff; padding: .65rem .9rem; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: .9rem; animation: slideup .2s ease; }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--amber); color: #3a2a10; }
.toast.ok { background: var(--green); }
@keyframes slideup { from { transform: translateY(12px); opacity: 0; } }
.inline-spin { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.section-divider { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 1.3rem 0 .6rem; }
.backlink { display: inline-block; margin-bottom: .6rem; font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1025px) { .two-col { grid-template-columns: 1fr; } }
.hide { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   Marketing homepage — logged-out landing (#/home). Brand green/amber only.
   ════════════════════════════════════════════════════════════════════════ */
/* --hmax 1240 (was 1140): stretched so the LONGEST locale's header fits on one line —
   Swedish "Så fungerar det / Trygghet och säkerhet / Logga in / Kom igång" used to
   wrap to two lines inside their buttons (17.jpg). */
/* .home-footer carries the vars/wrap too: it also renders standalone as the
   footnote on public pages (legal/support/about/careers/prohibited, 47.jpg). */
.home, .home-footer { --hpad: clamp(1.1rem, 5vw, 3rem); --hmax: 1240px; color: var(--ink); }
.home h2, .home h3, .home h4 { margin: 0; }
.home .home-wrap, .home-footer .home-wrap { max-width: var(--hmax); margin: 0 auto; padding: 0 var(--hpad); }
.home .home-wrap-narrow { max-width: 760px; }
.home .home-cta-lg { padding: .8rem 1.3rem; font-size: 1rem; border-radius: 12px; }
.home .ico { display: inline-flex; }
.home .ico svg { width: 1.05em; height: 1.05em; display: block; }

/* ── sticky header ── */
.home-header {
  position: sticky; top: 0; z-index: 50;
  /* Solid white (0.jpg): the old rgba(255,255,255,.82)+blur let the green hero tint the
     header's empty areas while sticky-scrolled. Pure #fff, no see-through. */
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* Premium pass: a whisper of depth under the sticky header so it reads as a
     floating surface once content scrolls beneath it. */
  box-shadow: 0 6px 20px rgba(16, 36, 28, .06);
}
/* logo button — resets native button chrome; scrolls to top on click */
.home-brand-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; }
.home-header-inner {
  max-width: var(--hmax); margin: 0 auto; padding: .7rem var(--hpad);
  display: flex; align-items: center; gap: 1rem;
}
/* home header/footer lockups mirror the SHELL TOPBAR lockup exactly (64.jpg —
   user request): 48px glossed tile (radius 7.4), 28px wordmark, .9rem/400 tagline
   with the topbar's 2px tracking. Colors stay variant-correct (ink on the white
   header, white on the green footer). Sizes are x0.75-integer (36/21 physical). */
.home-wordmark { gap: 4.5px; align-items: center; }
.home-wordmark .brand-mark { width: 48px; height: 48px; border-radius: 7.4px; box-shadow: 0 1px 5px rgba(16,36,28,.22); }
.home-wordmark .brand-text { justify-content: center; gap: 3.12px; }
.home-wordmark .brand-logo { height: 28px; }
.home-wordmark .brand-tagline { font-size: .9rem; font-weight: 400; letter-spacing: 2px; }
.home-wordmark .brand-tagline .dot { font-size: 11.5px; }
.home-nav { display: flex; gap: .35rem; margin: 0 auto; }
.home-navlink {
  /* Premium pass (parity with the shell tabs' de-fade): ink instead of muted gray,
     semibold, a touch of tracking, pill-rounded ghost hover. 15px kept (claude.com). */
  background: none; border: none; color: var(--ink); font-weight: 600; font-size: .9375rem;
  letter-spacing: .01em; padding: .45rem .8rem; border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap; /* labels never break inside the button (17.jpg) */
}
.home-navlink:hover { color: var(--green-dark); background: var(--green-light); }
.home-header-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.home-header-actions .btn { white-space: nowrap; font-size: .9375rem; font-weight: 600; } /* Sign in / Get started: 15px, semibold to match the de-faded nav links; stay one line */
/* Premium pass: the header CTA lifts on hover with a soft amber glow. */
.home-header-actions .btn.amber { transition: transform .15s, box-shadow .15s, background .15s; }
.home-header-actions .btn.amber:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(212, 134, 42, .55); }
/* Mid widths: compact the nav so the one-line row still fits before it collapses. */
@media (max-width: 1600px) {
  .home-nav { gap: .15rem; }
  .home-navlink { font-size: .85rem; padding: .4rem .45rem; }
}
@media (max-width: 1375px) {
  .home-nav { display: none; }
}
/* Sign in STAYS when the nav collapses (0.jpg: phones showed only "Get started") —
   the pair just compacts on narrow screens so brand + both pills share one line. */
@media (max-width: 480px) {
  .home-header-actions { gap: .4rem; }
  .home-header-actions .btn { font-size: .875rem; padding: .5rem .7rem; }
}

/* ── top bar ── */
.home-topbar { background: var(--green-dark); color: rgba(255,255,255,.85); font-size: .85rem; }
.home-topbar-inner { max-width: var(--hmax); margin: 0 auto; padding: .4rem var(--hpad); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-topbar-item { display: inline-flex; align-items: center; gap: .45rem; }
/* inline-SVG country flag chip (flags.js) — the route ticker's replacement for emoji
   flags (which don't render on Windows, 19.jpg). Subtle ring so white flag edges
   don't dissolve into light-on-dark contexts. */
.cflag { display: inline-flex; width: 17px; height: 12px; border-radius: 2.5px; overflow: hidden;
  vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255,255,255,.28); flex: none; }
.cflag svg { width: 100%; height: 100%; display: block; }
.home-topbar-routes { display: inline-flex; align-items: center; gap: .05rem; }
.home-topbar-item .ico, .home-topbar-link .ico { color: var(--amber); }
/* Live-routes ticker (19.jpg): fixed min-width so the bar never jiggles as pairs of
   different lengths rotate; gentle 350ms crossfade, disabled under reduced motion. */
.home-topbar-routes { display: inline-block; min-width: 24ch; transition: opacity .35s ease; }
.home-topbar-routes.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .home-topbar-routes { transition: none; } }
.home-topbar-right { display: flex; align-items: center; gap: .7rem; }
.home-topbar-link { background: none; border: none; color: rgba(255,255,255,.85); font: inherit; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: 0; }
.home-topbar-link:hover { color: #fff; }
.home-topbar-sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); }
@media (max-width: 800px) { .home-topbar-left { display: none; } }

/* Help popover — shared by the top bar and footer "Help" affordances */
.home-help { position: relative; display: inline-block; }
.home-help-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 70; min-width: 200px;
  background: var(--card); color: var(--ink); border-radius: 6px; padding: .35rem;
  box-shadow: 0 14px 40px rgba(20,40,30,.22); border: 1px solid var(--line);
}
.home-help.up .home-help-menu { top: auto; bottom: calc(100% + .5rem); }
.home-help-menu.hide { display: none; }
.home-help-item {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  background: none; border: none; font: inherit; font-size: .9rem; color: var(--ink);
  padding: .55rem .65rem; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.home-help-item:hover { background: var(--green-light); text-decoration: none; }
.home-help-item .ico { color: var(--green); display: inline-flex; }
.home-help-item .ico svg { width: 17px; height: 17px; }

/* ── hero slider ── */
.home-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 130% at 18% 8%, #1d8a52 0%, var(--green) 40%, var(--green-dark) 76%, #0c3d24 100%);
}
.home-hero-bg { position: absolute; inset: 0; opacity: .14; pointer-events: none; }
/* fill (not cover): compress the whole route map into the hero so Canada, the US and
   Latin America stay visible at any aspect ratio — cover used to crop the map to a
   middle band that hid everything north of the USA and south of Panama (11.jpg). */
.home-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.home-hero-view { position: relative; z-index: 2; overflow: hidden; }
.home-hero-track { display: flex; transition: transform .7s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .home-hero-track, .home-hero-tint { transition: none; } }
.home-hero-slide { min-width: 100%; }
/* Opt-3 colour treatment: full-section tint layers that cross-fade with the
   active slide (opacity driven from JS). They cover the top AND bottom of the
   hero, so there's no colour seam between the sliding copy and the static block. */
.home-hero-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s cubic-bezier(.4,0,.2,1); }
.home-hero-tint.tint-b { background: linear-gradient(110deg, rgba(242,163,65,.18), transparent 55%); }
.home-hero-tint.tint-c { background: linear-gradient(110deg, rgba(43,111,151,.20), transparent 55%); }
.home-hero-inner { position: relative; z-index: 2; max-width: var(--hmax); margin: 0 auto; padding: 0 var(--hpad); }
.home-hero-inner-slide { padding-top: clamp(3rem, 9vw, 6rem); }
.home-hero-inner-static { padding-bottom: clamp(4rem, 10vw, 7rem); }
.home-hero-copy { max-width: 660px; }
.home-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14);
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.home-hero-eyebrow .ico { color: var(--amber); }
/* Animated hero eyebrows — parity with the app home: Send slide = Shine Sweep + flying
   parcel, Travel slide = Coin Trail (currency coin rolls above the white text). The coin/
   parcel float just above the pill and never sit on the letters. */
.home-hero-eyebrow.eb-anim { position: relative; overflow: visible; }
.home-hero-eyebrow .eb-text { display: inline-block; }
.home-hero-eyebrow .eb-text.eb-shine {
  background: linear-gradient(100deg, #fff 0 40%, #CFF6E6 50%, #fff 60% 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: ebShine 3s linear infinite;
}
@keyframes ebShine { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.home-hero-eyebrow .eb-text.eb-trail { animation: ebTrail 3.6s ease-in-out infinite; }
@keyframes ebTrail { 0% { clip-path: inset(0 100% 0 0); } 58% { clip-path: inset(0 0 0 0); } 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.home-hero-eyebrow .eb-coin {
  position: absolute; left: 0; top: -1.45em; width: 1.45em; height: 1.45em; border-radius: 50%;
  display: grid; place-items: center; color: #6b4e10; font-weight: 900; line-height: 1;
  background: radial-gradient(circle at 35% 28%, #FBE39B, #E3B23C 70%, #C8901E);
  box-shadow: 0 2px 5px rgba(200,144,30,.55), inset 0 0 0 1.5px rgba(255,255,255,.4);
  animation: ebFly 3.6s ease-in-out infinite, ebSpin 1.1s linear infinite;
}
.home-hero-eyebrow .eb-parcel {
  position: absolute; left: 0; top: -1.15em; width: 1.45em; height: 1.15em; border-radius: 3px;
  background: linear-gradient(#FBB04B, #F08A24); box-shadow: 0 2px 5px rgba(240,138,36,.5);
  animation: ebFly 3.6s ease-in-out infinite, ebBob .8s ease-in-out infinite;
}
.home-hero-eyebrow .eb-parcel::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(120,70,10,.4); transform: translateX(-50%); }
/* Coin/parcel start at the pill's LEFT edge and stop at the right edge (then loop). */
@keyframes ebFly  { 0% { left: 0; } 58% { left: 100%; } 88% { left: 100%; } 100% { left: 120%; } }
@keyframes ebSpin { to { transform: rotate(360deg); } }
@keyframes ebBob  { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
  .home-hero-eyebrow .eb-text.eb-shine { animation: none; background: none; color: #fff; -webkit-text-fill-color: #fff; }
  .home-hero-eyebrow .eb-text.eb-trail { animation: none; clip-path: none; }
  .home-hero-eyebrow .eb-coin, .home-hero-eyebrow .eb-parcel { display: none; }
}
.home-hero-h { font-size: clamp(2.1rem, 6vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 1rem; }
.home-hero-sub { font-size: clamp(1.02rem, 2.2vw, 1.22rem); line-height: 1.55; color: rgba(255,255,255,.9); margin: 0 0 1.7rem; max-width: 580px; }
.home-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.5rem; }
.btn.ghost.home-cta-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.btn.ghost.home-cta-ghost:hover { background: rgba(255,255,255,.16); }
/* Hero Send/Earn pills mirror the bottom "Ready to send…" band: solid green +
   solid cream, each with its icon (see .home-cta-band .btn rules below). */
.home-hero-cta .home-cta-send { background: var(--amber); color: #3a2a08; border: none; }
.home-hero-cta .home-cta-send:hover { background: var(--amber-dark); }
.home-hero-cta .home-cta-earn { background: #f1d3a6; color: #3a2a08; border: none; }
.home-hero-cta .home-cta-earn:hover { background: #f7e0bd; }
/* Premium pass: hero CTAs lift on hover (matches the service-card motion language). */
.home-hero-cta .btn { transition: transform .15s, box-shadow .15s, background .15s; }
.home-hero-cta .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(8, 30, 20, .5); }
.home-hero-trust { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; color: rgba(255,255,255,.85); font-weight: 500; }
.home-hero-trust .ico { color: var(--amber); }
.home-hero-arrow { position: absolute; top: 44%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.home-hero-arrow:hover { background: rgba(255,255,255,.26); }
.home-hero-arrow svg { width: 22px; height: 22px; }
.home-hero-arrow.prev { left: clamp(.4rem, 2vw, 1.4rem); }
.home-hero-arrow.next { right: clamp(.4rem, 2vw, 1.4rem); }
/* Dots sit in-flow under the rotating headline (the CTA/trust/app block follows). */
.home-hero-dots { display: flex; justify-content: flex-start; gap: .5rem; margin: 1.4rem 0 0; }
.home-hero-dots .home-dot { background: rgba(255,255,255,.45); }
.home-hero-dots .home-dot.active { background: var(--card); }
.home-hero-static { margin-top: 1.6rem; }
/* persistent brand tagline in the hero (shared copy with the footer) */
.home-hero-tagline { font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.18rem); letter-spacing: .01em; color: #fff; margin: 0 0 1.1rem; }
.home-hero-tagline::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--amber); vertical-align: middle; margin-right: .6rem; }
/* curved shape divider */
.home-shape { position: absolute; left: 0; right: 0; line-height: 0; z-index: 3; pointer-events: none; }
.home-shape svg { width: 100%; height: clamp(38px, 6vw, 78px); display: block; }
.home-shape-hero { bottom: -1px; }
/* The wave matches the section BELOW it (the page background, 21.jpg) — its inline
   #ffffff fill read as a distinct white band against the #f6f8f6 section. The sticky
   header above the hero stays pure white (separate .home-header rule). */
.home-shape-hero svg path { fill: var(--bg); }

/* ── dark theme: marketing-home surfaces with hardcoded light colours ──
   Most of the homepage adapts via the theme tokens (--bg/--card/--ink/--line),
   but a few elements bake in a literal white that has to be flipped explicitly:
   the frosted sticky header, the ink wordmark image, and the hero wave divider
   (its fill is inline on the SVG path, so it can't read a token). */
[data-theme="dark"] .home-header { background: #0b0d0c; } /* solid, same no-see-through rule as light */
/* ink wordmark is a single-fill (#0C3B2E) SVG image → recolour to white on dark,
   matching the white wordmark variant the footer already uses on dark surfaces. */
[data-theme="dark"] .ugs-brand--ink .brand-logo { filter: brightness(0) invert(1); }
/* (hero divider wave: now var(--bg) in BOTH themes — see .home-shape-hero above.) */

/* ── generic section ── */
.home-section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.home-section-alt { background: var(--green-light); }

/* Services — continuous, full-width marquee of uniform cards (slides end-to-end) */
.home-svc-marquee { overflow: hidden; padding: 14px 0 34px; margin-top: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* JS (requestAnimationFrame) drives the slide via inline transform — no CSS animation.
   Auto-scroll + clones only exist when 4+ cards are enabled; 1–3 cards render static
   and symmetrically centred (.static). */
.home-svc-track { display: flex; width: max-content; will-change: transform; }
.home-svc-marquee.static .home-svc-track { width: 100%; justify-content: center; }
.home-svc-marquee.static .home-svc-card:last-child { margin-right: 0; }  /* symmetric centring */
.home-svc-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; }
.home-svc-controls[hidden] { display: none; }                  /* hidden when < 4 enabled cards */
.home-svc-toggle, .home-svc-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line, #dfeae3);
  background: var(--card, #fff); color: var(--green, #1B7F4B); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(20,40,30,.1); transition: transform .16s, background .16s; }
.home-svc-toggle:hover, .home-svc-nav:hover { background: var(--green-light, #e6f3ec); transform: translateY(-1px); }
.home-svc-toggle svg, .home-svc-nav svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: reduce) { .home-svc-marquee { overflow-x: auto; } }
/* large uniform cards with a SQUARE image — matches the demo */
/* margin-right is the inter-card gap; it MUST stay uniform on every card (real +
   clone) so the -50% marquee keyframe loops seamlessly. 0.69rem (~11px) = the
   000/1.jpg-matched 1.1rem reduced 30% then a further 10% per request. The
   how-it-works steps use this same value. Cards use the 6px radius. */
.home-svc-card { flex: 0 0 380px; width: 380px; margin-right: 0.69rem; background: var(--card); border-radius:6px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20,40,30,.08); transition: transform .35s ease, box-shadow .35s ease; }
.home-svc-card:hover { transform: translateY(-10px); box-shadow: 0 26px 56px rgba(20,40,30,.18); }
.home-svc-media { position: relative; aspect-ratio: 1 / 1; background-size: cover; background-position: center; overflow: hidden; }
@supports not (aspect-ratio: 1 / 1) { .home-svc-media { height: 380px; } }
@media (max-width: 575px) { .home-svc-card { flex-basis: 300px; width: 300px; } }
.home-svc-media::after { content: ''; position: absolute; inset: 0; background: rgba(8,30,20,.14); transition: background .35s ease; }
.home-svc-card:hover .home-svc-media::after { background: rgba(8,30,20,.02); }
/* icon badge sits fully inside the image (not clipped by the media edge) */
.home-svc-ico { position: absolute; left: 1.1rem; bottom: 16px; z-index: 2; width: 54px; height: 54px; padding: 14px;
  border-radius: 15px; background: var(--card); color: var(--green); box-shadow: 0 8px 20px rgba(0,0,0,.16); transition: transform .35s ease; }
.home-svc-card:hover .home-svc-ico { transform: translateY(-4px) scale(1.06); }
.home-svc-ico svg { width: 100%; height: 100%; }
/* image-placeholder hint shown until the operator sets a photo (img) */
.home-svc-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.5); pointer-events: none; }
.home-svc-ph svg { width: 58px; height: 58px; }
.home-svc-body { padding: 1.4rem 1.3rem 1.5rem; }
.home-svc-t { font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; transition: color .25s ease; }
.home-svc-card:hover .home-svc-t { color: var(--green); }
.home-svc-d { margin-top: .5rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.home-svc-learn { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: 0; border: none; background: none;
  color: var(--green); font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; }
.home-svc-learn:hover { text-decoration: none; }
.home-svc-learn .home-svc-arrow { display: inline-flex; transition: transform .25s ease; }
.home-svc-learn .home-svc-arrow svg { width: 17px; height: 17px; }
.home-svc-card:hover .home-svc-learn .home-svc-arrow { transform: translateX(5px); }
.home-carousel-dots { display: flex; justify-content: center; gap: .45rem; margin-top: .4rem; }
.home-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(27,127,75,.28); padding: 0; cursor: pointer; transition: width .25s, background .25s; }
.home-dot.active { background: var(--green); width: 24px; border-radius: 5px; }
.home-stats { padding: clamp(2rem, 5vw, 3rem) 0; background: var(--ink); color: #fff; }
.home-head { max-width: 680px; margin: 0 auto 2.6rem; text-align: center; }
.home-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: .6rem; }
.home-h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.home-lede { font-size: 1.05rem; color: var(--muted); margin-top: .7rem; line-height: 1.55; }

/* ── how it works ── */
/* gap matches the "Services We Provide" inter-card gap (.home-svc-card margin-right). */
.home-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.69rem; }
.home-step {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.5rem 1.3rem; box-shadow: var(--shadow);
}
.home-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.home-step-num { font-size: 1.6rem; font-weight: 800; color: var(--green-light); -webkit-text-stroke: 1px var(--green); }
.home-step-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.home-step-ico .ico svg { width: 22px; height: 22px; }
.home-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; color: var(--ink); }
.home-step p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0; }

/* ── two roles ── */
/* gap matches the "Services We Provide" inter-card gap (.home-svc-card margin-right). */
.home-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.69rem; }
.home-role {
  background: var(--card); border: 1px solid var(--line); border-radius:6px;
  padding: 2rem 1.8rem; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.home-role-traveler { border-color: rgba(242,163,65,.4); }
.home-role-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.1rem; }
.home-role-sender .home-role-ico { background: var(--green-light); color: var(--green-dark); }
.home-role-traveler .home-role-ico { background: var(--warn-bg); color: var(--amber-dark); }
.home-role-ico .ico svg { width: 26px; height: 26px; }
.home-role h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .4rem; }
.home-role-sub { color: var(--muted); line-height: 1.5; margin-bottom: 1.1rem; }
.home-role-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .65rem; }
.home-role-list li { display: flex; align-items: flex-start; gap: .55rem; font-size: .95rem; line-height: 1.45; }
.home-role-list li .ico { color: var(--green); flex: none; margin-top: .1rem; }
.home-role-list li .ico svg { width: 18px; height: 18px; }
.home-role-cta { align-self: flex-start; margin-top: auto; }
.home-role-traveler .home-role-cta { background: var(--amber); color: #3a2a08; }
.home-role-traveler .home-role-cta:hover { background: var(--amber-dark); }
/* punchy value headline on each role card ("Save ~50%" / "Earn $40–120+") */
.home-role-value { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: .35rem; }
.home-role-sender .home-role-value { color: var(--green-dark); }
.home-role-traveler .home-role-value { color: var(--amber-dark); }
/* Gold brand line under the traveler card title — "Spare space, put to work." A short
   leading dash echoes the app's gold accent. */
.home-role-tagline { display: flex; align-items: center; gap: .5rem; color: var(--amber-dark); font-weight: 700; font-size: 1rem; margin-bottom: .7rem; }
.home-role-tagline::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--amber-dark); flex: none; }

/* "Join the first route" — no-account lead capture that coexists with signup.
   Persists via /leads; opens WhatsApp too once a number is configured (admin). */
/* gap matches the "Services We Provide" inter-card gap (.home-svc-card margin-right). */
.home-join-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 0.69rem; margin-top: 1.6rem; }
.home-join-card { background: var(--card); border: 1px solid var(--line); border-radius:6px; padding: 1.6rem 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .8rem; }
.home-join-h { font-size: 1.15rem; font-weight: 800; margin-bottom: .15rem; }
.home-join-field { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.home-join-field input, .home-join-field textarea { font: inherit; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: .6rem .7rem; outline: none; width: 100%; }
.home-join-field input:focus, .home-join-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light); }
/* No resize grip (users could drag-stretch the whole card via the notes box) and no
   inner scroll: home.js auto-grows the height as text is typed; the 112px floor
   (rows=4) comfortably fits 200 chars at the card's two-column width. */
.home-join-field textarea { resize: none; overflow: hidden; min-height: 112px; }
/* custom city/item combobox — guaranteed-white dropdown that reopens the full
   list on click, filters as you type, and fills the field on select. */
.home-combo { position: relative; }
/* Panel = pinned search box on top + scrolling list below (12.jpg): the search stays
   visible while the (long) city list scrolls underneath it. */
.home-combo-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 30px rgba(20,40,30,.16); display: none; }
.home-combo-search { display: block; width: calc(100% - .7rem); margin: .35rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--bg, #f7f9f7); outline: none; }
.home-combo-search:focus { border-color: var(--green); background: var(--card); }
.home-combo-list { max-height: 220px; overflow-y: auto; }
.home-combo-opt { padding: .5rem .7rem; font-size: .92rem; color: var(--ink); cursor: pointer; }
.home-combo-opt:hover, .home-combo-opt.active { background: var(--green-light); }
/* "Recent" section header above previously-picked cities in the combo panel. */
.home-combo-head { padding: .45rem .7rem .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.home-combo-empty { padding: .5rem .7rem; font-size: .88rem; color: var(--muted); }
/* live char counter pinned to the bottom-right of the Notes box */
/* (home-join notes counter now uses the shared .ta-wrap/.char-count — inside the box.) */
/* on-screen submit response (success / error) shown under the form */
.home-join-status { display: none; margin-top: .7rem; padding: .6rem .8rem; border-radius: 4px; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.home-join-status.is-ok { background: var(--green-light); color: var(--green-dark); }
.home-join-status.is-err { background: var(--danger-bg); color: #b3261e; }
.home-join-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.home-join-btn { margin-top: .4rem; align-self: stretch; justify-content: center; }
.home-join-btn-ghost { background: transparent; border: 1px solid var(--green); color: var(--green-dark); }
.home-join-btn-ghost:hover { background: var(--green-light); }
@media (max-width: 950px) { .home-join-forms { grid-template-columns: 1fr; } }

/* ── trust & safety ── */
.home-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.home-trust-item {
  display: flex; gap: .9rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 1.3rem; box-shadow: var(--shadow);
}
.home-trust-ico { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.home-trust-ico .ico svg { width: 21px; height: 21px; }
.home-trust-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.home-trust-item p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }

/* ── stats ── */
.home-stats-row { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1.5rem; text-align: center; }
.home-stat { min-width: 120px; }
.home-stat-num { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; color: var(--amber); line-height: 1; }
.home-stat-label { margin-top: .4rem; font-size: .88rem; color: rgba(255,255,255,.78); font-weight: 500; }

/* ── routes map (capped to content width so it scales with the page) ── */
.home-routes-band {
  position: relative; color: #fff; overflow: hidden; padding: clamp(2.8rem, 7vw, 4.5rem) 0 0;
  background: radial-gradient(130% 130% at 50% 0%, #1d8a52 0%, var(--green) 42%, var(--green-dark) 84%, #0c3d24 100%);
}
.home-routes-band .home-head { margin-bottom: 1.4rem; }
/* The labeled route map is the feature — capped to content width (in .home-wrap). */
/* Wide, short map box (~40% shorter than the map's natural height); object-fit:
   contain keeps the whole map + every marker visible (letterboxed over the section
   gradient), undistorted, so marker positions stay exact. Still zoom/pan-able. */
.home-route-map { width: 100%; aspect-ratio: 2.03 / 1; line-height: 0; position: relative; overflow: hidden; border-radius: 16px; touch-action: none; background: rgba(8,30,20,.18); }
.home-route-map img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; cursor: grab; -webkit-user-drag: none; user-select: none; }
.home-route-map.is-grabbing img { cursor: grabbing; }
.map-zoom-ctrls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 3; line-height: 1; }
.map-zoom-btn { width: 36px; height: 36px; border: none; border-radius: 9px; background: rgba(255,255,255,.94); color: var(--green); font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; }
.map-zoom-btn:hover { background: var(--card); }
.map-zoom-hint { position: absolute; left: 12px; bottom: 12px; z-index: 3; font: 600 12px/1 Inter, Arial, sans-serif; color: #fff; background: rgba(8,30,20,.55); padding: 7px 11px; border-radius: 8px; pointer-events: none; opacity: .9; }
.home-route-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding: 1.6rem 0 2.6rem; }
.home-route-pill {
  display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700;
  background: rgba(8,30,20,.42); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18);
  padding: .55rem 1.1rem; border-radius: 999px; font-size: 1rem;
}
.home-route-pill .ico { color: var(--amber); }
.home-head-light .home-h2 { color: #fff; }
.home-head-light .home-kicker { color: var(--amber); }
.home-head-light .home-lede { color: rgba(255,255,255,.85); }

/* ── faq ── */
/* Privacy Center (mockup B + hub) */
/* Full container width (like .detail-page / .trips-page) — was a cramped 660px centred column. */
.pc-page { max-width: none; margin: 0; padding: 22px 0 48px; }
.pc-page h1 { font-size: 24px; margin: 0 0 4px; }
.pc-sub { color: var(--muted, #5b6f66); font-size: 13.5px; margin: 0 0 16px; }
.pc-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, #0f3d27, #1B7F4B); color: #fff; border-radius: 6px; padding: 16px; text-decoration: none; margin-bottom: 8px; }
.pc-hero b { display: block; font-size: 15px; }
.pc-hero i { font-style: normal; font-size: 12.5px; opacity: .85; }
.pc-hero-em { font-size: 24px; }
.pc-hero .pcr-chev { margin-left: auto; color: #fff; }
.pc-carol { font-weight: 700; font-size: 15.5px; margin: 4px 4px 10px; }
.pc-caro { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.pc-caro::-webkit-scrollbar { display: none; }
.pc-qcard { min-width: 250px; max-width: 250px; scroll-snap-align: start; background: var(--paper, #fff); border: 1px solid rgba(15,40,30,.09); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.pc-scene { display: block; width: 100%; height: auto; }
.pc-qbody { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pc-qq { font-weight: 700; font-size: 15px; line-height: 1.35; min-height: 40px; }
.pc-qcta { align-self: flex-start; background: #E7E9E5; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: 13px; margin-top: auto; }
.pc-glab { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--muted, #5b6f66); text-transform: uppercase; margin: 16px 6px 6px; }
.pc-card { background: var(--paper, #fff); border: 1px solid rgba(15,40,30,.09); border-radius: 6px; overflow: hidden; }
.pc-row { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-bottom: 1px solid rgba(15,40,30,.07); text-decoration: none; color: inherit; }
.pc-row:last-child { border-bottom: none; }
.pcr-ic { width: 38px; height: 38px; border-radius: 11px; background: #e7f2ec; display: grid; place-items: center; font-size: 17px; flex: none; }
.pcr-t { font-weight: 700; font-size: 14.5px; }
.pcr-t.danger { color: #b3372c; }
.pcr-s { color: var(--muted, #5b6f66); font-size: 12.5px; line-height: 1.4; }
.pcr-chev { margin-left: auto; color: #9ab0a5; font-size: 18px; }
.sc-current { color: #15795C; font-weight: 700; font-size: 12px; }
.sc-when { color: var(--muted, #5b6f66); font-size: 12px; }
.yd-chips { display: flex; gap: 10px; margin-bottom: 18px; }
.yd-chip { flex: 1; background: #E7F2EC; border-radius: 6px; padding: 12px 8px; text-align: center; }
.yd-chip b { display: block; font-size: 21px; color: #15795C; }
.yd-chip span { font-size: 10.5px; color: var(--muted, #5b6f66); }
.pi-card { margin-bottom: 12px; }
.pi-radio { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; border-bottom: 1px solid rgba(15,40,30,.07); }
.pi-radio:last-child { border-bottom: none; }
.pi-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9d4ce; flex: none; }
.pi-dot.on { border-color: #15795C; box-shadow: inset 0 0 0 4px #15795C; }
.pi-msg { width: 100%; border: 1px solid rgba(15,40,30,.15); border-radius: 12px; padding: 12px; font: inherit; margin-bottom: 12px; resize: vertical; }
.pi-btn { width: 100%; }
.pc-tog { margin-left: auto; width: 44px; height: 26px; border-radius: 999px; background: #c9d4ce; border: 0; position: relative; cursor: pointer; flex: none; transition: background .15s; }
.pc-tog.on { background: #15795C; }
.pc-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.pc-tog.on .pc-knob { left: 21px; }
.pc-tog:disabled { opacity: .5; cursor: not-allowed; }
/* 2-step delivery-channel picker (security.js twoStepCard) */
.ts-channels { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ts-channels-label { font-size: 12.5px; font-weight: 700; color: var(--muted, #5b6f66); text-transform: uppercase; letter-spacing: .04em; }
.ts-opt { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 8px 12px; border: 1px solid rgba(15,40,30,.12); border-radius: 6px; }
.ts-opt.disabled { cursor: not-allowed; opacity: .7; }
.ts-opt input { accent-color: #15795C; }
.ts-hint { font-size: 12.5px; color: var(--muted, #5b6f66); margin-left: auto; }

/* Authenticator-app (TOTP) enrollment sub-panel */
.totp-panel { margin-top: 14px; padding: 14px; border: 1px solid rgba(15,40,30,.12); border-radius: 8px; background: rgba(21,121,92,.03); }
.totp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.totp-title { font-weight: 700; font-size: 14px; }
.totp-panel .sc-muted { font-size: 13px; margin: 6px 0 12px; }
.totp-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .08em; font-weight: 700; padding: 10px 12px; background: #fff; border: 1px dashed rgba(15,40,30,.25); border-radius: 6px; user-select: all; word-break: break-all; }
.totp-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #15795C; }
.totp-confirm-row, .totp-remove-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.totp-confirm-row .inp, .totp-remove-row .inp { flex: 1; }
.totp-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 14px; }
.totp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: .06em; padding: 8px 10px; background: #fff; border: 1px solid rgba(15,40,30,.14); border-radius: 6px; text-align: center; user-select: all; }
.btn-ghost.danger { color: #b3261e; }
.ts-need { margin-top: 12px; }
.pc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pc-pill { border: 1.5px solid #1B7F4B; color: #1B7F4B; font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.pc-banner { background: #e7f2ec; border-radius: 6px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.pc-tabs { display: flex; background: #E7E9E5; border-radius: 999px; padding: 4px; margin: 0 0 20px; }
.pc-tab { flex: 1; border: 0; background: transparent; font-weight: 700; font-size: 13px; padding: 8px 0; border-radius: 999px; color: var(--muted, #5b6f66); cursor: pointer; }
.pc-tab.on { background: #fff; color: inherit; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.pc-track { height: 5px; background: #d6e0da; border-radius: 999px; }
.pc-fill { height: 5px; background: #1B7F4B; border-radius: 999px; transition: width .25s; }
.pc-ticks { display: flex; justify-content: space-between; margin: 8px 0 12px; }
.pc-tick { border: 0; background: transparent; font-size: 10.5px; font-weight: 700; color: var(--muted, #5b6f66); cursor: pointer; padding: 4px; }
.pc-tick.on { color: #1B7F4B; }
.pc-stagecard { background: var(--paper, #fff); border: 1px solid rgba(15,40,30,.09); border-radius: 6px; padding: 16px; }
.pc-tag { display: inline-block; background: #e7f2ec; color: #1B7F4B; font-weight: 800; font-size: 11px; letter-spacing: .06em; border-radius: 999px; padding: 4px 12px; text-transform: uppercase; }
.pc-stagecard h3 { font-size: 16px; margin: 10px 0 6px; }
.pc-see { margin: 0; padding-left: 20px; }
.pc-see li { font-size: 13.5px; padding: 3px 0; }
.pc-nv { border-bottom: 1px solid rgba(15,40,30,.07); }
.pc-nv:last-child { border-bottom: none; }
.pc-nv summary { display: flex; align-items: center; gap: 12px; padding: 14px 15px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.pc-nv summary::-webkit-details-marker { display: none; }
.pc-lock { width: 34px; height: 34px; border-radius: 10px; background: #f3e9e7; display: grid; place-items: center; font-size: 15px; flex: none; }
.pc-pm { margin-left: auto; color: #9ab0a5; font-weight: 800; }
.pc-nvb { padding: 0 16px 14px 61px; color: var(--muted, #5b6f66); font-size: 13px; line-height: 1.5; }
.pc-intro { padding: 8px 4px 0; }
.pc-intro h2 { font-size: 19px; margin: 2px 0 0; }
.pc-intro p { color: var(--muted, #5b6f66); font-size: 13.5px; margin: 5px 0 16px; }
/* hero illustration card (u-get-bag-privacy-center_1.html) */
.pc-hero2 { position: relative; overflow: hidden; border-radius: 6px; margin-bottom: 20px; background: radial-gradient(120% 130% at 78% 8%, #1d8a52 0%, #15795C 45%, #0C3B2E 100%); padding: 20px 20px 0; display: flex; align-items: flex-end; gap: 8px; min-height: 150px; }
.pc-htext { flex: 1; padding-bottom: 22px; color: #fff; z-index: 2; }
.pc-hb { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 11px; font-weight: 600; font-size: 10.5px; margin-bottom: 9px; }
.pc-ht { font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
.pc-hs { font-size: 12px; color: rgba(255,255,255,.78); margin-top: 5px; max-width: 20ch; }
.pc-hart { width: 118px; flex: none; align-self: flex-end; z-index: 2; display: block; }
/* counterparty preview card inside the sees card */
.pc-tv { display: flex; align-items: center; gap: 12px; background: var(--bg, #F4F6F4); border: 1px solid #EBEEEC; border-radius: 14px; padding: 12px; margin: 0 0 16px; }
.pc-tav { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E7F2EC; display: block; }
.pc-tn { font-weight: 700; font-size: 14.5px; }
.pc-vf { color: #15795C; font-size: 12px; }
.pc-trr { font-size: 11.5px; color: var(--muted, #5b6f66); margin-top: 2px; }
.pc-tstrip { margin-left: auto; font-weight: 700; font-size: 12px; color: #0C3B2E; flex: none; }
/* never-see header with lock art */
.pc-neverh { display: flex; align-items: center; gap: 12px; margin: 0 4px 10px; }
.pc-lart { width: 48px; height: 48px; flex: none; display: block; }
.pc-nt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #656e68; }
.pc-ns { font-size: 12px; color: var(--muted, #5b6f66); margin-top: 3px; }

/* stepper card (u-get-bag-privacy-center.html) */
.pc-stages { background: var(--paper, #fff); border: 1px solid rgba(15,40,30,.08); border-radius: 6px; padding: 18px 16px 14px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); }
.pc-track2 { position: relative; height: 13px; margin: 0 6px 12px; }
.pc-track2::before { content: ''; position: absolute; left: 0; right: 0; top: 4.5px; height: 4px; background: #EBEEEC; border-radius: 99px; }
.pc-fill2 { position: absolute; left: 0; top: 4.5px; height: 4px; background: linear-gradient(90deg, #1A8A66, #15795C); border-radius: 99px; transition: width .2s; }
.pc-nodes { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; margin: 0 -6px; }
.pc-node { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2.5px solid #EBEEEC; }
.pc-node.done { background: #15795C; border-color: #15795C; }
.pc-node.on { background: #fff; border-color: #15795C; box-shadow: 0 0 0 4px #E7F2EC; }
.pc-slabels { display: flex; }
.pc-slabel { flex: 1; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 11.5px; color: #656e68; padding: 2px; text-align: center; }
.pc-slabel:first-child { text-align: left; }
.pc-slabel:last-child { text-align: right; }
.pc-slabel.on { color: #15795C; }
.pc-slabel.done { color: var(--muted, #5b6f66); }
/* kicker + sees card with check tiles */
.pc-kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #15795C; margin: 4px 4px 8px; }
.pc-sees { background: var(--paper, #fff); border: 1px solid rgba(15,40,30,.08); border-radius: 6px; padding: 20px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); }
.pc-sees h3 { font-size: 17px; margin: 0; }
.pc-lead { font-size: 13px; color: var(--muted, #5b6f66); margin: 5px 0 14px; }
.pc-sees ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pc-sees li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; }
.pc-ck { width: 22px; height: 22px; border-radius: 7px; background: #E7F2EC; color: #15795C; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 800; margin-top: 1px; }
/* never-see label + state-aware lock accordion */
.pc-neverl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #656e68; margin: 0 4px 10px; }
.pc-acc { background: var(--paper, #fff); border: 1px solid rgba(15,40,30,.08); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); }
.pc-acc .pc-nv { border-bottom: 1px solid #EBEEEC; }
.pc-acc .pc-nv:last-child { border-bottom: none; }
.pc-acc summary { display: flex; align-items: center; gap: 13px; padding: 15px 16px; cursor: pointer; list-style: none; }
.pc-acc summary::-webkit-details-marker { display: none; }
.pc-acc summary:hover { background: #fafbfa; }
.pc-lk { width: 34px; height: 34px; border-radius: 10px; background: var(--bg, #F4F6F4); border: 1px solid #EBEEEC; color: var(--muted, #5b6f66); display: grid; place-items: center; flex: none; font-size: 15px; }
.pc-nv[open] .pc-lk { background: #E7F2EC; border-color: #d3e6db; }
.pc-st { flex: 1; font-weight: 600; font-size: 15px; }
.pc-pm { color: #656e68; transition: transform .2s; flex: none; font-weight: 800; font-size: 16px; }
.pc-nv[open] .pc-pm { transform: rotate(45deg); color: #15795C; }
.pc-nvb { padding: 0 16px 16px 63px; font-size: 13.5px; color: var(--muted, #5b6f66); line-height: 1.55; }
.pc-foot { text-align: center; margin-top: 18px; font-size: 13.5px; }
.pc-foot a, .pc-entry { color: #1B7F4B; font-weight: 800; text-decoration: none; }
.pc-entry { display: inline-block; margin: 2px 0 12px; font-size: 13.5px; }

/* In-product illustrated placements (app-illustrated-cards.html) */
.mj-wrap { margin: 10px 0 14px; }
.mj-art { position: relative; height: 170px; border-radius: 16px; overflow: hidden; }
.mj-pill { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 13px; font-weight: 800; font-size: 11.5px; }
.mj-dot { width: 7px; height: 7px; border-radius: 50%; background: #15795C; }
.mj-bar { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: #656e68; margin-top: 8px; padding: 0 4px; }
.mj-bar .on { color: #15795C; } .mj-bar .done { color: var(--muted, #5b6f66); }
.mj-tstrip { display: flex; gap: 9px; overflow-x: auto; margin: 0 0 12px; padding: 2px; }
.mj-tstrip::-webkit-scrollbar { display: none; }
.mj-tcard { min-width: 150px; background: #0C3B2E; border-radius: 14px; padding: 10px; color: #fff; }
.mj-tcard .mj-ta { display: block; background: rgba(255,255,255,.08); border-radius: 10px; height: 64px; overflow: hidden; margin-bottom: 8px; }
.mj-tcard b { font-size: 12px; display: block; }
.mj-tcard > span:not(.mj-ta) { font-size: 10.5px; color: rgba(255,255,255,.72); line-height: 1.35; display: block; margin-top: 2px; }
.ill-warn { display: flex; gap: 12px; align-items: center; background: #FBF3E7; border: 1px solid #F0DDBE; border-radius: 6px; padding: 12px; margin: 4px 0 10px; text-decoration: none; color: inherit; }
.ill-wa { display: block; width: 96px; height: 64px; border-radius: 10px; overflow: hidden; flex: none; background: #F5EDDE; }
.ill-warn b { font-size: 13.5px; display: block; }
.ill-wd { font-size: 12px; color: var(--muted, #5b6f66); display: block; }
.ill-wl { color: #15795C; font-weight: 800; font-size: 12px; display: block; }
/* How-it-works step banners (illustrated #2) */
.hiw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1225px) { .hiw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .hiw-grid { grid-template-columns: 1fr; } }
.hiw-card { background: #fff; border: 1px solid rgba(15,40,30,.09); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); }
.hiw-art { position: relative; height: 140px; display: flex; align-items: flex-end; }
.hiw-art.t-soft { background: #E7F2EC; } .hiw-art.t-sky { background: #E3EEF5; }
.hiw-art.t-sand { background: #F5EDDE; } .hiw-art.t-mint { background: #E0F2E9; }
.hiw-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 11px; }
.hiw-dot { width: 7px; height: 7px; border-radius: 50%; background: #15795C; }
.hiw-bd { padding: 16px 18px 18px; }
.hiw-bd h3 { margin: 0 0 5px; font-size: 15.5px; }
.hiw-bd p { margin: 0; font-size: 13px; color: var(--muted, #5b6f66); line-height: 1.5; }
/* Testimonials carousel (landing; carousels mockup #7) */
#stories .home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tst-arrows { display: flex; gap: 8px; }
.tst-arw { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(15,40,30,.14); background: #fff; font-size: 20px; cursor: pointer; color: #10231b; }
/* Full-bleed: the track is a direct section child (not inside .home-wrap), so the
   content gutter is re-applied here as padding — cards align with the header but
   scroll past the gutters. scroll-padding keeps snapped cards on the content edge. */
.tst-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--hpad), calc((100vw - var(--hmax)) / 2 + var(--hpad))); padding: 6px max(var(--hpad), calc((100vw - var(--hmax)) / 2 + var(--hpad))) 14px; }
.tst-track::-webkit-scrollbar { display: none; }
.tst-card { width: 320px; min-width: 320px; scroll-snap-align: start; background: #fff; border: 1px solid rgba(15,40,30,.09); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); }
.tst-q { font-size: 40px; font-weight: 700; color: #E7F2EC; line-height: .9; margin-bottom: 6px; }
.tst-card p { font-size: 14.5px; color: #16241F; flex: 1; line-height: 1.6; margin: 0 0 18px; }
.tst-who { display: flex; align-items: center; gap: 11px; border-top: 1px solid #EBEEEC; padding-top: 16px; }
.tst-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #1A8A66, #0C3B2E); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.tst-nm { font-weight: 700; font-size: 14px; }
.tst-rl { font-size: 12px; color: #5d6b64; }
.tst-st { margin-left: auto; color: #E29A38; letter-spacing: 2px; }
/* Pricing section (landing): 4-card grid, matches the section rhythm */
.home-price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .home-price-grid { grid-template-columns: 1fr; } }
.home-price-card { background: var(--paper, #fff); border: 1px solid rgba(15, 40, 30, 0.08); border-radius: 6px; padding: 20px 22px; }
.home-price-t { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; color: var(--ink, #10231b); }
.home-price-d { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted, #5b6f66); }

.home-faq { display: flex; flex-direction: column; gap: .7rem; }
.home-faq-item { background: var(--card); border: 1px solid var(--line); border-radius:6px; box-shadow: var(--shadow); overflow: hidden; }
.home-faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 600; font-size: 1rem; color: var(--ink);
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-mark { color: var(--green); display: inline-flex; transition: transform .2s; flex: none; }
.home-faq-mark svg { width: 20px; height: 20px; }
.home-faq-item[open] .home-faq-mark { transform: rotate(180deg); }
.home-faq-item p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--muted); line-height: 1.6; }
/* Inline follow-up link inside an answer (e.g. "What is prohibited?" → full list, 12.jpg). */
.home-faq-link { color: var(--green); font-weight: 600; text-decoration: none; white-space: nowrap; }
.home-faq-link:hover { text-decoration: underline; }

/* ── cta banner ── */
.home-cta-band { background: linear-gradient(120deg, var(--amber) 0%, var(--amber-dark) 100%); padding: clamp(2.8rem, 7vw, 4.5rem) 0; }
.home-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.home-cta-h { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; color: #3a2a08; }
.home-cta-sub { color: #5a4416; font-size: 1.05rem; margin: .8rem 0 1.6rem; line-height: 1.5; }
.home-cta-band .btn.amber { background: var(--green-dark); color: #fff; }
.home-cta-band .btn.amber:hover { background: #0c3d24; }

/* ── footer ── */
/* Footer green: the same transitioning green gradient as the hero, so the two
   bookend the page with an identical green wash. */
.home-footer { background: radial-gradient(120% 130% at 18% 8%, #1d8a52 0%, var(--green) 40%, var(--green-dark) 76%, #0c3d24 100%); color: rgba(255,255,255,.72); padding: 3rem 0 1.8rem; }
.home-footer .home-wordmark { color: #fff; }
/* Brand block (wider) + four EQUAL-width link columns (Product / Company / Terms and policies /
   Stay in the loop) sharing one uniform gap, so the spacing between columns reads evenly. The
   newsletter input sizes to its 1fr column (slightly narrower by design). */
.home-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.home-foot-tag { margin-top: .9rem; max-width: 280px; line-height: 1.55; font-size: .92rem; color: #fff; }
.home-foot-about-h { color: rgba(255,255,255,.55); font-size: .9rem; font-weight: 700; margin: 1.4rem 0 .5rem; letter-spacing: .02em; }
.home-foot-about { margin: 0; max-width: 320px; line-height: 1.6; font-size: .86rem; color: rgba(255,255,255,.62); }
/* footer column headers (Product / Company / Stay in the Loop): muted, like claude.com's footer headers (links are the white element now). */
.home-foot-col h4 { color: rgba(255,255,255,.55); font-size: .9rem; font-weight: 700; margin-bottom: .9rem; letter-spacing: .02em; }
.home-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.home-foot-note { font-size: .88rem; line-height: 1.55; margin: 0; }
/* Landing footer links — claude.com footer effect: links are pure WHITE; hovering one link DIMS its
   siblings while the hovered one stays white; NO underline. (The muted tone lives on the headers.) */
.home-foot-link { background: none; border: none; color: #fff; font: inherit; font-size: .8125rem; padding: 0; text-align: left; text-decoration: none; transition: color .15s ease; }
/* Anchor footer links (About/Careers/Contact) would otherwise inherit the global `a:hover { underline }` — keep them underline-free like the button links. */
.home-foot-link:hover, .home-foot-link:focus { text-decoration: none; }
.home-foot-col:hover .home-foot-link { color: rgba(255,255,255,.5); }
.home-foot-col:hover .home-foot-link:hover { color: #fff; }
.home-foot-link:focus-visible { color: #fff; outline: 2px solid rgba(255,255,255,.6); outline-offset: 3px; border-radius: 3px; }
.home-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: .88rem; }

/* ── responsive ── */
@media (max-width: 1075px) {
  /* (.home-nav/.home-btn-login now collapse at 1100px — see the sticky-header block:
     with one-line Swedish labels the row physically can't fit below that.) */
  .home-steps { grid-template-columns: 1fr 1fr; }
  .home-roles { grid-template-columns: 1fr; }
  .home-trust-grid { grid-template-columns: 1fr; }
  .home-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 675px) {
  .home-steps { grid-template-columns: 1fr; }
  .home-foot-grid { grid-template-columns: 1fr; }
  .home-hero-cta .btn { flex: 1 1 100%; }
}

/* ════════ Homepage redesign additions (demo-style sections) ════════ */
.home-section-tint { background: var(--green-light); }

/* about / why we exist */
.home-about { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.home-about-media { position: relative; }
.home-about-card { border-radius:6px; overflow: hidden; line-height: 0; box-shadow: 0 20px 50px rgba(20,40,30,.16);
  background: radial-gradient(120% 120% at 50% 0%, #1d8a52, var(--green-dark)); }
.home-about-card img { width: 100%; height: auto; display: block; }
.home-about-badge { position: absolute; right: -8px; bottom: -18px; background: var(--amber); color: #3a2a08; border-radius: 16px;
  padding: .85rem 1.15rem; box-shadow: 0 12px 30px rgba(0,0,0,.18); text-align: center; }
.home-about-badge-num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.home-about-badge-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }
.home-about-p { color: var(--muted); line-height: 1.6; margin-top: .8rem; }
.home-about-points { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; }
.home-about-points li { display: flex; align-items: flex-start; gap: .55rem; font-weight: 600; }
.home-about-points li .ico { color: var(--green); flex: none; margin-top: .15rem; }
.home-about-points li .ico svg { width: 18px; height: 18px; }

/* why u get space (feature grid + panel) */
.home-why { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.home-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.5rem; margin-top: 1.5rem; }
.home-why-item { display: flex; gap: .8rem; }
.home-why-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.home-why-ico .ico svg { width: 22px; height: 22px; }
.home-why-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.home-why-item p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }
.home-why-panel { background: radial-gradient(130% 130% at 50% 0%, #1d8a52, var(--green-dark) 85%); color: #fff; border-radius: 6px;
  padding: 2.2rem 1.8rem; text-align: center; box-shadow: 0 20px 50px rgba(20,40,30,.18); }
.home-why-shield { width: 62px; height: 62px; margin: 0 auto 1rem; color: var(--amber); }
.home-why-shield svg { width: 100%; height: 100%; }
.home-why-panel-h { font-size: 1.3rem; font-weight: 800; margin-bottom: .5rem; }
.home-why-panel-d { color: rgba(255,255,255,.85); line-height: 1.55; margin-bottom: 1.3rem; }

/* headline metrics — green world-map band with the 10.jpg "spec strip" layout:
   a small label on top, a large number below, thin vertical dividers between columns. */
.home-counters { position: relative; overflow: hidden; color: #fff; padding: clamp(2.6rem, 6vw, 4.2rem) 0;
  background: radial-gradient(130% 130% at 50% 0%, #1d8a52 0%, var(--green) 45%, var(--green-dark) 85%, #0c3d24 100%); }
.home-counters-bg { position: absolute; inset: 0; opacity: .18; pointer-events: none; }
.home-counters-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Columns size to their CONTENT (grid-auto-columns:auto), not a rigid 1fr split — a
   wide number (Routes 553) gets more room instead of squeezing its neighbours' labels
   into a wrap (0.jpg: "Satisfied Customers" wrapped and its number dropped out of
   line). Equal horizontal padding on every cell keeps each divider dead-centre
   between neighbours — the gap is always even on both sides, at any digit length. */
.home-counters-row { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: center; text-align: center; }
.home-counter { display: flex; flex-direction: column; align-items: center; padding: .4rem clamp(1.2rem, 3.2vw, 2.8rem); }
.home-counter + .home-counter { border-left: 1px solid rgba(255,255,255,.2); }
/* Reserve TWO label lines for every metric and bottom-align the text within them, so a
   one-line label ("Routes") and a two-line one ("Satisfied Customers") leave their
   numbers on the SAME baseline row. */
.home-counter-label { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .01em; margin-bottom: .95rem; line-height: 1.3; min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; }
.home-counter-num { font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 500; color: #fff; line-height: 1; letter-spacing: -.02em; }
@media (max-width: 1075px) {
  .home-counters-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 1.6rem .5rem; }
  .home-counter + .home-counter { border-left: none; }
}
@keyframes ugsMetricLift { 0%,16%,100% { transform: translateY(0); } 8% { transform: translateY(-7px); } }
@keyframes ugsMetricIco  {
  0%,16%,100% { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
  8%          { border-color: #fff; box-shadow: 0 0 26px 3px rgba(255,255,255,.45); transform: scale(1.08); }
}
@keyframes ugsMetricPin  {
  0%,16%,100% { box-shadow: 0 2px 6px rgba(8,30,20,.4); }
  8%          { box-shadow: 0 0 16px 3px rgba(242,163,65,.9); }
}
@keyframes ugsMetricNum  { 0%,16%,100% { text-shadow: none; } 8% { text-shadow: 0 0 18px rgba(255,255,255,.55); } }

/* secured-by strip */
.home-secured { background: var(--green-light); padding: clamp(1.8rem, 4vw, 2.6rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-secured-h { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.home-secured-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.4rem; }
.home-secured-item { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--green-dark); }
.home-secured-item .ico { color: var(--green); }
.home-secured-item .ico svg { width: 22px; height: 22px; }

/* cta band actions + footer extras */
.home-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.home-cta-band .btn.ghost.home-cta-ghost { color: #3a2a08; border-color: rgba(58,42,8,.4); background: rgba(255,255,255,.28); }
.home-cta-band .btn.ghost.home-cta-ghost:hover { background: rgba(255,255,255,.5); }
.home-foot-contact { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.home-foot-contact-i { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; }
.home-foot-contact-i .ico { color: var(--amber); }
.home-foot-cta { align-self: flex-start; margin-bottom: .3rem; }

@media (max-width: 1075px) {
  .home-about { grid-template-columns: 1fr; }
  .home-why { grid-template-columns: 1fr; }
  .home-counters-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 675px) {
  .home-why-grid { grid-template-columns: 1fr; }
}

/* footer: socials, contact, newsletter */
.home-foot-contact { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.home-foot-contact-i { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: rgba(255,255,255,.72); }
.home-foot-contact-i .ico { color: var(--amber); }
.home-foot-mail:hover { color: #fff; text-decoration: none; }
/* 71.jpg reorg: the brand column runs on ONE spacing step (1.4rem between the
   lockup / social block / badges — matching the link columns' rhythm) and
   "Connect with us" wears the same heading style as Product/Company/…, so the
   column joins the footer's hierarchy. */
.home-social-wrap { margin-top: 1rem; } /* + the lockup's ~5px internal descender = the same visual 1.4rem step */
.home-social-label { font-family: var(--inter); font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.55); margin: 0 0 .9rem; letter-spacing: .02em; }
.home-socials { display: flex; align-items: center; gap: 1rem; margin-top: 0; } /* flat glyphs need a touch more air than the old tiles */
/* Flat monochrome social glyphs (000/19.jpg) — plain white marks directly on the
   dark footer, NO colored tile; muted by default, full-white + lift on hover. */
.home-social { display: grid; place-items: center; color: rgba(255,255,255,.72);
  transition: color .15s, transform .15s; }
.home-social:hover { color: #fff; transform: translateY(-2px); filter: none; text-decoration: none; }
/* Glyphs match the sign-in footer's .auth-foot-social exactly (17px, flat, no
   per-icon override) so the social row reads identically on the marketing footer
   and the auth page. */
.home-social svg { width: 17px; height: 17px; }
.home-foot-news .home-foot-note { color: #fff; }
/* Stacked so the email field gets the full column width — fits a full address. */
.home-news-form { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; margin: .9rem 0 1rem; width: 100%; max-width: 340px; }
.home-news-input { width: 100%; min-width: 0; padding: .65rem .8rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; font-size: .92rem; }
.home-news-input::placeholder { color: rgba(255,255,255,.78); }
.home-news-input:focus { outline: 2px solid rgba(242,163,65,.4); border-color: var(--amber); background: rgba(255,255,255,.1); }
.home-news-btn { width: 50%; align-self: flex-end; white-space: nowrap; }

/* scroll-reveal flow (demo-style fade/slide-in as sections enter view) */
.home-reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.home-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .home-reveal { opacity: 1; transform: none; transition: none; } }

/* ── Admin console ─────────────────────────────────────────────────────────── */
.admin-headwrap { margin-bottom: .4rem; }
.admin-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.3rem; }
.admin-tab { padding: .55rem .9rem; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; text-decoration: none; }
.admin-tab:hover { color: var(--ink); }
.admin-tab.active { color: var(--green); border-bottom-color: var(--green); }
.admin-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.admin-filters .field, .admin-add-form .field, .admin-expense-form .field { margin: 0; min-width: 140px; }
.admin-add-form, .admin-expense-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Keep each admin table row on a single line (the .tablewrap scrolls if wider
   than the viewport); keep row action buttons (Edit/Suspend/Delete) inline. */
table.data th, table.data td { white-space: nowrap; }
table.data .btn-row { flex-wrap: nowrap; }
table.data td.pos { color: var(--ok); font-weight: 600; }
table.data td.neg { color: var(--danger); font-weight: 600; }

/* ── column dividers (admin data tables) ── */
table.data th, table.data td { border-right: 1px solid var(--line); }
table.data th:last-child, table.data td:last-child { border-right: none; }

/* ── resizable columns: a grab handle on the right edge of each header cell ── */
table.data.resizable th { position: relative; }
table.data .col-resize { position: absolute; top: 0; right: -2px; width: 7px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 2; }
table.data .col-resize:hover, body.col-resizing table.data .col-resize { background: var(--emerald-soft, #E7F2EC); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* ── per-column header filters (a second header row of inputs) ── */
table.data tr.filter-row th { padding: 4px 6px; background: var(--bg); }
table.data .col-filter { width: 100%; box-sizing: border-box; font-size: .76rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--card); }
table.data .col-filter::placeholder { color: var(--faint, #656e68); }

/* ── escrow VAT receipt breakdown (sender's "what I pay" line items) ── */
.escrow-receipt { margin: .5rem 0 0; padding: .55rem .7rem; background: var(--bg); border-radius: 6px; font-size: .85rem; }
.escrow-receipt .rl { display: flex; justify-content: space-between; padding: 2px 0; color: var(--muted); }
.escrow-receipt .rl.rt { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.escrow-foot.refunded { color: var(--danger, #c0392b); font-weight: 700; }
.escrow-invoice { margin-top: .5rem; font-size: .85rem; }
.escrow-invoice a { color: var(--emerald, #15795C); font-weight: 600; }

/* ── printable VAT invoice (#/invoice/:id) ── */
.invoice-page { max-width: 720px; }
.invoice-actions { display: flex; gap: .6rem; justify-content: flex-end; margin: 1rem 0; }
.invoice { background: var(--card); border: 1px solid var(--line); border-radius:6px; padding: 2rem; color: var(--ink); }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0C3B2E; padding-bottom: 1rem; margin-bottom: 1.2rem; }
.invoice-supplier { font-size: 1.4rem; font-weight: 800; color: var(--green); }
.invoice-sub { color: var(--muted); font-size: .85rem; }
.invoice-meta { text-align: right; }
.invoice-no { font-weight: 800; font-size: 1.1rem; }
.invoice-refunded { display: inline-block; margin-top: 4px; color: var(--danger, #c0392b); font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; font-size: .8rem; }
.invoice-billto { margin-bottom: 1rem; }
.invoice-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.invoice-desc { margin: 1rem 0; font-weight: 600; }
.invoice-lines { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.invoice-lines td { padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.invoice-lines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-lines tr.muted td { color: var(--muted); }
.invoice-lines tr.total td { font-weight: 800; font-size: 1.05rem; border-bottom: none; border-top: 2px solid #0C3B2E; }
.invoice-note { color: var(--muted); font-size: .8rem; line-height: 1.5; }
@media print {
  .topbar, .navbar, .no-print { display: none !important; }
  .invoice { border: none; padding: 0; }
  body, .container { background: var(--card) !important; }
  /* The on-screen UI scale must not shrink paper output (invoices, legal docs):
     print at natural size. Keep in lockstep with the body zoom / --uiz pair. The admin-shell
     counter-zoom is reset too, else admin pages would print at 0.8. */
  body { zoom: 1 !important; }
  .admin-shell { zoom: 1 !important; }
}

.stat.pos .n { color: var(--ok); }
.stat.neg .n { color: var(--danger); }
.chart { width: 100%; overflow-x: auto; }
.chart-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.chart-empty { padding: 2rem; text-align: center; color: var(--muted); }
.admin-legal-body { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.5; }
.admin-check { display: inline-flex; align-items: center; gap: .5rem; margin: .6rem 0; font-size: .9rem; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #c9d3cd; border-radius: 999px; transition: .15s; cursor: pointer; }
.switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--card); border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ── Public legal pages (Privacy / Terms) ──────────────────────────────────── */
/* Flex column so the siteFooter lands at the BOTTOM of the viewport on short
   pages (52.jpg: Contact Support) instead of leaving dead space below it. */
.legal-page { min-height: calc(100vh / var(--uiz)); background: var(--bg); color: var(--ink); display: flex; flex-direction: column; padding-top: 64px; }
/* Frozen top bar: brand + cross-doc nav + back-home; the document scrolls behind it. */
.legal-top { position: fixed; left: 0; right: 0; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px;
  justify-content: space-between; padding: .6rem clamp(1rem,5vw,3rem); background: var(--green); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.16); }
/* Deep-linked headings (e.g. Notice at Collection) must land BELOW the fixed top bar. */
.legal-main h1, .legal-main h2, .legal-main h3 { scroll-margin-top: 76px; }
.legal-brand { flex: none; }
.legal-back { flex: none; white-space: nowrap; }
.legal-nav { display: flex; gap: 4px; flex: 1 1 auto; justify-content: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.legal-nav::-webkit-scrollbar { display: none; }
.legal-nav-item { flex: none; padding: 6px 10px; border-radius: 999px; color: rgba(255,255,255,.82); text-decoration: none;
  font-weight: 600; font-size: 13px; white-space: nowrap; transition: .14s; }
.legal-nav-item:hover { color: #fff; background: rgba(255,255,255,.12); }
.legal-nav-item.on { color: #fff; background: rgba(255,255,255,.18); }
@media (max-width: 800px) { .legal-nav { justify-content: flex-start; } .legal-back { font-size: .82rem; } }
.legal-brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.legal-brand .legal-mark { display: block; width: 34px; height: 34px; border-radius: 8px; }
.legal-back { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; font-size: .9rem; }
.legal-back:hover { color: #fff; }
.legal-main { max-width: 780px; margin: 0 auto; padding: clamp(1.5rem,5vw,3rem) clamp(1rem,5vw,2rem) 4rem; width: 100%; flex: 1 0 auto; }
.legal-doc h1 { font-size: clamp(1.6rem,4vw,2.2rem); margin: 0 0 .4rem; }
.legal-doc h2 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; color: var(--green-dark); }
.legal-doc p { line-height: 1.7; margin: .7rem 0; color: var(--ink); }
.legal-doc ul { margin: .6rem 0 1rem; padding-left: 1.2rem; line-height: 1.7; }
.legal-doc li { margin: .3rem 0; }
.legal-meta { color: var(--muted); font-size: .88rem; margin: 0 0 1.5rem; }

/* ── Admin modal ───────────────────────────────────────────────────────────── */
.admin-modal-overlay { position: fixed; inset: 0; background: rgba(10,20,15,.5); display: grid; place-items: center; z-index: 200; padding: 1rem; }
.admin-modal { background: var(--card); border-radius:6px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(20,40,30,.3); }
.admin-modal-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.admin-modal-head h3 { margin: 0; }
.admin-modal-x { background: none; border: none; font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .2rem .4rem; }
.admin-modal-body { padding: 1.1rem; }

/* ── Service-card image editor ─────────────────────────────────────────────── */
.admin-svc-row { display: flex; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.admin-svc-row:last-of-type { border-bottom: none; }
.admin-svc-fields { flex: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.admin-svc-fields code { font-size: .74rem; color: var(--muted); }
.admin-card-preview { width: 104px; height: 68px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--green-light); flex: none; border: 1px solid var(--line); }
.admin-card-preview.empty { background: repeating-linear-gradient(45deg, #eef1ef, #eef1ef 6px, #e2e8e3 6px, #e2e8e3 12px); }

/* ── Active-users activity cards (admin Users tab) ─────────────────────────── */
.activity-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .activity-grid { grid-template-columns: 1fr 1fr; } }
.activity-card { border: 1px solid var(--line); border-radius:6px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.activity-card .ac-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; font-weight: 800; letter-spacing: .01em; }
.activity-card.senders .ac-head { background: linear-gradient(120deg, #1d8a52, var(--green-dark)); color: #fff; }
.activity-card.travelers .ac-head { background: linear-gradient(120deg, var(--amber), var(--amber-dark)); color: #3a2a08; }
.ac-head .ac-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.activity-card.travelers .ac-head .ac-icon { background: rgba(255,255,255,.45); }
.ac-head .ac-icon svg { width: 17px; height: 17px; }
.ac-cells { display: grid; grid-template-columns: repeat(4, 1fr); }
.ac-cell { padding: 1.1rem .5rem; text-align: center; border-right: 1px solid var(--line); }
.ac-cell:last-child { border-right: none; }
.ac-cell .v { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.activity-card.senders .ac-cell .v { color: var(--green); }
.activity-card.travelers .ac-cell .v { color: var(--amber-dark); }
.ac-cell .k { margin-top: .4rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ── Back-to-top floating button (homepage) ────────────────────────────────── */
.home-totop { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80;
  width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--amber); color: #3a2a08;
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(8,30,20,.3); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s; }
.home-totop.show { opacity: 1; visibility: visible; transform: none; }
.home-totop:hover { background: var(--amber-dark); }
.home-totop svg { width: 26px; height: 26px; }
/* Same button, mirrored: the down-arrow variant shown near the top (14.jpg). */
.home-tobottom svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .home-totop { transition: none; } }

/* Per-route fare inputs in the admin Routes table. */
.fare-in { max-width: 84px; }
.row-actions { display: flex; gap: .4rem; align-items: center; }

/* ============================================================
   Trips page redesign (scoped to .trips-page).
   Mirrors 000/u-get-bag-web-trips.html: a two-column layout of
   trip cards (left) and a sticky post/edit form (right).
   ============================================================ */
.trips-page {
  --pine:#0C3B2E; --emerald:#15795C; --emerald-2:#1A8A66; --emerald-soft:#E7F2EC;
  --t-card:#FFFFFF; --t-ink:#16241F; --t-muted:#5d6b64; --t-faint:#656e68;
  --t-line:#E6EAE7; --t-field-line:#D8E0DB;
  --open-ink:#0F6B4E; --open-bg:#E2F1EA; --cancel-ink:#6a615f; --cancel-bg:#ECE9E8;
  --t-shadow:0 1px 2px rgba(16,36,28,.04),0 10px 30px rgba(16,36,28,.07);
  --t-shadow-sm:0 1px 2px rgba(16,36,28,.05),0 4px 14px rgba(16,36,28,.05);
  --grotesk:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  color:var(--t-ink);
  /* Force native popups (datalist suggestions, date picker) to render light/white,
     even when the OS/browser is in dark mode. */
  color-scheme: light;
}
.trips-page .page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.trips-page .page-head .page-sub { margin-top:6px; color:var(--t-muted); font-size:14.5px; } /* 90.jpg: same subtext style as Your Packages */
.trips-page .page-head h1 { font-family:var(--grotesk); font-size:30px; font-weight:700; letter-spacing:-.02em; }
.trips-page .ghost-btn { border:1px solid var(--t-field-line); background:var(--t-card); color:var(--emerald); cursor:pointer;
  font-family:var(--grotesk); font-weight:600; font-size:14px; padding:11px 18px; border-radius:12px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:.16s; box-shadow:var(--t-shadow-sm); }
.trips-page .ghost-btn:hover { border-color:var(--emerald); background:var(--emerald-soft); }

/* Two rows (49.jpg): the list header (label + status chips) gets its own row so the
   first card and the form card start LEVEL; the aside stretches the card row (no
   align-items:start — that shrank it to card height and froze the sticky form). */
.trips-page .layout { display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto 1fr; gap:0 26px; }
.trips-page .layout > .list-head { grid-column:1; grid-row:1; }
.trips-page .layout > section { grid-column:1; grid-row:2; }
.trips-page .layout > aside { grid-column:2; grid-row:2; }
.trips-page .col-label { font-family:var(--inter); font-size:12.5px; font-weight:600; color:var(--t-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
/* 03.jpg: the list header ("MY TRIPS · 4" / "MY SENDS · N") is a pill exactly as
   wide as the status-chip row below it. Now a 2-column grid: column 1 is
   max-content (sized by the All/Active/Past row, so the label pill still fills
   exactly that width); column 2 hosts the right-aligned date-filter groups —
   Departs level with the pill, Arrives level with the status chips, both flush
   with the cards' right edge (the list-head spans the card column). */
.trips-page .list-head, .packages-page .list-head {
  display:grid; grid-template-columns:max-content 1fr; column-gap:18px; }
.trips-page .list-head > .col-label, .packages-page .list-head > .col-label { grid-column:1; grid-row:1; }
.trips-page .list-head > .status-tabs, .packages-page .list-head > .status-tabs { grid-column:1; grid-row:2; }
/* Groups carry the same bottom margins as their left-hand partners (pill 12px /
   tabs 6+12px) so align-self:center centers on the visible row, not the margin box. */
.list-head > .lf-a { grid-column:2; grid-row:1; justify-self:end; align-self:center; margin-bottom:12px; }
.list-head > .lf-b { grid-column:2; grid-row:2; justify-self:end; align-self:center; margin:6px 0 12px; }
/* 0.0625 in (6px @96dpi) gap from the All/Active/Past pills to the first card (0.jpg parity
   with the app). Scoped to My Packages / My Trips so the shared .status-tabs (matches/admin)
   is untouched; both row-2 items drop to a 6px bottom margin so the row bottom = 6px. */
.packages-page .list-head > .status-tabs, .trips-page .list-head > .status-tabs,
.packages-page .list-head > .lf-b, .trips-page .list-head > .lf-b { margin-bottom: 6px; }
.trips-page .list-head .col-label, .packages-page .list-head .col-label {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  background: var(--t-card); border: 1px solid var(--t-line); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 12px; box-shadow: var(--t-shadow-sm); }

/* trip card */
.trips-page .trip { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow);
  padding:22px 24px; transition:.16s; margin-bottom:18px; }
.trips-page .trip:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,36,28,.04),0 16px 40px rgba(16,36,28,.1); }
.trips-page .trip.cancelled .fade { opacity:.6; }
.trips-page .trip-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.trips-page .route-title { display:flex; align-items:center; gap:12px; }
.trips-page .route-title .ic { width:40px; height:40px; border-radius:11px; background:var(--emerald-soft); color:var(--emerald);
  display:grid; place-items:center; flex:none; }
.trips-page .trip.cancelled .route-title .ic { background:#EEEAEA; color:#9c8a8a; }
.trips-page .route-title .rt { display:flex; align-items:center; gap:9px; font-family:var(--grotesk);
  font-weight:700; font-size:20px; letter-spacing:-.01em; }
.trips-page .route-title .rt .arr { color: var(--ink); display:flex; }
.trips-page .trip.cancelled .route-title .rt .arr { color:#b0a3a3; }
.trips-page .scope { font-size:13px; color:var(--t-muted); margin-top:3px; }

.trips-page .status { font-family:var(--inter); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:7px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; flex:none; text-transform:capitalize; }
.trips-page .status .led { width:6px; height:6px; border-radius:50%; }
.trips-page .st-open { background:var(--open-bg); color:var(--open-ink); } .trips-page .st-open .led { background:var(--open-ink); }
.trips-page .st-cancelled { background:var(--cancel-bg); color:var(--cancel-ink); } .trips-page .st-cancelled .led { background:var(--cancel-ink); }

.trips-page .facts { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--t-line); border-radius:4px; overflow:hidden; }
.trips-page .fact { padding:14px 16px; }
.trips-page .fact + .fact { border-left:1px solid var(--t-line); }
.trips-page .fact .fl { font-size:10.5px; color:var(--t-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.trips-page .fact .fv { font-family:var(--grotesk); font-weight:700; font-size:15px; color:var(--t-ink); margin-top:4px; }
.trips-page .fact .fv span { font-size:11px; color:var(--t-muted); font-weight:600; }

.trips-page .traveler { display:flex; align-items:center; gap:11px; margin-top:18px; padding-top:16px; border-top:1px solid var(--t-line); }
.trips-page .traveler .av { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,#2f6b57,#163a2d); color:#fff; font-family:var(--grotesk); font-weight:700; font-size:12.5px; }
.trips-page .traveler .tl { font-size:11px; color:var(--t-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.trips-page .traveler .tn { font-family:var(--grotesk); font-weight:600; font-size:14.5px; color:var(--t-ink); margin-top:1px; }

/* manage actions (edit / cancel) */
.trips-page .trip-actions { display:flex; gap:10px; margin-top:16px; }
.trips-page .trip-act { flex:1; cursor:pointer; font-family:var(--inter); font-weight:600; font-size:13.5px;
  padding:10px 14px; border-radius:11px; border:1px solid var(--t-field-line); background:var(--t-card); color:var(--t-ink); transition:.16s; }
.trips-page .trip-act:hover { border-color:var(--emerald); color:var(--emerald); background:var(--emerald-soft); }
.trips-page .trip-act.danger:hover { border-color:#C84B3B; color:#C84B3B; background: var(--danger-bg); }

/* post / edit form */
.trips-page .form-card { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow);
  padding:24px; position:sticky; top:var(--stick-under-nav, 22px); }
.trips-page .form-card h2 { font-family:var(--grotesk); font-size:18px; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
.trips-page .fld { margin-bottom:16px; }
.trips-page .fld label { display:block; font-family:var(--inter); font-size:13px; font-weight:600; color:var(--t-ink); margin-bottom:7px; }
.trips-page .fld label .opt { color:var(--t-faint); font-weight:500; }
.trips-page .control { width:100%; border:1px solid var(--t-field-line); background: var(--card); border-radius:11px;
  padding:12px 13px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--t-ink); outline:none; transition:.16s;
  color-scheme: light; }
.trips-page .control::placeholder { color:var(--t-faint); }
.trips-page .control:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }
.trips-page .control:disabled { background: var(--bg); color:var(--t-muted); cursor:not-allowed; }
.trips-page select.control { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235d6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.trips-page textarea.control { resize:vertical; min-height:84px; line-height:1.5; padding-bottom:24px; }
.trips-page .two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* Match-detail tips */
.tip-item { padding:10px 0; border-bottom:1px solid var(--line,#eee); }
.tip-item:last-child { border-bottom:0; }
.tip-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tip-amt { font-weight:700; }
.tip-when { font-size:12px; color:var(--t-faint,#888); }
.tip-thanks { margin:6px 0 0; font-style:italic; color:var(--t-muted,#555); }
.tip-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.tip-chip { border:1px solid var(--line,#ddd); background: var(--card); border-radius:999px; padding:5px 10px; font-size:13px; cursor:pointer; }
.tip-chip:hover { background:var(--canvas,#f5f5f5); }
.trips-page .hint { font-size:12px; color:var(--t-faint); margin:-8px 0 16px; display:flex; align-items:center; gap:6px; }
.trips-page .hint svg { flex:none; }
.trips-page .ta-wrap { position:relative; }
.trips-page .char-count { position:absolute; right:12px; bottom:9px; font-family:var(--grotesk); font-size:11px;
  font-weight:600; color:var(--t-faint); background: var(--card); padding:0 3px; pointer-events:none; }
/* Date field: readonly display box ("Tue, 17 Jun 2026") with the native date input
   tucked behind it (kept in the DOM so showPicker() can open the calendar).
   Unscoped from .trips-page: the shared dateField now also powers the list date
   filters on Your Packages (41.jpg). */
.date-wrap { position:relative; }
.date-wrap .date-display { cursor:pointer; }
.date-wrap input[type=date] { position:absolute; left:0; bottom:0; width:1px; height:1px;
  opacity:0; pointer-events:none; border:0; padding:0; }

/* 40/41.jpg list date filters (Your Trips: depart/arrive ranges; Your Packages:
   needed-by), moved INTO the list-head (user request): Departs sits on the
   "MY TRIPS · N" pill row, Arrives on the All/Active/Past row, both right-aligned
   so the To box's right edge lines up with the cards' right edge. Compact display
   boxes; the clear button only appears once a date is set (left of its group so
   the right-edge alignment never moves). */
.lf-group { display:flex; align-items:center; gap:8px; }
.lf-group .lf-lab { font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.lf-group .lf-pair { display:flex; align-items:center; gap:6px; }
.lf-group .lf-dash { color:var(--muted); }
.lf-group .date-wrap { width:132px; }
.lf-group .date-display { font-size:12.5px; padding:7px 10px; text-overflow:ellipsis; }
.lf-clear { display:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--green);
  background:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; }
.lf-clear.show { display:inline-flex; }
.lf-clear:hover { background:var(--green-light); }
/* platform-priced Phase 1: the one-tap suggested-rate chip in the fare hints. */
.fare-suggest-btn { font: inherit; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-light);
  border: none; border-radius: 999px; padding: 3px 10px; cursor: pointer; vertical-align: 1px; }
.fare-suggest-btn:hover { background: #d6ebde; }
.fare-net { color: var(--muted); }
/* Phase 2: platform-quoted price inputs — visibly locked. */
input.quoted, input.quoted:disabled { background: var(--green-light); border-color: var(--green); color: var(--ink);
  font-weight: 600; cursor: default; opacity: 1; }
/* 66.jpg (round 2, user: NEVER drop below the pills): the trips groups stay on
   the pill/tabs rows at ANY window width or browser zoom — instead of wrapping,
   the date boxes and gaps COMPRESS in steps. With the tightest tier the pills +
   both groups fit the list column down to where the page collapses to one
   column anyway. */
@media (max-width: 1875px) {
  .trips-page .lf-group .date-wrap { width: 108px; }
}
@media (max-width: 1512px) {
  .trips-page .lf-group { gap: 6px; }
  .trips-page .lf-group .lf-pair { gap: 4px; }
  .trips-page .lf-group .date-wrap { width: 92px; }
  .trips-page .lf-group .date-display { padding: 7px 8px; font-size: 12px; }
  .trips-page .list-head { column-gap: 12px; }
}
@media (max-width: 1250px) {
  .trips-page .lf-group .date-wrap { width: 80px; }
  .trips-page .lf-group .lf-lab { font-size: 11.5px; }
}
@media (max-width: 1050px) { /* was 840 (760 x 1.1); x1.25 with the 1.03125 UI zoom */
  .packages-page .list-head > .lf-b { grid-column:1 / -1; grid-row:auto; justify-self:start; margin:0 0 10px; }
}
.trips-page .post-btn { width:100%; border:none; cursor:pointer; background:linear-gradient(145deg,var(--emerald-2),var(--pine));
  color:#fff; border-radius:13px; padding:15px; font-family:var(--inter); font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:.18s; box-shadow:0 10px 22px -8px rgba(12,59,46,.55); }
.trips-page .post-btn:hover { transform:translateY(-1px); }
.trips-page .link-btn { display:block; width:100%; margin-top:10px; background:none; border:none; cursor:pointer;
  font-family:var(--grotesk); font-weight:600; font-size:13.5px; color:var(--t-muted); padding:6px; }
.trips-page .link-btn:hover { color:var(--t-ink); }

@media (max-width:1150px) {
  .trips-page .layout { grid-template-columns:1fr; grid-template-rows:none; }
  .trips-page .layout > .list-head, .trips-page .layout > section, .trips-page .layout > aside { grid-column:1; grid-row:auto; }
  .trips-page .form-card { position:static; }
}
@media (prefers-reduced-motion:reduce) { .trips-page * { transition:none !important; } }

/* ============================================================
   Find / Matches / Prohibited redesign (scoped per page).
   Mirrors the 000/u-get-bag-web-*.html mockups; shares the same
   design tokens as the Trips page.
   ============================================================ */
.find-page, .matches-page, .prohibited-page {
  --pine:#0C3B2E; --emerald:#15795C; --emerald-2:#1A8A66; --emerald-soft:#E7F2EC;
  --t-paper:#F4F6F4; --t-card:#FFFFFF; --t-ink:#16241F; --t-muted:#5d6b64; --t-faint:#656e68;
  --t-line:#E6EAE7; --t-field-line:#D8E0DB;
  --open-ink:#0F6B4E; --open-bg:#E2F1EA;
  --done-ink:#0B5C8A; --done-bg:#E4EFF6;
  --declined-ink:#A2554C; --declined-bg:#F6E9E6;
  --danger-ink:#B4524A; --danger-text:#9a4b43; --danger-bg:#FBECE9;
  --warn-bg:#FBF3E1; --warn-border:#F0E2BE;
  --t-shadow:0 1px 2px rgba(16,36,28,.04),0 10px 30px rgba(16,36,28,.07);
  --t-shadow-sm:0 1px 2px rgba(16,36,28,.05),0 4px 14px rgba(16,36,28,.05);
  --grotesk:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  color:var(--t-ink);
}
/* Content column grows toward the viewport on wide screens (shrinking the big side
   gutters) but caps for readability. App-wide across the list/reference pages. */
/* No inner cap: Find a package / Find space and Matches stretch with the shell
   container (which supplies the 2in gutters). */
.find-page, .matches-page { max-width:none; }
.prohibited-page { max-width:min(94vw, 1320px); margin:0 auto; }
/* In-app (inside the shell container) the page stretches with the 2in-gutter
   container; the PUBLIC logged-out page keeps the 1320 cap above. */
.container .prohibited-page { max-width:none; }
/* Public (logged-out) shell for pages whose siteFooter mounts as a sibling:
   fills the viewport so the footer sits at the BOTTOM even when content is short. */
.pub-fill { min-height:calc(100vh / var(--uiz)); display:flex; flex-direction:column; }
.pub-fill > .prohibited-page { flex:1 0 auto; width:100%; }
/* Prohibited items wears the legal shell (frozen top bar): grow to pin the footer, and add
   breathing room below the fixed bar (.legal-page already reserves its height via padding-top). */
.legal-page > .prohibited-page { flex:1 0 auto; width:100%; padding-top:24px; }
/* public bar shown when a logged-out visitor opens Prohibited items from the
   homepage footer (the page renders standalone, without the app shell). */
/* 22px top breathing room (50.jpg: Back-to-home / Sign in sat against the top edge). */
.prohibited-pubbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-top:22px; }
.prohibited-back, .prohibited-login { font-size:14px; font-weight:600; text-decoration:none; color:var(--green-dark); }
.prohibited-back:hover, .prohibited-login:hover { text-decoration:underline; }
.prohibited-login { color:var(--green); }
.find-page h1, .matches-page h1, .prohibited-page h1 {
  font-family:var(--grotesk); font-size:30px; font-weight:700; letter-spacing:-.02em; margin-bottom:22px; }

/* shared status pill */
.find-page .status, .matches-page .status { font-family:var(--inter); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; flex:none; text-transform:capitalize; }
.find-page .status .led, .matches-page .status .led { width:6px; height:6px; border-radius:50%; }
.find-page .status { background:var(--open-bg); color:var(--open-ink); }
.find-page .status .led { background:var(--open-ink); }
.matches-page .st-active { background:var(--open-bg); color:var(--open-ink); } .matches-page .st-active .led { background:var(--open-ink); }
.matches-page .st-done { background:var(--done-bg); color:var(--done-ink); } .matches-page .st-done .led { background:var(--done-ink); }
.matches-page .st-declined { background:var(--declined-bg); color:var(--declined-ink); } .matches-page .st-declined .led { background:var(--declined-ink); }

/* shared select.control + buttons */
.find-page select.control { width:100%; border:1px solid var(--t-field-line); background: var(--card); border-radius:11px; padding:12px 13px;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--t-ink); outline:none; transition:.16s;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235d6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.find-page select.control:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }

/* ── Rebuilt browse filter bar (mockup parity) ── */
.find-page .filters2 { display:flex; flex-direction:column; margin-bottom:22px; }
/* Fixed height (won't shrink on input; ~5% taller than the old 13px-padding box) +
   the Docs-card lift (resting --t-shadow, deeper shadow on focus). */
.find-page .search2 { position:relative; display:flex; align-items:center; gap:11px; background: var(--card); border:1px solid var(--t-field-line,#D8E0DB); border-radius:15px; height:48px; padding:0 16px; margin-bottom:14px; box-shadow:var(--t-shadow); transition:box-shadow .16s; }
.find-page .search2:focus-within { box-shadow:0 1px 2px rgba(16,36,28,.04),0 16px 40px rgba(16,36,28,.1); }
.find-page .search2 .s-ic { color:var(--t-faint,#656e68); display:flex; flex:none; }
.find-page .search2 input { border:none; outline:none; font-size:15px; width:100%; background:none; color:var(--t-ink,#16241F); box-shadow:none; padding:0; }
.find-page .search2 input:focus { box-shadow:none; border:none; }
.find-page .chips-row { display:flex; align-items:center; gap:9px; position:relative; }
.find-page .fbtn { flex:none; width:44px; height:40px; border-radius:13px; border:1px solid var(--t-field-line,#D8E0DB); background: var(--card); display:grid; place-items:center; color:var(--t-ink,#16241F); cursor:pointer; box-shadow:var(--t-shadow-sm); }
.find-page .chips-scroll { display:flex; gap:9px; overflow-x:auto; padding:2px 28px 2px 0; scrollbar-width:none; }
.find-page .chips-scroll::-webkit-scrollbar { display:none; }
.find-page .fchip { flex:none; white-space:nowrap; padding:9px 15px; border-radius:999px; font-family:var(--inter); font-weight:600; font-size:13.5px; border:1px solid var(--t-field-line,#D8E0DB); background: var(--card); color:var(--t-ink,#16241F); cursor:pointer; transition:.16s; }
.find-page .fchip:hover { border-color: var(--muted); }
.find-page .fchip.on { background:var(--pine,#0C3B2E); color:#fff; border-color:var(--pine,#0C3B2E); }
.find-page .fade-r { position:absolute; top:0; bottom:0; right:0; width:34px; pointer-events:none; background:linear-gradient(270deg,var(--bg,#F4F6F4),transparent); }
.find-page .refine { display:flex; gap:9px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
.find-page .refine::-webkit-scrollbar { display:none; }
.find-page .ctrl { flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px; border:1px solid var(--t-field-line,#D8E0DB); background: var(--card); cursor:pointer; box-shadow:var(--t-shadow-sm); }
.find-page .ctrl:hover { border-color: var(--muted); }
.find-page .ctrl .lead { color:var(--emerald,#15795C); flex:none; display:flex; }
.find-page .ctrl .lab { font-family:var(--inter); font-size:13.5px; font-weight:600; color:var(--t-ink,#16241F); white-space:nowrap; }
.find-page .ctrl .chev { color:var(--t-faint,#656e68); flex:none; display:flex; }
.find-page .ctrl select.control { border:none; background:none; box-shadow:none; padding:0; padding-right:0; background-image:none; font-family:var(--inter); font-size:13.5px; font-weight:600; color:var(--t-ink,#16241F); cursor:pointer; width:auto; min-width:88px; }
.find-page .ctrl select.control:focus { box-shadow:none; border:none; }
.find-page .refine-pop { margin-top:10px; background: var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; box-shadow:var(--t-shadow-sm); }
.find-page .refine-pop.hide, .find-page .adv-panel.hide { display:none; }
.find-page .adv-panel { margin-top:12px; background: var(--card); border:1px solid var(--line); border-radius:6px; padding:14px; box-shadow:var(--t-shadow-sm); }
.find-page .adv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.find-page .advf { display:flex; flex-direction:column; gap:5px; font-family:var(--inter); font-size:12px; font-weight:600; color:var(--t-muted,#5d6b64); margin:0; }
.find-page .adv-foot { display:flex; justify-content:flex-end; margin-top:12px; }
.find-page .match-card { display:flex; align-items:center; gap:13px; margin-top:13px; padding:13px 15px; border-radius:6px; background:linear-gradient(180deg,#F1F8F4,#EAF3EE); border:1px solid #D5E7DC; cursor:pointer; }
.find-page .match-card .mtile { width:40px; height:40px; border-radius:12px; background:var(--emerald,#15795C); color:#fff; display:grid; place-items:center; flex:none; }
.find-page .match-card .mt { font-family:var(--grotesk); font-weight:600; font-size:15px; color:var(--pine,#0C3B2E); }
.find-page .match-card .ms { font-size:12.5px; color:#5d7c6e; margin-top:1px; }
.find-page .match-card select.control { margin-left:auto; max-width:44%; }
.find-page .fits-row { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:13.5px; color:var(--t-ink,#16241F); }
.find-page .actions-row2 { margin-top:16px; color:var(--t-muted,#5d6b64); font-size:14px; }
@media (max-width:700px){ .find-page .adv-grid{ grid-template-columns:1fr; } .find-page .match-card{ flex-wrap:wrap; } .find-page .match-card select.control{ max-width:100%; margin-left:0; width:100%; } }

/* ── Security & privacy + list rows ── */
.security-page .sc-card { background: var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow-sm); padding:18px 20px; margin-bottom:16px; }
.security-page .sc-head { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.security-page .sc-head h2 { font-family:var(--grotesk); font-size:17px; font-weight:600; color:var(--t-ink,#16241F); margin:0; }
.security-page .sc-sub { font-size:12.5px; color:var(--t-muted,#5d6b64); }
.security-page .sc-form { display:flex; flex-direction:column; gap:10px; max-width:420px; }
.security-page .sc-p { font-size:13.5px; color:var(--t-muted,#5d6b64); line-height:1.5; margin-bottom:12px; }
.security-page .sc-danger { color:#B4524A; }
.security-page .sc-foot { margin-top:12px; }
.security-page .sc-muted { color:var(--t-muted,#5d6b64); font-size:12.5px; }
/* Session-group count chip ("3 sessions") on a grouped device card — pill per house rule. */
.security-page .sc-chip { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--t-muted,#5d6b64); font-family:var(--inter); font-size:11.5px; font-weight:600; vertical-align:middle; }
/* "History cleared on <date>" marker at the bottom of the login-activity list. */
.security-page .sc-cleared { color:var(--t-muted,#5d6b64); font-size:12.5px; font-style:italic; padding:.35rem .2rem 0; }
.security-page .sc-del-btn { font-family:var(--inter); font-weight:600; font-size:13.5px; border-radius:11px; padding:11px 18px; cursor:pointer; margin-top:10px; border:1px solid #B4524A; background: var(--danger-bg); color:#9a4b43; }
.security-page .sc-del-btn:hover { background: var(--danger-bg); }
.notif-page .np-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 2px; border-bottom:1px solid #F1F4F2; }
.notif-page .np-row:last-child { border-bottom:none; }
.notif-page .np-label { font-size:14.5px; font-weight:600; color:var(--t-ink,#16241F); }
.notif-page .np-sub { font-size:12.5px; color:var(--t-muted,#5d6b64); margin-top:1px; }
.alert.warn { background: var(--warn-bg); color:#8A5A08; border:1px solid #EBD9B5; padding:11px 14px; border-radius:11px; font-size:13px; }
.trips-page .seg-row { display:inline-flex; gap:4px; background: var(--bg); border-radius:12px; padding:4px; margin-bottom:16px; }
.trips-page .seg { border:none; background:none; padding:8px 16px; border-radius:9px; font-family:var(--inter); font-weight:600; font-size:13.5px; color:var(--t-muted,#5d6b64); cursor:pointer; transition:.15s; white-space:nowrap; }
/* Selected transport pill (02.jpg): the canonical transitional-green gradient with
   pure white text — same treatment as the Post-a-trip / Post-a-package CTAs. */
.trips-page .seg.on { background: linear-gradient(90deg, #1A8A66 0%, #0C3B2E 100%); color:#fff; box-shadow:0 1px 2px rgba(16,36,28,.18); }
/* Air / Land / Sea — the post-trip form's leading choice: icon + label segments,
   stretched to the form width so it reads as the primary decision. */
.trips-page .transport-row { display:flex; width:100%; }
.trips-page .transport-row .seg { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.trips-page .transport-row .seg svg { width:17px; height:17px; flex:none; }
.trips-page .transport-row .seg.on svg { color: #fff; }
/* Bilingual-origin (Cameroon/Canada) departure-format chooser + live preview. */
.trips-page .fmt-pref { background: var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:4px 0 14px; }
.trips-page .fmt-pref-h { font-family:var(--inter); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--t-ink,#16241F); margin-bottom:8px; }
.trips-page .fmt-pref-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.trips-page .fmt-pref-row + .fmt-pref-row { margin-top:6px; }
.trips-page .fmt-pref-lab { font-size:13px; font-weight:600; color:var(--t-muted,#5d6b64); }
.trips-page .fmt-pref .fmt-seg { margin-bottom:0; }
.trips-page .depart-preview { margin:-6px 0 14px; font-weight:600; color:var(--t-ink,#16241F); }
.find-page .btn-primary, .find-page .btn-ghost,
.matches-page .btn-ghost { font-family:var(--inter); font-weight:600; font-size:13.5px; border-radius:11px; padding:11px 18px;
  cursor:pointer; transition:.16s; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.find-page .btn-primary { border:none; background:var(--emerald); color:#fff; box-shadow:0 6px 14px rgba(21,121,92,.28); }
.find-page .btn-primary:hover { background:#0f6a4f; }
.find-page .btn-ghost, .matches-page .btn-ghost { border:1px solid var(--t-field-line); background: var(--card); color:var(--t-ink); }
.find-page .btn-ghost:hover, .matches-page .btn-ghost:hover { border-color: var(--muted); background:var(--t-paper); }

/* ---- Browse ---- */
.find-page .filters { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow-sm);
  padding:20px 22px; display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
.find-page .filters label { display:block; font-family:var(--inter); font-size:13px; font-weight:600; color:var(--t-ink); margin-bottom:8px; }
.find-page .count { font-size:13px; color:var(--t-muted); font-weight:500; margin:0 4px 14px; }
.find-page .count b { color:var(--t-ink); font-family:var(--grotesk); }
.find-page .reqlist { display:flex; flex-direction:column; gap:14px; }
.find-page .req { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:20px 22px; transition:.16s; }
.find-page .req:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,36,28,.04),0 16px 40px rgba(16,36,28,.1); }
.find-page .req-head { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.find-page .req-ic { width:42px; height:42px; border-radius:12px; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; flex:none; }
.find-page .req-head .ttl { flex:1; font-family:var(--grotesk); font-weight:700; font-size:18px; letter-spacing:-.01em; }
.find-page .mid { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.find-page .route { padding:11px 14px; background:var(--t-paper); border-radius:13px; display:flex; align-items:center; min-width:230px; }
.find-page .endpoint { flex:none; min-width:50px; }
.find-page .endpoint.dest { text-align:right; }
.find-page .code { font-family:var(--grotesk); font-weight:700; font-size:16px; color:var(--pine); }
.find-page .city { font-size:11px; color:var(--t-muted); margin-top:1px; }
.find-page .path { flex:1; height:20px; position:relative; margin:0 8px; display:flex; align-items:center; min-width:54px; }
.find-page .path::before { content:""; position:absolute; left:4px; right:4px; top:50%; border-top:2px dashed #cfd9d3; }
.find-page .path .glyph { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%;
  background:var(--emerald); color:#fff; display:grid; place-items:center; box-shadow:0 4px 10px rgba(21,121,92,.35); }
.find-page .route-pair { font-size:12.5px; font-weight:600; color:var(--t-muted); background: var(--card); border:1px solid var(--t-line);
  border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:7px; }
.find-page .route-pair span svg { color:var(--t-faint); }
.find-page .meta { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.find-page .chips { display:flex; gap:8px; flex-wrap:wrap; }
.find-page .chip { font-size:12.5px; font-weight:600; color:var(--t-muted); background:var(--t-paper); border:1px solid var(--t-line);
  border-radius:999px; padding:6px 11px; display:inline-flex; align-items:center; gap:6px; }
.find-page .chip span svg { color:var(--emerald); display:block; }
.find-page .sender { display:flex; align-items:center; gap:9px; }
.find-page .sender .sav { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,#3a6ea5,#1d3c66); color:#fff; font-family:var(--grotesk); font-weight:700; font-size:11px; }
.find-page .sender .sl { font-size:10.5px; color:var(--t-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.find-page .sender .sn { font-family:var(--grotesk); font-weight:600; font-size:13.5px; color:var(--t-ink); margin-top:1px; }
.find-page .actions { display:flex; gap:10px; border-top:1px solid var(--t-line); padding-top:16px; }

/* ---- Matches ---- */
.matches-page .sec + .sec { margin-top:30px; }
.matches-page .sec-label { font-family:var(--grotesk); font-size:12.5px; font-weight:600; color:var(--t-muted);
  text-transform:uppercase; letter-spacing:.08em; margin:0 2px 14px; }
.matches-page .match-list { display:flex; flex-direction:column; gap:14px; }
.matches-page .empty { background:var(--t-card); border:1px dashed var(--t-field-line); border-radius:6px; padding:26px; text-align:center; }
.matches-page .empty .ec { width:44px; height:44px; border-radius:13px; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; margin:0 auto 12px; }
.matches-page .empty .et { font-family:var(--grotesk); font-weight:600; font-size:14.5px; color:var(--t-ink); }
.matches-page .empty .es { font-size:13px; color:var(--t-muted); margin-top:3px; }
.matches-page .match { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:20px 22px; transition:.16s; }
.matches-page .match:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,36,28,.04),0 16px 40px rgba(16,36,28,.1); }
.matches-page .match.closed .fade { opacity:.72; }
.matches-page .match-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.matches-page .match-ic { width:42px; height:42px; border-radius:12px; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; flex:none; }
.matches-page .match.closed .match-ic { background:#EEEAEA; color:#9c8a8a; }
.matches-page .htxt { flex:1; min-width:0; }
.matches-page .match-head .ttl { font-family:var(--grotesk); font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--t-ink); }
.matches-page .match-head .sub { font-size:13px; color:var(--t-muted); margin-top:2px; display:flex; align-items:center; gap:7px; }
.matches-page .match-head .sub .arr { color: var(--ink); display:flex; }
.matches-page .match.closed .sub .arr { color:#b0a3a3; }
.matches-page .parties { display:flex; align-items:center; gap:14px; background:var(--t-paper); border-radius:4px; padding:13px 16px; }
.matches-page .party { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.matches-page .party.right { justify-content:flex-end; text-align:right; }
.matches-page .pav { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--grotesk); font-weight:700; font-size:12px; }
.matches-page .pav.me { background:linear-gradient(140deg,#1b8a68,#0c5a42); }
.matches-page .pav.them { background:linear-gradient(140deg,#3a6ea5,#1d3c66); }
.matches-page .prole { font-size:10.5px; color:var(--t-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; display:flex; align-items:center; gap:6px; }
.matches-page .you-tag { background:var(--emerald); color:#fff; border-radius:999px; padding:2px 7px; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; }
.matches-page .pname { font-family:var(--grotesk); font-weight:600; font-size:14px; color:var(--t-ink); margin-top:2px; }
.matches-page .swap { width:30px; height:30px; border-radius:50%; background: var(--card); border:1px solid var(--t-line); color:var(--t-muted); display:grid; place-items:center; flex:none; }
.matches-page .actions { display:flex; gap:10px; border-top:1px solid var(--t-line); padding-top:16px; margin-top:16px; }

/* ---- Prohibited ---- */
/* subtitle under the H1 (parity with prohibited-public.html) */
.prohibited-page h1 + .prohibited-sub { margin:-14px 2px 18px; color:var(--t-muted); font-size:15px; }
/* red "cannot send" alert: bold line + a muted screening line */
.prohibited-page .banner { display:flex; align-items:flex-start; gap:13px; background:var(--danger-bg); border:1px solid #EFC9C3;
  border-radius:6px; padding:15px 18px; margin-bottom:24px; }
.prohibited-page .banner .bi { width:38px; height:38px; border-radius:10px; background: var(--card); color:var(--danger-ink); border:1px solid #EFC9C3; display:grid; place-items:center; flex:none; }
.prohibited-page .banner .bt { display:flex; flex-direction:column; gap:3px; font-size:14.5px; color:var(--danger-text, var(--danger-ink)); }
.prohibited-page .banner .bt b { font-weight:700; }
.prohibited-page .banner .bt .bt2 { font-weight:500; color:#9a5a52; }
.prohibited-page .item-img { width:34px !important; height:34px !important; }

/* NEW (package-guidelines carousel, tailored) — keeps the existing 18px card angle.
   Compliant checklist (emerald) above the search; enforcement notice below the grid.
   Both enforcement paragraphs are continuous body text (same style). */
.prohibited-page .compliant { background:var(--emerald-soft); border:1px solid #CBE3D5; border-radius:6px; padding:18px 20px; margin-bottom:24px; }
.prohibited-page .compliant-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.prohibited-page .compliant-head .ci { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background: var(--card); border:1px solid #CBE3D5; color: var(--green); }
.prohibited-page .compliant-head b { font-family:var(--grotesk); font-size:16px; font-weight:600; color: var(--green); }
.prohibited-page .compliant-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; }
.prohibited-page .compliant-list li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--t-ink); line-height:1.4; }
.prohibited-page .compliant-list li .ck { color: var(--green); flex:none; margin-top:2px; display:flex; }
.prohibited-page .enforce { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow-sm); padding:20px 22px; margin:24px 0 10px; }
.prohibited-page .enforce-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.prohibited-page .enforce-head .ei { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background: var(--warn-bg); color:#9A5905; }
.prohibited-page .enforce-head b { font-family:var(--grotesk); font-size:16px; font-weight:600; }
.prohibited-page .enforce p { font-size:13.5px; color:var(--t-ink); line-height:1.55; }
.prohibited-page .enforce p + p { margin-top:12px; }
.prohibited-page .enforce-report { display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--grotesk); font-weight:600; font-size:13.5px;
  color: var(--green); text-decoration:none; background:var(--emerald-soft); border:1px solid #CBE3D5; border-radius:11px; padding:10px 16px; }
.prohibited-page .enforce-report:hover { background:#DCEEE2; }
.prohibited-page .enforce-report span { display:flex; }
@media (max-width:800px){ .prohibited-page .compliant-list { grid-template-columns:1fr; } }
/* column-WIDTH (not a fixed count) so the masonry auto-fills more columns as the wider
   container allows — ~3 at typical widths, 4 on large screens — instead of leaving the
   grid sparse. break-inside:avoid on .cat keeps each card intact. */
/* Masonry = flex columns filled shortest-first by prohibited.js render() (51.jpg);
   was CSS multi-columns, whose source-order balancing left one column near-empty. */
.prohibited-page .grid { display:flex; gap:18px; align-items:flex-start; }
.prohibited-page .grid .gcol { flex:1 1 0; min-width:0; }
.prohibited-page .cat { break-inside:avoid; margin-bottom:18px; background:var(--t-card); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--t-shadow); padding:18px 20px; transition:box-shadow .16s, border-color .16s; }
.prohibited-page .cat:hover { box-shadow:var(--shadow,0 10px 30px -16px rgba(20,40,30,.2)); border-color:#D8DFD9; }
.prohibited-page .cat-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.prohibited-page .cat-ic { width:38px; height:38px; border-radius:11px; background:var(--danger-bg); color:var(--danger-ink); display:grid; place-items:center; flex:none; }
.prohibited-page .cat-head h3 { font-family:var(--grotesk); font-weight:600; font-size:17px; letter-spacing:-.01em; }
/* item rows separated by hairlines (mockup 000/prohibited-public.html), not gaps */
.prohibited-page .items { list-style:none; display:flex; flex-direction:column; margin:0; padding:0; }
.prohibited-page .items li { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--t-muted); padding:9px 0; border-top:1px solid var(--line-2,#EDF1ED); }
.prohibited-page .items li:first-child { border-top:none; }
.prohibited-page .items li .dot { width:7px; height:7px; border-radius:50%; background:var(--danger-ink); flex:none; margin-top:6px; }
.prohibited-page .items li .item-img { width:34px; height:34px; border-radius:6px; object-fit:cover; flex:none; margin-top:1px; border:1px solid var(--line-2,#EDF1ED); background:var(--surface-2,#f1f1f4); }
.prohibited-page .items li .term { font-family:var(--grotesk); font-weight:600; color:var(--t-ink); }

@media (max-width:950px) {
  .find-page .filters { grid-template-columns:1fr; }
  .find-page .meta { flex-direction:column; align-items:flex-start; }
}
@media (max-width:850px) {
  .matches-page .parties { flex-direction:column; align-items:stretch; gap:10px; }
  .matches-page .party, .matches-page .party.right { justify-content:flex-start; text-align:left; }
  .matches-page .swap { transform:rotate(90deg); }
}
@media (prefers-reduced-motion:reduce) {
  .find-page *, .matches-page *, .prohibited-page * { transition:none !important; }
}

/* ============================================================
   Send detail redesign (scoped to .detail-page).
   Mirrors 000/u-get-bag-send-detail.html — a focused single
   column: appbar, hero (route + screening + facts), owner
   cancel + suggested trips, or a traveler propose panel.
   ============================================================ */
.detail-page {
  --pine:#0C3B2E; --emerald:#15795C; --emerald-soft:#E7F2EC;
  --t-card:#FFFFFF; --t-paper:#F4F6F4; --t-ink:#16241F; --t-muted:#5d6b64; --t-line:#E6EAE7; --t-field-line:#D8E0DB;
  --open-ink:#0F6B4E; --open-bg:#E2F1EA;
  --done-ink:#0B5C8A; --done-bg:#E4EFF6;
  --active-ink:#1d4ed8; --active-bg:#E6ECFB;
  --closed-ink:#A2554C; --closed-bg:#F6E9E6;
  --danger:#B4524A; --danger-text:#9a4b43; --danger-bg:#FBEEEC;
  --warn-bg:#FBF3E1; --warn-ink:#8A6A1F;
  --t-shadow:0 1px 2px rgba(16,36,28,.04),0 8px 24px rgba(16,36,28,.06);
  --grotesk:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  max-width:560px; margin:0 auto; color:var(--t-ink);
}
.detail-page .appbar { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.detail-page .back { width:38px; height:38px; border-radius:12px; border:1px solid var(--t-line); background:var(--t-card);
  display:grid; place-items:center; cursor:pointer; color:var(--t-ink); text-decoration:none; transition:.18s; }
.detail-page .back:hover { border-color:#d4ddd8; }
.detail-page .appbar h1 { font-family:var(--grotesk); font-size:19px; font-weight:600; letter-spacing:-.01em; }

.detail-page .hero { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:18px; margin-bottom:14px; }
.detail-page .hero-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.detail-page .hero h2 { font-family:var(--grotesk); font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }

.detail-page .status { font-family:var(--inter); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:6px 11px; border-radius:999px; flex:none; display:inline-flex; align-items:center; gap:6px; text-transform:capitalize; }
.detail-page .status .led { width:6px; height:6px; border-radius:50%; }
.detail-page .st-open { background:var(--open-bg); color:var(--open-ink); } .detail-page .st-open .led { background:var(--open-ink); }
.detail-page .st-active { background:var(--active-bg); color:var(--active-ink); } .detail-page .st-active .led { background:var(--active-ink); }
.detail-page .st-done { background:var(--done-bg); color:var(--done-ink); } .detail-page .st-done .led { background:var(--done-ink); }
.detail-page .st-closed { background:var(--closed-bg); color:var(--closed-ink); } .detail-page .st-closed .led { background:var(--closed-ink); }

.detail-page .route { margin-top:16px; padding:14px; background:var(--t-paper); border-radius:16px; display:flex; align-items:center; }
.detail-page .endpoint { flex:none; min-width:56px; }
.detail-page .endpoint.dest { text-align:right; }
.detail-page .city { font-family:var(--grotesk); font-weight:700; font-size:18px; color:var(--pine); }
.detail-page .code { font-weight:400; font-size:11.5px; color:var(--t-muted); margin-top:1px; }
.detail-page .path { flex:1; height:24px; position:relative; margin:0 6px; display:flex; align-items:center; }
.detail-page .path::before { content:""; position:absolute; left:6px; right:6px; top:50%; border-top:2px dashed #cfd9d3; }
.detail-page .path .glyph { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%;
  background:var(--emerald); color:#fff; display:grid; place-items:center; box-shadow:0 4px 10px rgba(21,121,92,.35); }

.detail-page .screen { display:flex; align-items:center; gap:11px; margin-top:14px; border-radius:4px; padding:12px 14px; }
.detail-page .screen .si { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none; }
.detail-page .screen .st { font-family:var(--grotesk); font-weight:600; font-size:13.5px; }
.detail-page .screen .ss { font-size:12px; margin-top:1px; }
.detail-page .scr-ok { background:var(--emerald-soft); } .detail-page .scr-ok .si { background:var(--emerald); }
.detail-page .scr-ok .st { color:var(--open-ink); } .detail-page .scr-ok .ss { color:#4f7d6c; }
.detail-page .scr-warn { background:var(--warn-bg); } .detail-page .scr-warn .si { background:#C79A33; }
.detail-page .scr-warn .st { color:var(--warn-ink); } .detail-page .scr-warn .ss { color:var(--warn-ink); }
.detail-page .scr-bad { background:var(--danger-bg); } .detail-page .scr-bad .si { background:var(--danger); }
.detail-page .scr-bad .st { color:var(--danger-text, var(--danger)); } .detail-page .scr-bad .ss { color:#9a4b43; }

.detail-page .facts { display:flex; margin-top:14px; border:1px solid var(--t-line); border-radius:4px; overflow:hidden; }
.detail-page .fact { flex:1; padding:13px 14px; text-align:center; }
.detail-page .fact + .fact { border-left:1px solid var(--t-line); }
.detail-page .fact .fl { font-size:10.5px; color:var(--t-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.detail-page .fact .fv { font-family:var(--grotesk); font-weight:700; font-size:16px; color:var(--t-ink); margin-top:3px; }
.detail-page .fact .fv span { font-size:11px; color:var(--t-muted); font-weight:600; }
/* Declared-Value Coverage total — reward + coverage fee, restated as "You pay" (25/26.jpg). */
.detail-page .hero-total { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:12px 14px; border-radius:6px; background:var(--t-soft-green,color-mix(in srgb,var(--brand,#0b8f5a) 8%,transparent)); }
.detail-page .hero-total .ht-l { font-size:13px; font-weight:700; color:var(--t-ink); }
.detail-page .hero-total .ht-v { font-family:var(--grotesk); font-size:18px; font-weight:800; color:var(--brand,#0b8f5a); }

.detail-page .desc { margin-top:14px; font-size:14px; line-height:1.5; color:var(--t-ink); }
.detail-page .hero-meta { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--t-muted); }
.detail-page .hero img, .detail-page .hero .thumb { margin-top:14px; max-width:100%; border-radius:14px; display:block; }

.detail-page .cancel { width:100%; border:1px solid var(--danger); background:var(--danger-bg); color:var(--danger-text, var(--danger));
  border-radius:16px; padding:15px; cursor:pointer; margin-bottom:22px; transition:.16s;
  font-family:var(--inter); font-weight:600; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:8px; }
.detail-page .cancel:hover { background: var(--danger-bg); }

.detail-page .sec-label { font-family:var(--grotesk); font-size:13px; font-weight:600; color:var(--t-muted);
  text-transform:uppercase; letter-spacing:.06em; margin:0 4px 12px; }

.detail-page .empty { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:26px 20px; text-align:center; }
.detail-page .empty .ec { width:52px; height:52px; border-radius:16px; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; margin:0 auto 14px; }
.detail-page .empty .et { font-family:var(--grotesk); font-weight:600; font-size:15.5px; color:var(--t-ink); }
.detail-page .empty .es { font-size:13px; color:var(--t-muted); margin-top:5px; line-height:1.5; max-width:280px; margin:5px auto 0; }
.detail-page .empty .find { margin-top:16px; border:none; cursor:pointer; background:var(--emerald); color:#fff; border-radius:12px; padding:12px 20px;
  font-family:var(--grotesk); font-weight:600; font-size:13.5px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:.16s; box-shadow:0 6px 14px rgba(21,121,92,.3); }
.detail-page .empty .find:hover { background:#0f6a4f; }

.detail-page .sugg-list { display:flex; flex-direction:column; gap:12px; }
.detail-page .sugg { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:16px 18px; }
.detail-page .sugg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.detail-page .sugg-route { font-family:var(--grotesk); font-weight:700; font-size:15.5px; color:var(--t-ink); }
.detail-page .sugg-date { font-size:12.5px; color:var(--t-muted); }
/* Matched card "Expected delivery" block (19.jpg): eyebrow + calendar + ink date + honesty note. */
.detail-page .sugg-deliv { margin-top:8px; }
.detail-page .sugg-deliv .sd-lab { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--t-muted); }
.detail-page .sugg-deliv .sd-date { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink); margin-top:3px; }
.detail-page .sugg-deliv .sd-ic { display:inline-flex; color:var(--green,#1B7F4B); }
.detail-page .sugg-deliv .sd-note { font-size:10.5px; color:var(--faint,#8A968F); margin-top:2px; }
.detail-page .sugg-meta { font-size:13px; color:var(--t-muted); margin-top:6px; }
.detail-page .sugg-actions { display:flex; gap:10px; margin-top:14px; }
.detail-page .propose-card { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:18px; display:flex; flex-direction:column; gap:12px; }
.detail-page select.control { width:100%; border:1px solid var(--t-field-line); background: var(--card); border-radius:11px; padding:12px 13px;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--t-ink); outline:none; transition:.16s; color-scheme:light;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235d6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.detail-page select.control:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }

.detail-page .btn-primary, .detail-page .btn-ghost { font-family:var(--inter); font-weight:600; font-size:13.5px; border-radius:11px; padding:11px 18px;
  cursor:pointer; transition:.16s; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.detail-page .btn-primary { border:none; background:var(--emerald); color:#fff; box-shadow:0 6px 14px rgba(21,121,92,.28); }
.detail-page .btn-primary:hover { background:#0f6a4f; }
.detail-page .btn-primary.block { width:100%; padding:14px; font-size:14.5px; }
.detail-page .btn-ghost { border:1px solid var(--t-field-line); background: var(--card); color:var(--t-ink); }
.detail-page .btn-ghost:hover { border-color: var(--muted); background:var(--t-paper); }

/* ── My Stats dashboard (design C "Focus", 000/dashboard-c-focus.html) ──────────
   Dark hero panel with the role toggle, period chips, hero number + sparkline; below
   it a tile strip, the rating breakdown and the month-grouped statement. */
.stats-page { max-width:560px; margin:0 auto; }
.stats-hero { background:#0C3B2E; color:#fff; border-radius:0 0 22px 22px; padding:16px 16px 4px; }
.stats-hero-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.stats-hero-bar b { font-family:var(--grotesk); font-size:15px; }
.stats-seg { display:flex; background:rgba(255,255,255,.12); border-radius:999px; padding:2px; }
.stats-seg-tab { border:none; background:transparent; color:rgba(255,255,255,.7); font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; cursor:pointer; font-family:inherit; }
.stats-seg-tab.on { background:#fff; color:#0C3B2E; }
.stats-lab { font-size:9px; letter-spacing:.8px; opacity:.75; font-weight:700; }
.stats-big { font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1.05; font-family:var(--grotesk); }
.stats-delta { font-size:11px; color:#6FD3A0; font-weight:700; margin-top:2px; }
.stats-periods { display:flex; gap:6px; margin-top:12px; }
.stats-chip { border:1px solid rgba(255,255,255,.25); background:transparent; color:rgba(255,255,255,.75); border-radius:999px; padding:4px 12px; font-size:10px; font-weight:700; cursor:pointer; font-family:inherit; }
.stats-chip.on { background:#fff; color:#0C3B2E; border-color:#fff; }
.stats-spark { margin:8px 0 2px; }
.stats-body { display:flex; flex-direction:column; gap:12px; padding:14px 2px; }
.stats-tiles { display:flex; gap:10px; }
.stats-tile { flex:1; background:var(--t-card, var(--card)); border:1px solid var(--line); border-radius:6px; padding:10px 12px; }
/* Tappable tiles (rating/sent/trips) deep-link (22.jpg); keep the tile look on the <a>. */
.stats-tile-link { display:block; color:inherit; text-decoration:none; cursor:pointer; }
.stats-tile-link:hover { border-color: var(--emerald, #15795C); }
.stats-tile-v { font-size:17px; font-weight:800; color:var(--t-ink, var(--ink)); }
.stats-tile-v b { font-weight:800; }
.stats-tile-l { font-size:8.5px; color:var(--muted); font-weight:700; letter-spacing:.4px; margin-top:2px; }
.stats-card { background:var(--t-card, var(--card)); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.stats-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.stats-card-head b { font-size:13px; color:var(--t-ink, var(--ink)); }
.stats-mut { font-size:10.5px; color:var(--muted); }
.stats-rrow { display:flex; align-items:center; gap:8px; margin-top:5px; }
.stats-rrow .n { width:24px; font-size:10px; color:var(--muted); text-align:right; }
.stats-rrow .track { flex:1; height:8px; border-radius:4px; background:var(--green-light); overflow:hidden; }
.stats-rrow .track i { display:block; height:8px; background:var(--green); border-radius:0 4px 4px 0; }
.stats-rrow .c { width:26px; font-size:9.5px; color:var(--muted); }
.stats-routes { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; }
.stats-routes button { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:3px 10px; font-size:10px; font-weight:600; cursor:pointer; font-family:inherit; }
.stats-routes button.on { background:#0C3B2E; border-color:#0C3B2E; color:#fff; }
.stats-grp { display:flex; justify-content:space-between; font-size:9.5px; font-weight:700; letter-spacing:.6px; color:var(--muted); margin:10px 0 2px; }
.stats-itm { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; }
.stats-itm .t { font-weight:700; font-size:12px; color:var(--t-ink, var(--ink)); }
.stats-itm .d { font-size:10px; color:var(--muted); }
.stats-itm .amt { font-weight:800; font-size:12px; color:var(--green); white-space:nowrap; }
.stats-itm .amt.pend { color:#B7791F; }

/* Already-matched pair (package + trip detail suggestion cards): a STATE pill — soft
   emerald with a leading ✓ — that links to Match Details, in place of "Propose match". */
.btn-matched { font-family:var(--inter); font-weight:600; font-size:13.5px; border-radius:11px; padding:11px 18px;
  cursor:pointer; transition:.16s; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  border:1px solid var(--emerald); background:var(--emerald-soft); color:var(--emerald); }
.btn-matched::before { content:'✓'; font-weight:700; }
.btn-matched:hover { filter:brightness(.97); }

@media (prefers-reduced-motion:reduce) { .detail-page * { transition:none !important; } }

/* ============================================================
   Match detail redesign (scoped to .match-detail-page).
   Mirrors 000/u-get-bag-match-detail.html — hero, progress
   timeline, dark escrow card, chat panel; keeps all actions,
   handoff proof, and ratings.
   ============================================================ */
.match-detail-page {
  --pine:#0C3B2E; --emerald:#15795C; --emerald-2:#1A8A66; --emerald-soft:#E7F2EC;
  --t-card:#FFFFFF; --t-paper:#F4F6F4; --t-ink:#16241F; --t-muted:#5d6b64; --faint:#656e68; --t-line:#E6EAE7; --t-field-line:#D8E0DB;
  --amber:#E29A38; --amber-ink:#9A5905; --amber-bg:#FBEFD9;
  --active-ink:#1d4ed8; --active-bg:#E6ECFB;
  --done-ink:#0B5C8A; --done-bg:#E4EFF6;
  --closed-ink:#A2554C; --closed-bg:#F6E9E6;
  --danger:#B4524A; --danger-text:#9a4b43; --danger-bg:#FBEEEC;
  --t-shadow:0 1px 2px rgba(16,36,28,.05),0 4px 14px rgba(16,36,28,.05);
  --grotesk:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  max-width:1080px; margin:0 auto; color:var(--t-ink);
}
/* Two-column layout (mirrors u-get-bag-web-match-detail.html): wider main column +
   a sticky side rail. Column gap drives vertical spacing. Card angles
   (border-radius:6px) are intentionally KEPT — not the reference's rounded radii. */
.match-detail-page .md-layout { display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:start; padding-bottom:40px; }
/* Vertical spacing comes from each card's margin-bottom (20px) rather than a column
   gap, because the side column holds conditional, often-empty placeholder wrappers
   (actions/handoff/tips/ratings) that a flex gap would space out even when empty. */
.match-detail-page .md-col { min-width:0; }
.match-detail-page .md-col.side { position:sticky; top:20px; }
@media (max-width:1075px){
  .match-detail-page .md-layout { display:block; }
  .match-detail-page .md-col.side { position:static; }
}
.match-detail-page .appbar { display:flex; align-items:center; gap:14px; padding:8px 0 18px; }
.match-detail-page .back { width:40px; height:40px; border-radius:12px; border:1px solid var(--t-line); background:var(--t-card);
  display:grid; place-items:center; cursor:pointer; color:var(--t-ink); text-decoration:none; transition:.18s; }
.match-detail-page .back:hover { border-color: var(--muted); }
.match-detail-page .appbar h1 { font-family:var(--grotesk); font-size:26px; font-weight:700; letter-spacing:-.01em; }

/* hero */
.match-detail-page .hero { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:24px; margin-bottom:20px; }
.match-detail-page .hero-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.match-detail-page .hero h2 { font-family:var(--grotesk); font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.match-detail-page .status { font-family:var(--inter); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  padding:6px 13px; border-radius:999px; flex:none; display:inline-flex; align-items:center; gap:7px; text-transform:capitalize; }
.match-detail-page .status .led { width:7px; height:7px; border-radius:50%; }
.match-detail-page .st-amber { background:var(--amber-bg); color:var(--amber-ink); } .match-detail-page .st-amber .led { background:var(--amber); }
.match-detail-page .st-active { background:var(--active-bg); color:var(--active-ink); } .match-detail-page .st-active .led { background:var(--active-ink); }
.match-detail-page .st-done { background:var(--done-bg); color:var(--done-ink); } .match-detail-page .st-done .led { background:var(--done-ink); }
.match-detail-page .st-closed { background:var(--closed-bg); color:var(--closed-ink); } .match-detail-page .st-closed .led { background:var(--closed-ink); }

.match-detail-page .route { padding:16px 20px; background:var(--t-paper); border-radius:16px; display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.match-detail-page .endpoint { flex:none; min-width:52px; }
.match-detail-page .endpoint.dest { text-align:right; }
.match-detail-page .city { font-family:var(--grotesk); font-weight:700; font-size:17px; color:var(--t-ink); }
.match-detail-page .code { font-weight:600; font-size:11px; color:var(--faint); letter-spacing:.04em; margin-top:1px; }
.match-detail-page .path { flex:1; display:flex; align-items:center; gap:8px; }
.match-detail-page .path .ln { flex:1; border-top:1.5px dashed #c4d2cb; }
.match-detail-page .path .glyph { width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--emerald); color:#fff; display:grid; place-items:center; }
.match-detail-page .facts { display:flex; gap:14px; margin-bottom:18px; }
.match-detail-page .meta-item { flex:1; display:flex; align-items:center; gap:11px; }
.match-detail-page .meta-item .mi { width:38px; height:38px; border-radius:11px; flex:none; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; }
.match-detail-page .meta-item .ml { font-family:var(--grotesk); font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.match-detail-page .meta-item .mv { font-family:var(--grotesk); font-size:14.5px; font-weight:600; color:var(--t-ink); margin-top:2px; }
.match-detail-page .meta-item { min-width:0; }
.match-detail-page .meta-item .mv.cp { display:flex; align-items:center; gap:7px; flex-wrap:nowrap; white-space:nowrap; }
.match-detail-page .meta-item .mv.cp .rep-badge { flex:none; }
.match-detail-page .hero-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding-top:16px; border-top:1px solid var(--t-line); font-size:14px; color:var(--t-ink); }
.match-detail-page .hero-links .price b { font-family:var(--grotesk); font-weight:700; }
.match-detail-page .hero-links a { color:var(--emerald); text-decoration:none; font-family:var(--grotesk); font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.match-detail-page .hero-links a:hover { text-decoration:underline; }

.match-detail-page .sec-label { font-family:var(--grotesk); font-size:12px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px; }
.match-detail-page .panel { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:24px; margin-bottom:20px; }
.match-detail-page .closed-note { font-size:13.5px; color:var(--closed-ink); font-weight:500; }

/* progress timeline */
.match-detail-page .timeline { position:relative; }
.match-detail-page .tstep { display:flex; gap:14px; padding-bottom:22px; position:relative; }
.match-detail-page .tstep:last-child { padding-bottom:0; }
.match-detail-page .tstep .rail { position:relative; display:flex; flex-direction:column; align-items:center; flex:none; }
.match-detail-page .node { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none; z-index:1; background: var(--card); border:2px solid var(--t-line); }
.match-detail-page .node .inner { width:8px; height:8px; border-radius:50%; background:#cdd6d1; }
.match-detail-page .tstep .line { width:2px; flex:1; background:var(--t-line); margin:4px 0; min-height:14px; }
.match-detail-page .tstep.done .node { background:var(--emerald); border-color:var(--emerald); color:#fff; }
.match-detail-page .tstep.done .line { background:var(--emerald); }
.match-detail-page .tstep.current .node { background:var(--emerald); border-color:var(--emerald); color:#fff; box-shadow:0 0 0 4px var(--emerald-soft); }
.match-detail-page .tstep .txt { padding-top:2px; flex:1; }
.match-detail-page .tstep .st-title { font-family:var(--grotesk); font-weight:600; font-size:15px; color:var(--faint); }
.match-detail-page .tstep.done .st-title, .match-detail-page .tstep.current .st-title { color:var(--t-ink); }
.match-detail-page .tstep .st-sub { font-size:13px; color:var(--faint); margin-top:2px; line-height:1.4; }
.match-detail-page .tstep.current .st-sub { color:var(--emerald); }

/* actions */
.match-detail-page .actions-card .act-row { display:flex; flex-wrap:wrap; gap:10px; }
.match-detail-page .act-note { font-size:13px; color:var(--t-muted); }
.match-detail-page .act-label { display:block; font-family:var(--grotesk); font-weight:600; font-size:13px; color:var(--t-ink); margin:4px 0 8px; }
.match-detail-page .photo-action { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.match-detail-page .photo-action input[type=file] { font-size:13px; }
.match-detail-page button[class^="act-"], .match-detail-page button[class*=" act-"] {
  font-family:var(--grotesk); font-weight:600; font-size:13.5px; border-radius:11px; padding:11px 18px; cursor:pointer; transition:.16s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; }
.match-detail-page .act-primary { background:var(--emerald); color:#fff; box-shadow:0 6px 14px rgba(21,121,92,.28); }
.match-detail-page .act-primary:hover { background:#0f6a4f; }
.match-detail-page .act-ghost { background: var(--card); color:var(--t-ink); border-color:var(--t-field-line); }
.match-detail-page .act-ghost:hover { border-color: var(--muted); background:var(--t-paper); }
.match-detail-page .act-amber { background:var(--amber-bg); color:var(--amber-ink); border-color:#ecd9a8; align-self:flex-start; }
.match-detail-page .act-amber:hover { background: var(--warn-bg); }
.match-detail-page .act-amber:disabled { opacity:.55; cursor:not-allowed; }
.match-detail-page .act-danger { background:var(--danger-bg); color:var(--danger-text, var(--danger)); border-color:#eccac5; }
.match-detail-page .act-danger:hover { background: var(--danger-bg); }
/* Full-width chip button (mockup .act-btn) — used for Block, with a red icon chip. */
.match-detail-page .act-btn { display:flex; align-items:center; gap:11px; width:100%; border:1px solid var(--t-field-line); background: var(--card);
  border-radius:13px; padding:13px 15px; cursor:pointer; transition:.16s; text-align:left; font-family:var(--grotesk); font-weight:600; font-size:14.5px; color:var(--t-ink); }
.match-detail-page .act-btn:hover { background:var(--t-paper); }
.match-detail-page .act-btn .ai { width:34px; height:34px; border-radius:10px; background: var(--danger-bg); color:var(--danger); display:grid; place-items:center; flex:none; }
.match-detail-page .act-row + .act-btn, .match-detail-page .photo-action + .act-btn { margin-top:10px; }
/* Handoff proof card — redesigned to u-get-bag-record-pickup / confirm-delivery-v2 (6px). */
.match-detail-page .proof-card { display:flex; flex-direction:column; margin-top:8px; }
.match-detail-page .proof-payout { display:flex; align-items:center; gap:12px; border-radius:6px; padding:13px 14px; margin-bottom:12px;
  background:linear-gradient(135deg,#22A578,#0F6B4E); color:#fff; }
.match-detail-page .proof-payout .pp-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.26); }
.match-detail-page .proof-payout .pp-txt { flex:1; min-width:0; }
.match-detail-page .proof-payout .pp-1 { font-family:var(--grotesk); font-weight:600; font-size:12px; color:rgba(255,255,255,.9); }
.match-detail-page .proof-payout .pp-2 { font-size:10.5px; color:rgba(255,255,255,.72); margin-top:2px; }
.match-detail-page .proof-payout .pp-v { font-family:var(--grotesk); font-weight:800; font-size:20px; flex:none; }
.match-detail-page .proof-note { display:flex; gap:10px; align-items:flex-start; background:#F3F8F5; border:1px solid #DCEBE2; border-radius:6px; padding:11px 13px; }
html[data-theme="dark"] .match-detail-page .proof-note { background:rgba(27,127,75,.1); border-color:rgba(27,127,75,.3); }
.match-detail-page .proof-note .pn-ic { flex:none; margin-top:1px; color:var(--emerald,#15795C); display:inline-flex; }
.match-detail-page .proof-note .pn-ic svg path[stroke="#fff"] { stroke:currentColor; }
.match-detail-page .proof-note p { font-size:11.5px; line-height:1.5; color:#41594E; }
html[data-theme="dark"] .match-detail-page .proof-note p { color:var(--t-muted); }
.match-detail-page .proof-sec { display:flex; align-items:center; justify-content:space-between; margin:15px 0 9px; }
.match-detail-page .proof-sec .ps-l { font-family:var(--grotesk); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint,#8A968F); }
.match-detail-page .proof-count { font-family:var(--grotesk); font-weight:600; font-size:10px; border-radius:999px; padding:2px 9px; background:var(--green-light,#E7F2EC); color:var(--green,#15795C); }
.match-detail-page .proof-count.amber { background:#FBEFD9; color:#8E6520; }
.match-detail-page .proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.match-detail-page .proof-thumb { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line,#EBEEEC); background:#2b2b2b; }
.match-detail-page .proof-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.match-detail-page .proof-stamp { position:absolute; left:0; right:0; bottom:0; padding:10px 6px 4px; font-family:var(--grotesk); font-weight:700; font-size:8.5px; color:#fff;
  background:linear-gradient(transparent,rgba(6,18,14,.9)); }
.match-detail-page .proof-rm { position:absolute; top:5px; right:5px; width:22px; height:22px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(12,30,24,.72); display:grid; place-items:center; transition:.14s; }
.match-detail-page .proof-rm:hover { background:#B4524A; }
.match-detail-page .proof-add { aspect-ratio:1; border:2px dashed var(--t-field-line,#D8E0DB); border-radius:12px; background:#FCFDFC; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:.16s; }
html[data-theme="dark"] .match-detail-page .proof-add { background:var(--card); }
.match-detail-page .proof-add:hover { border-color:var(--emerald,#15795C); background:var(--green-light,#E7F2EC); }
.match-detail-page .proof-add.busy { opacity:.5; pointer-events:none; }
.match-detail-page .proof-add .pa-ic { width:28px; height:28px; border-radius:9px; background:var(--green-light,#E7F2EC); color:var(--green,#15795C); display:grid; place-items:center; }
.match-detail-page .proof-add span:last-child { font-family:var(--grotesk); font-weight:600; font-size:10.5px; color:var(--t-muted); }
.match-detail-page .proof-cells { display:flex; gap:8px; }
.match-detail-page .proof-cell { flex:1; min-width:0; aspect-ratio:.82; border:1.6px solid var(--t-field-line,#D8E0DB); border-radius:11px; text-align:center;
  font-family:var(--grotesk); font-weight:700; font-size:20px; color:var(--t-ink); outline:none; transition:.14s; background:var(--card,#fff); }
.match-detail-page .proof-cell:focus { border-color:var(--emerald,#15795C); box-shadow:0 0 0 3px var(--green-light,#E7F2EC); }
.match-detail-page .proof-cell.filled { border-color:#CFE4D8; background:var(--green-light,#E7F2EC); color:#0C3B2E; }
.match-detail-page .proof-codehelp { display:flex; gap:9px; align-items:flex-start; margin-top:10px; }
.match-detail-page .proof-codehelp span { color:var(--emerald,#15795C); flex:none; margin-top:1px; display:inline-flex; }
.match-detail-page .proof-codehelp p { font-size:11px; line-height:1.45; color:var(--t-muted); }
.match-detail-page .proof-confirm { margin-top:16px; align-self:stretch; background:linear-gradient(145deg,#1A8A66,#0C3B2E); color:#fff;
  /* Angle + height match the Say thanks "Send thanks" pill (.thx-acts button): radius 13px,
     14px padding, 15px text — so the two cards' confirm pills are identical. */
  border:0; border-radius:13px; padding:14px; font-family:var(--grotesk); font-weight:600; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 10px 20px -8px rgba(12,59,46,.6); transition:.16s; }
.match-detail-page .proof-confirm:hover { transform:translateY(-1px); }
.match-detail-page .proof-confirm:disabled { background:#E7EAE8; color:#8A968F; box-shadow:none; cursor:not-allowed; transform:none; }
html[data-theme="dark"] .match-detail-page .proof-confirm:disabled { background:#2a322d; color:#6b756f; }
.match-detail-page .proof-gate { text-align:center; font-size:11px; color:#8E6520; padding:10px 0 0; }
.match-detail-page .proof-gate.ready { color:var(--emerald,#15795C); }
/* Waiting-on-other-party note with a spinner (mockup .waiting). */
.match-detail-page .waiting { display:flex; align-items:center; gap:9px; margin-top:14px; font-size:13px; color:var(--t-muted); }
.match-detail-page .waiting .spin { width:14px; height:14px; border-radius:50%; border:2px solid var(--t-line); border-top-color:var(--emerald); animation:spin .8s linear infinite; flex:none; }
.match-detail-page .act-row + .waiting { margin-top:14px; }

/* escrow (dark) */
.match-detail-page .escrow { background:radial-gradient(120% 120% at 85% 0%, #176149 0%, var(--pine) 70%); color:#fff; border-radius:6px; padding:22px 24px;
  box-shadow:var(--t-shadow); position:relative; overflow:hidden; margin-bottom:20px; }
.match-detail-page .escrow-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.match-detail-page .escrow-head .sh { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.14); display:grid; place-items:center; flex:none; }
.match-detail-page .escrow-head .et { font-family:var(--grotesk); font-weight:700; font-size:16px; }
.match-detail-page .escrow-head .es { font-size:12.5px; color:rgba(255,255,255,.72); margin-top:1px; }
.match-detail-page .escrow-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.match-detail-page .escrow .amt-l { font-family:var(--grotesk); font-size:10.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.match-detail-page .escrow .amt { font-family:var(--grotesk); font-weight:700; font-size:34px; letter-spacing:-.01em; margin-top:2px; }
.match-detail-page .escrow .epill { font-family:var(--inter); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px;
  background:rgba(226,154,56,.18); color:#F2C078; border:1px solid rgba(226,154,56,.4); display:inline-flex; align-items:center; gap:7px; }
.match-detail-page .escrow .epill .d { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.match-detail-page .escrow-foot { margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.66); }
/* All-in "Total paid" summary under the escrow card (delivery + tips). Theme-aware. */
.match-detail-page .total-paid { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; padding:12px 14px; background:var(--t-card,#fff); border:1px solid var(--t-line,#E6EAE7); border-radius:8px; }
.match-detail-page .total-paid .tp-l { font-size:13.5px; font-weight:600; color:var(--t-ink,#16241F); }
.match-detail-page .total-paid .tp-sub { font-size:11.5px; color:var(--t-muted,#5d6b64); margin-top:1px; }
.match-detail-page .total-paid .tp-amt { font-size:16px; font-weight:700; color:var(--t-ink,#16241F); white-space:nowrap; }

/* handoff proof */
.match-detail-page .handoff-cap { font-family:var(--grotesk); font-size:12px; font-weight:600; color:var(--t-muted); text-transform:uppercase; letter-spacing:.04em; margin:10px 0 8px; }
.match-detail-page .handoff-cap:first-child { margin-top:0; }
.match-detail-page .panel img, .match-detail-page .panel .thumb { max-width:100%; border-radius:14px; display:block; }

/* ratings */
.match-detail-page .rating-item { padding:10px 0; border-bottom:1px solid var(--t-line); }
.match-detail-page .rating-item:last-child { border-bottom:none; }
.match-detail-page .rating-item .row { display:flex; justify-content:space-between; gap:10px; }
.match-detail-page .rname { font-family:var(--grotesk); font-weight:600; font-size:14px; }
.match-detail-page .stars, .match-detail-page .star-row { color:#E0A92E; font-size:15px; }
.match-detail-page .rcomment { font-size:13px; color:var(--t-muted); margin-top:3px; }
.match-detail-page .rate-form { margin-top:14px; padding-top:14px; border-top:1px solid var(--t-line); display:flex; flex-direction:column; gap:10px; }
.match-detail-page .star-row { display:flex; gap:4px; }
.match-detail-page .star-row .star { background:none; border:none; cursor:pointer; font-size:24px; color:#d6ddd8; padding:0; line-height:1; }
.match-detail-page .star-row .star.on { color:#E0A92E; }
.match-detail-page .rate-form textarea.control { width:100%; border:1px solid var(--t-field-line); border-radius:11px; padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; resize:vertical; min-height:64px; outline:none; color-scheme:light; }
.match-detail-page .rate-form textarea.control:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }
.match-detail-page .rate-form .act-primary { align-self:flex-start; }

/* chat */
.match-detail-page .chat-panel { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:24px; display:flex; flex-direction:column; min-height:380px; margin-bottom:20px; }
.match-detail-page .chat-log { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:440px; margin-bottom:14px; }
.match-detail-page .msg { max-width:78%; align-self:flex-start; }
.match-detail-page .msg.me { align-self:flex-end; text-align:right; }
.match-detail-page .msg .who { font-size:11px; color:var(--t-muted); font-weight:600; margin-bottom:3px; }
.match-detail-page .msg .bubble { display:inline-block; background:var(--t-paper); border-radius:14px; padding:10px 13px; font-size:14px; line-height:1.4; text-align:left; }
.match-detail-page .msg.me .bubble { background:var(--bub-mine); color:#fff; }
.match-detail-page .msg .time { font-size:10.5px; color:var(--t-muted); margin-top:3px; }

/* ── Customizable chat bubbles: 6 shapes (data-shape) + color (--bub-hue via the slider). ──
   Placed AFTER the base rules so they win on equal specificity. Apply to the chat AND the
   settings live preview (.bub-preview). */
.bub-preview { display:flex; flex-direction:column; gap:8px; padding:10px 4px; }
.bub-preview .msg { max-width:80%; align-self:flex-start; }
.bub-preview .msg.me { align-self:flex-end; }
/* Preview mirrors the chat defaults (b.jpg): soft neutral theirs / emerald mine, no border. */
.bub-preview .msg .bubble { display:inline-flex; flex-direction:column; padding:9px 12px; border-radius:14px; background:var(--bub-their, #E9EDF3); color:var(--t-ink); border:none; font-size:14px; line-height:1.4; }
.bub-preview .msg.me .bubble { background:var(--bub-mine); color:#fff; }
.bub-preview .msg .bubble .who { font-size:11px; font-weight:600; opacity:.7; margin-bottom:3px; }
/* shapes (0 = classic 14px): pill, square, speech tail, leaf, arch — mirrored per side
   where asymmetric so the sharp corner always points outward. Keep in step with the
   Android set (BubbleStyle.kt bubbleShapeFor). */
.msg[data-shape="1"] .bubble { border-radius:999px; }
.msg[data-shape="2"] .bubble { border-radius:2px; }
.msg[data-shape="3"] .bubble { border-radius:18px 18px 18px 0; }
.msg.me[data-shape="3"] .bubble { border-radius:18px 18px 0 18px; }
.msg[data-shape="4"] .bubble { border-radius:2px 20px 2px 20px; }
.msg.me[data-shape="4"] .bubble { border-radius:20px 2px 20px 2px; }
.msg[data-shape="5"] .bubble { border-radius:20px 20px 4px 4px; }
/* color: a chosen hue FILLS the whole bubble-card (same vivid fill both sides); no hue = blank */
.msg.bub-colored .bubble { background:hsl(var(--bub-hue), 65%, 45%); border-color:transparent; color:#fff; box-shadow:none; }
.msg.bub-colored .bubble .who { color:rgba(255,255,255,.85); opacity:1; }
/* two-side customizer chrome: My/Their selector + a plain font-size slider */
.bub-side { display:flex; gap:6px; margin:.2rem 0 .5rem; }
.bub-side-tab { font-size:.8rem; padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.bub-side-tab.on { background:var(--green); color:#fff; border-color:var(--green); }
.font-slider { width:100%; }
.font-prev { padding:6px 2px; }

/* notif dropdown: Inbox/Archived tabs + per-item Archive/Restore */
.notif-tabs { display:flex; gap:6px; padding:.4rem .8rem; border-bottom:1px solid var(--line); }
.notif-tab { font-size:.8rem; padding:3px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; cursor:pointer; color:var(--muted); }
.notif-tab.on { background:var(--green); color:#fff; border-color:var(--green); }
.dropdown .ditem { position:relative; }
.notif-arch { position:absolute; top:.5rem; right:.6rem; font-size:.7rem; padding:2px 9px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; opacity:0; transition:opacity .12s; }
.dropdown .ditem:hover .notif-arch, .notif-arch:focus { opacity:1; }

/* bubble customizer (in Alerts settings) */
.bub-customizer { padding:.5rem .2rem .2rem; }
.bub-shapes-wrap, .bub-color-row { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.bub-mini-lab { font-size:.8rem; color:var(--muted); min-width:56px; }
.bub-shapes { display:flex; gap:8px; }
.bub-shape { width:36px; height:28px; border:1px solid var(--line); background:var(--card); cursor:pointer; padding:0; display:grid; place-items:center; border-radius:6px; }
.bub-shape.on { border-color:var(--green); box-shadow:0 0 0 2px var(--green-light); }
.bub-chip { width:22px; height:14px; background:var(--emerald); display:block; }
.bub-shape[data-shape="0"] .bub-chip { border-radius:6px; }
.bub-shape[data-shape="1"] .bub-chip { border-radius:999px; }
.bub-shape[data-shape="2"] .bub-chip { border-radius:1px; }
.bub-shape[data-shape="3"] .bub-chip { border-radius:8px 8px 0 8px; }
.bub-shape[data-shape="4"] .bub-chip { border-radius:9px 1px 9px 1px; }
.bub-shape[data-shape="5"] .bub-chip { border-radius:9px 9px 2px 2px; }
.bub-hue-slider { flex:1; min-width:130px; height:14px; border-radius:999px; -webkit-appearance:none; appearance:none; background:linear-gradient(90deg, hsl(0,75%,55%), hsl(60,75%,55%), hsl(120,75%,45%), hsl(180,70%,45%), hsl(240,70%,55%), hsl(300,75%,55%), hsl(360,75%,55%)); cursor:pointer; }
.bub-hue-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--line); cursor:pointer; }
.bub-hue-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--line); cursor:pointer; }
.sc-note { font-size:.78rem; color:var(--muted); padding:.3rem .2rem 0; }
/* Personal Info: section headers + country-aware phone field (prefix + national input) */
.pf-h { font-family:var(--grotesk,inherit); font-size:1.05rem; font-weight:600; margin:0 0 .6rem; }
.pf-sub { font-size:.9rem; font-weight:600; color:var(--muted); margin:1.1rem 0 .2rem; }
.phone-field { display:flex; align-items:stretch; gap:8px; }
.phone-field .phone-cc { display:flex; align-items:center; padding:0 .7rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2,rgba(0,0,0,.03)); color:var(--t-ink,inherit); font-variant-numeric:tabular-nums; white-space:nowrap; }
.phone-field input { flex:1 1 auto; min-width:0; }
/* My Disputes list */
.d-list { display:flex; flex-direction:column; gap:12px; }
.d-card { background:var(--card,#fff); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
.d-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.d-top b { font-size:.98rem; }
.d-status { font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.d-status.s-open { color:#9a6b00; background:rgba(245,170,0,.12); border-color:rgba(245,170,0,.4); }
.d-status.s-resolved { color:#15795a; background:rgba(21,160,110,.12); border-color:rgba(21,160,110,.4); }
.d-status.s-canceled { color:var(--muted); background:rgba(0,0,0,.04); }
.d-reason { margin:.5rem 0 .2rem; font-size:.9rem; }
.d-sub { margin:.15rem 0; font-size:.8rem; color:var(--muted); }
.d-meta { font-size:.74rem; color:var(--muted); margin-top:.3rem; }
.d-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:.7rem; }
/* Sender "Keep searching" card (broadcast window lapsed) */
.ks-card { background:var(--soft,#E7F2EC); border:1px solid #CFE6DA; border-radius:6px; padding:14px 16px; margin:12px 0; display:flex; flex-direction:column; gap:10px; }
.ks-card .ks-txt { display:flex; flex-direction:column; gap:3px; }
.ks-card .ks-txt b { font-size:.95rem; }
.ks-card .ks-txt span { font-size:.82rem; color:var(--muted); }
.match-detail-page .msg-empty { margin:auto; text-align:center; padding:30px 20px; display:flex; flex-direction:column; align-items:center; }
.match-detail-page .msg-empty .mc { width:52px; height:52px; border-radius:15px; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; margin-bottom:14px; }
.match-detail-page .msg-empty .me-t { font-family:var(--grotesk); font-weight:700; font-size:16px; color:var(--t-ink); }
.match-detail-page .msg-empty .me-s { font-size:13.5px; color:var(--t-muted); margin-top:5px; max-width:24ch; }
.match-detail-page .composer { border-top:1px solid var(--t-line); padding-top:14px; display:flex; gap:10px; align-items:center; }
/* Chat lifecycle (4/5.jpg): the read-only notice that replaces the composer once a
   thread closes (grace window after completion; immediately on declined/canceled/
   expired). Same slot, muted card — reads as state, not as an input. */
.chat-closed-note { display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .85rem 1rem; border-radius: 12px; background: var(--surface-2, #f2f4f3);
  border: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.chat-closed-note a { color: var(--green); font-weight: 600; }

/* "You pay" strip (1.jpg): the sender's full eventual charge, right above the Post
   CTA — label · amount · escrow micro-copy. Emerald-soft card, reads as a receipt line. */
.you-pay { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .8rem 1rem; border-radius: 12px; background: var(--green-light, #e6f3ec);
  border: 1px solid var(--line); margin-bottom: .35rem; }
.you-pay .yp-l { font-weight: 600; color: var(--ink, #1c2421); }
.you-pay .yp-amt { color: var(--green); font-size: 1.15rem; }
.you-pay .yp-note { color: var(--muted); font-size: .8rem; flex-basis: 100%; }
.courier-note { color: var(--green); font-weight: 600; }
.match-detail-page .composer input { flex:1; border:1px solid var(--t-field-line); background: var(--card); border-radius:12px; padding:12px 15px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--t-ink); outline:none; transition:.18s; }
.match-detail-page .composer input:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }
.match-detail-page .composer .send { width:46px; height:46px; border-radius:12px; flex:none; border:none; cursor:pointer; background:linear-gradient(145deg,var(--emerald-2),var(--pine)); color:#fff; display:grid; place-items:center; transition:.18s; }
.match-detail-page .composer .send:hover { filter:brightness(1.06); }
.match-detail-page .composer .send:disabled { opacity:.6; cursor:not-allowed; }
/* Composer attach (image) + emoji buttons, emoji tray, and image messages */
.composer-ic { flex:none; width:40px; height:40px; border-radius:12px; border:0; background:transparent; color:var(--t-muted); display:grid; place-items:center; cursor:pointer; font-size:19px; transition:.16s; }
.composer-ic:hover { background:var(--emerald-soft); color:var(--emerald); }
.composer-ic:disabled { opacity:.5; cursor:default; }
.emoji-tray { display:flex; flex-wrap:wrap; gap:4px; padding:8px; margin-bottom:12px; border:1px solid var(--t-line); border-radius:12px; background:var(--bg); }
.emoji-tray.hide { display:none; }
.emoji-tray .emoji { border:0; background:transparent; font-size:22px; line-height:1; padding:5px 7px; border-radius:8px; cursor:pointer; }
.emoji-tray .emoji:hover { background:var(--t-paper); }
.match-detail-page .msg .bubble .chat-img { display:block; max-width:220px; max-height:260px; border-radius:10px; object-fit:cover; }
.match-detail-page .msg.has-img .bubble { padding:4px; background:var(--t-paper); }
.match-detail-page .msg.me.has-img .bubble { background:var(--emerald-soft); }
.match-detail-page .msg .bubble .bub-text { text-align:left; }
.match-detail-page .msg.has-img .bubble .bub-text { padding:2px 8px 4px; }
.match-detail-page .msg.me.has-img .bubble .bub-text { color:var(--t-ink); }

@media (prefers-reduced-motion:reduce) { .match-detail-page *, .match-detail-page .tstep.current .node .pulse { animation:none !important; transition:none !important; } }

/* ── Dedicated chat thread (views/chat.js, #/chat/:id) ──
   Full-column conversation view reached from the Inbox + Match Details "Message". Reuses
   the bubble shape/color rules (global, .msg[data-shape] / .bub-colored) and the emoji
   tray; the base bubble/composer pieces are re-declared here (the match-detail ones are
   scoped to .match-detail-page). */
.chat-page { display:flex; flex-direction:column; height:calc(100vh - 170px); min-height:380px; }
.chat-head { display:flex; align-items:center; gap:10px; padding:0 2px 12px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.chat-head .back { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--t-ink,inherit); flex:none; }
.chat-head .back:hover { background:var(--emerald-soft); color:var(--emerald); }
.chat-peer { display:flex; flex-direction:column; line-height:1.25; text-decoration:none; color:inherit; min-width:0; }
.chat-peer b { font-size:15px; }
.chat-peer span { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-page .chat-log { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:14px 4px; background:transparent; }
.chat-page .msg { max-width:78%; align-self:flex-start; }
.chat-page .msg.me { align-self:flex-end; }
/* The bubble IS the card (name + text + time live inside it). Default = BLANK white card
   with a hairline border for BOTH sides — no colour until the user picks one. Text scales
   with the --ugs-alert-fs font-size control. */
/* b.jpg defaults: borderless bubbles — soft neutral for theirs, solid emerald for mine.
   A chosen hue still overrides both via .bub-colored (later in source, equal specificity).
   Keep in step with the Android defaults (BubbleStyle.kt bubbleColors). */
.chat-page .msg .bubble { display:inline-flex; flex-direction:column; background:var(--bub-their, #E9EDF3); color:var(--t-ink, #16241F); border:none; border-radius:14px; padding:9px 12px; font-size:calc(14px * var(--ugs-alert-fs, 1)); line-height:1.4; text-align:left; }
.chat-page .msg.me .bubble { background:var(--bub-mine); color:#fff; }
.chat-page .msg .bubble .bub-text { text-align:left; }
/* b.jpg chrome: centred day•time separators and the single under-last-message time. */
.chat-page .chat-sep { align-self:center; color:var(--muted); font-size:12px; font-weight:500; margin:10px 0 2px; }
.chat-page .msg-tail { font-size:10.5px; color:var(--muted); margin:-4px 6px 2px; align-self:flex-start; }
.chat-page .msg-tail.me { align-self:flex-end; }
/* Live-location bars (m098): mine gets a Stop button, theirs an Open-map link. */
.chat-page .live-wrap { display:flex; flex-direction:column; gap:6px; }
.chat-page .live-bar { display:flex; align-items:center; gap:8px; background:var(--emerald-soft, #E7F2EC); color:var(--t-ink, #16241F); border-radius:12px; padding:9px 12px; font-size:13px; font-weight:600; margin:4px 0; }
.chat-page .live-bar .live-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-page .live-bar .live-act { margin-left:auto; flex:none; color:var(--emerald); font-weight:700; cursor:pointer; background:none; border:none; font-size:13px; text-decoration:none; font-family:inherit; }
.chat-page .msg .bubble .chat-img { display:block; max-width:220px; max-height:260px; border-radius:10px; object-fit:cover; }
/* Viewer-comment reply (m116): the comment rides a 20%-size copy of the image it
   was typed over (the 220x260 bubble cap → 44x52 thumb); the comment sits BELOW the
   thumb, flush with its left edge; clicking the thumb opens the full image in the
   lightbox below. */
.chat-page .msg .bubble .bub-reply, .match-detail-page .msg .bubble .bub-reply { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.chat-page .msg .bubble .bub-reply .chat-reply-thumb, .match-detail-page .msg .bubble .bub-reply .chat-reply-thumb { width:44px; height:52px; border-radius:6px; object-fit:cover; flex:none; cursor:pointer; }
.chat-lightbox { position:fixed; inset:0; z-index:60; background:rgba(8,17,18,.92); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.chat-lightbox .chat-lightbox-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.chat-page .msg.has-img .bubble { padding:5px; }
.chat-page .msg.has-img .bubble .bub-text { padding:2px 7px 0; }
.chat-page .msg-empty { margin:auto; text-align:center; padding:30px 20px; display:flex; flex-direction:column; align-items:center; }
.chat-page .msg-empty .me-t { font-family:var(--grotesk); font-weight:700; font-size:16px; color:var(--t-ink); }
.chat-page .msg-empty .me-s { font-size:13.5px; color:var(--t-muted); margin-top:5px; max-width:24ch; }
.chat-page .composer { border-top:1px solid var(--t-line); padding-top:14px; display:flex; gap:10px; align-items:center; }

.chat-page .composer input { flex:1; border:1px solid var(--t-field-line); background:var(--card); border-radius:12px; padding:12px 15px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--t-ink); outline:none; transition:.18s; }
.chat-page .composer input:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }
.chat-page .composer .send { width:46px; height:46px; border-radius:12px; flex:none; border:none; cursor:pointer; background:linear-gradient(145deg,var(--emerald-2),var(--pine)); color:#fff; display:grid; place-items:center; transition:.18s; }
.chat-page .composer .send:hover { filter:brightness(1.06); }
.chat-page .composer .send:disabled { opacity:.6; cursor:not-allowed; }

/* Match Details "Message {name}" entry button (replaces the embedded composer) */
.msg-cta { position:relative; justify-content:center; }
.msg-cta-badge { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--green,#15a06e); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-left:8px; }
.msg-cta-badge.hide { display:none; }

/* ── Alerts hub (views/alerts.js) — conversation rows + update rows ── */
.conv-list { display:flex; flex-direction:column; gap:8px; }
.conv-item, .upd-item { position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--card,#fff); text-decoration:none; color:inherit; transition:background .14s, border-color .14s; }
.conv-item:hover, .upd-item:hover { border-color:var(--green-light,#bfe3d2); background:var(--soft,#f3faf6); }
.conv-item.unread, .upd-item.unread { border-color:var(--green,#15a06e); }
.conv-av { flex:none; width:42px; height:42px; border-radius:50%; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; font-weight:700; font-size:16px; }
.conv-main, .upd-main { flex:1; min-width:0; }
.conv-top, .upd-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.conv-top b, .upd-top b { font-size:calc(14.5px * var(--ugs-alert-fs, 1)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-time, .upd-time { flex:none; font-size:11.5px; color:var(--muted); }
.conv-prev, .upd-body { font-size:calc(13px * var(--ugs-alert-fs, 1)); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.conv-item.unread .conv-prev, .upd-item.unread .upd-top b { color:var(--t-ink,inherit); font-weight:600; }
.conv-badge { flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--green,#15a06e); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.conv-arch { flex:none; font-size:.72rem; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; opacity:0; transition:opacity .12s; }
.conv-item:hover .conv-arch, .upd-item:hover .conv-arch, .conv-arch:focus { opacity:1; }

/* Iris tab animation: an emerald ring shutters out from the active tab on switch.
   (No position:relative here — it silently overrode the navbar's position:sticky
   and broke tab pinning; sticky is itself a containing block for the .nav-iris.) */
.nav-iris { position:absolute; top:0; left:0; width:30px; height:30px; border-radius:50%; border:2px solid var(--green,#15a06e); transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none; z-index:3; }
.nav-iris.go { animation:navIris .55s ease-out; }
@keyframes navIris { 0%{ transform:translate(-50%,-50%) scale(.3); opacity:.9 } 100%{ transform:translate(-50%,-50%) scale(2.8); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .nav-iris{ display:none } }

/* Combined Alerts nav badge (messages + updates) on the navbar Alerts link */
.navbar a.nav-alerts { display:inline-flex; align-items:center; gap:6px; }
.nav-badge { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--green,#15a06e); color:#fff; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.nav-badge.hide { display:none; }

/* "Mark all read" row above the Updates list on the Alerts page. */
.alerts-markall { display:flex; justify-content:flex-end; padding:2px 2px 10px; }

/* Per-tab item counters (Inbox/Updates/Archived on the Alerts page + the bell tabs). */
.notif-tab { display:inline-flex; align-items:center; gap:6px; }
.tab-count { min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:rgba(0,0,0,.10); color:inherit; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.notif-tab.on .tab-count { background:rgba(255,255,255,.28); color:#fff; }
.tab-count.hide { display:none; }
[data-theme="dark"] .tab-count { background:rgba(255,255,255,.14); }

/* Always-visible row actions on the Alerts page (Archive/Restore + Delete). */
.row-actions { flex:none; display:flex; gap:6px; align-items:center; }
.row-act { font-size:.72rem; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; transition:.12s; white-space:nowrap; }
.row-act:hover { border-color:var(--green-light,#bfe3d2); color:var(--green,#15a06e); }
.row-act.del:hover { border-color:#e7b4b4; color:#c0392b; background:rgba(192,57,43,.06); }

/* Bell item actions (Archive/Restore + Delete) — shown on hover of the dropdown item. */
.notif-acts { position:absolute; top:.5rem; right:.6rem; display:flex; gap:6px; opacity:0; transition:opacity .12s; }
.dropdown .ditem:hover .notif-acts, .notif-acts:focus-within { opacity:1; }
.notif-act { font-size:.7rem; padding:2px 9px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.notif-act.del:hover { border-color:#e7b4b4; color:#c0392b; }

/* ── FIX: chat-bubble customization (shape + colour) must win inside the dedicated chat
   page too. The base .chat-page .msg .bubble rules above otherwise override the global
   .msg[data-shape]/.msg.bub-colored customization (equal specificity, later in source).
   These .chat-page-scoped copies have higher specificity so the per-device choice shows. */
.chat-page .msg[data-shape="1"] .bubble { border-radius:999px; }
.chat-page .msg[data-shape="2"] .bubble { border-radius:2px; }
.chat-page .msg[data-shape="3"] .bubble { border-radius:18px 18px 18px 0; }
.chat-page .msg.me[data-shape="3"] .bubble { border-radius:18px 18px 0 18px; }
.chat-page .msg[data-shape="4"] .bubble { border-radius:2px 20px 2px 20px; }
.chat-page .msg.me[data-shape="4"] .bubble { border-radius:20px 2px 20px 2px; }
.chat-page .msg[data-shape="5"] .bubble { border-radius:20px 20px 4px 4px; }
/* When a colour is chosen for a side, it FILLS the whole bubble-card (both sides use the
   same vivid fill + white text). No colour = the blank white default above. */
.chat-page .msg.bub-colored .bubble { background:hsl(var(--bub-hue), 65%, 45%); border-color:transparent; color:#fff; box-shadow:none; }
.chat-page .msg.bub-colored .bubble .who { color:rgba(255,255,255,.85); opacity:1; }
.chat-page .msg.bub-colored .bubble .time { color:rgba(255,255,255,.8); opacity:1; }

/* footer app-store badges + APK link (mockup brand column) */
.home-foot-stores { margin-top: 1.4rem; } /* same 1.4rem step as the social block (71.jpg rhythm) */
.home-store-row { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Badges sized down 20% per 000/45.jpg (was .5/1rem padding, 20×22 icon, 11/14px text). */
.home-store { display: inline-flex; align-items: center; gap: .5rem; background: #000; color: #fff;
  border: 0; border-radius: 6px; padding: .4rem .8rem; cursor: pointer; transition: transform .16s, background .16s;
  text-decoration: none; } /* badges are anchors now */
/* Official Google Play badge convention: the small line is uppercased ("GET IT ON"); App Store keeps title case. */
.home-store-google_play .home-store-tx small { text-transform: uppercase; letter-spacing: .06em; }
.home-store:hover { background: #000; transform: translateY(-1px); text-decoration: none; }
.home-store-ic { display: grid; place-items: center; flex: none; }
.home-store-ic svg { width: 16px; height: 18px; }
.home-store-tx { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.home-store-tx small { font-size: 9px; color: rgba(255,255,255,.92); opacity: 1; font-weight: 500; }
.home-store-tx b { font-weight: 700; font-size: 11px; letter-spacing: .01em; }

/* newsletter Subscribe pill: half the email box width, right edge aligned with it,
   label centered. (.home-news-input is full width; the form caps both at one width.) */
.home-news-btn { width: 50%; align-self: flex-end; justify-content: center; text-align: center; }

/* Hero "Get the mobile app" block (under the trust row) */
.home-hero-appdl { margin-top: 1.6rem; }
.home-hero-appdl-label { font-family: var(--grotesk); font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: .65rem; }

/* Visually-hidden (screen-reader-only) utility — used by the route-status live region. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- counterparty reputation badge ---------- */
.rep-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 700;
  color: var(--amber-dark); background: var(--warn-bg); border: 1px solid #f3e2c0;
  padding: .1rem .45rem; border-radius: 999px; line-height: 1.4; vertical-align: middle;
}
.rep-badge .rep-star { color: var(--amber); font-size: .82rem; line-height: 1; }
.rep-badge.rep-new { color: var(--muted); background: var(--bg); border-color: var(--line); }
.rep-badge.rep-new .rep-star { color: #b7c0ba; }
.rep-badge .rep-tick {
  display: inline-grid; place-content: center; width: 14px; height: 14px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .6rem; font-weight: 800; margin-left: 1px;
}
.rep-badge.rep-link { cursor: pointer; }
.rep-badge.rep-link:hover { filter: brightness(.97); }
.rep-badge.rep-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cardrep, .prep { margin-top: .25rem; }
.match-detail-page .hero-cp { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.match-detail-page .hero-cp .cp-name { font-weight: 600; font-size: 14px; }

/* ---------- public profile (#/u/:id) ---------- */
.user-profile-page { max-width: 620px; margin: 0 auto; }
.user-profile-page .appbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.user-profile-page .appbar h1 { font-family: var(--grotesk); font-size: 19px; font-weight: 600; }
.user-profile-page .back {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: var(--ink); text-decoration: none;
}
.user-profile-page .back:hover { border-color: #d4ddd8; }
.up-head { display: flex; align-items: center; gap: 1rem; }
.up-head .thumb.lg { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; max-width: none; flex: 0 0 auto; }
.up-avatar-fallback {
  width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto; display: grid; place-content: center;
  background: var(--green-light); color: var(--green-dark); font-weight: 800; font-size: 1.6rem;
}
.up-id { min-width: 0; }
.up-name { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; }
.up-name .rep-tick {
  display: inline-grid; place-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .72rem; font-weight: 800;
}
.up-rating { display: flex; align-items: center; gap: 4px; margin-top: .35rem; }
.up-rating .rep-star { color: var(--amber); }
.up-rating .rep-new { color: var(--muted); }
.up-stats .up-stat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.up-stats .up-stat:last-child { border-bottom: none; }
/* Reviews section (000/u-get-bag-reviews-section, app parity): header + sort chip,
   summary card (big average + 5→1 amber distribution), VERTICAL review cards with
   avatar / Verified pill / role chip, and a see-all expander. Cards 6px radius. */
.up-rv-sec { margin-top: 1rem; }
.up-rv-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 12px; }
.up-rv-title { font-family: var(--grotesk); font-size: 18px; font-weight: 700; }
.up-rv-sort { border: 0; border-radius: 999px; background: var(--green-light); color: var(--green);
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; cursor: pointer; }
.up-rv-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.up-rv-avg { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.up-rv-score { font-family: var(--grotesk); font-size: 34px; font-weight: 800; line-height: 1.15; }
.up-rv-stars { font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.up-rv-stars .f { color: #E29A38; }
.up-rv-stars .e { color: #E5E9E6; }
.up-rv-total { color: var(--muted); font-size: 11px; margin-top: 3px; }
.up-rv-dist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.up-rv-drow { display: flex; align-items: center; gap: 7px; }
.up-rv-dnum { width: 12px; color: var(--muted); font-size: 11px; font-weight: 600; }
.up-rv-bar { flex: 1; height: 6px; border-radius: 999px; background: #EDEFEC; overflow: hidden; }
.up-rv-fill { height: 100%; border-radius: 999px; background: #F0B45F; }
.up-rv-dcount { width: 20px; text-align: right; color: var(--muted); font-size: 10.5px; }
.up-rv-item { padding: 15px; margin-bottom: 11px; }
.up-rv-top { display: flex; align-items: center; gap: 11px; }
.up-rv-ava { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid;
  place-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.up-rv-g0 { background: linear-gradient(135deg, #1FA37A, #0F6B4E); }
.up-rv-g1 { background: linear-gradient(135deg, #3A6BA0, #26507E); }
.up-rv-g2 { background: linear-gradient(135deg, #C98A5E, #9A6A46); }
.up-rv-who { flex: 1; min-width: 0; }
.up-rv-name { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.up-rv-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-rv-ver { border-radius: 999px; background: var(--green-light); color: var(--green);
  font-size: 9px; font-weight: 600; padding: 2px 6px; white-space: nowrap; }
.up-rv-date { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.up-rv-comment { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.up-rv-role { display: inline-block; margin-top: 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--muted); font-size: 10.5px; padding: 3px 8px; }
.up-rv-seeall { display: block; width: 100%; border: 1px solid #D8E0DB; border-radius: var(--radius);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  padding: 13px; cursor: pointer; }
.up-rv-seeall:hover { filter: brightness(.98); }
/* dark: the hardcoded light track/hairline grays would glow on dark cards */
html[data-theme="dark"] .up-rv-stars .e { color: #333a35; }
html[data-theme="dark"] .up-rv-bar { background: #2a322d; }
html[data-theme="dark"] .up-rv-seeall { border-color: var(--line); }

/* ── Cookie consent (banner 000/41.jpg + customize panel 000/42.jpg) ──────── */
/* Both views render as one floating card anchored bottom-right. */
.cookie-host { position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  width: 420px; max-width: calc(100vw - 36px); }
.cookie-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(12, 59, 46, .18); padding: 20px 22px;
  max-height: calc(100vh / var(--uiz) - 36px); overflow-y: auto; }
.cookie-title { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.cookie-body { margin: 0 0 16px; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.cookie-link { color: var(--green); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; margin-top: 10px; }
.cookie-actions .cookie-btn { flex: 1 1 0; }
.cookie-btn { font: inherit; font-size: .85rem; font-weight: 600; border-radius: 8px; padding: 10px 14px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.cookie-btn.block { display: block; width: 100%; }
.cookie-btn.light { background: var(--bg); border-color: var(--line); color: var(--ink); }
.cookie-btn.light:hover { background: #eef1ee; }
html[data-theme="dark"] .cookie-btn.light:hover { background: #222925; }
.cookie-btn.dark { background: #0C3B2E; color: #fff; }
.cookie-btn.dark:hover { background: #15795C; }
/* customize: one row per category — text left, state label + switch right */
.cookie-cat-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.cookie-cat-text { flex: 1; min-width: 0; }
.cookie-cat-name { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.cookie-cat-desc { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.45; color: var(--muted); }
.cookie-state { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.cookie-switch { position: relative; width: 40px; height: 22px; flex: none; padding: 0;
  border: none; border-radius: 11px; background: #c6cfc9; cursor: pointer; transition: background .15s ease; }
html[data-theme="dark"] .cookie-switch { background: #3a443e; }
.cookie-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s ease; }
.cookie-switch.on { background: var(--green); }
.cookie-switch.on::after { left: 20px; }
/* essential: permanently on, not clickable */
.cookie-switch:disabled { cursor: default; opacity: .85; }
.legal-actions { margin-top: 1.75rem; }
@media (max-width: 800px) {
  .cookie-host { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; }
}

/* ============================================================
   Packages page redesign (.scoped to .packages-page).
   Mirrors 000/packages.html: two-column layout of package cards
   (left, with a per-card Edit/Cancel/Delete menu) + a sticky
   post form (right). Shares the Trips-page design tokens.
   ============================================================ */
.packages-page {
  --pine:#0C3B2E; --emerald:#15795C; --emerald-2:#1A8A66; --emerald-soft:#E7F2EC;
  --t-paper:#F4F6F4; --t-card:#FFFFFF; --t-ink:#16241F; --t-muted:#5d6b64; --t-faint:#656e68;
  --t-line:#E6EAE7; --t-field-line:#D8E0DB;
  --open-ink:#0F6B4E; --open-bg:#E2F1EA;
  --blue-ink:#0B5C8A; --blue-bg:#E4EFF6;
  --amber-ink:#9A5905; --amber-bg:#FBEFDC;
  --gray-ink:#6a615f; --gray-bg:#ECE9E8;
  --danger-ink:#B4524A; --danger-text:#9a4b43; --danger-bg:#FBECE9;
  --t-shadow:0 1px 2px rgba(16,36,28,.04),0 10px 30px rgba(16,36,28,.07);
  --t-shadow-sm:0 1px 2px rgba(16,36,28,.05),0 4px 14px rgba(16,36,28,.05);
  --grotesk:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  /* no inner max-width: stretches with the shell container's 2in gutters, same as .trips-page */
  color:var(--t-ink); color-scheme:light;
}
.packages-page .page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.packages-page .page-head h1 { font-family:var(--grotesk); font-size:30px; font-weight:700; letter-spacing:-.02em; }
.packages-page .page-head .page-sub { margin-top:6px; color:var(--t-muted); font-size:14.5px; }
.packages-page .ghost-btn { border:1px solid var(--t-field-line); background:var(--t-card); color:var(--emerald); cursor:pointer;
  font-family:var(--grotesk); font-weight:600; font-size:14px; padding:11px 18px; border-radius:12px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:.16s; box-shadow:var(--t-shadow-sm); }
.packages-page .ghost-btn:hover { border-color:var(--emerald); background:var(--emerald-soft); }
/* Same two-row layout as .trips-page (49.jpg): header row keeps card tops level;
   the stretched aside lets the sticky form card follow the scroll. */
.packages-page .layout { display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto 1fr; gap:0 26px; }
.packages-page .layout > .list-head { grid-column:1; grid-row:1; }
.packages-page .layout > section { grid-column:1; grid-row:2; }
.packages-page .layout > aside { grid-column:2; grid-row:2; }
.packages-page .col-label { font-family:var(--inter); font-size:12.5px; font-weight:600; color:var(--t-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }

/* package card */
.packages-page .package { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow);
  padding:20px 22px; transition:.16s; margin-bottom:16px; }
.packages-page .package:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,36,28,.04),0 16px 40px rgba(16,36,28,.1); }
.packages-page .p-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.packages-page .p-title { font-family:var(--grotesk); font-size:18px; font-weight:700; letter-spacing:-.01em; }
.packages-page .p-status { font-family:var(--grotesk); font-size:12px; font-weight:600; letter-spacing:.02em; padding:6px 12px;
  border-radius:999px; display:inline-flex; align-items:center; gap:7px; flex:none; text-transform:capitalize; white-space:nowrap; }
.packages-page .p-status .d { width:6px; height:6px; border-radius:50%; }
.packages-page .p-status.green { background:var(--open-bg); color:var(--open-ink); } .packages-page .p-status.green .d { background:var(--open-ink); }
.packages-page .p-status.blue { background:var(--blue-bg); color:var(--blue-ink); } .packages-page .p-status.blue .d { background:var(--blue-ink); }
.packages-page .p-status.amber { background:var(--amber-bg); color:var(--amber-ink); } .packages-page .p-status.amber .d { background:var(--amber-ink); }
.packages-page .p-status.gray { background:var(--gray-bg); color:var(--gray-ink); } .packages-page .p-status.gray .d { background:var(--gray-ink); }
.packages-page .route { display:flex; align-items:center; gap:12px; padding:12px 15px; background:var(--t-paper);
  border:1px solid var(--t-line); border-radius:13px; margin-bottom:12px; }
.packages-page .route .pt { text-align:center; flex:none; }
.packages-page .route .pt .city { font-family:var(--grotesk); font-weight:700; font-size:14px; color:var(--t-ink); }
.packages-page .route .pt .ctry { font-size:11px; color:var(--t-muted); margin-top:1px; }
.packages-page .route .line { flex:1; height:0; border-top:2px dashed #cfd9d3; position:relative; min-width:50px; }
.packages-page .route .line .plane { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:26px;
  border-radius:50%; background:var(--emerald); display:grid; place-items:center; box-shadow:0 4px 10px rgba(21,121,92,.35); }
.packages-page .route-pair { font-size:12.5px; color:var(--t-muted); margin-bottom:12px; }
.packages-page .route-pair b { color:var(--t-ink); font-weight:600; }
.packages-page .p-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.packages-page .chip { font-size:12.5px; font-weight:600; color:var(--t-muted); background:var(--t-paper); border:1px solid var(--t-line);
  border-radius:999px; padding:6px 11px; display:inline-flex; align-items:center; gap:6px; }
.packages-page .chip span svg { color:var(--emerald); display:block; }
.packages-page .chip.reward { background:var(--open-bg); border-color:#CBE3D4; color:var(--open-ink); }
/* Weight chip: warm-amber info pill (18.jpg) — draws the eye, distinct from the green
   status/reward. fill #FBEFD9, icon+text #8E6520, border #EFDCB8. */
.packages-page .chip.wt { background:#FBEFD9; border-color:#EFDCB8; color:#8E6520; }
.packages-page .chip.wt span svg { color:#8E6520; }
/* Full-width reward bar: the headline incentive on a send card. */
.packages-page .reward-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px;
  background:var(--open-bg); border:1px solid #CBE3D4; border-radius:12px; padding:11px 14px; color:var(--open-ink); }
.packages-page .reward-bar .rb-ic svg { color:var(--open-ink); display:block; }
.packages-page .reward-bar .rb-lab { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; opacity:.85; }
.packages-page .reward-bar .rb-amt { font-size:18px; font-weight:800; margin-left:auto; }
.packages-page .scr-pill { font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center;
  gap:5px; text-transform:capitalize; background:var(--amber-bg); color:var(--amber-ink); }
.packages-page .scr-pill.blocked { background:var(--danger-bg); color:var(--danger-text, var(--danger-ink)); }
.packages-page .scr-pill span svg { display:block; }
.packages-page .p-foot { display:flex; align-items:center; gap:10px; padding-top:13px; border-top:1px solid var(--t-line); }
.packages-page .sender { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--t-muted); }
.packages-page .sender .sav { width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,#1b8a68,#0c5a42); color:#fff; font-family:var(--grotesk); font-weight:700; font-size:10px; }
.packages-page .sender b { color:var(--t-ink); font-weight:600; }
.packages-page .cardrep { margin-left:auto; }

/* per-card actions menu (6px popup) */
/* Card overflow (⋮) menu — shared by the posted-packages and posted-trips cards. */
:is(.packages-page,.trips-page) .menu-wrap { position:relative; flex:none; margin-left:auto; }
:is(.packages-page,.trips-page) .cardrep + .menu-wrap { margin-left:4px; }
:is(.packages-page,.trips-page) .dots { width:30px; height:30px; border-radius:6px; border:1px solid var(--t-field-line); background:var(--t-card);
  display:grid; place-items:center; color:var(--t-muted); cursor:pointer; transition:.14s; }
:is(.packages-page,.trips-page) .dots:hover { background:var(--t-paper); color:var(--t-ink); }
:is(.packages-page,.trips-page) .menu { position:absolute; right:0; top:36px; z-index:30; min-width:160px; background:var(--t-card);
  border:1px solid var(--t-line); border-radius:6px; box-shadow:var(--t-shadow); padding:5px; display:none; }
:is(.packages-page,.trips-page) .menu.open { display:block; }
:is(.packages-page,.trips-page) .menu button { width:100%; text-align:left; background:none; border:none; font-family:'Inter',sans-serif; font-size:13px;
  color:var(--t-ink); padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:9px; }
:is(.packages-page,.trips-page) .menu button:hover { background:var(--t-paper); }
:is(.packages-page,.trips-page) .menu button span svg { display:block; flex:none; }
:is(.packages-page,.trips-page) .menu button.danger { color:var(--danger-text, var(--danger-ink)); }
:is(.packages-page,.trips-page) .menu button.danger:hover { background:var(--danger-bg); }
:is(.packages-page,.trips-page) .menu .sep { height:1px; background:var(--t-line); margin:4px 0; }
/* Trip card: the kebab sits alone on a right-aligned footer row. */
.trips-page .trip-foot { display:flex; justify-content:flex-end; margin-top:14px; }

/* post form (right column) */
.packages-page .form-card { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow);
  padding:24px; position:sticky; top:var(--stick-under-nav, 22px); }
.packages-page .form-card h2 { font-family:var(--grotesk); font-size:18px; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
.packages-page .field { margin-bottom:15px; }
.packages-page .field > label { display:block; font-family:var(--inter); font-size:13px; font-weight:600; color:var(--t-ink); margin-bottom:7px; }
.packages-page .two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.packages-page .control { width:100%; border:1px solid var(--t-field-line); background: var(--card); border-radius:11px; padding:11px 13px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--t-ink); outline:none; transition:.16s; color-scheme:light; }
.packages-page .control:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }
.packages-page textarea.control { resize:vertical; min-height:74px; line-height:1.5; }
.packages-page select.control { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235d6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.packages-page .ta-wrap { position:relative; }
.packages-page .char-count { position:absolute; right:12px; bottom:9px; font-family:var(--grotesk); font-size:11px; font-weight:600;
  color:var(--t-faint); background: var(--card); padding:0 3px; pointer-events:none; }
.packages-page .post-btn { width:100%; border:none; cursor:pointer; background:linear-gradient(145deg,var(--emerald-2),var(--pine));
  color:#fff; border-radius:13px; padding:14px; font-family:var(--grotesk); font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:.18s; box-shadow:0 10px 22px -8px rgba(12,59,46,.55); }
.packages-page .post-btn:hover { transform:translateY(-1px); }

/* edit modal (6px popup) */
.packages-page .modal-back { position:fixed; inset:0; z-index:60; background:rgba(16,32,27,.45); backdrop-filter:blur(2px);
  display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.packages-page .modal-back.open { display:flex; }
.packages-page .modal { background:var(--t-card); border:1px solid var(--t-line); border-radius:6px; box-shadow:var(--t-shadow);
  width:100%; max-width:480px; }
.packages-page .modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--t-line); }
.packages-page .modal-head h2 { font-family:var(--grotesk); font-size:17px; font-weight:700; }
.packages-page .modal-x { width:30px; height:30px; border-radius:6px; border:1px solid var(--t-field-line); background:var(--t-card);
  display:grid; place-items:center; cursor:pointer; color:var(--t-muted); }
.packages-page .modal-x:hover { background:var(--t-paper); }
.packages-page .modal-body { padding:18px 20px; }
.packages-page .modal-foot { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.packages-page .btn-cancel, .packages-page .btn-save { font-family:var(--inter); font-size:13.5px; font-weight:600; padding:10px 18px;
  border-radius:9px; cursor:pointer; border:1px solid transparent; }
.packages-page .btn-cancel { background:var(--t-card); border-color:var(--t-field-line); color:var(--t-ink); }
.packages-page .btn-cancel:hover { background:var(--t-paper); }
.packages-page .btn-save { background:var(--emerald); color:#fff; }
.packages-page .btn-save:hover { background:#0f6a4f; }
.packages-page .alert.error { background:var(--danger-bg); border:1px solid #eccac5; color:var(--danger-text, var(--danger-ink)); border-radius:9px;
  padding:10px 12px; margin-bottom:12px; font-size:13px; }

@media (max-width:1150px) {
  .packages-page .layout { grid-template-columns:1fr; grid-template-rows:none; }
  .packages-page .layout > .list-head, .packages-page .layout > section, .packages-page .layout > aside { grid-column:1; grid-row:auto; }
  .packages-page .form-card { position:static; }
}
@media (max-width:650px) {
  .packages-page .two { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .packages-page * { transition:none !important; } }

/* ============================================================
   Find-a-traveler filter additions (origin / dest / country).
   ============================================================ */
.find-page .filters { display:block; }
.find-page .filters .frow { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.find-page .filters .frow + .frow { margin-top:16px; padding-top:16px; border-top:1px solid var(--t-line); }
.find-page .filters .frow.geo { grid-template-columns:1fr 1fr 1fr; }
.find-page .filters .geo-head { grid-column:1/-1; display:flex; align-items:center; gap:7px; font-family:var(--grotesk);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-muted); margin-bottom:-4px; }
.find-page .filters .geo-head span svg { color:var(--t-faint); display:block; }
.find-page .filters .frow.dates { grid-template-columns:1fr; }
.find-page .filters .date-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.find-page .date-preset { font-family:var(--grotesk); font-size:12.5px; font-weight:600; color:var(--emerald); background:var(--emerald-soft); border:none; border-radius:999px; padding:7px 13px; cursor:pointer; }
.find-page .date-preset:hover { filter:brightness(.97); }
.find-page .date-range { display:flex; align-items:center; gap:8px; margin-left:6px; }
.find-page .date-range label { display:inline; margin:0; font-size:12px; font-weight:600; color:var(--t-muted); }
.find-page .filters .frow.actions-row { grid-template-columns:1fr auto; align-items:center; }
.find-page .filters .frow.actions-row .count { margin:0; }
.find-page .clearbtn { justify-self:end; font-family:var(--inter); font-size:12.5px; font-weight:600; color:var(--t-ink);
  background:var(--t-paper); border:1px solid var(--t-field-line); border-radius:9px; padding:9px 14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:.14s; }
.find-page .clearbtn:hover { background: var(--card); border-color: var(--muted); }
.find-page .clearbtn span svg { display:block; }
@media (max-width:950px) {
  .find-page .filters .frow, .find-page .filters .frow.geo { grid-template-columns:1fr; }
}

/* ============================================================
   Matches: empty-state CTA + "how a match works" strip.
   ============================================================ */
.matches-page .empty .cta { margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-family:var(--inter);
  font-size:14px; font-weight:600; color:#fff; background:var(--emerald); border-radius:11px; padding:11px 20px;
  text-decoration:none; box-shadow:0 6px 14px rgba(21,121,92,.28); transition:.15s; }
.matches-page .empty .cta:hover { background:#0f6a4f; }
.matches-page .empty .cta span svg { display:block; }
.matches-page .steps { margin-top:34px; padding-top:28px; border-top:1px solid var(--t-line); }
.matches-page .steps-h { font-family:var(--grotesk); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-muted); text-align:center; margin-bottom:18px; }
.matches-page .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.matches-page .step { background:var(--t-card); border:1px solid var(--line); border-radius:6px; padding:18px; box-shadow:var(--t-shadow-sm); }
.matches-page .step .n { width:30px; height:30px; border-radius:9px; background:var(--emerald-soft); color:var(--open-ink);
  display:grid; place-items:center; font-family:var(--grotesk); font-weight:700; font-size:14px; margin-bottom:12px; }
.matches-page .step h3 { font-family:var(--grotesk); font-size:14.5px; font-weight:600; margin:0; }
.matches-page .step p { font-size:12.5px; color:var(--t-muted); margin:5px 0 0; line-height:1.5; }
@media (max-width:850px) { .matches-page .steps-grid { grid-template-columns:1fr; } }

/* ============================================================
   Prohibited: search box, per-category count + tint, foot note.
   ============================================================ */
.prohibited-page .search { position:relative; margin-bottom:22px; max-width:360px; }
.prohibited-page .search .si { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--t-muted); display:flex; }
.prohibited-page .search input { width:100%; font-family:'Inter',sans-serif; font-size:14px; border:1px solid var(--t-field-line);
  background:var(--t-card); border-radius:11px; height:44px; padding:0 14px 0 38px; outline:none; box-shadow:var(--t-shadow-sm); color:var(--t-ink); }
.prohibited-page .search input:focus { border-color:var(--emerald); box-shadow:0 0 0 3px var(--emerald-soft); }
.prohibited-page .cat-head .cc { margin-left:auto; font-family:var(--grotesk); font-size:11px; font-weight:600; color:var(--t-muted);
  background:var(--t-paper); border:1px solid var(--t-line); padding:2px 8px; border-radius:999px; }
/* per-category tints */
.prohibited-page .cat.tint-green .cat-ic { background: var(--green-light); color: var(--green); }
.prohibited-page .cat.tint-blue .cat-ic { background:#E8EFF6; color:#34587E; }
.prohibited-page .cat.tint-amber .cat-ic { background: var(--warn-bg); color:#9A5905; }
.prohibited-page .cat.tint-orange .cat-ic { background: var(--warn-bg); color:#9A5905; }
.prohibited-page .cat.tint-purple .cat-ic { background:#ECE9F6; color:#4C4080; }
.prohibited-page .cat.tint-red .cat-ic { background: var(--danger-bg); color:#9A2D22; }
.prohibited-page .cat.tint-ink .cat-ic { background:var(--t-paper); color:var(--t-ink); }
/* item bullet dot takes the category colour (mockup) */
.prohibited-page .cat.tint-green .items li .dot { background:#175537; }
.prohibited-page .cat.tint-blue .items li .dot { background:#34587E; }
.prohibited-page .cat.tint-amber .items li .dot { background:#9A5905; }
.prohibited-page .cat.tint-orange .items li .dot { background:#9A5905; }
.prohibited-page .cat.tint-purple .items li .dot { background:#4C4080; }
.prohibited-page .cat.tint-red .items li .dot { background:#9A2D22; }
.prohibited-page .cat.tint-ink .items li .dot { background:var(--t-ink); }
.prohibited-page .foot-note { margin-top:8px; font-size:12.5px; color:var(--t-muted); text-align:center; }
.prohibited-page .foot-note a { color:var(--emerald); font-weight:600; }

/* Find-a-traveler / browse card polish to match 000/find-traveler.html
   (keeps the 4dp card radius per the standing card-radius rule). */
.find-page .chip.price { color: var(--emerald, #15795C); background: var(--emerald-soft, #E7F1EA); border-color: #CBE3D4; }
.find-page .chip.price span svg { color: var(--emerald, #15795C); }
.find-page .code { font-size: 17px; letter-spacing: .02em; }
.find-page .path .glyph { background: var(--emerald, #15795C); box-shadow: 0 4px 10px -4px rgba(31,110,67,.6); }
.find-page .path .glyph svg path { stroke: #fff; }
.find-page .route { gap: 4px; }

/* ── Find-traveler / browse rich route card — matches 000/find-traveler.html.
   Prefixed .bt-* so it doesn't collide with the older .req card rules above. ── */
.find-page .page-head { margin-bottom:22px; }
.find-page .page-head h1 { margin:0; }
.find-page .page-head .sub { margin-top:8px; font-size:14px; color:var(--t-muted); }
.find-page .reqlist { display:flex; flex-direction:column; gap:16px; }
/* Unified search page (search.js) — reuses every .find-page card style; only the
   section spacing + empty/hint states are search-specific. */
.search-page .col-label { font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:12.5px; font-weight:600;
  color:var(--t-muted,#5d6b64); text-transform:uppercase; letter-spacing:.08em; margin:28px 0 14px; }
.search-page .search-sec:first-child .col-label { margin-top:10px; }
.search-page .search-hint { color:var(--t-muted,#5d6b64); font-size:15px; padding:18px 2px; }
.find-page .bt-card { background:var(--t-card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--t-shadow); padding:20px; transition:.16s; }
.find-page .bt-card:hover { box-shadow:0 1px 2px rgba(16,36,28,.04),0 16px 40px rgba(16,36,28,.1); border-color:#D3DED6; }
.find-page .bt-top { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.find-page .bt-ic { width:38px; height:38px; border-radius:11px; flex:none; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; }
.find-page .bt-ic svg { width:19px; height:19px; }
.find-page .bt-title { flex:1; min-width:0; font-family:var(--grotesk); font-size:17px; font-weight:600; letter-spacing:-.01em; }
.find-page .bt-status { font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; background:var(--open-bg); color:var(--open-ink); white-space:nowrap; }
.find-page .bt-status .d { width:6px; height:6px; border-radius:50%; background:var(--open-ink); }
.find-page .bt-body { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }
.find-page .bt-route { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--t-paper); border:1px solid var(--t-line); border-radius:13px; }
.find-page .bt-pt { text-align:center; flex:none; }
.find-page .bt-city { font-family:var(--grotesk); font-weight:700; font-size:17px; color:var(--t-ink); letter-spacing:.02em; }
.find-page .bt-code { font-weight:400; font-size:11.5px; color:var(--t-muted); margin-top:1px; }
.find-page .bt-line { flex:1; height:0; border-top:2px dashed #CFDAD2; position:relative; min-width:50px; }
.find-page .bt-plane { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; background:var(--emerald); display:grid; place-items:center; box-shadow:0 4px 10px -4px rgba(31,110,67,.6); }
.find-page .bt-plane svg { width:13px; height:13px; }
.find-page .bt-date { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--t-ink); background:var(--t-card); border:1px solid var(--t-line); border-radius:10px; padding:9px 13px; white-space:nowrap; }
.find-page .bt-date span svg { color:var(--t-muted); display:block; }
.find-page .bt-mid { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.find-page .bt-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--t-ink); background:var(--t-paper); border:1px solid var(--t-line); padding:6px 12px; border-radius:9px; }
.find-page .bt-chip span svg { color:var(--t-muted); display:block; }
.find-page .bt-chip.price { color:var(--emerald); background:var(--emerald-soft); border-color:#CBE3D4; }
.find-page .bt-chip.price span svg { color:var(--emerald); }
/* 0-reward "favor" chip — muted gold, mirrors the Android favor pill (never a blank reward slot). */
.find-page .bt-chip.favor { color:#8A7A4D; background:#F1EFE7; border-color:#E4DEC8; }
.find-page .bt-chip.favor span svg { color:#B59A52; }
.find-page .bt-person { margin-left:auto; display:flex; align-items:center; gap:10px; }
.find-page .bt-meta { text-align:right; line-height:1.2; }
.find-page .bt-lab { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--t-muted); }
.find-page .bt-deliv { font-size:11.5px; font-weight:600; color:var(--t-muted); }
.find-page .bt-name { font-size:13.5px; color:var(--t-ink); font-weight:600; }
.find-page .bt-av { width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--grotesk); font-weight:600; font-size:13px; }
.find-page .bt-av.trv { background:linear-gradient(135deg,#DC8413,#E8A53D); }
.find-page .bt-av.snd { background:linear-gradient(135deg,var(--emerald),#2C8E59); }
.find-page .bt-foot { display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--t-line); }
@media (max-width:1025px){ .find-page .bt-body { grid-template-columns:1fr; } .find-page .bt-date { justify-self:start; } }
@media (max-width:700px){ .find-page .bt-person { margin-left:0; width:100%; justify-content:flex-start; margin-top:4px; } }

/* ── Dispute open/respond modal (matchDetail) ── */
.md-ovl{position:fixed;inset:0;z-index:90;background:rgba(16,32,22,.42);display:flex;align-items:center;justify-content:center;padding:18px}
.md-card{background:var(--t-card,#fff);border:1px solid var(--t-line,#e2e8e3);border-radius:6px;box-shadow:0 24px 60px -24px rgba(20,40,30,.5);width:100%;max-width:460px;overflow:hidden}
.md-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--t-line,#eef1ef)}
.md-head b{font-family:var(--grotesk);font-size:16px;color:var(--t-ink,#16201b)}
.md-x{background:none;border:none;font-size:16px;color:var(--t-muted,#74857c);cursor:pointer;line-height:1}
.md-body{padding:16px 18px;display:flex;flex-direction:column;gap:13px}
/* Say-thanks dialog — redesigned to u-get-bag-say-thanks-v2.html (6px card). Rides .md-ovl. */
.thx-card{position:relative;background:var(--t-card,#fff);border-radius:6px;box-shadow:0 30px 60px -16px rgba(0,0,0,.45);width:100%;max-width:342px;overflow:hidden}
.thx-x{position:absolute;top:12px;right:13px;z-index:2;background:rgba(255,255,255,.6);border:none;width:26px;height:26px;border-radius:50%;font-size:14px;color:var(--t-muted,#6E7C76);cursor:pointer;line-height:1}
.thx-head{position:relative;text-align:center;padding:22px 20px 18px;background:linear-gradient(160deg,#F6FBF8,#E9F5EF)}
html[data-theme="dark"] .thx-head{background:linear-gradient(160deg,#12261d,#0e2018)}
.thx-heart{width:56px;height:56px;border-radius:18px;background:#fff;color:#D9557F;display:grid;place-items:center;margin:0 auto 13px;box-shadow:0 8px 18px -8px rgba(217,85,127,.45)}
.thx-head h2{font-family:var(--grotesk);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--t-ink,#16241F)}
.thx-head p{font-size:12.5px;color:var(--t-muted,#6E7C76);margin-top:5px}
.thx-body{padding:0 20px 16px}
.thx-to{display:flex;align-items:center;gap:11px;background:var(--t-paper,#F4F6F4);border:1px solid var(--t-line,#EBEEEC);border-radius:6px;padding:11px 13px;margin-top:16px}
.thx-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-family:var(--grotesk);font-weight:700;font-size:14px;background:linear-gradient(150deg,#1FA37A,#0F6B4E)}
.thx-tn{font-family:var(--grotesk);font-weight:600;font-size:14px;color:var(--t-ink,#16241F)}
.thx-tr{font-size:11px;color:var(--t-muted,#6E7C76);margin-top:2px}
.thx-sec{font-family:var(--grotesk);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#9aa6a0);margin:16px 0 9px}
.thx-chips{display:flex;flex-wrap:wrap;gap:7px}
.thx-chip{border:1px solid var(--t-field-line,#D8E0DB);background:var(--t-card,#fff);border-radius:999px;padding:8px 13px;cursor:pointer;font-family:var(--grotesk);font-weight:600;font-size:12.5px;color:var(--t-ink,#16241F);display:inline-flex;align-items:center;gap:0;transition:.14s}
.thx-chip:hover{border-color:var(--emerald,#15795C)}
.thx-chip.on{background:var(--green-light,#E7F2EC);border-color:var(--emerald,#15795C);color:var(--pine,#0C3B2E)}
.thx-chip .thx-ck{color:var(--emerald,#15795C);width:0;opacity:0;overflow:hidden;display:inline-flex;transition:.14s}
.thx-chip .thx-ck svg{width:12px;height:12px}
.thx-chip.on .thx-ck{width:12px;opacity:1;margin-right:6px}
.thx-msg{margin-top:16px}
.thx-lb{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.thx-l{font-family:var(--grotesk);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#9aa6a0)}
.thx-count{font-size:11px;color:var(--faint,#9aa6a0);font-variant-numeric:tabular-nums}
.thx-ta{width:100%;border:1px solid var(--t-field-line,#D8E0DB);border-radius:11px;padding:12px 13px;font:inherit;font-size:14px;color:var(--t-ink,#16241F);background:var(--t-card,#fff);outline:none;resize:none;min-height:72px;line-height:1.5}
.thx-ta:focus{border-color:var(--emerald,#15795C);box-shadow:0 0 0 3px var(--green-light,#E7F2EC)}
.thx-note{display:flex;gap:8px;align-items:flex-start;margin-top:11px}
.thx-note span{color:var(--emerald,#15795C);flex:none;margin-top:1px;display:inline-flex}
.thx-note p{font-size:11px;color:var(--t-muted,#6E7C76);line-height:1.45}
.thx-acts{display:flex;gap:10px;margin-top:16px}
.thx-acts button{border:none;cursor:pointer;border-radius:13px;padding:14px;font-family:var(--grotesk);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s}
.thx-cancel{flex:none;padding-left:22px;padding-right:22px;background:var(--t-card,#fff);color:var(--t-ink,#16241F);border:1px solid var(--t-field-line,#D8E0DB)!important}
.thx-cancel:hover{background:var(--t-paper,#F4F6F4)}
.thx-send{flex:1;background:linear-gradient(145deg,#1A8A66,#0C3B2E);color:#fff;box-shadow:0 10px 20px -8px rgba(12,59,46,.6)}
.thx-send:hover{transform:translateY(-1px)}
.thx-send:disabled{background:#E7EAE8;color:var(--faint,#9aa6a0);box-shadow:none;cursor:not-allowed;transform:none}
html[data-theme="dark"] .thx-send:disabled{background:#2a322d;color:#6b756f}
.thx-gate{text-align:center;font-size:11px;color:var(--t-muted,#6E7C76);padding-top:12px}
.thx-gate.ready{color:var(--emerald,#15795C)}
.md-field{display:flex;flex-direction:column;gap:6px}
.md-field>span{font-family:var(--grotesk);font-size:13px;font-weight:600;color:var(--t-ink,#16201b)}
.md-input{width:100%;font-family:inherit;font-size:14px;color:var(--t-ink,#16201b);border:1px solid var(--t-field-line,#d7e0da);background: var(--card);border-radius:8px;padding:10px 12px;outline:none}
.md-input:focus{border-color:var(--emerald,#15795c);box-shadow:0 0 0 3px var(--emerald-soft,#e7f1ea)}
textarea.md-input{resize:vertical;min-height:84px}
/* Send-a-tip modal: preset chips + currency-prefix amount + "traveler receives" line (app parity) */
.tip-presets{display:flex;gap:8px;margin-top:14px}
.tip-preset{flex:1;border:1px solid var(--t-field-line,#d7e0da);background:var(--card);border-radius:11px;padding:10px 0;cursor:pointer;font-family:inherit;font-weight:600;font-size:13px;color:var(--t-ink,#16201b);transition:.14s}
.tip-preset:hover{border-color:#c6d2cb}
.tip-preset.on{background:var(--emerald-soft,#e7f1ea);color:var(--emerald,#15795c);border-color:#c9e3d6}
.tip-inwrap{position:relative;margin-top:12px}
.tip-inwrap .tip-cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:600;font-size:15px;color:var(--t-muted,#5d6b64);pointer-events:none}
.tip-inwrap .tip-amt{width:100%;font-family:inherit;font-weight:600;font-size:20px;color:var(--t-ink,#16201b);border:1px solid var(--t-field-line,#d7e0da);background:var(--card);border-radius:12px;padding:13px 14px 13px 56px;outline:none;transition:.16s}
.tip-inwrap .tip-amt:focus{border-color:var(--emerald,#15795c);box-shadow:0 0 0 3px var(--emerald-soft,#e7f1ea)}
.tip-split{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 13px;background:var(--green-light);border-radius:12px;font-size:12.5px;color:var(--t-muted,#5d6b64)}
.tip-split-ic{color:var(--emerald,#15795c);display:inline-flex;flex:none}
.tip-split b{color:var(--t-ink,#16201b);font-weight:700}
.tip-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:11px 13px;background:var(--amber-soft,#FCEFD3);border:1px solid var(--amber-line,#F0DCAE);border-radius:12px;font-size:12.5px;line-height:1.45;color:var(--amber-ink,#7a5a12)}
.tip-note-ic{color:var(--amber-ink,#7a5a12);display:inline-flex;flex:none;margin-top:1px}
.md-foot{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;border-top:1px solid var(--t-line,#eef1ef);background:var(--t-paper,#f7faf7)}
.md-go{font-family:var(--grotesk);font-size:13.5px;font-weight:600;border:none;border-radius:8px;padding:10px 18px;cursor:pointer;background:var(--emerald,#15795c);color:#fff}
.md-go:hover{background:#0f6a4f}
/* Stripe Payment Element modal (payment.js): rides the shared .md-* card (6dp radius). */
.pay-el{min-height:44px}
.pay-err{color:var(--danger,#c0392b);font-family:var(--inter);font-size:12.5px}
.pay-err:empty{display:none}
.pay-cancel{font-family:var(--inter);font-size:13.5px;font-weight:500;border:1px solid var(--t-field-line,#d6ddd8);border-radius:8px;padding:10px 16px;cursor:pointer;background:var(--t-card,#fff);color:var(--t-ink,#1a2b22)}
.pay-cancel:hover{background:var(--t-paper,#f7faf7)}
.pay-cancel:disabled,.md-go:disabled{opacity:.55;cursor:default}
.dispute-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--t-line,#eef1ef);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
@media (prefers-reduced-motion:reduce){.md-ovl *{transition:none!important}}

/* ── Cancel-dispute modal (myDisputes) — redesign of 000/u-get-bag-cancel-dispute.html.
   Rides the shared .md-ovl scrim; the card + content are their own .dc-* so the generic
   .md-card head/foot chrome stays untouched. The modal mounts on <body>, outside every
   scoped --t-* palette, so tinted surfaces use literals + explicit dark overrides below
   (only the rose confirm #B4524A is deliberately literal on BOTH themes — brand rose). */
.dc-card{width:100%;max-width:340px;max-height:92vh;overflow-y:auto;background:var(--card,#fff);border:1px solid var(--line,#e2e8e3);border-radius:6px;box-shadow:0 30px 60px -16px rgba(0,0,0,.45)}
.dc-head{padding:22px 22px 0;text-align:center}
.dc-head .dc-di{width:52px;height:52px;border-radius:16px;background:#FBEEEC;color:#B4524A;display:grid;place-items:center;margin:0 auto 14px}
.dc-head h2{font-family:var(--grotesk);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink,#16241f);margin:0}
.dc-head .dc-ctx{font-size:12.5px;color:var(--muted,#5d6b64);margin-top:5px}
.dc-warn{display:flex;gap:10px;align-items:flex-start;background:#FBEFD9;border:1px solid #EFDCB8;border-radius:6px;padding:12px 13px;margin:16px 22px 6px}
.dc-warn .dc-wi{color:#8E6520;flex:none;display:inline-flex;margin-top:1px}
.dc-warn p{font-size:12px;color:#7a5e2e;line-height:1.5;margin:0}
.dc-body{padding:14px 22px 0}
.dc-lb{font-family:var(--grotesk);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#656e68;margin-bottom:9px}
.dc-lb-note{margin-top:14px}
.dc-opt{display:flex;align-items:center;gap:11px;width:100%;border:1px solid #D8E0DB;background:none;border-radius:12px;padding:12px 13px;cursor:pointer;margin-bottom:8px;transition:.14s;font-family:inherit;text-align:left}
.dc-opt:hover{background:var(--bg,#f6f8f6)}
.dc-opt.on{border-color:#15795C;background:#E7F2EC}
.dc-radio{width:20px;height:20px;border-radius:50%;border:2px solid #D8E0DB;flex:none;display:grid;place-items:center;transition:.14s}
.dc-opt.on .dc-radio{border-color:#15795C;background:#15795C}
.dc-opt.on .dc-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.dc-ol{font-family:var(--grotesk);font-weight:600;font-size:14px;color:var(--ink,#16241f)}
.dc-opt.on .dc-ol{color:#0C3B2E}
.dc-ta{width:100%;border:1px solid #D8E0DB;background:var(--card,#fff);border-radius:12px;padding:12px 13px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink,#16241f);outline:none;resize:none;min-height:60px;transition:.16s}
.dc-ta:focus{border-color:#15795C;box-shadow:0 0 0 3px #E7F2EC}
.dc-ta::placeholder{color:#656e68}
.dc-acts{display:flex;flex-direction:column;gap:10px;padding:18px 22px 22px}
.dc-acts button{width:100%;border:none;cursor:pointer;border-radius:999px;padding:14px;font-family:var(--inter);font-weight:600;font-size:15px;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dc-confirm{background:#B4524A;color:#fff;box-shadow:0 10px 20px -8px rgba(180,82,74,.6)}
.dc-confirm:hover{background:#a2453e}
.dc-confirm:disabled{opacity:.6;cursor:not-allowed}
.dc-confirm .dc-cx{display:inline-flex}
.dc-keep{background:var(--card,#fff);color:var(--ink,#16241f);border:1px solid #D8E0DB}
.dc-keep:hover{background:var(--bg,#f6f8f6)}
/* dark parity — re-tint the rose tile / amber strip / emerald selection; #B4524A confirm stays as-is */
html[data-theme="dark"] .dc-head .dc-di{background:#2e2120;color:#e7a398}
html[data-theme="dark"] .dc-warn{background:#2e2613;border-color:#3a3320}
html[data-theme="dark"] .dc-warn .dc-wi,html[data-theme="dark"] .dc-warn p{color:#e6a24a}
html[data-theme="dark"] .dc-lb{color:#727c75}
html[data-theme="dark"] .dc-opt,html[data-theme="dark"] .dc-radio,html[data-theme="dark"] .dc-ta,html[data-theme="dark"] .dc-keep{border-color:#333a35}
html[data-theme="dark"] .dc-opt.on{border-color:#4fb985;background:#173225}
html[data-theme="dark"] .dc-opt.on .dc-radio{border-color:#4fb985;background:#4fb985}
html[data-theme="dark"] .dc-opt.on .dc-ol{color:#6fd3a0}
html[data-theme="dark"] .dc-ta:focus{border-color:#4fb985;box-shadow:0 0 0 3px #173225}
html[data-theme="dark"] .dc-ta::placeholder{color:#727c75}

/* prohibited (public) — category severity tag (banned vs restricted) */
.cat .cat-sev{font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:1px 7px;border-radius:5px;margin-left:6px;background:rgba(192,57,43,.12);color:#9A2D22}
.cat .cat-sev.flag{background:rgba(185,119,10,.14);color:#8a5a06}

/* ── Participant pages v2: load-more, status tabs, match/booking surfacing, fit chips ── */
.load-more{display:block;margin:14px auto;padding:9px 20px;border:1px solid var(--line,#dcdcdc);background: var(--card);border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.load-more:hover{background: var(--bg)}
.field-hint{font-size:11.5px;color: var(--green);margin-top:4px}
.field-hint.warn{color: var(--amber-dark)}
/* Derived reward readout under the per-unit rate field: "Reward offer: $35.00 · 7 lb × $5.00/lb" */
.status-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.status-tabs .stab{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border:1px solid var(--line,#dcdcdc);background: var(--card);border-radius:999px;cursor:pointer;color:#444}
.status-tabs .stab.on{background:#15795C;border-color: var(--green);color:#fff}
.status-tabs .stab .c{font-size:11px;background:rgba(0,0,0,.08);padding:0 6px;border-radius:999px}
.status-tabs .stab.on .c{background:rgba(255,255,255,.25)}
.col-sub{font-size:12.5px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.03em;margin:16px 0 8px}
/* package match row (sends.js) */
.package .p-match{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 11px;background:var(--green-soft,#eaf5ef);border:1px solid #cfe6da;border-radius:9px}
.package .p-match-who{font-size:12.5px;color: var(--green)}
.package .p-match-cta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color: var(--green);text-decoration:none}
/* trip bookings row (trips.js) */
.trip-bookings{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:8px 11px;border-radius:9px;background:var(--green-soft,#eaf5ef);border:1px solid #cfe6da}
.trip-bookings.empty{background: var(--bg);border-color:#ececec;color:#888;font-size:12.5px}
.trip-bookings .tb-info b{font-size:13px;color: var(--green)}
.trip-bookings .tb-kg{color:#3c7a63;font-size:12px}
.trip-bookings .tb-view{font-size:12.5px;font-weight:700;color: var(--green);text-decoration:none}
/* browse: quick-filter checkbox rows + fit/verified chips */
.filters .frow .chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#444}
.bt-chip.fit{background:var(--green-soft,#eaf5ef);color: var(--green);border-color:#cfe6da}
.bt-chip.unfit{background: var(--danger-bg);color:#a02b2b;border-color:#f3c9c9}
.bt-verified{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;border-radius:50%;background:#15795C;color:#fff;font-size:10px;font-weight:700;vertical-align:middle}

/* Trip capacity readout — space left + fill bar + total. Shared across My Trips,
   browse and detail (web); mirrors the Android trip card. Scoped class names
   (.capbar*) so they can't leak into the admin shell. */
.capbar{margin-top:12px}
.capbar-top,.capbar-min{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.capbar-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.capbar-amt{font-family:var(--grotesk,inherit);font-weight:700;font-size:15px;color:var(--ink)}
.capbar-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.capbar-track{flex:1;height:12px;background:var(--green-light);border-radius:999px;overflow:hidden}
.capbar-fill{height:100%;background:var(--green);border-radius:999px;transition:width .3s ease}
.capbar-pct{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.capbar-cap{font-size:11.5px;color:var(--muted);margin-top:5px}
.find-page .capbar{margin-top:16px}

/* ── Trip detail (redesign of 000/trip-detail.html). All .td-* scoped so the mockup's
   generic .card/.meter/.status/.btn don't collide with the app's existing classes. ── */
.td-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;max-width:1120px;margin:0 auto}
.td-card{background: var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(20,40,30,.05)}
.td-hero{padding:24px 26px;margin-bottom:20px}
.td-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.td-h1{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.td-h1 .td-arr{color: var(--ink);display:inline-flex;align-items:center;vertical-align:middle;margin:0 .3em}
.td-route{margin-top:8px;font-size:14px;color: var(--muted)}
.td-status{font-size:12px;font-weight:600;padding:5px 13px;border-radius:20px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-transform:capitalize}
.td-status .d{width:7px;height:7px;border-radius:50%}
.td-status.partial{background: var(--warn-bg);color:#8A5A08}.td-status.partial .d{background:#B9770A}
.td-page-h{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:22px;font-weight:700;color: var(--ink);margin:6px 2px 14px}
.td-status.open{background: var(--green-light);color: var(--green)}.td-status.open .d{background:#1F6E43}
.td-status.muted{background:#EDF1ED;color: var(--muted)}.td-status.muted .d{background:#B7C4BB}
.td-route{display:flex;align-items:center;gap:16px;padding:18px 20px;background: var(--bg);border:1px solid var(--line);border-radius:14px;margin:20px 0}
.td-pt{text-align:center;flex:none}
.td-pt .td-city{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-weight:700;font-size:22px;color: var(--ink);letter-spacing:.02em}
.td-pt .td-code{font-weight:400;font-size:12px;color: var(--muted);margin-top:2px}
.td-line{flex:1;height:0;border-top:2px dashed #CFDAD2;position:relative;min-width:50px}
.td-plane{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#1F6E43;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(31,110,67,.6)}
.td-plane svg{width:17px;height:17px;color:#fff}
.td-when{text-align:center;flex:none}
.td-when-lab{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color: var(--muted)}
.td-when b{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:14px;color: var(--ink);font-weight:600;display:block;margin-top:3px}
.td-cap-lab{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color: var(--muted);margin-bottom:12px}
.td-meter{height:31px;border-radius:12px;overflow:hidden;display:flex;border:1px solid var(--line);background: var(--bg)}
.td-meter .td-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.td-meter .booked{background:linear-gradient(135deg,#C99A4E,#DC8413)}
.td-meter .avail{background:linear-gradient(135deg,#2C8E59,#1F6E43)}
.td-meter-legend{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap}
.td-ml{display:flex;align-items:center;gap:8px;font-size:13px;color: var(--muted)}
.td-ml .sw{width:11px;height:11px;border-radius:4px}
.td-ml .sw.b{background:#DC8413}.td-ml .sw.a{background:#1F6E43}
.td-ml b{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);color: var(--ink);font-weight:700}
.td-tot{font-size:13px;color: var(--muted)}
.td-tot b{color: var(--ink);font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-weight:700}
/* Shared capacity meter (cards + detail) — wraps the .td-meter visuals with a
   SPACE LEFT label + "% booked" header. */
.capmeter{margin-top:12px}
.capmeter-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.capmeter-lab{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color: var(--muted)}
.capmeter-pct{font-size:11.5px;font-weight:700;color: var(--muted)}
.capmeter .td-meter-legend{gap:14px;margin-top:10px}
.td-rules{padding:20px 26px;margin-bottom:20px}
.td-h2{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:16px;font-weight:600;margin-bottom:14px;display:flex;align-items:baseline;gap:8px}
.td-rule-row{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.td-rule-row:first-of-type{border-top:none}
.td-ric{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center}
.td-ric.ok{background: var(--green-light);color: var(--green)}.td-ric.no{background: var(--danger-bg);color:#C0392B}
.td-ric svg{width:16px;height:16px}
.td-rt b{font-size:13.5px;color: var(--ink);font-weight:600;display:block}
.td-rt span{font-size:12.5px;color: var(--muted)}
.td-rt a{color: var(--green);font-weight:600;text-decoration:none}
.td-side{position:sticky;top:82px;display:flex;flex-direction:column;gap:18px}
.td-traveler{padding:20px}
.td-tc-top{display:flex;align-items:center;gap:13px}
.td-tav{width:52px;height:52px;border-radius:14px;flex:none;background:linear-gradient(135deg,#DC8413,#E8A53D);display:grid;place-items:center;color:#fff;font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-weight:600;font-size:17px}
.td-tm .td-lab{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color: var(--muted)}
.td-tm b{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:17px;font-weight:600;display:block;margin-top:1px}
.td-trate{font-size:12px;color: var(--muted);display:inline-flex;align-items:center;gap:3px;margin-top:2px}
.td-trate svg{width:12px;height:12px;color:#DC8413}
.td-tc-facts{display:flex;gap:10px;margin-top:16px}
.td-hero-facts{display:flex;gap:10px;margin-top:14px}
.td-fact{flex:1;text-align:center;padding:11px 8px;background: var(--bg);border:1px solid var(--line);border-radius:11px}
.td-fact b{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:15px;font-weight:600;display:block;color: var(--ink)}
.td-fact span{font-size:11px;color: var(--muted)}
.td-verified{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:12.5px;font-weight:600;color: var(--green);background: var(--green-light);border-radius:10px;padding:9px 12px}
.td-verified svg{width:15px;height:15px}
.td-est{padding:20px}
.td-rate{margin-left:auto;font-size:13px;color: var(--muted);font-weight:500}
.td-rate b{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);color: var(--green);font-size:16px;font-weight:600}
.td-field{margin-top:14px}
.td-field label{font-size:12px;font-weight:600;color: var(--muted);display:block;margin-bottom:7px}
.td-field-float .td-weight-in{position:relative}
.td-field-float .td-weight-in input{background: var(--card);border-color: var(--green)}
.td-field-float .td-weight-in label{position:absolute;top:-7px;left:12px;margin:0;background: var(--card);padding:0 6px;display:inline-block;color: var(--green)}
.td-weight-in{position:relative}
.td-weight-in input{width:100%;font-family:var(--inter,'Plus Jakarta Sans',sans-serif);font-size:18px;font-weight:600;color: var(--ink);border:1px solid var(--line);background: var(--bg);border-radius:11px;padding:12px 44px 12px 14px;outline:none}
.td-weight-in input:focus{border-color: var(--green);background: var(--card);box-shadow:0 0 0 3px rgba(31,110,67,.12)}
.td-weight-in .td-wu{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color: var(--muted);font-weight:600}
.td-slider{width:100%;margin-top:14px;accent-color: var(--green)}
.td-est-out{margin-top:16px;padding:14px 16px;background: var(--green-light);border:1px solid #CBE3D4;border-radius:13px}
.td-est-out .td-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color: var(--green)}
.td-est-out .td-row.total{margin-top:8px;padding-top:10px;border-top:1px solid #C2DBCB}
.td-est-out .td-row.total .v{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-size:24px;font-weight:600;color: var(--green)}
.td-est-out .td-row.total .td-total-l{display:flex;flex-direction:column;line-height:1.25;font-weight:600}
.td-est-out .td-row.total .td-sub{font-size:11px;font-weight:500;color:#4E7A60}
.td-est-out .td-row .v{font-family:var(--grotesk,'Plus Jakarta Sans',sans-serif);font-weight:600;color: var(--ink)}
.td-warn{font-size:11.5px;color:#8A5A08;margin-top:9px;display:none;align-items:center;gap:6px}
.td-warn.show{display:flex}
.td-warn svg{width:13px;height:13px}
.td-cta{padding:18px 20px}
.td-cta-mine{font-size:13px;font-weight:600;color: var(--muted);margin-bottom:12px}
.td-in{width:100%;border:1px solid var(--line);background: var(--bg);border-radius:10px;padding:10px 12px;font-size:13.5px;color: var(--ink);outline:none}
.td-btn{font-size:13.5px;font-weight:600;border-radius:11px;padding:11px 18px;cursor:pointer;border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-decoration:none;margin-top:10px}
.td-btn:first-child{margin-top:0}
.td-btn svg{width:15px;height:15px}
/* The propose CTA also carries .btn.sm from the shared proposeButton factory, which
   (0,2,0) out-specifies .td-btn and would shrink it. Restore the td-btn pill metrics. */
.btn.td-btn{padding:11px 18px;font-size:13.5px;border-radius:11px;width:100%}
/* Matches the green "Propose match" pill on the browse/matches cards (#15795C =
   --emerald, which isn't in scope here). The double class out-specifies the base
   .btn green from the shared proposeButton factory. */
.td-btn.td-btn-primary{background:#15795C;color:#fff;box-shadow:0 6px 14px rgba(21,121,92,.28)}
.td-btn.td-btn-primary:hover{background:#0f6a4f}
.td-btn-ghost{background: var(--card);border-color:#E2E8E2;color: var(--muted)}
.td-btn-ghost:hover{background: var(--bg);color: var(--ink)}
.td-postlink{display:block;text-align:center;font-size:13px;font-weight:600;color: var(--green);text-decoration:none;padding:8px;margin-bottom:4px}
.td-cta-note{font-size:11.5px;color: var(--muted);text-align:center;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.td-cta-note svg{width:13px;height:13px;color: var(--green)}
@media (max-width:1100px){.td-layout{grid-template-columns:1fr}.td-side{position:static}}

/* Route-picker direction header — "ORIGIN ——→—— DESTINATION" above the origin/dest grid */
.route-head{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.route-head .rh-tag{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.route-head .rh-mid{flex:1;display:flex;align-items:center;justify-content:center;color:var(--green)}
.route-head .rh-mid::before,.route-head .rh-mid::after{content:'';flex:1;height:1px;background:var(--line)}
.route-head .rh-arr{display:flex;padding:0 8px}

/* Dark-mode fixes for components that hardcode light backgrounds (so they don't follow
   the flipped scoped palettes). */
/* "Match my package / trip" assistant banner on the browse pages (was a fixed light
   green gradient → white-on-dark). */
html[data-theme="dark"] .find-page .match-card{background:linear-gradient(180deg,var(--t-paper),var(--t-card));border-color:var(--t-line)}
html[data-theme="dark"] .find-page .match-card .mt{color:var(--emerald)}
html[data-theme="dark"] .find-page .match-card .ms{color:var(--t-muted)}
/* Prohibited-page category icon badges with hardcoded light tints (blue/purple stayed
   white in dark mode while the var-based tints flipped). */
html[data-theme="dark"] .prohibited-page .cat.tint-blue .cat-ic{background:#172331;color:#9bc0e6}
html[data-theme="dark"] .prohibited-page .cat.tint-purple .cat-ic{background:#211d33;color:#c2bae8}

/* ════════════ Extra checked bag (paid 3rd bag) ════════════ */
/* Trip-card chip (traveler's own trips) */
.eb-chip{display:inline-flex;align-items:center;gap:2px;margin-top:8px;font-size:12px;font-weight:700;color:var(--green);background:var(--green-light);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.eb-chip .eb-chip-fee{font-weight:600;color:var(--muted)}

/* Trip form — the offer card + toggle + fee fields + "Sender will see" summary */
.eb-card{margin:14px 0;border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--card)}
.eb-card.hide{display:none}
.eb-togrow{display:flex;align-items:center;gap:12px}
.eb-togrow .eb-txt{flex:1}
.eb-togrow .eb-m{font-weight:700;font-size:14px;color:var(--ink)}
.eb-togrow .eb-s{font-size:12px;color:var(--muted)}
/* Size/shape matched to the standard .switch (42×24 track, 18px thumb) so the extra-bag /
   coverage opt-in toggles are identical pills to every other toggle in the app. */
.eb-switch{width:42px;height:24px;border:0;border-radius:999px;background:var(--green);position:relative;flex:none;cursor:pointer;padding:0;transition:background .15s}
.eb-switch.off{background:#cfd6d0}
html[data-theme="dark"] .eb-switch.off{background:#3a423c}
.eb-switch .eb-knob{position:absolute;top:3px;left:21px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.eb-switch.off .eb-knob{left:3px}
.eb-fields{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* Weight & value card redesign (u-get-bag-weight-value-card.html; 6px corners).
   Coverage tog-box tints emerald when ON; free-base line renders as a ✓ pill. */
.wv-cov{border-radius:6px;background:#FCFDFC;transition:background .16s,border-color .16s}
.wv-cov.on{background:var(--green-light,#E7F2EC);border-color:#CFE4D8}
html[data-theme="dark"] .wv-cov{background:var(--card)}
html[data-theme="dark"] .wv-cov.on{background:rgba(27,127,75,.14);border-color:rgba(27,127,75,.4)}
.wv-vhint{font-size:11px;color:var(--faint,#8A968F);margin-top:6px}
.wv-cov .eb-free{display:inline-flex;align-items:center;gap:5px;background:var(--green-light,#E7F2EC);color:var(--green,#1B7F4B);
  border-radius:999px;padding:3px 9px;font-weight:600;font-size:10.5px;margin-top:8px}
.wv-cov.on .eb-free{background:var(--card,#fff)}
.wv-cov .eb-free:not(:empty)::before{content:"\2713";font-weight:800}
.wv-cov .field-hint{margin-top:6px}
/* rate head: label + tappable Suggested chip */
.wv-ratehead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wv-sugg{border:0;cursor:pointer;background:var(--green-light,#E7F2EC);color:var(--green,#1B7F4B);
  border-radius:999px;padding:3px 9px;font-weight:600;font-size:10.5px}
.wv-sugg:hover{filter:brightness(.97)}
/* receipt paper box / dashed placeholder / centered escrow note */
.wv-receipt{margin:2px 0 12px}
.wv-paper{border:1px solid var(--line);border-radius:6px;background:var(--paper,#F4F6F4);padding:14px}
html[data-theme="dark"] .wv-paper{background:var(--surface-2,#161616)}
.wv-rrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px}
.wv-rrow .wv-lab{color:var(--muted)}
.wv-rrow .wv-lab small{display:block;color:var(--faint,#8A968F);font-size:10.5px;margin-top:2px}
.wv-rrow .wv-val{font-weight:600;font-size:13.5px;color:var(--ink);flex:none}
.wv-rrow .wv-val.em{color:var(--green,#1B7F4B)}
.wv-rline{border-top:1px dashed var(--dash,#BCCCC1);margin:7px 0}
.wv-rtotal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.wv-rtotal .wv-tl{font-weight:700;font-size:14.5px;color:var(--ink)}
.wv-rtotal .wv-tl small{display:block;font-weight:400;font-size:10.5px;color:var(--muted);margin-top:2px}
.wv-rtotal .wv-tv{font-weight:700;font-size:22px;color:var(--green,#1B7F4B)}
.wv-ph{border:1px dashed var(--dash,#BCCCC1);border-radius:6px;background:#FCFDFC;padding:20px 14px;text-align:center}
html[data-theme="dark"] .wv-ph{background:var(--card)}
.wv-ph .wv-pi{width:38px;height:38px;border-radius:11px;background:var(--green-light,#E7F2EC);color:var(--green,#1B7F4B);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}
.wv-ph .wv-p1{font-weight:600;font-size:13.5px;color:var(--ink)}
.wv-ph .wv-p2{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.wv-escrow{display:flex;align-items:center;gap:7px;justify-content:center;margin-top:11px;font-size:11px;color:var(--muted)}
.wv-escrow svg{color:var(--green,#1B7F4B)}
.eb-note{margin:4px 0 12px}
.eb-summary{background:var(--green-light);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.eb-summary .col-sub{margin:0 0 6px}
.eb-li{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink);padding:3px 0}
.eb-li .eb-amt{font-weight:700;font-variant-numeric:tabular-nums}
.eb-earn-li{border-top:1px solid var(--line);margin-top:4px;padding-top:7px}
.eb-earn-li .eb-earn{color:var(--green)}

/* Trip detail — sender's extra-bag option + price breakdown */
.eb-avail-note{display:flex;gap:8px;align-items:flex-start;background:var(--green-light);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font-size:12.5px;color:var(--ink);margin-bottom:12px}
.eb-option{display:flex;align-items:center;gap:12px;border:1.5px solid var(--green);border-radius:var(--radius);padding:12px;background:var(--green-light);margin-bottom:14px}
.eb-option .eb-opt-ic{width:40px;height:40px;border-radius:5px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.eb-option .eb-opt-m{font-weight:700;font-size:14px;color:var(--ink)}
.eb-option .eb-opt-s{font-size:12px;color:var(--muted)}
.eb-option .eb-opt-chk{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.eb-breakdown{padding:14px 16px}
.eb-breakdown .eb-bl{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-size:13.5px;color:var(--ink)}
.eb-breakdown .eb-bl .eb-bsub{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.eb-breakdown .eb-bl .eb-bamt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.eb-breakdown .eb-bl.eb-total{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;font-weight:800}
.eb-breakdown .eb-bl.eb-total .eb-bamt{font-size:17px}
.eb-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:middle}
.eb-tag.pass{background:#eef4ff;color:#2455b8}
.eb-tag.earn{background:var(--green-light);color:var(--green)}
html[data-theme="dark"] .eb-tag.pass{background:#15262f;color:#74bbe2}

/* Match detail — extra-bag receipt upload + status */
.eb-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:9px 12px;border-radius:var(--radius);border:1px solid var(--line);margin-top:8px}
.eb-status.pending{background:var(--warn-bg);color:var(--amber-dark)}
.eb-status.submitted{background:var(--warn-bg);color:var(--amber-dark)}
.eb-status.approved{background:var(--green-light);color:var(--green)}
.eb-status.rejected{background:#fdecea;color:#c0392b}
html[data-theme="dark"] .eb-status.rejected{background:#2e1816;color:#e88a82}
.eb-receipt-form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.eb-receipt-form .act-label{display:block;font-weight:700;font-size:13px;margin-bottom:4px;color:var(--ink)}
.eb-receipt-form .eb-help{font-size:12px;color:var(--muted);margin-bottom:10px}
.eb-receipt-form input[type=number]{width:100%}
.eb-fineprint{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.eb-hero-badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--green);background:var(--green-light);border:1px solid var(--line);border-radius:999px;padding:2px 8px;vertical-align:middle}
/* extra-bag v2: bag dimensions triple (send form + edit modal) */
.eb-dims{display:flex;gap:8px;align-items:flex-end}
.eb-dims .eb-dim{flex:1;min-width:0}
.eb-dims .eb-dim-l{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.eb-dims .eb-dim-u{flex:0 0 74px}
.eb-dims input,.eb-dims select{width:100%}
/* extra-bag v2: sender fee consent — gates the Fund button */
.eb-agree{display:flex;align-items:flex-start;gap:8px;margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--warn-bg);font-size:13px;color:var(--ink);cursor:pointer}
.eb-agree input{margin-top:2px;flex:none}
/* extra-bag v2: DKIM .eml fast lane inside the receipt form */
.eb-fastlane{margin:12px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:6px;background:var(--green-light)}
.eb-fastlane .eb-fl-t{font-weight:700;font-size:13px;color:var(--green)}
.eb-fastlane .eb-fl-d{font-size:12px;color:var(--muted);margin:4px 0 8px}
.eb-dkim{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:700;color:var(--green);background:var(--green-light);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

/* Extra bag — how it works (000/u-get-bag-extra-bag-howto.html): emerald hero intro,
   five-step timeline (node + rail), who-pays-what money card with the amber note,
   sticky CTA bar. Cards at the app-wide 6px radius (pills stay 999px). */
.ebh-page { max-width: 720px; margin: 0 auto; padding: 18px 16px 0;
  --ebh-emerald:#15795C; --ebh-soft:#E7F2EC; --ebh-faint:#656e68; --ebh-amber-ink:#8E6520; }
html[data-theme="dark"] .ebh-page { --ebh-emerald:#4fb985; --ebh-soft:#173225; --ebh-faint:#727c75; --ebh-amber-ink:#e6a24a; }
.ebh-page h1 { font-size: 22px; margin-bottom: 12px; }
/* hero intro */
.ebh-hero { background: linear-gradient(150deg, #15795C 0%, #0C3B2E 100%); border-radius: 6px; padding: 18px; margin-bottom: 8px; }
.ebh-hero .ebh-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26); display: grid; place-items: center; margin-bottom: 12px; }
.ebh-hero p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.92); }
/* section labels ("FIVE STEPS" / "WHO PAYS WHAT") */
.ebh-l { font-family: var(--grotesk); font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ebh-faint); margin: 22px 4px 4px; }
/* timeline */
.ebh-steps { padding: 8px 0 4px; }
.ebh-step { display: flex; gap: 14px; padding: 10px 2px 18px; }
.ebh-rail { position: relative; flex: none; width: 34px; display: flex; justify-content: center; }
.ebh-node { width: 34px; height: 34px; border-radius: 50%; background: var(--ebh-emerald); color: #fff;
  display: grid; place-items: center; font-family: var(--grotesk); font-weight: 700; font-size: 15px;
  z-index: 2; box-shadow: 0 4px 10px -3px rgba(21,121,92,.6); }
.ebh-step:not(:last-child) .ebh-rail::after { content: ""; position: absolute; top: 34px; bottom: -18px;
  left: 50%; transform: translateX(-50%); width: 2px; background: linear-gradient(#CFE0D7, #E3EBE6); }
html[data-theme="dark"] .ebh-step:not(:last-child) .ebh-rail::after { background: linear-gradient(#2a3c33, #232b27); }
.ebh-txt { flex: 1; min-width: 0; padding-top: 2px; }
.ebh-t { font-family: var(--grotesk); font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.ebh-t .ebh-si { color: var(--ebh-emerald); flex: none; display: flex; }
.ebh-d { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 5px; }
.ebh-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--ebh-soft); color: var(--ebh-emerald);
  border-radius: 999px; padding: 3px 9px; font-family: var(--grotesk); font-weight: 600; font-size: 10.5px; margin-top: 8px; }
/* who pays what */
.ebh-money { background: var(--card); border: 1px solid #EEF1EF; border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; margin-top: 6px; }
html[data-theme="dark"] .ebh-money { border-color: var(--line); }
.ebh-mgroup { padding: 0 16px 4px; }
.ebh-mline ~ .ebh-mgroup { padding-bottom: 12px; }
.ebh-mlabel { font-family: var(--grotesk); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin: 10px 0 8px; }
.ebh-mlabel.pay { color: var(--ebh-amber-ink); }
.ebh-mlabel.get { color: var(--ebh-emerald); }
.ebh-mrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.ebh-op { width: 16px; text-align: center; font-family: var(--grotesk); font-weight: 700; color: var(--ebh-faint); flex: none; }
.ebh-lab { flex: 1; }
.ebh-lab small { display: block; color: var(--ebh-faint); font-size: 11px; margin-top: 1px; }
.ebh-mline { border-top: 1px dashed #D8E0DB; margin: 6px 16px 2px; }
html[data-theme="dark"] .ebh-mline { border-top-color: var(--line); }
.ebh-note { display: flex; gap: 9px; align-items: flex-start; background: #FBEFD9; border-top: 1px solid #EFDCB8; padding: 13px 16px; margin-top: 8px; }
.ebh-note .ebh-ni { color: var(--ebh-amber-ink); flex: none; margin-top: 1px; display: flex; }
.ebh-note p { margin: 0; font-size: 11.5px; color: #7a5e2e; line-height: 1.5; }
html[data-theme="dark"] .ebh-note { background: #2a2413; border-top-color: #3a3320; }
html[data-theme="dark"] .ebh-note p { color: #dcb26c; }
/* sticky CTA bar — spans the container edge-to-edge, blurs the page behind it */
.ebh-foot { position: sticky; bottom: 0; margin: 18px -16px 0; padding: 14px 18px;
  background: rgba(246,248,246,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); }
html[data-theme="dark"] .ebh-foot { background: rgba(11,13,12,.88); }
.ebh-cta { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 6px;
  padding: 14px; font-family: var(--grotesk); font-weight: 700; font-size: 15px; color: #fff; text-decoration: none;
  background: linear-gradient(145deg, #1A8A66, #0C3B2E); box-shadow: 0 12px 26px -10px rgba(12,59,46,.7); }
.eb-how { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--emerald, #15795C); text-decoration: none; }

/* VALIDATE:home-feed START — signed-in web home ("Option B"); delete this whole block to revert */
.feed-page { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }
.feed-head { margin-bottom: 8px; }
.feed-hi { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; letter-spacing: -.02em; }
.feed-sub { color: var(--t-muted, #5c6b64); margin: .35rem 0 0; }
.feed-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.feed-action { font-family: var(--inter); font-weight: 600; font-size: .9rem; padding: 10px 16px; border-radius: 10px; background: var(--green); color: #fff; text-decoration: none; }
.feed-action:hover { background: var(--green-dark, #145e37); text-decoration: none; }
.feed-action + .feed-action { background: var(--card, #fff); color: var(--ink); border: 1px solid var(--line, #e2e9e4); }
.feed-promos-sec { margin-top: 28px; }
.feed-promos-h { font-family: var(--grotesk); font-size: 1.05rem; margin: 0 0 14px; }
.feed-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.feed-promo { display: block; border: 1px solid var(--line, #e2e9e4); border-radius: 14px; overflow: hidden; background: var(--card, #fff); color: var(--ink); text-decoration: none; box-shadow: 0 4px 14px rgba(16,40,28,.06); transition: transform .15s ease, box-shadow .15s ease; }
a.feed-promo:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,40,28,.12); text-decoration: none; }
.feed-promo-img { display: block; width: 100%; height: 120px; object-fit: cover; background: linear-gradient(120deg, var(--green-light, #e6f3ec), rgba(242,163,65,.22)); }
.feed-promo-img.ph { height: 120px; }
.feed-promo-body { padding: 12px 14px 16px; }
.feed-promo-t { font-family: var(--grotesk); font-weight: 700; font-size: .98rem; line-height: 1.25; }
.feed-promo-s { color: var(--t-muted, #5c6b64); font-size: .86rem; margin-top: 4px; }
.feed-promo-cta { display: inline-block; margin-top: 10px; color: var(--green); font-weight: 700; font-size: .85rem; }
.feed-empty { color: var(--t-muted, #5c6b64); padding: 48px 0; text-align: center; }

/* ── Home DASHBOARD (000/u-get-bag-web-home-dashboard.html) — 6px card corners. ── */
.dash-page { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-head h1 { font-family: var(--grotesk); font-weight: 700; font-size: clamp(1.5rem, 3vw, 30px); margin: 0; letter-spacing: -.02em; }
.dash-head p { color: var(--t-muted, #6E7C76); margin: 5px 0 0; font-size: 14.5px; }
.dash-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-btn { border: none; cursor: pointer; border-radius: 6px; padding: 12px 20px; font-family: var(--grotesk); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: .16s; }
.dash-btn.pri { background: linear-gradient(145deg, var(--emerald-2, #1A8A66), var(--pine, #0C3B2E)); color: #fff; box-shadow: 0 10px 20px -8px rgba(12,59,46,.5); }
.dash-btn.pri:hover { transform: translateY(-1px); text-decoration: none; }
.dash-btn.gh { background: var(--card, #fff); color: var(--t-ink, #16241F); border: 1px solid var(--a-field, #D8E0DB); }
.dash-btn.gh:hover { background: var(--t-paper, #F4F6F4); text-decoration: none; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
@media (max-width: 760px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
.dash-stat { background: var(--card, #fff); border: 1px solid var(--line, #EEF1EF); border-radius: 6px; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); padding: 16px; }
.dash-si { width: 36px; height: 36px; border-radius: 6px; background: var(--emerald-soft, #E7F2EC); color: var(--emerald, #15795C); display: grid; place-items: center; margin-bottom: 11px; }
.dash-stat.amber .dash-si { background: var(--amber-soft, #FBEFD9); color: var(--amber-ink, #8E6520); }
.dash-sn { font-family: var(--grotesk); font-weight: 700; font-size: 24px; line-height: 1; color: var(--t-ink, #16241F); }
.dash-sl { font-size: 12px; color: var(--t-muted, #6E7C76); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-sechead { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 14px; }
.dash-sechead h2 { font-family: var(--grotesk); font-size: 18px; font-weight: 700; display: flex; align-items: center; color: var(--t-ink, #16241F); }
.dash-now { font-family: var(--grotesk); font-size: 11px; font-weight: 700; color: var(--amber, #E29A38); letter-spacing: .04em; margin-left: 8px; }
.dash-link { font-family: var(--grotesk); font-weight: 600; font-size: 13px; color: var(--emerald, #15795C); text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-pkg { display: flex; align-items: center; gap: 15px; background: var(--card, #fff); border: 1px solid var(--line, #EEF1EF); border-radius: 6px; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); padding: 15px 17px; margin-bottom: 12px; transition: .16s; text-decoration: none; color: inherit; }
.dash-pkg:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(16,36,28,.2); text-decoration: none; }
.dash-badge { width: 52px; height: 52px; border-radius: 6px; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--grotesk); font-weight: 700; font-size: 15px; }
.dash-pinfo { flex: 1; min-width: 0; }
.dash-pt { font-family: var(--grotesk); font-weight: 600; font-size: 15.5px; color: var(--t-ink, #16241F); }
.dash-route { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t-muted, #6E7C76); margin-top: 4px; flex-wrap: wrap; }
.dash-code { font-family: var(--grotesk); font-weight: 600; color: var(--t-ink, #16241F); }
.dash-arrow { color: var(--emerald, #15795C); }
.dash-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dash-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--t-paper, #F4F6F4); border: 1px solid var(--line, #EBEEEC); border-radius: 999px; padding: 3px 9px; font-size: 11px; color: var(--t-muted, #6E7C76); }
.dash-earn { text-align: right; flex: none; }
.dash-el { font-family: var(--grotesk); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-faint, #9aa6a0); }
.dash-ev { font-family: var(--grotesk); font-weight: 700; font-size: 20px; color: var(--emerald, #15795C); margin-top: 2px; }
.dash-empty { color: var(--t-muted, #6E7C76); padding: 40px 0; text-align: center; background: var(--card, #fff); border: 1px solid var(--line, #EEF1EF); border-radius: 6px; }
.dash-side { display: flex; flex-direction: column; gap: 18px; }
.dash-promo { position: relative; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #22A578 0%, #178A64 52%, #0F6B4E 100%); box-shadow: 0 14px 30px -12px rgba(15,107,78,.55); }
.dash-promo-in { position: relative; padding: 20px; }
.dash-promo-ic { width: 74px; height: 74px; border-radius: 6px; background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.28); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }
.dash-promo h3 { font-family: var(--grotesk); color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.dash-promo p { color: rgba(255,255,255,.86); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.dash-promo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: #fff; color: var(--pine, #0C3B2E); border-radius: 999px; padding: 9px 15px; font-family: var(--grotesk); font-weight: 700; font-size: 13px; text-decoration: none; }
.dash-panel { background: var(--card, #fff); border: 1px solid var(--line, #EEF1EF); border-radius: 6px; box-shadow: 0 1px 2px rgba(16,36,28,.04), 0 8px 24px rgba(16,36,28,.06); padding: 18px; }
.dash-panel h3 { font-family: var(--grotesk); font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--t-ink, #16241F); }
.dash-task { display: flex; align-items: center; gap: 11px; padding: 9px 0; text-decoration: none; color: inherit; }
.dash-task + .dash-task { border-top: 1px solid var(--line, #EBEEEC); }
.dash-tc { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.dash-task.done .dash-tc { background: var(--emerald-soft, #E7F2EC); color: var(--emerald, #15795C); }
.dash-task.todo .dash-tc { background: var(--amber-soft, #FBEFD9); color: var(--amber-ink, #8E6520); }
.dash-tt { flex: 1; font-size: 13px; color: var(--t-ink, #16241F); }
.dash-task.done .dash-tt { color: var(--t-muted, #6E7C76); text-decoration: line-through; }
.dash-tgo { color: var(--t-faint, #9aa6a0); }
/* VALIDATE:home-feed END */

/* ── operator promo slot (admin → Promo cards placements) ─────────────────── */
.promo-slot{margin:22px 0 6px;display:flex;flex-direction:column;gap:10px}
.promo-slot-head{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted,#6b7a72);margin-top:8px}
.promo-slot-card{display:block;border:1px solid var(--line,#dbe2dd);border-radius:10px;background:var(--surface,#fff);overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(16,28,23,.06)}
a.promo-slot-card:hover{border-color:var(--green,#1B7F4B)}
.promo-slot-img{width:100%}
.promo-slot-row{display:flex;gap:11px;padding:12px 14px;align-items:flex-start}
.promo-slot-row .promo-slot-body{padding:0}
.promo-slot-thumb{flex:none;border-radius:10px;background-color:rgba(27,127,75,.1)}
.promo-slot-fill{position:relative;display:flex;flex-direction:column;background-size:cover;background-position:center}
.promo-slot-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,24,18,.62),rgba(10,24,18,.08) 62%)}
.promo-slot-body{padding:12px 14px}
.promo-slot-title{font-weight:700;font-size:14px}
.promo-slot-sub{font-size:12px;color:var(--t-muted,#6b7a72);margin-top:3px}
.promo-slot-text{font-size:12.5px;color:var(--t-muted,#5b6a63);margin-top:6px;line-height:1.5}
.promo-slot-cta{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--green,#1B7F4B)}

/* ===== Security page redesign — 000/u-get-bag-web-privacy-security.html + -active-sessions.html ===== */
.sx-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-top:6px}
@media(max-width:900px){.sx-cols{grid-template-columns:1fr}}
.sx-col{display:flex;flex-direction:column;gap:20px}
.sx-col>.sx-card:last-child{flex:1}                     /* stretch last card so both columns bottom-align */
.sx-card{background:#fff;border:1px solid #EEF1EF;border-radius:18px;box-shadow:0 1px 2px rgba(16,36,28,.04),0 8px 24px rgba(16,36,28,.06);overflow:hidden}
.sx-full{margin-top:20px}
.sx-chead{display:flex;align-items:flex-start;gap:13px;padding:18px 22px;border-bottom:1px solid #EBEEEC}
.sx-si{width:38px;height:38px;border-radius:11px;background:#E7F2EC;color:#15795C;display:grid;place-items:center;flex:none}
.sx-chead h2{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin:0}
.sx-chead p{font-size:12.5px;color:#6E7C76;margin-top:3px;font-weight:400}
.sx-cbody{padding:20px 22px 22px}
.sx-field{margin-bottom:14px}
.sx-flabel{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px}
.sx-inw{position:relative;display:flex;align-items:center}
.sx-inw input{width:100%;border:1px solid #D8E0DB;background:#fff;border-radius:11px;padding:11px 44px 11px 13px;font-size:14.5px;color:#16241F;outline:none;transition:.16s;font-family:inherit}
.sx-inw input:focus{border-color:#15795C;box-shadow:0 0 0 3px #E7F2EC}
.sx-inw.ok input{border-color:#bfe0cf}
.sx-inw.err input{border-color:#B4524A;box-shadow:0 0 0 3px #FBEEEC}
.sx-eye{position:absolute;right:6px;width:34px;height:34px;border:none;background:none;display:grid;place-items:center;color:#6E7C76;cursor:pointer;border-radius:9px}
.sx-eye:hover{background:#F4F6F4}
.sx-forgot{display:inline-block;margin-top:8px;font-weight:600;font-size:12.5px;color:#15795C;text-decoration:none}
.sx-forgot:hover{text-decoration:underline}
.sx-strength{margin:11px 0 4px}
.sx-bars{display:flex;gap:5px}
.sx-bars span{flex:1;height:5px;border-radius:99px;background:#E7EAE8;transition:.2s}
.sx-slbl{font-weight:600;font-size:11.5px;margin-top:7px;color:#9aa6a0}
.sx-rules{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.sx-rule{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#6E7C76;transition:.14s}
.sx-rule .rc{width:15px;height:15px;border-radius:50%;border:1.6px solid #D8E0DB;flex:none;display:grid;place-items:center;transition:.14s}
.sx-rule.met{color:#15795C}
.sx-rule.met .rc{background:#15795C;border-color:#15795C}
.sx-rule .rc svg{opacity:0;transition:.14s}
.sx-rule.met .rc svg{opacity:1}
.sx-match{display:none;align-items:center;gap:7px;margin-top:9px;font-weight:600;font-size:12px}
.sx-match.show{display:flex}
.sx-match.good{color:#15795C}
.sx-match.bad{color:#B4524A}
.sx-req{font-size:11.5px;color:#6E7C76;margin:10px 0 0;display:flex;align-items:center;gap:7px}
.sx-req .d{width:6px;height:6px;border-radius:50%;background:#E29A38}
.sx-req.done{color:#15795C}
.sx-req.done .d{background:#1A8A66}
.sx-btn{border:none;cursor:pointer;border-radius:12px;padding:12px 18px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s;font-family:inherit}
.sx-btn.pri{background:linear-gradient(145deg,#1A8A66,#0C3B2E);color:#fff;box-shadow:0 10px 20px -8px rgba(12,59,46,.6)}
.sx-btn.pri:hover{transform:translateY(-1px)}
.sx-btn.pri:disabled{background:#E7EAE8;color:#9aa6a0;box-shadow:none;cursor:not-allowed;transform:none}
.sx-btn.gh{background:#fff;color:#16241F;border:1px solid #D8E0DB}
.sx-btn.gh:hover{background:#F4F6F4}
.sx-btn.full{width:100%;margin-top:4px}
.sx-pk{text-align:center;padding:8px 8px 4px}
.sx-pk .il{width:64px;height:64px;border-radius:18px;background:#E7F2EC;color:#15795C;display:grid;place-items:center;margin:0 auto 12px}
.sx-pk h3{font-size:15px;font-weight:700;margin:0}
.sx-pk .sub{font-size:12.5px;color:#6E7C76;margin:5px auto 0;max-width:36ch;line-height:1.5}
.sx-benefits{text-align:left;margin:16px 0;display:flex;flex-direction:column;gap:11px}
.sx-benefit{display:flex;gap:11px;align-items:flex-start}
.sx-benefit .bi{width:32px;height:32px;border-radius:9px;background:#E7F2EC;color:#15795C;display:grid;place-items:center;flex:none}
.sx-benefit .b1{font-weight:600;font-size:13px}
.sx-benefit .b2{font-size:11.5px;color:#6E7C76;margin-top:1px;line-height:1.4}
.sx-pklist{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;text-align:left}
.sx-mrow{display:flex;align-items:center;gap:13px;padding:14px 0}
.sx-mrow+.sx-mrow{border-top:1px solid #EBEEEC}
.sx-mrow .ic{width:38px;height:38px;border-radius:11px;background:#E7F2EC;color:#15795C;display:grid;place-items:center;flex:none}
.sx-mrow .mt{flex:1;min-width:0}
.sx-mrow .mk{font-weight:600;font-size:14.5px}
.sx-mrow .mv{font-size:12px;color:#6E7C76;margin-top:2px}
.sx-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;font-weight:600;font-size:10.5px;flex:none;border:none}
.sx-pill.ok{background:#E7F2EC;color:#15795C}
.sx-pill.off{background:#F4F6F4;color:#9aa6a0;cursor:pointer}
.sx-tog{display:flex;align-items:center;gap:13px;border:1px solid #EBEEEC;border-radius:13px;padding:14px;background:#FCFDFC;transition:.16s}
.sx-tog.on{border-color:#CFE4D8;background:#E7F2EC}
.sx-tog .tt{flex:1}
.sx-tog .t1{font-weight:600;font-size:14px}
.sx-tog .t2{font-size:11.5px;color:#6E7C76;margin-top:3px;line-height:1.45}
.sx-sw{width:46px;height:27px;border-radius:999px;background:#cfd8d3;position:relative;flex:none;cursor:pointer;transition:.18s;border:none;padding:0}
.sx-sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s}
.sx-sw.on{background:#15795C}
.sx-sw.on::after{transform:translateX(19px)}
.sx-sw.dis{opacity:.5;cursor:not-allowed}
.sx-prereq{display:flex;gap:9px;align-items:flex-start;background:#FBEFD9;border:1px solid #EFDCB8;border-radius:12px;padding:11px 13px;margin-top:12px}
.sx-prereq svg{color:#8E6520;flex:none;margin-top:1px}
.sx-prereq p{font-size:11.5px;color:#7a5e2e;line-height:1.5}
.sx-prereq a{color:#8E6520;font-weight:600}
.sx-method{display:flex;align-items:center;gap:12px;border:1px solid #EBEEEC;border-radius:13px;padding:13px;margin-top:12px}
.sx-method .mi{width:36px;height:36px;border-radius:10px;background:#E7F2EC;color:#15795C;display:grid;place-items:center;flex:none}
.sx-method .mt{flex:1;min-width:0}
.sx-method .m1{font-weight:600;font-size:13.5px}
.sx-method .m2{font-size:11.5px;color:#6E7C76;margin-top:2px;line-height:1.45}
.sx-secl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#9aa6a0;margin:20px 2px 12px}
.sx-s{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid #EEF1EF;border-radius:15px;box-shadow:0 1px 2px rgba(16,36,28,.04),0 8px 24px rgba(16,36,28,.06);padding:15px 17px;margin-bottom:11px}
.sx-s.current{border-color:#CFE4D8;background:linear-gradient(0deg,#FBFEFC,#fff)}
.sx-s .ic{width:44px;height:44px;border-radius:12px;background:#E7F2EC;color:#15795C;display:grid;place-items:center;flex:none}
.sx-s.current .ic{background:#15795C;color:#fff}
.sx-s .info{flex:1;min-width:0}
.sx-s .top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sx-s .dev{font-weight:600;font-size:15px}
.sx-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-weight:600;font-size:10.5px}
.sx-badge.cur{background:#E7F2EC;color:#15795C}
.sx-badge.cur .dot{width:6px;height:6px;border-radius:50%;background:#1A8A66}
.sx-badge.grp{background:#F4F6F4;color:#6E7C76;border:1px solid #EBEEEC}
.sx-s .meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6E7C76;margin-top:4px;flex-wrap:wrap}
.sx-s .meta .sep{color:#cdd6d1}
.sx-s .act{flex:none;display:flex;gap:9px}
.sx-sbtn{border:1px solid #D8E0DB;background:#fff;border-radius:10px;padding:9px 15px;cursor:pointer;font-weight:600;font-size:13px;color:#16241F;transition:.14s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:inherit}
.sx-sbtn:hover{background:#F4F6F4}
.sx-sbtn.rev{color:#B4524A;border-color:#F0DAD7}
.sx-sbtn.rev:hover{background:#FBEEEC}
.sx-note{display:flex;gap:9px;align-items:flex-start;background:#F3F8F5;border:1px solid #DCEBE2;border-radius:13px;padding:13px 15px;margin-top:16px}
.sx-note svg{color:#15795C;flex:none;margin-top:1px}
.sx-note p{font-size:12px;color:#41594e;line-height:1.5}
.sx-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sx-revokeall{border:1px solid #F0DAD7;background:#fff;color:#B4524A;border-radius:11px;padding:10px 15px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:8px;transition:.14s;flex:none;font-family:inherit}
.sx-revokeall:hover{background:#FBEEEC}
@media(max-width:560px){.sx-s{flex-wrap:wrap}.sx-s .act{width:100%;margin-top:6px}.sx-s .act .sx-sbtn{flex:1;justify-content:center}}

/* ===== Security HUB (000/u-get-bag-security.html) — status summary + grouped nav rows.
   Card corners 6px (ground rule). Danger rows keep rose ink so text stays legible. ===== */
.sec-wrap{max-width:640px;margin:6px 0 0}
.sec-back{display:inline-block;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--t-muted,#5d6b64);text-decoration:none}
.sec-back:hover{color:var(--emerald,#15795C)}
.sec-l{font-family:var(--grotesk);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t-faint,#9aa6a0);margin:20px 4px 10px}
/* status summary */
.sec-status{background:linear-gradient(150deg,var(--emerald,#15795C) 0%,var(--pine,#0C3B2E) 100%);border-radius:6px;padding:16px 17px;color:#fff;position:relative;overflow:hidden}
.sec-status-row{display:flex;align-items:center;gap:13px}
.sec-ring{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;flex:none;color:#fff}
.sec-st1{font-family:var(--grotesk);font-weight:700;font-size:16px}
.sec-st2{font-size:11.5px;color:rgba(255,255,255,.82);margin-top:2px}
.sec-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.2);margin-top:14px;overflow:hidden;position:relative}
.sec-bar span{position:absolute;inset:0 40% 0 0;background:#F0B45F;border-radius:99px;transition:right .3s}
.sec-todo{display:flex;align-items:center;gap:7px;margin-top:11px;background:rgba(255,255,255,.12);border-radius:6px;padding:8px 11px;text-decoration:none;color:#fff}
.sec-todo .tt{flex:1;font-size:11.5px;color:rgba(255,255,255,.96);line-height:1.24}
.sec-todo .tt b{font-weight:700;color:#fff}
.sec-todo .sec-chev{color:rgba(255,255,255,.7)}
/* grouped list card */
.sec-card{background:var(--card,#fff);border:1px solid var(--line,#EEF1EF);border-radius:6px;box-shadow:0 1px 2px rgba(16,36,28,.04),0 8px 24px rgba(16,36,28,.06);overflow:hidden}
.sec-row{display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer;transition:.14s;position:relative;width:100%;text-align:left;text-decoration:none;color:inherit;background:none;border:none;font-family:inherit}
.sec-row:hover{background:var(--t-paper,#fafbfa)}
.sec-row+.sec-row::before{content:"";position:absolute;left:62px;right:0;top:0;border-top:1px solid var(--line,#EBEEEC)}
.sec-row.danger:hover{background:#FDF6F5}
.sec-ic{width:44px;height:44px;border-radius:6px;background:var(--emerald-soft,#E7F2EC);color:var(--emerald,#15795C);display:grid;place-items:center;flex:none}
.sec-ic.danger{background:var(--rose-soft,#FBEEEC);color:var(--rose,#B4524A)}
.sec-rt{flex:1;min-width:0}
.sec-k{font-family:var(--grotesk);font-weight:600;font-size:16px;color:var(--t-ink,#16241F)}
.sec-k.danger{color:var(--rose,#B4524A)}
.sec-v{font-size:12px;color:var(--t-muted,#6E7C76);margin-top:2px;line-height:1.4}
.sec-rr{display:flex;align-items:center;gap:9px;flex:none}
.sec-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-family:var(--grotesk);font-weight:600;font-size:10px}
.sec-pill.ok{background:var(--emerald-soft,#E7F2EC);color:var(--emerald,#15795C)}
.sec-pill.off{background:var(--amber-soft,#FBEFD9);color:var(--amber-ink,#8E6520)}
.sec-chev{color:#c3ccc7;display:grid;place-items:center}

/* ===== Delete-account page (000/u-get-bag-delete-account.html). Rose/keep cards use DARK
   ink so text is legible; corners 6px. ===== */
.da-page{max-width:560px;margin:0 auto;padding:6px 0 40px}
.da-hero{text-align:center;padding:8px 0 6px}
.da-hic{width:64px;height:64px;border-radius:6px;background:var(--rose-soft,#FBEEEC);color:var(--rose,#B4524A);display:inline-grid;place-items:center;margin:0 auto 14px}
.da-hero h2{font-family:var(--grotesk);font-size:22px;font-weight:700;color:var(--t-ink,#16241F)}
.da-hero p{font-size:13px;color:var(--t-muted,#6E7C76);margin:7px auto 0;line-height:1.55;max-width:42ch}
.da-l{font-family:var(--grotesk);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t-faint,#9aa6a0);margin:22px 4px 10px}
.da-card{background:var(--card,#fff);border:1px solid var(--line,#EEF1EF);border-radius:6px;box-shadow:0 1px 2px rgba(16,36,28,.04),0 8px 24px rgba(16,36,28,.06);overflow:hidden}
.da-li{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;position:relative}
.da-li+.da-li::before{content:"";position:absolute;left:52px;right:0;top:0;border-top:1px solid var(--line,#EBEEEC)}
.da-lic{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;flex:none}
.da-li.del .da-lic{background:var(--rose-soft,#FBEEEC);color:var(--rose,#B4524A)}
.da-li.keep .da-lic{background:var(--emerald-soft,#E7F2EC);color:var(--emerald,#15795C)}
.da-lt{flex:1}
.da-l1{font-family:var(--grotesk);font-weight:600;font-size:13.5px;color:var(--t-ink,#16241F)}
.da-l2{font-size:11.5px;color:var(--t-muted,#6E7C76);margin-top:2px;line-height:1.45}
.da-grace{display:flex;gap:11px;align-items:flex-start;background:#F3F8F5;border:1px solid #DCEBE2;border-radius:6px;padding:13px 14px;margin-top:14px}
.da-grace>span{color:var(--emerald,#15795C);flex:none;margin-top:1px;display:grid;place-items:center}
.da-grace p{font-size:11.5px;color:#41594e;line-height:1.55}
.da-grace b{font-weight:600;color:var(--t-ink,#16241F)}
.da-f{margin-top:20px}
.da-fl{display:block;font-family:var(--grotesk);font-size:12.5px;font-weight:600;margin-bottom:8px;color:var(--t-ink,#16241F)}
.da-cf{margin-top:16px}
.da-hint{font-size:11.5px;color:var(--t-muted,#6E7C76);margin-bottom:8px;line-height:1.45}
.da-hint b{color:var(--t-ink,#16241F);font-family:var(--grotesk);letter-spacing:.03em}
.da-typed{width:100%;border:1px solid var(--field-line,#D8E0DB);background:var(--card,#fff);border-radius:6px;padding:13px 15px;font-family:var(--grotesk);font-weight:600;font-size:15px;letter-spacing:.05em;color:var(--t-ink,#16241F);outline:none;transition:.16s}
.da-typed:focus{border-color:var(--rose,#B4524A);box-shadow:0 0 0 3px var(--rose-soft,#FBEEEC)}
.da-typed.ok{border-color:#bfe0cf;box-shadow:0 0 0 3px var(--emerald-soft,#E7F2EC)}
.da-actions{margin-top:22px}
.da-del{width:100%;border:none;cursor:pointer;border-radius:6px;padding:16px;font-family:var(--grotesk);font-weight:700;font-size:15.5px;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(90deg,#C65A50,#8E3B34);color:#fff;box-shadow:0 12px 26px -10px rgba(180,82,74,.6)}
.da-del:hover:not(:disabled){background:linear-gradient(90deg,#b9524a,#7f342e);transform:translateY(-1px);box-shadow:0 16px 30px -10px rgba(180,82,74,.68)}
.da-del:disabled{background:linear-gradient(90deg,#E3C7C3,#E3C7C3);color:#fff;box-shadow:none;cursor:not-allowed;opacity:.9}
.da-del svg{width:17px;height:17px}
.da-keep{width:100%;border:1px solid var(--field-line,#D8E0DB);background:var(--card,#fff);cursor:pointer;border-radius:6px;padding:15px;margin-top:10px;font-family:var(--grotesk);font-weight:700;font-size:15px;color:var(--t-ink,#16241F);transition:.14s}
.da-keep:hover{background:var(--t-paper,#F4F6F4)}
.da-gate{text-align:center;font-size:11.5px;color:var(--t-muted,#6E7C76);margin-top:12px}
.da-gate.hot{color:var(--rose,#B4524A)}

/* ── Verify your photo (redesign per 000/u-get-bag-verify-photo.html; cards 6px) ── */
.vp-wrap{max-width:520px;margin:0 auto}
.vp-hero{text-align:center;padding:8px 0 4px}
.vp-selfie{width:132px;height:132px;margin:0 auto 16px;position:relative}
.vp-selfie .ring{position:absolute;inset:0;border-radius:50%;border:2px dashed #CDE3D6}
.vp-selfie .frame{position:absolute;inset:14px;border-radius:50%;overflow:hidden;background:var(--emerald-soft,#E7F2EC);display:grid;place-items:end center}
.vp-selfie .cambadge{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:12px;background:var(--emerald,#15795C);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(12,59,46,.5);border:2px solid var(--paper,#F4F6F4)}
.vp-hero h2{font-family:var(--grotesk);font-size:20px;font-weight:700}
.vp-hero p{font-size:13px;color:var(--t-muted,#6E7C76);margin-top:7px;line-height:1.55;max-width:33ch;margin-left:auto;margin-right:auto}
.vp-status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;margin-top:14px;font-family:var(--grotesk);font-weight:600;font-size:12px;background:var(--amber-soft,#FBEFD9);color:var(--amber-ink,#8E6520)}
.vp-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.vp-status.ok{background:var(--emerald-soft,#E7F2EC);color:var(--emerald,#15795C)}
.vp-status.rej{background:var(--rose-soft,#FBEEEC);color:var(--rose,#B4524A)}
.vp-l{font-family:var(--grotesk);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t-faint,#9aa6a0);margin:22px 4px 10px}
.vp-card{background:var(--card,#fff);border:1px solid #EEF1EF;border-radius:6px;box-shadow:0 1px 2px rgba(16,36,28,.04),0 8px 24px rgba(16,36,28,.06);overflow:hidden}
.vp-li{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;position:relative}
.vp-li+.vp-li::before{content:"";position:absolute;left:52px;right:0;top:0;border-top:1px solid var(--line,#EBEEEC)}
.vp-li .lic{width:32px;height:32px;border-radius:10px;background:var(--emerald-soft,#E7F2EC);color:var(--emerald,#15795C);display:grid;place-items:center;flex:none}
.vp-li .l1{font-family:var(--grotesk);font-weight:600;font-size:13.5px}
.vp-li .l2{font-size:11.5px;color:var(--t-muted,#6E7C76);margin-top:2px;line-height:1.45}
.vp-consent{display:flex;gap:12px;align-items:flex-start;background:var(--card,#fff);border:1px solid var(--field-line,#D8E0DB);border-radius:6px;padding:14px;margin-top:18px;cursor:pointer;transition:.16s}
.vp-consent.on{border-color:#BFE0CF;background:#FBFEFC}
.vp-cbox{width:24px;height:24px;border-radius:7px;border:2px solid var(--field-line,#D8E0DB);flex:none;display:grid;place-items:center;transition:.14s;background:#fff}
.vp-consent.on .vp-cbox{background:var(--emerald,#15795C);border-color:var(--emerald,#15795C)}
.vp-cbox svg{opacity:0;transition:.14s}.vp-consent.on .vp-cbox svg{opacity:1}
.vp-consent .ct{font-size:13px;line-height:1.5}
.vp-consent .ct a{color:var(--emerald,#15795C);font-weight:600;text-decoration:none;border-bottom:1px solid #BFE0CF}
.vp-actions{margin-top:18px}
/* same 145deg gradient + 13px radius + 15px pad as the "Post a trip" pill (.post-btn) */
.vp-btn{width:100%;border:none;cursor:pointer;border-radius:13px;padding:15px;font-family:var(--inter);font-weight:600;font-size:15px;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(145deg,var(--emerald-2,#1A8A66),var(--pine,#0C3B2E));color:#fff;box-shadow:0 10px 22px -8px rgba(12,59,46,.55)}
.vp-btn:hover:not(:disabled){transform:translateY(-1px)}
.vp-btn:disabled{background:#E7EAE8;color:var(--t-faint,#9aa6a0);box-shadow:none;cursor:not-allowed;transform:none}
.vp-btn.ghost{background:none;color:var(--t-muted,#6E7C76);border:1px solid var(--line,#EBEEEC);box-shadow:none;margin-top:8px}
.vp-btn svg{width:17px;height:17px}
.vp-gate{text-align:center;font-size:11.5px;color:var(--t-muted,#6E7C76);margin-top:11px;display:flex;align-items:center;justify-content:center;gap:7px}
.vp-gate .d{width:6px;height:6px;border-radius:50%;background:var(--amber,#E29A38);flex:none}
.vp-gate.ready{color:var(--emerald,#15795C)}.vp-gate.ready .d{background:var(--emerald-2,#1A8A66)}
.vp-revoke{text-align:center;font-size:11px;color:var(--t-faint,#9aa6a0);margin-top:16px;line-height:1.5}
.vp-revoke a{color:var(--t-muted,#6E7C76);text-decoration:underline;cursor:pointer}