/* Bento Dashboard Styles */
  .bento-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:24px; }
  .bento-grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:24px; }
  .bento-card { position:relative; overflow:hidden; border-radius:16px; padding:16px 14px; cursor:pointer; background:rgba(255,255,255,0.03); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.06); transition:transform 0.2s, box-shadow 0.2s; display:flex; flex-direction:column; justify-content:center; min-height:100px; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
  .bento-card:active { transform:scale(0.96); }
  .bento-card .bento-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; position:relative; z-index:2; line-height:1.1; }
  .bento-card .bento-val { font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; position:relative; z-index:2; margin-top:8px; opacity:0.9; }
  .bento-badge { position:absolute; top:12px; right:12px; border-radius:999px; padding:2px 6px; font-size:10px; font-weight:900; box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index:3; }
  
  .bento-red { border-color:rgba(201,59,0,0.5); background:linear-gradient(135deg, rgba(201,59,0,0.1), transparent); box-shadow:0 8px 32px rgba(201,59,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
  .bento-blue { border-color:rgba(74,139,191,0.5); background:linear-gradient(135deg, rgba(74,139,191,0.1), transparent); box-shadow:0 8px 32px rgba(74,139,191,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
  .bento-green { border-color:rgba(45,122,58,0.4); background:linear-gradient(135deg, rgba(45,122,58,0.1), transparent); box-shadow:0 8px 32px rgba(45,122,58,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
  .bento-purple { border-color:rgba(139,109,184,0.5); background:linear-gradient(135deg, rgba(139,109,184,0.1), transparent); box-shadow:0 8px 32px rgba(139,109,184,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
  .bento-orange { border-color:rgba(211,84,0,0.5); background:linear-gradient(135deg, rgba(211,84,0,0.1), transparent); box-shadow:0 8px 32px rgba(211,84,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
  .bento-yellow { border-color:rgba(212,160,23,0.5); background:linear-gradient(135deg, rgba(212,160,23,0.1), transparent); box-shadow:0 8px 32px rgba(212,160,23,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
  :root {
    --red: #c93b00;
    --red-hover: #a83000;
    --amber: #c97a00;
    --gold: #d4a017;
    --gold-bright: #f0bf3a;
    --gold-deep: #6a4a00;
    /* Mid-amber used on stale-vendor badges + "unclaimed" tags. Mode-aware
       so light mode gets a darker tone that's readable on cream. */
    --stale-amber: #e6c14a;
    --bg: #0d0908;
    --layer: #140e0b;
    --layer-2: #1c1410;
    --border: #2e1e14;
    --border-mid: #3d2a1e;
    --text: #f5e6c5;
    --cream: #f5e6c5;
    --muted: #a89578;
    --accent-dark: #3d1500;
    --green: #4a7a40;
    /* Catering theme (purple / aubergine) — overridden in body.light below */
    --cater-accent:        #8b6db8;
    --cater-accent-text:   #c4a4e8;
    --cater-accent-soft:   rgba(180,144,232,0.10);
    --cater-accent-border: rgba(180,144,232,0.45);
    --cater-accent-strong: rgba(180,144,232,0.22);
    --cater-cta-grad:      linear-gradient(135deg, #b294e0, #8b6db8);
    --cater-cta-shadow:    0 8px 20px -8px rgba(180,144,232,0.6);
    --font-logo: 'Barlow', sans-serif;
    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: 'Barlow', sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .stage-label {
    position: fixed; top: 18px; left: 20px;
    color: var(--muted); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  }
  .phone {
    width: 390px; height: 844px;
    background: #080504; border-radius: 52px; padding: 11px;
    box-shadow: 0 32px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
    position: relative;
  }
  .screen {
    width: 100%; height: 100%;
    background: var(--bg);
    border-radius: 42px; overflow: hidden; position: relative;
    display: flex; flex-direction: column;
  }
  .notch {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 30px; background: #080504; border-radius: 18px; z-index: 1000;
  }
  @media (max-width: 700px) {
    body { padding: 0; align-items: stretch; justify-content: stretch; }
    .stage-label { display: none; }
    .phone { width:100%; height:100vh; height:100dvh; border-radius:0; padding:0; box-shadow:none; background:var(--bg); }
    .screen { border-radius: 0; }
    .notch { display: none; }
    .header { padding-top: calc(env(safe-area-inset-top,20px) + 56px); }
    .bottom-nav { padding-bottom: calc(env(safe-area-inset-bottom,10px) + 10px); }
  }

  /* ── HEADER ── */
  .header {
    background: rgba(13,9,8,0.97);
    border-bottom: 1px solid var(--border);
    padding: 84px 18px 18px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }
  .logo {
    font-family: var(--font-logo); font-size: 31px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; line-height: 1; cursor: pointer;
  }
  .logo .craw { color: var(--red); }
  .logo .daddy { color: var(--text); }
  .header-right { display: flex; gap: 6px; align-items: center; }
  .season-badge {
    display: flex; align-items: center; gap: 5px;
    border-radius: 4px; padding: 4px 9px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  }
  .season-badge.in {
    background: rgba(74,122,64,0.15);
    border: 1px solid rgba(74,122,64,0.4);
    color: #7bc870;
  }
  .season-badge.out {
    background: rgba(122,96,80,0.12);
    border: 1px solid rgba(122,96,80,0.3);
    color: var(--muted);
  }
  .season-dot { width: 6px; height: 6px; border-radius: 50%; }
  .season-badge.in .season-dot { background: #7bc870; }
  .season-badge.out .season-dot { background: var(--muted); }
  .pill {
    background: transparent; border: 1px solid var(--border-mid); color: var(--muted);
    padding: 5px 11px; border-radius: 4px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    cursor: pointer; font-family: var(--font-body); transition: border-color .12s ease, color .12s ease;
  }
  .pill:hover, .pill.active-filter { border-color: var(--red); color: var(--red); }
  .add-spot-pill {
    background: transparent; border: 1.5px solid var(--red); color: var(--red);
    padding: 6px 14px; border-radius: 20px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    cursor: pointer; font-family: var(--font-body); transition: background .15s ease, color .15s ease; white-space: nowrap;
  }
  .add-spot-pill:hover { background: var(--red); color: #fff; }
  .header-account {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--layer-2); border: 1px solid var(--border-mid);
    color: var(--text-dim);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease, border-color .15s ease; flex-shrink: 0;
  }
  .header-account:hover { background: var(--layer-3); color: var(--text); border-color: var(--border); }
  .header-account svg { width: 16px; height: 16px; }
  .header-account.signed-in { border-color: var(--red); color: var(--red); }
  /* Header bell — same chip shape as the account button, with a numeric badge
     when there are unread notifications. Hidden by default; .has-unread
     reveals it. */
  .header-notif {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--layer-2); border: 1px solid var(--border-mid);
    color: var(--text-dim);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease, border-color .15s ease; flex-shrink: 0;
    position: relative;
  }
  .header-notif.has-unread { display: inline-flex; }
  .header-notif:hover { background: var(--layer-3); color: var(--text); border-color: var(--border); }
  .header-notif svg { width: 16px; height: 16px; }
  .header-notif.has-unread { border-color: var(--red); color: var(--red); }
  .header-notif .notif-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--red); color: #fff;
    border-radius: 999px; padding: 0 5px;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg);
    line-height: 1;
  }

  /* ── FEATURE STRIP (home, gold) ── */
  /* Featured spot — floating gold-outlined banner at the bottom of the map
     (Instacart-style): logo · name + price/lb · miles + gold arrow. */
  .feature-strip {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 450;
    background: var(--layer); border: 1.5px solid var(--gold); border-radius: 16px;
    padding: 10px 12px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.7);
    cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease;
  }
  .feature-strip:active { transform: scale(0.985); }
  body.light .feature-strip { background: #fffaf0; border-color: #d4a017; box-shadow: 0 12px 30px -10px rgba(106,74,0,0.4); }
  .feature-thumb {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    background: #2a1d00; border: 1px solid var(--gold-deep);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
  }
  .feature-thumb img { width: 100%; height: 100%; object-fit: cover; }
  body.light .feature-thumb { background: #fff3d6; border-color: #d4a017; }
  .feature-text { flex: 1; min-width: 0; }
  .feature-tag { color: var(--gold-bright); font-size: 8.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 2px; }
  .feature-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
  .feature-meta { color: var(--gold-bright); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feature-meta .hi { color: var(--gold-bright); font-weight: 700; }
  .feature-end { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding-left: 4px; }
  .feature-dist { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
  .feature-arrow { color: var(--gold-bright); font-size: 26px; line-height: 1; flex-shrink: 0; }

  /* ── FEATURE LIST CARD (inside List view) ── */
  .feature-list-card {
    position: relative;
    background: linear-gradient(135deg, rgba(212,160,23,0.12), rgba(212,160,23,0.03));
    border: 1.5px solid var(--gold);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0 16px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 1px rgba(212,160,23,0.08), 0 4px 14px rgba(212,160,23,0.07);
  }
  .feature-list-card:hover {
    background: linear-gradient(135deg, rgba(212,160,23,0.20), rgba(212,160,23,0.06));
    box-shadow: 0 0 0 1px rgba(212,160,23,0.16), 0 6px 18px rgba(212,160,23,0.12);
  }
  .feature-list-tag {
    position: absolute; top: -8px; left: 14px;
    background: var(--gold); color: #1a1208;
    font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
    font-family: var(--font-body);
  }
  .feature-list-thumb {
    width: 54px; height: 54px; border-radius: 8px;
    background: #2a1d00; border: 1px solid var(--gold-deep); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-logo); font-size: 22px; font-weight: 700;
    color: var(--gold-bright); letter-spacing: 1px;
  }
  .feature-list-text { flex: 1; min-width: 0; }
  .feature-list-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feature-list-meta { color: var(--muted); font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; margin-top: 4px; }
  .feature-list-meta .hi { color: var(--gold-bright); font-weight: 700; }
  .feature-list-arrow { color: var(--gold-bright); font-size: 20px; flex-shrink: 0; }
  .feature-list-dots {
    position: absolute; bottom: 8px; right: 14px;
    display: flex; gap: 4px;
  }
  .feature-list-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(212,160,23,0.25); transition: background 0.2s;
  }
  .feature-list-dot.on { background: var(--gold-bright); }

  /* ── FEATURED CARD GOLD LASER BEAM (List card + map strip) ──
     Same conic-gradient + mask + drop-shadow pattern as the Featured
     collapsible / CTA beam, reused so the paid Featured slot pulls the eye.
     Reuses --fpc-beam-angle + feat-beam-spin (declared with the collapsible). */
  .feature-list-card, .feature-strip { isolation: isolate; }
  .feature-list-card::before, .feature-strip::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: conic-gradient(
      from var(--fpc-beam-angle, 0deg),
      transparent 0deg, transparent 235deg,
      rgba(212,168,0,0.55) 265deg, #d4a800 300deg, #fff5b8 320deg, #d4a800 340deg,
      rgba(212,168,0,0.55) 355deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: feat-beam-spin 3.4s linear infinite;
    pointer-events: none; z-index: 2; will-change: filter; transform: translateZ(0);
    filter: drop-shadow(0 0 3px #d4a800) drop-shadow(0 0 9px #d4a800) drop-shadow(0 0 18px rgba(212,168,0,0.55));
  }
  /* Keep card content above the beam ring (beam is masked to the 2px edge, but
     this guarantees no stacking surprises). Tag/dots are already positioned. */
  .feature-list-card .feature-list-text, .feature-list-card .feature-list-arrow,
  .feature-strip .feature-thumb, .feature-strip .feature-text, .feature-strip .feature-end { position: relative; z-index: 3; }
  .feature-list-card .feature-list-tag, .feature-list-card .feature-list-dots { z-index: 3; }
  /* Light mode: deeper bronze-gold beam so it reads on the cream surface. */
  body.light .feature-list-card::before, body.light .feature-strip::before {
    background: conic-gradient(
      from var(--fpc-beam-angle, 0deg),
      transparent 0deg, transparent 235deg,
      rgba(168,122,16,0.5) 265deg, #b8881a 300deg, #8f5500 320deg, #b8881a 340deg,
      rgba(168,122,16,0.5) 355deg, transparent 360deg);
    filter: drop-shadow(0 0 2px #a87a10) drop-shadow(0 0 7px rgba(168,122,16,0.5));
  }
  @media (prefers-reduced-motion: reduce) {
    .feature-list-card::before, .feature-strip::before { animation: none; }
  }

  /* ── MAP ── */
  .map-area { flex: 1; position: relative; overflow: hidden; }
  #map { position: absolute; inset: 0; z-index: 1; }
  .maplibregl-map { background: var(--bg) !important; outline: none; }
  .maplibregl-canvas { outline: none; }
  /* MapLibre attribution — OSM/OpenFreeMap credit is required, so we keep it
     but compact + faint via the (i) toggle. Theme-aware below. */
  .maplibregl-ctrl-attrib { background: rgba(13,9,8,0.5) !important; font-size: 9px !important; }
  .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(13,9,8,0.35) !important; min-height: 20px; }
  .maplibregl-ctrl-attrib-button { opacity: 0.5; }
  .maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib { color: rgba(255,247,225,0.5) !important; }
  .maplibregl-ctrl-attrib a:hover { color: rgba(255,247,225,0.8) !important; }
  body.light .maplibregl-ctrl-attrib { background: rgba(250,246,236,0.6) !important; }
  body.light .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(250,246,236,0.45) !important; }
  body.light .maplibregl-ctrl-attrib a, body.light .maplibregl-ctrl-attrib { color: rgba(20,14,10,0.55) !important; }
  /* MapLibre zoom controls — dark group in dark mode (icons inverted to read). */
  .maplibregl-ctrl-group { background: rgba(13,9,8,0.9) !important; border: 1px solid var(--border-mid) !important; box-shadow: none !important; }
  .maplibregl-ctrl-group button + button { border-top: 1px solid var(--border-mid) !important; }
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(0.9); }
  .map-pin {
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1; border: 2px solid rgba(13,9,8,0.6);
    transition: transform 0.12s; position: relative;
  }
  .map-pin:hover { transform: scale(1.12); }
  .map-pin.sz1, .map-pin.sz2, .map-pin.sz3 { width:38px; height:38px; background:var(--red); box-shadow:none; }
  .map-pin.gold { background:#b06010 !important; box-shadow:0 2px 14px rgba(245,200,66,0.7), 0 0 0 2px #f5c842 !important; }
  .map-pin.event-dot { width:38px; height:38px; background: #d4a800; box-shadow: 0 2px 10px rgba(212,168,0,0.55); padding: 0; overflow: hidden; }
  .map-pin.event-dot img.event-icon { width: 24px; height: 24px; display: block; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
  .map-pin.event-dot.evt-lsu img.event-icon { width: 38px; height: 38px; filter: none; }
  .map-pin img.claw-inset { display: block; pointer-events: none; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
  .map-pin .top10-badge {
    position: absolute; top: -4px; right: -6px;
    width: 16px; height: 16px;
    background: #f5c842; border: 2px solid #1a0d05; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  /* Sold Out / Closed Today — dims the pin + drops a status badge so customers
     see it on the map without opening the spot. (Status auto-expires at midnight.) */
  .map-pin.has-status { filter: grayscale(0.55) brightness(0.72); opacity: 0.9; }
  .map-pin .pin-status-badge {
    position: absolute; bottom: -5px; right: -7px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #2a0e04; border: 2px solid #c93b00;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; line-height: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.6);
  }
  /* List-row status pill */
  .spot-status-pill {
    flex-shrink: 0; font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px;
    text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
    background: rgba(201,59,0,0.16); border: 1px solid rgba(201,59,0,0.5); color: #e87b5a;
    white-space: nowrap; line-height: 1.4;
  }
  .spot-status-pill.closed { background: rgba(201,122,0,0.16); border-color: rgba(201,122,0,0.5); color: #e0a85a; }
  body.light .spot-status-pill { background: rgba(154,46,0,0.12); border-color: rgba(154,46,0,0.45); color: #9a2e00; }
  body.light .spot-status-pill.closed { background: rgba(154,90,0,0.12); border-color: rgba(154,90,0,0.45); color: #8a5a00; }
  .spot-status-pill.boiling { background: rgba(58,125,68,0.18); border-color: rgba(92,196,106,0.45); color: #7fc98a; }
  body.light .spot-status-pill.boiling { background: rgba(46,120,60,0.12); border-color: rgba(46,120,60,0.45); color: #2e7a3c; }
  .user-location-dot {
    width: 14px; height: 14px; background: #4287f5;
    border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(66,135,245,0.15);
    animation: pulse 2.4s infinite ease-out;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(66,135,245,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(66,135,245,0); }
    100% { box-shadow: 0 0 0 0 rgba(66,135,245,0); }
  }
  .locate-btn {
    position: absolute; bottom: 96px; right: 14px;
    width: 42px; height: 42px;
    background: rgba(13,9,8,0.92); border: 1px solid var(--border-mid);
    color: var(--red); border-radius: 50%; font-size: 20px;
    z-index: 400; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .locate-btn:hover { border-color: var(--red); }
  .city-filter-pill {
    position: absolute; bottom: 68px; right: 14px;
    background: rgba(13,9,8,0.92); border: 1px solid var(--border-mid);
    color: var(--muted); border-radius: 20px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
    z-index: 400; cursor: pointer; padding: 7px 12px;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
  }
  .city-filter-pill.active { border-color: var(--red); color: var(--red); }
  .city-filter-pill .pill-x {
    font-size: 11px; font-weight: 900; line-height: 1; margin-left: 2px;
    opacity: 0.7;
  }
  .city-filter-pill .pill-x:hover { opacity: 1; }

  /* ── VENDOR CLAIM BANNER ── */
  .claim-spot-banner {
    border: 1.5px solid rgba(211,84,0,0.4); background: rgba(211,84,0,0.05);
    border-radius: 16px; padding: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px;
  }
  /* Per-mode accent on the "Own this spot?" claim card (boiled keeps the default). */
  .claim-spot-banner.live     { border-color: rgba(74,139,191,0.5);  background: rgba(74,139,191,0.06); }
  .claim-spot-banner.catering { border-color: rgba(180,144,232,0.5); background: rgba(180,144,232,0.06); }
  .claim-spot-banner.ship     { border-color: rgba(31,158,116,0.55); background: rgba(31,158,116,0.06); }
  .claim-spot-text { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
  .claim-spot-text strong { color: var(--cream); font-size: 14px; }
  .claim-spot-btn {
    background: #f5e6c5; border: none; color: #221206;
    border-radius: 14px; padding: 11px 18px; font-size: 13.5px; font-weight: 800;
    letter-spacing: 0.2px; cursor: pointer;
    font-family: var(--font-body); white-space: nowrap; flex-shrink: 0;
  }
  .claim-spot-btn:hover { background: #fff7e1; }
  body.light .claim-spot-btn { background: #3d1500; color: #fff7e1; }
  body.light .claim-spot-text strong { color: #2a1410; }
  .verified-owner-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(45,122,58,0.08); border: 1px solid rgba(45,122,58,0.3);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
  }
  .verified-owner-badge .vob-icon {
    width: 28px; height: 28px; background: #2d7a3a; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0; color: #fff; font-weight: 900;
  }
  .verified-owner-badge .vob-text { font-size: 11px; color: var(--muted); line-height: 1.4; }
  .verified-owner-badge .vob-text strong { color: #3a9a4a; font-size: 11px; display: block; }

  /* ── PAID TIER BADGE ($99 Verified / $149 Pro) ── */
  .paid-vendor-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-body); font-size: 10px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 5px;
    vertical-align: middle; margin-right: 7px; line-height: 1;
  }
  .paid-vendor-pill.verified {
    background: rgba(95,160,80,0.15); border: 1px solid rgba(95,160,80,0.55);
    color: #82c272;
  }
  .paid-vendor-pill .pvp-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%; font-size: 9px; font-weight: 900;
    color: #fff; line-height: 1;
  }
  .paid-vendor-pill.verified .pvp-check { background: #5fa050; }

  .paid-vendor-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    font-size: 9px; font-weight: 900; color: #fff; line-height: 1;
    margin-left: 5px; vertical-align: middle; flex-shrink: 0;
  }
  .paid-vendor-check.verified { background: #5fa050; }

  .map-pin.paid-vendor.verified { box-shadow: 0 2px 10px rgba(95,160,80,0.65), 0 0 0 2px #5fa050 !important; }
  /* Pro vendor custom logo pins — white pin bg so logos with transparency don't
     reveal the red default; the circular logo image covers most of the pin. */
  .map-pin.has-custom-logo { background: #fff !important; }
  .map-pin .custom-logo-pin { background: #fff; }
  .map-pin.paid-vendor.gold     { box-shadow: 0 2px 14px rgba(245,200,66,0.7), 0 0 0 2px #f5c842, 0 0 0 4px rgba(95,160,80,0.6) !important; }

  /* ── VENDOR PHOTO CAROUSEL (hero, top of spot sheet) ── */
  .vendor-carousel {
    display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
    margin: 0 -18px 16px; padding: 0 18px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vendor-carousel::-webkit-scrollbar { display: none; }
  .vendor-carousel-slide {
    flex: 0 0 auto; scroll-snap-align: start;
    width: 78%; max-width: 320px; aspect-ratio: 4 / 3;
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; position: relative; cursor: pointer;
  }
  .vendor-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vendor-carousel-slide .vc-delete {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,0.6); border: none; color: #fff;
    font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .vendor-carousel-add {
    flex: 0 0 auto; scroll-snap-align: start;
    width: 78%; max-width: 320px; aspect-ratio: 4 / 3;
    background: rgba(95,160,80,0.04);
    border: 2px dashed rgba(95,160,80,0.4); border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; color: #82c272; gap: 4px;
  }
  .vendor-carousel-add .vca-plus { font-size: 32px; font-weight: 300; line-height: 1; }
  .vendor-carousel-add .vca-label { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
  .vendor-carousel-upgrade {
    margin: -6px 0 12px; font-size: 10px; color: var(--muted); text-align: center;
  }
  .vendor-carousel-upgrade strong { color: var(--gold-bright); cursor: pointer; text-decoration: underline; }

  /* ── VIEW PHOTOS button (replaces inline strip under branding) ── */
  .view-photos-btn {
    width: 100%; margin: 2px 0 14px; padding: 12px;
    background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 10px;
    color: var(--text); font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .view-photos-btn:active { transform: scale(0.985); }
  /* Photos sheet grid */
  .psheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .psheet-tile {
    position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
    background: var(--layer-2); border: 1px solid var(--border); cursor: pointer;
  }
  .psheet-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .psheet-del {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 13px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .psheet-add {
    aspect-ratio: 1 / 1; border-radius: 12px; cursor: pointer;
    background: rgba(255,180,80,0.04); border: 2px dashed var(--border-mid);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--muted);
  }

  /* ── BOIL DAY POST BANNER (pinned, top of spot sheet) ── */
  .boil-post-banner {
    background: linear-gradient(180deg, rgba(255,180,80,0.10), rgba(255,180,80,0.03));
    border: solid rgba(255,180,80,0.7);
    border-width: 0 0 0 3px;
    border-radius: 0 10px 10px 0;
    padding: 13px 14px;
    margin: 2px 0 16px;
    position: relative;
  }
  .boil-post-banner .bpb-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
  }
  .boil-post-banner .bpb-pin { font-size: 14px; }
  .boil-post-banner .bpb-label {
    font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; color: #f0bf3a;
  }
  .boil-post-banner .bpb-time {
    margin-left: auto; font-size: 10px; color: var(--muted);
    font-family: var(--font-body); font-weight: 600;
  }
  .boil-post-banner .bpb-photo {
    width: 100%; max-height: 220px; object-fit: cover;
    border-radius: 8px; margin-bottom: 10px; cursor: pointer; display: block;
  }
  .boil-post-banner .bpb-message {
    font-size: 14px; color: var(--text); line-height: 1.55; white-space: pre-wrap;
  }
  /* Owner-only ✕ that removes the active banner. Subtle in dark mode,
     darker in light mode where white-on-cream was unreadable. */
  .boil-post-banner .bpb-delete {
    background: transparent; border: none; cursor: pointer;
    padding: 4px 6px; font-size: 13px;
    color: rgba(255,255,255,0.6);
  }
  .boil-post-banner .bpb-delete:hover { color: rgba(255,255,255,0.9); }
  body.light .boil-post-banner .bpb-delete { color: rgba(42,20,16,0.7); }
  body.light .boil-post-banner .bpb-delete:hover { color: #2a1410; }
  .boil-post-compose-btn {
    width: 100%; background: linear-gradient(180deg, rgba(255,180,80,0.12), rgba(255,180,80,0.04));
    border: 1.5px solid rgba(255,180,80,0.5); color: #ffb850;
    font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 12px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 12px;
  }
  .boil-post-compose-btn:hover { background: linear-gradient(180deg, rgba(255,180,80,0.2), rgba(255,180,80,0.08)); }

  /* ── VENDOR BRANDING (Pro $149 feature) ── */
  .vendor-hero {
    position: relative;
    width: calc(100% + 36px); margin: -18px -18px 14px;
    aspect-ratio: 21 / 9; min-height: 110px;
    background-size: cover; background-position: center;
    background-color: var(--layer-2);
  }
  .vendor-hero-tint {
    position: absolute; inset: 0; pointer-events: none;
  }
  .vendor-hero-logo {
    position: absolute; bottom: -22px; left: 14px;
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--bg);
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.5);
    background: var(--layer-2);
  }
  .vendor-hero + #spotBoilPost_,
  .vendor-hero ~ #spotBoilPost_ { margin-top: 28px; }
  /* If the hero has a logo, push the next element down so the avatar isn't clipped */
  .vendor-hero:has(.vendor-hero-logo) { margin-bottom: 38px; }

  /* ── NEW CTA VENDOR PAGE (V2) ── photo hero + floating action pill + solid lead CTA.
     Themed per mode via .boiled / .live / .cater (boiled=red, live=blue, cater=purple). */
  .cta-hero {
    position: relative; width: calc(100% + 36px); margin: -18px -18px 0;
    height: 232px; background-size: cover; background-position: center;
    background-color: var(--layer-2); overflow: hidden;
  }
  .cta-hero.boiled, .cta-lead.boiled, .cta-hero-pill.boiled { --m:#c93b00; --mt:#ff8a52; --ms:rgba(201,59,0,0.16); --mb:rgba(201,59,0,0.55); }
  .cta-hero.live,   .cta-lead.live,   .cta-hero-pill.live   { --m:#2c5778; --mt:#6ba9d8; --ms:rgba(74,139,191,0.16); --mb:rgba(74,139,191,0.55); }
  .cta-hero.cater,  .cta-lead.cater,  .cta-hero-pill.cater  { --m:#8b6db8; --mt:#c4a4e8; --ms:rgba(180,144,232,0.16); --mb:rgba(180,144,232,0.55); }
  .cta-hero.ship,   .cta-lead.ship,   .cta-hero-pill.ship   { --m:#1f9e74; --mt:#3fd6a2; --ms:rgba(31,158,116,0.16); --mb:rgba(31,158,116,0.55); }
  /* Glowing in-app "Get Crawfish Shipped" CTA — pulsing green halo to draw the eye. */
  .cta-lead.cta-lead-glow { box-shadow: 0 0 0 1px rgba(63,214,162,0.5), 0 0 22px rgba(31,158,116,0.55); animation: shipGlow 2.2s ease-in-out infinite; }
  @keyframes shipGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(63,214,162,0.45), 0 0 16px rgba(31,158,116,0.45); } 50% { box-shadow: 0 0 0 1px rgba(63,214,162,0.7), 0 0 30px rgba(31,158,116,0.8); } }
  @media (prefers-reduced-motion: reduce) { .cta-lead.cta-lead-glow { animation: none; } }
  /* No-photo state — a boiled-crawfish-pot photo, blurred + darkened, behind a
     centered "NO PHOTOS YET" label. Same backdrop for every mode. */
  .cta-hero.nophoto { background: #160a05; }
  .cta-hero-blur {
    position: absolute; inset: -30px;
    background: #160a05 url('/images/boiled-pile.jpg?v=1') center/cover no-repeat;
    transform: scale(1.25);
  }
  .cta-nophoto-label {
    position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--cream); font-weight: 900; letter-spacing: 2.5px; font-size: 13px;
    text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.75); white-space: nowrap;
  }
  .np-cam { font-size: 27px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
  /* Hero photo carousel — swipeable strip of the spot's photos (banner + community).
     Tap a slide to open the full-screen lightbox. Dots track the active slide. */
  .cta-hero-media { position: absolute; inset: 0; }
  .cta-hero-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cta-hero-track::-webkit-scrollbar { display: none; }
  .cta-hero-slide { flex: 0 0 100%; height: 100%; background-size: cover; background-position: center;
    scroll-snap-align: center; cursor: pointer; }
  .cta-hero-dots { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
    display: flex; gap: 6px; }
  .cta-hero-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.45);
    transition: background 0.2s, width 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
  .cta-hero-dots span.on { background: #fff; width: 18px; border-radius: 3px; }
  .cta-hero-scrim { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.04) 26%, rgba(0,0,0,0) 48%, rgba(13,9,8,0.62) 80%, var(--bg) 100%); }
  body.light .cta-hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 46%, rgba(245,238,224,0.55) 82%, var(--bg) 100%); }
  /* Hero "View on Map" chip — clickable, opens the spot on the map. */
  .cta-status-chip { display: inline-flex; align-items: center; gap: 5px;
    background: rgba(13,9,8,0.74); border: 1.5px solid var(--red); color: var(--cream); cursor: pointer;
    font-family: var(--font-body); line-height: 1;
    font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 6px rgba(0,0,0,0.45); -webkit-tap-highlight-color: transparent; }
  .cta-status-chip:active { filter: brightness(1.15); }
  /* Call chip — mirror of the View on Map pill, on the LEFT side of the hero. */
  .cta-call-chip { position: absolute; right: 16px; bottom: 14px; z-index: 6;
    background: var(--m); border: none; color: #fff; cursor: pointer;
    font-family: var(--font-body); line-height: 1; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 7px 13px; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45); -webkit-tap-highlight-color: transparent; }
  .cta-call-chip:active { filter: brightness(1.15); }
  /* Floating primary pill — flat solid (no glow highlight, per design). */
  .cta-hero-pill { position: absolute; right: 16px; bottom: 14px; z-index: 6;
    background: var(--m); color: #fff; border: none; cursor: pointer; font-family: var(--font-body);
    font-size: 12.5px; font-weight: 800; letter-spacing: 0.8px; padding: 12px 18px; border-radius: 999px;
    box-shadow: none; transition: filter 0.12s ease;
    -webkit-tap-highlight-color: transparent; }
  .cta-hero-pill:active { filter: brightness(1.12); }
  /* Chip bar straddling the hero's bottom edge: View on Map far left,
     Call Now far right (only renders when the spot has a phone). */
  .cta-profilebar { position: relative; z-index: 7; display: flex; align-items: flex-start;
    margin-top: 12px; padding-bottom: 6px; }
  .cta-chip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; flex-wrap: wrap; }
  .cta-call-inline { background: rgba(13,9,8,0.74); border: 1.5px solid var(--red); color: var(--cream); text-decoration: none; cursor: pointer;
    font-family: var(--font-body); line-height: 1; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 7px 12px; border-radius: 999px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .cta-call-inline:active { filter: brightness(1.12); }
  /* Solid lead CTA — the primary money action, themed per mode + live-status subline. */
  .cta-lead { width: 100%; border: none; cursor: pointer; border-radius: 15px; background: var(--m); color: #fff7e1;
    padding: 13px 16px; margin: 0 0 14px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    box-shadow: 0 0 8px 0 color-mix(in srgb, var(--m) 70%, transparent), 0 0 26px 3px color-mix(in srgb, var(--m) 45%, transparent); transition: filter 0.12s ease, box-shadow 0.15s ease; font-family: var(--font-body);
    -webkit-tap-highlight-color: transparent; }
  .cta-lead:active { filter: brightness(1.1); }
  /* Hover darken — same feedback as the other action buttons (brutal-btn /
     cta-catering darken on hover). */
  @media (hover: hover) { .cta-lead:hover { filter: brightness(0.93); } }
  .cta-lead-main { font-size: 17px; font-weight: 900; letter-spacing: 0.4px; }
  .cta-lead-sub { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; color: rgba(255,247,225,0.85); text-transform: uppercase; }
  /* Light mode (boiled): the brand orange (#c93b00) blends into the cream page,
     so the fill drops to the same brick as the secondary buttons (var(--red) =
     #9a2e00 in light) and the button instead reads as primary via an OUTWARD
     ORANGE GLOW. Scoped to boiled so Live keeps its blue theming. */
  body.light .cta-lead.boiled {
    background: var(--red);
    box-shadow: 0 0 10px 1px color-mix(in srgb, #c93b00 80%, transparent),
                0 0 30px 6px color-mix(in srgb, #c93b00 48%, transparent);
  }

  .branding-edit-btn {
    width: 100%; margin-bottom: 10px;
    background: linear-gradient(180deg, rgba(255,180,80,0.10), rgba(255,180,80,0.03));
    border: 1px solid rgba(255,180,80,0.45);
    color: #ffb850; font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 11px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }

  /* ── LOGO CROPPER ── */
  .crop-stage {
    width: 100%; aspect-ratio: 1 / 1;
    position: relative; overflow: hidden; touch-action: none;
    background: #000; border-radius: 12px; user-select: none;
    margin-bottom: 14px;
  }
  .crop-stage img {
    position: absolute; left: 50%; top: 50%;
    transform-origin: 0 0;
    max-width: none; max-height: none;
    pointer-events: none; user-drag: none; -webkit-user-drag: none;
  }
  /* The circular viewport — one element does both:
     - 2px green border = the crop boundary
     - huge box-shadow = dark mask outside the circle, clipped by stage overflow */
  .crop-overlay {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid #5fa050;
    box-sizing: border-box;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
    pointer-events: none;
  }
  .crop-hint {
    font-size: 10px; color: var(--muted); text-align: center;
    margin-bottom: 8px; line-height: 1.55;
  }
  .crop-zoom {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  }
  .crop-zoom input[type=range] {
    flex: 1; accent-color: #5fa050;
  }
  .crop-zoom .label {
    font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  }
  .crop-actions { display: flex; gap: 8px; }
  .crop-actions button {
    flex: 1; padding: 12px; border-radius: 10px; cursor: pointer;
    font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    border: 1px solid;
  }
  .crop-actions .cancel { background: transparent; border-color: var(--border-mid); color: var(--muted); }
  .crop-actions .save   { background: #5fa050; border-color: #5fa050; color: #fff; }

  /* ── DIRECT MESSAGES (Pro $149 feature) ── */
  .dm-message-btn {
    width: 100%; margin-bottom: 10px;
    background: rgba(95,160,80,0.07); border: 1.5px solid rgba(95,160,80,0.55);
    color: #82c272; font-family: var(--font-body); font-size: 12px; font-weight: 800;
    letter-spacing: 1.8px; text-transform: uppercase;
    padding: 14px; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .dm-message-btn .badge {
    background: var(--red); color: #fff; border-radius: 10px; padding: 2px 6px;
    font-size: 10px; min-width: 18px; display: inline-flex; align-items: center; justify-content: center;
  }
  .dm-thread { padding: 10px 0; }
  .dm-bubble-wrap { margin-bottom: 10px; }
  .dm-bubble-wrap.me   { text-align: right; }
  .dm-bubble-wrap.them { text-align: left;  }
  /* Spring-ish entrance — bubbles slide up + fade in. Cubic-bezier overshoot
     gives it a soft bounce without being twee. Applied only to new bubbles
     (sent or freshly received) so the initial-load list doesn't all jiggle. */
  @keyframes dm-bubble-in {
    0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
    60%  { opacity: 1; transform: translateY(-1px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
  }
  .dm-bubble-wrap.enter { animation: dm-bubble-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .dm-bubble-wrap.enter .dm-bubble { transform-origin: bottom; }
  /* Typing indicator — 3 dots pulse in a "them"-style bubble. Hidden by
     default; .show flips display so the spacing collapses when nobody's
     typing. */
  .dm-typing-wrap { display: none; margin: 4px 0 10px; text-align: left; }
  .dm-typing-wrap.show { display: block; animation: dm-bubble-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .dm-typing-bubble {
    display: inline-flex; gap: 4px; align-items: center;
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 18px; border-bottom-left-radius: 5px;
    padding: 11px 14px;
  }
  .dm-typing-bubble span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
    animation: dm-typing-bounce 1.2s infinite ease-in-out;
  }
  .dm-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
  .dm-typing-bubble span:nth-child(3) { animation-delay: 0.30s; }
  @keyframes dm-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30%           { transform: translateY(-4px); opacity: 1; }
  }
  /* Floating "scroll to bottom" pill — appears when the user has scrolled
     up from the latest message. Tap to smooth-scroll back. */
  .dm-scroll-fab {
    position: absolute; right: 14px;
    background: var(--layer); border: 1px solid var(--border-mid);
    color: var(--text); border-radius: 999px;
    padding: 8px 14px 8px 12px; font-size: 12px; font-weight: 700;
    cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6);
    display: none; align-items: center; gap: 6px;
    z-index: 25; opacity: 0; transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    font-family: var(--font-body);
  }
  .dm-scroll-fab.show { display: inline-flex; opacity: 1; transform: translateY(0); }
  .dm-scroll-fab .count {
    background: var(--red); color: #fff; border-radius: 999px;
    padding: 1px 7px; font-size: 10px; font-weight: 800;
    min-width: 18px; text-align: center; line-height: 1.4;
  }
  .dm-bubble {
    display: inline-block;
    max-width: 76%;
    padding: 11px 14px; border-radius: 14px;
    /* Bumped from 13px → 15.5px for older-vendor legibility on every
       messaging surface (DM, catering chat, support). */
    font-size: 15.5px; line-height: 1.5;
    overflow-wrap: break-word; word-break: normal; white-space: pre-wrap;
    text-align: left;
  }
  /* Default DM — filled iMessage feel in both light + dark. Sender = solid
     forest green with white text; receiver = solid white with dark text. */
  .dm-bubble.me   { background: #3a7d44; color: #fff; border: 1px solid #3a7d44; border-bottom-right-radius: 5px; }
  .dm-bubble.them { background: #fff;    color: #2a1d10; border: 1px solid #c8b9a5; border-bottom-left-radius: 5px; }
  /* Theme overrides — applied via theme-boiled / theme-cater / theme-live on
     .dm-thread. Boiled mirrors the outline pattern in red; cater/live keep
     their filled "me" bubble convention (purple / blue). */
  .dm-thread.theme-boiled .dm-bubble.me   { background: rgba(201,59,0,0.10); color: #ff7b3a; border-color: rgba(201,59,0,0.60); }
  .dm-thread.theme-boiled .dm-bubble.them { background: rgba(201,59,0,0.05); color: #ffa275; border-color: rgba(201,59,0,0.35); }
  .dm-typing-wrap.theme-boiled .dm-typing-bubble { background: rgba(201,59,0,0.10); border-color: rgba(201,59,0,0.60); }
  .dm-typing-wrap.theme-boiled .dm-typing-bubble span { background: var(--red); }
  body.light .dm-thread.theme-boiled .dm-bubble.me   { background: rgba(154,46,0,0.08); color: #9a2e00; border-color: var(--red); }
  body.light .dm-thread.theme-boiled .dm-bubble.them { background: rgba(154,46,0,0.04); color: #c4421a; border-color: rgba(154,46,0,0.5); }
  .dm-thread.theme-cater .dm-bubble.me   { background: var(--cater-accent); color: #fff; border-color: var(--cater-accent); }
  .dm-thread.theme-cater .dm-bubble.them { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); color: var(--cater-accent-text); }
  .dm-typing-wrap.theme-cater .dm-typing-bubble { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); }
  .dm-typing-wrap.theme-cater .dm-typing-bubble span { background: var(--cater-accent); }
  .dm-thread.theme-live .dm-bubble.me    { background: #4a8bbf; color: #fff; border-color: #4a8bbf; }
  .dm-thread.theme-live .dm-bubble.them  { background: rgba(74,139,191,0.10); border-color: rgba(74,139,191,0.40); color: #c0dcf0; }
  .dm-typing-wrap.theme-live .dm-typing-bubble { background: rgba(74,139,191,0.10); border-color: rgba(74,139,191,0.40); }
  .dm-typing-wrap.theme-live .dm-typing-bubble span { background: #4a8bbf; }
  .dm-time { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .dm-composer {
    position: sticky; bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 10px 0;
    display: flex; gap: 8px; align-items: flex-end;
  }
  .dm-composer textarea {
    flex: 1; min-height: 38px; max-height: 100px; resize: none;
    background: var(--layer-2); border: 1px solid var(--border); border-radius: 18px;
    padding: 10px 14px; color: var(--text); font-size: 13px; font-family: var(--font-body);
    line-height: 1.45;
  }
  .dm-composer button {
    background: #5fa050; border: none; color: #fff;
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .dm-composer button:disabled { opacity: 0.5; cursor: not-allowed; }
  /* Inbox search + filter toolbar */
  .inbox-tools { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 2px 0 12px; margin-bottom: 4px; }
  .inbox-search { width: 100%; background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 10px; padding: 11px 14px; color: var(--text); font-size: 14px; font-family: var(--font-body); margin-bottom: 10px; -webkit-appearance: none; }
  .inbox-search::placeholder { color: var(--muted); }
  .inbox-search:focus { outline: none; border-color: #4a7a42; }
  .inbox-filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .inbox-filter-pill { background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 999px; padding: 7px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
  .inbox-filter-pill.on { background: rgba(74,122,64,0.14); border-color: #4a7a42; color: #82c272; }
  @media (hover: hover) { .inbox-filter-pill:hover { border-color: #4a7a42; } }
  body.light .inbox-filter-pill.on { background: rgba(74,122,64,0.12); color: #2f6b3f; border-color: #4a7a42; }
  .dm-thread-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px; cursor: pointer; margin-bottom: 8px;
  }
  .dm-thread-row:hover { border-color: var(--border-mid); }
  .dm-thread-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--red); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-logo); font-size: 14px; color: #fff; font-weight: 700;
  }
  .dm-thread-info { flex: 1; min-width: 0; }
  .dm-thread-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
  .dm-thread-sub  { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dm-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
  .dm-thread-time { font-size: 9px; color: var(--muted); }
  .dm-thread-unread {
    background: var(--red); color: #fff; border-radius: 10px; padding: 2px 7px;
    font-size: 9px; font-weight: 800; min-width: 18px; text-align: center;
  }

  /* ── VENDOR REPLY (under each review) ── */
  .vendor-reply {
    margin-top: 12px; padding: 12px 14px;
    background: rgba(95,160,80,0.06); border-left: 3px solid #5fa050;
    border-radius: 8px;
  }
  .vendor-reply .vr-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 7px; font-size: 11px; color: var(--text);
  }
  .vendor-reply .vr-name { font-weight: 700; color: var(--text); font-size: 11px; }
  .vendor-reply .vr-time { color: var(--muted); font-size: 10px; margin-left: auto; }
  .vendor-reply .vr-body {
    font-size: 12px; color: #d8c1a6; line-height: 1.6; white-space: pre-wrap;
  }
  .vendor-reply .vr-actions {
    display: flex; gap: 6px; margin-top: 10px;
  }
  .vendor-reply .vr-actions button {
    min-height: 40px; display: inline-flex; align-items: center;
    background: transparent; border: 1px solid var(--border-mid); color: var(--muted);
    font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; padding: 5px 9px; border-radius: 5px; cursor: pointer;
  }
  .vendor-reply .vr-actions button:hover { color: var(--text); border-color: var(--muted); }
  .vendor-reply .vr-actions .vr-delete:hover { color: var(--red); border-color: var(--red); }

  .reply-btn {
    margin-top: 10px; background: rgba(95,160,80,0.08); border: 1px solid rgba(95,160,80,0.35);
    color: #82c272; font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; padding: 8px 14px; border-radius: 6px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  }
  .reply-btn:hover { background: rgba(95,160,80,0.15); }

  .reply-editor {
    margin-top: 10px; background: rgba(95,160,80,0.04);
    border: 1px solid rgba(95,160,80,0.25); border-radius: 8px; padding: 10px;
  }
  .reply-editor textarea {
    width: 100%; min-height: 70px; resize: none;
    background: var(--layer); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 10px; color: var(--text); font-size: 12px; font-family: var(--font-body);
    line-height: 1.5;
  }
  .reply-editor-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 8px; flex-wrap: wrap;
  }
  .reply-editor-hint { font-size: 9px; color: var(--muted); letter-spacing: 1px; }
  .reply-editor button {
    border: none; cursor: pointer; font-family: var(--font-body);
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 7px 12px; border-radius: 6px; margin-left: 6px;
  }
  .reply-cancel { background: transparent; color: var(--muted); border: 1px solid var(--border-mid) !important; }
  .reply-post { background: #5fa050; color: #fff; }
  .reply-post:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ── BOTTOM NAV ── */
  .bottom-nav {
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 10px 0 26px;
    display: flex; justify-content: space-around; flex-shrink: 0;
    /* Stays in normal flow at the bottom of the shell, but a high z-index keeps
       it painted ON TOP of any open sheet (z 600) / backdrop (z 500) — so it's
       a true persistent tab bar. Messaging sheets override to z 800 to cover
       it (focused conversation + composer). */
    position: relative; z-index: 700;
  }
  .nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #9a8070; font-size: 10px; font-weight: 700;
    /* V2: Title-case labels to match the new CTA mockup (was uppercase). */
    text-transform: none; letter-spacing: 0.2px;
    cursor: pointer; padding: 4px 12px;
    position: relative;
    transition: transform .14s cubic-bezier(.34,1.56,.64,1), color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  /* V2: center crawfish FAB = Map. Elevated above the bar with a --bg ring,
     mirroring the mockup. Keeps id=navMap so goHome()/setNavActive still target it. */
  .bottom-nav { align-items: center; }
  .nav-fab {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--red); color: #fff; cursor: pointer;
    margin: -26px 6px 0; align-self: center;
    box-shadow: 0 8px 20px -6px var(--red), 0 0 0 5px var(--bg);
    transition: transform .14s cubic-bezier(.34,1.56,.64,1), filter .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-fab:active { transform: scale(0.9); }
  .nav-fab.active { filter: brightness(1.06); }
  .nav-fab-logo { width: 34px; height: 34px; object-fit: contain; display: block; }
  /* Tap feedback — a quick squish "pop". */
  .nav-item:active { transform: scale(0.84); }
  .nav-item svg { width: 22px; height: 22px; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
  /* Selected tab — red highlight + the icon pops up a touch, with a soft pill. */
  .nav-item.active { color: var(--red); }
  .nav-item.active svg { transform: translateY(-1px) scale(1.12); }
  .nav-item.active::before {
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 28px; border-radius: 999px;
    background: rgba(201,59,0,0.14); z-index: -1;
  }
  body.light .nav-item.active::before { background: rgba(154,46,0,0.12); }
  .nav-badge {
    position: absolute; top: 0; right: 4px;
    background: var(--red); color: #fff;
    border-radius: 999px; min-width: 17px; height: 17px;
    padding: 0 5px; font-size: 10px; font-weight: 900;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.45);
    letter-spacing: 0;
  }

  /* ── SHEET ── */
  .sheet-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.72);
    z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  /* Fullscreen sheets (Account, Vendor list) read as real pages, not slide-up
     panels. Paint the backdrop the sheet's own color so any pull-down or
     iOS rubber-band overscroll reveals the SAME background — the page color
     extends "to the top and beyond" instead of flashing the dimmed map. */
  .sheet-backdrop.solid { background: var(--layer); }
  .sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--layer); border-top: 1px solid var(--border-mid);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    /* iOS-style spring easing — feels physical on both open and close. */
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 600; max-height: 88%; overflow-y: auto;
    /* No rubber-band pull-down on sheets (esp. the vendor detail CTA) — scroll only. */
    overscroll-behavior: contain;
  }
  .sheet.open { transform: translateY(var(--ptr-offset, 0px)); }
  .sheet.fullscreen { max-height: 100%; height: 100%; border-radius: 0; border-top: none; }
  /* Vendor new-order alarm banner is fixed at top:0. When it's showing, push
     app chrome down by its measured height so it never covers the home header
     or a fullscreen sheet's sticky header. */
  body.order-alarm-on .sheet.fullscreen { height: calc(100% - var(--order-alarm-h, 56px)); }
  body.order-alarm-on .screen > .header { margin-top: var(--order-alarm-h, 56px); }
  /* Notifications inbox + arrival toast ─────────────────────────────────── */
  .fs-mark-all {
    margin-left: auto;
    background: transparent; border: 1px solid var(--border-mid);
    color: var(--muted); font-family: var(--font-body);
    font-size: 9px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
    padding: 6px 10px; border-radius: 6px; cursor: pointer;
  }
  .fs-mark-all:hover { color: var(--text); border-color: var(--border); }
  .notif-filters {
    display: flex; gap: 8px;
    padding: 14px 16px 10px;
    overflow-x: auto; scrollbar-width: none;
  }
  .notif-filters::-webkit-scrollbar { display: none; }
  .notif-filter {
    padding: 7px 13px; border-radius: 999px;
    background: var(--layer-2); border: 1px solid var(--border);
    color: var(--muted); font-family: var(--font-body);
    font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
  }
  .notif-filter.active { color: var(--red); border-color: var(--red); background: rgba(201,59,0,0.10); }
  .notif-filter .ct {
    background: rgba(255,255,255,0.10); color: var(--cream);
    padding: 1px 6px; border-radius: 999px;
    font-size: 9px; font-weight: 900; line-height: 1;
  }
  .notif-filter.active .ct { background: var(--red); color: #fff; }
  .notif-section-label {
    padding: 14px 16px 8px;
    font-size: 9px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--muted);
  }
  .notif-row {
    padding: 13px 16px 13px 18px;
    display: flex; gap: 12px;
    border-top: 1px solid var(--border);
    background: var(--layer);
    position: relative; cursor: pointer;
  }
  .notif-row:hover { background: var(--layer-2); }
  .notif-row.unread { background: linear-gradient(90deg, rgba(201,59,0,0.05), transparent 60%); }
  .notif-row.unread::before {
    content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  }
  .notif-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    border: 1px solid var(--border);
  }
  .notif-avatar.dm     { background: rgba(58,125,68,0.18);  border-color: rgba(58,125,68,0.45); }
  .notif-avatar.cat    { background: rgba(180,144,232,0.10); border-color: rgba(180,144,232,0.45); }
  .notif-avatar.review { background: rgba(212,160,23,0.12); border-color: rgba(212,160,23,0.40); }
  .notif-avatar.appeal { background: rgba(201,59,0,0.10);   border-color: rgba(201,59,0,0.40); }
  .notif-body { flex: 1; min-width: 0; }
  .notif-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 2px;
  }
  .notif-title {
    font-family: var(--font-body);
    font-weight: 800; font-size: 13px;
    color: var(--cream);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .notif-time {
    font-size: 10px; color: var(--muted); font-weight: 600;
    letter-spacing: 0.3px; flex-shrink: 0;
  }
  .notif-kind {
    font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 5px;
  }
  .notif-kind.cat    { color: #c4a4e8; }
  .notif-kind.dm     { color: #82c272; }
  .notif-kind.review { color: var(--gold-bright); }
  .notif-kind.appeal { color: #e87070; }
  .notif-snippet {
    font-size: 12px; color: var(--muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .notif-empty {
    text-align: center; padding: 70px 24px;
    color: var(--muted); font-size: 12px; line-height: 1.6;
  }
  /* Arrival toast — slides in from above the safe area when realtime
     delivers a new message / catering reply. Tap to open the source. */
  .notif-toast {
    position: fixed; top: env(safe-area-inset-top, 14px); left: 12px; right: 12px;
    background: linear-gradient(180deg, var(--layer-2), var(--layer));
    border: 1px solid var(--border-mid);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.6);
    z-index: 9500;
    transform: translateY(-130%);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
    cursor: pointer;
    max-width: 520px; margin: 0 auto;
  }
  /* Theme classes — set the border + glow + tag color per notification kind.
     kind-dm = red (normal DM), kind-cater = purple, kind-live = icy blue. */
  .notif-toast.kind-dm    { border-color: rgba(201,59,0,0.55);    box-shadow: 0 14px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,59,0,0.22); }
  .notif-toast.kind-cater { border-color: var(--cater-accent-border); box-shadow: 0 14px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(180,144,232,0.22); }
  .notif-toast.kind-live  { border-color: rgba(74,139,191,0.55);  box-shadow: 0 14px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(74,139,191,0.22); }
  .notif-toast.visible { transform: translateY(0); }
  .notif-toast-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--layer-2);
    border: 1px solid var(--border-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
  }
  .notif-toast.kind-dm    .notif-toast-avatar { background: rgba(201,59,0,0.12);    border-color: rgba(201,59,0,0.45); }
  .notif-toast.kind-cater .notif-toast-avatar { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); }
  .notif-toast.kind-live  .notif-toast-avatar { background: rgba(74,139,191,0.10);  border-color: rgba(74,139,191,0.45); }
  /* Legacy avatar variants kept for any callers not yet on the theme classes. */
  .notif-toast-avatar.review { background: rgba(212,160,23,0.12); border-color: rgba(212,160,23,0.40); }
  .notif-toast-body { flex: 1; min-width: 0; }
  .notif-toast-title {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 800;
    color: var(--cream); letter-spacing: 0.3px;
    margin-bottom: 2px;
    display: flex; align-items: center; gap: 6px;
  }
  .notif-toast-title .kind {
    font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    border-radius: 999px; padding: 2px 7px;
    line-height: 1;
    color: var(--muted); background: var(--layer-2); border: 1px solid var(--border-mid);
  }
  .notif-toast.kind-dm    .notif-toast-title .kind { color: #e87070;             background: rgba(201,59,0,0.10);    border-color: rgba(201,59,0,0.45); }
  .notif-toast.kind-cater .notif-toast-title .kind { color: var(--cater-accent-text); background: var(--cater-accent-soft); border-color: var(--cater-accent-border); }
  .notif-toast.kind-live  .notif-toast-title .kind { color: #8fb9d9;             background: rgba(74,139,191,0.10);  border-color: rgba(74,139,191,0.45); }
  .notif-toast-preview {
    font-size: 11px; color: var(--muted); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .notif-toast-chev { color: var(--muted); font-size: 16px; flex-shrink: 0; }

  /* ── Messaging layout ──────────────────────────────────────────────────
     When a sheet renders a chat surface (DM thread or catering quote
     detail) it includes a .msg-composer-bar at the end. The MO in init()
     toggles .sheet.messaging when that bar is present, which flips the
     sheet to a flex column so:
       - .fs-header stays pinned at top
       - .msg-body fills the middle and scrolls independently
       - .msg-composer-bar docks at viewport bottom (above safe-area)
     Composer is always visible regardless of how many messages exist. */
  .sheet.messaging {
    overflow: hidden !important;
    display: flex; flex-direction: column;
    /* Above the persistent tab bar (z 700) so a DM conversation + its composer
       own the screen; the back button returns to a tab where the bar shows. */
    z-index: 800;
  }
  /* Persistent tab bar floats over every other sheet, so pad the scroll content
       by the bar's height — last items / CTAs clear it instead of hiding under. */
  .sheet:not(.messaging) #sheetContent { padding-bottom: var(--nav-h, 74px); }
  /* Mobile-only viewport pin. On desktop preview (>700px) the phone frame
     is a fixed 390×844 box, so position:fixed would explode the sheet to
     the whole browser window. Scope the override to actual mobile so the
     desktop demo stays inside the phone, but real iPhones get the
     notch-clearing pin. */
  @media (max-width: 700px) {
    .sheet.messaging {
      position: fixed !important;
      top: 0 !important;
      bottom: 0 !important;
      left: 0; right: 0;
      border-radius: 0;
      padding-top: env(safe-area-inset-top, 0px);
    }
  }
  .sheet.messaging #handleWrap { flex: 0 0 auto; }
  .sheet.messaging #sheetContent {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .sheet.messaging .fs-header {
    flex: 0 0 auto;
    /* Sheet-level padding now covers the safe area; tighten the inner
       padding so the header isn't double-padded on iOS. */
    padding-top: 14px;
  }
  .sheet.messaging .msg-body  {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
  .msg-composer-bar {
    flex: 0 0 auto;
    background: var(--layer);
    border-top: 1px solid var(--border);
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    display: flex; gap: 8px; align-items: flex-end;
    z-index: 30;
  }
  /* When the textarea inside is focused the iOS keyboard is up — the home
     indicator is hidden behind the keyboard, so the safe-area-bottom
     padding just leaves an awkward gap between the composer and the
     keyboard top. Drop it. */
  .msg-composer-bar:focus-within { padding-bottom: 6px; }
  /* Use dvh on the messaging sheet so the container shrinks when iOS
     opens the keyboard — keeps the composer hugging the keyboard top.
     SCOPED to mobile because on the desktop preview the phone frame is a
     fixed 390×844 box; 100dvh would overflow it upward and clip the
     fs-header (back button) and typing indicator off the top of the screen. */
  @media (max-width: 700px) {
    .sheet.messaging { max-height: 100dvh !important; height: 100dvh; }
  }
  @media (min-width: 701px) {
    .sheet.messaging { max-height: 100% !important; height: 100%; }
  }
  .msg-composer-bar textarea, .msg-composer-bar input[type="text"] {
    flex: 1; min-height: 42px; max-height: 110px; resize: none;
    background: var(--layer-2); border: 1px solid var(--border); border-radius: 18px;
    padding: 11px 16px; color: var(--text); font-size: 16px; font-family: var(--font-body);
    line-height: 1.45; outline: none;
  }
  .msg-composer-bar button.msg-send {
    background: #5fa050; border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 0;
  }
  .msg-composer-bar button.msg-send:disabled { opacity: 0.5; cursor: not-allowed; }
  .msg-composer-bar button.msg-send.cater { background: var(--cater-accent); }
  .msg-composer-bar button.msg-send.live  { background: #4a8bbf; }

  /* Pull-to-refresh — ptr-pulling disables the slide transition so the
     sheet follows the finger 1:1; releasing it lets the easing snap back. */
  .sheet.ptr-pulling { transition: none !important; }
  .ptr-indicator {
    position: absolute; top: 0; left: 0; right: 0; height: 64px;
    display: flex; align-items: center; justify-content: center;
    z-index: 590; pointer-events: none;
    opacity: 0; transition: opacity 0.18s ease;
  }
  .ptr-indicator.visible { opacity: 1; }
  .ptr-indicator .spinner {
    width: 22px; height: 22px;
    border: 2px solid var(--border-mid);
    border-top-color: var(--red);
    border-radius: 50%;
  }
  .ptr-indicator.refreshing .spinner {
    animation: ptr-spin 0.9s linear infinite;
  }
  @keyframes ptr-spin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
  .sheet-handle-wrap { padding: 14px 18px 0; position: sticky; top: 0; background: var(--layer); z-index: 10; }
  .sheet-handle { width: 36px; height: 3px; background: var(--border-mid); border-radius: 2px; margin: 0 auto 14px; cursor: pointer; }
  .sheet.fullscreen .sheet-handle-wrap { display: none; }
  .fs-header {
    position: sticky; top: 0; background: var(--layer);
    padding: calc(env(safe-area-inset-top,10px) + 6px) 16px 14px;
    display: flex; align-items: center; gap: 12px; z-index: 20;
  }
  .fs-back { background: transparent; border: none; color: var(--text); font-size: 26px; cursor: pointer; padding: 0; width: 40px; height: 40px; margin-left: -3px; display: flex; align-items: center; justify-content: center; transition: transform .14s cubic-bezier(.2,0,0,1); -webkit-tap-highlight-color: transparent; }
  .fs-back:active { transform: scale(.88); }
  .fs-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); }
  .fs-body { padding: 16px 16px 32px; }
  /* Slide-in when sheet content swaps to a new page (Account → My Reviews,
     Edit Listing → Boil Hours sub-sheet, etc.). The `content-enter` class
     is toggled by the MutationObserver in init(). Transform-only — no
     opacity change — so there's never a black flash on filter re-renders
     or fast navigations. */
  @keyframes sheetContentEnter {
    from { transform: translateX(22px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
  /* Back navigation slides in from the LEFT (mirror of forward). */
  @keyframes sheetContentBack {
    from { transform: translateX(-22px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
  #sheetContent.content-enter {
    animation: sheetContentEnter 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #sheetContent.content-back {
    animation: sheetContentBack 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* ── Crawdaddy logo loader ── the crawfish assembles from its facets on a
     loop (same pieces as the opening splash). Use crawLoaderHTML() inline or
     showCrawLoader(overlay) for a full-screen veil. Until the facet payload is
     available the breathing-claw fallback (.craw-loader-mark.fallback) shows. */

  /* Facet-assembly loop — pieces fly in center-out, hold, then drift back out.
     Each piece carries a constant negative animation-delay (its center-out
     phase), so the staggered assemble/disassemble re-syncs every cycle. Animate
     TO an explicit identity transform (not `none`) so pieces don't arc/skew in
     flight — same lesson as the opening intro. */
  @keyframes crawAsmLoop {
    0%   { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.4); }
    26%  { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
    66%  { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
    90%  { opacity: 0; transform: translate(calc(var(--tx) * .55), calc(var(--ty) * .55)) rotate(calc(var(--rot) * .6)) scale(.62); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.4); }
  }
  /* Fallback breathing claw (no facet payload yet). */
  @keyframes crawLoaderSpin  { to { transform: rotate(360deg); } }
  @keyframes crawLoaderPulse { 0%,100% { opacity: .55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
  .craw-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 16px; }
  .craw-loader-mark { width: 64px; height: 64px; position: relative; }
  /* facet stage */
  .craw-loader-mark .craw-asm { position: absolute; inset: 0; }
  .craw-loader-mark .craw-asm .ci-piece {
    position: absolute; opacity: 0;
    animation: crawAsmLoop 2.6s cubic-bezier(.22,.61,.36,1) infinite both;
    animation-delay: var(--d);
  }
  .craw-loader-mark .craw-asm .ci-piece img { width: 100%; height: 100%; display: block; }
  /* fallback claw */
  .craw-loader-mark.fallback .ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2.5px solid var(--border-mid); border-top-color: var(--red);
    animation: crawLoaderSpin 0.9s linear infinite;
  }
  .craw-loader-mark.fallback img {
    position: absolute; inset: 11px; width: 42px; height: 42px; object-fit: contain;
    animation: crawLoaderPulse 1.4s ease-in-out infinite;
  }
  .craw-loader-txt { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  @media (prefers-reduced-motion: reduce){
    .craw-loader-mark .craw-asm .ci-piece { animation: crawLoaderPulse 1.6s ease-in-out infinite; opacity: 1; }
  }
  /* Full-screen loading veil over the sheet. */
  .craw-loader-veil {
    position: absolute; inset: 0; z-index: 50;
    background: color-mix(in srgb, var(--layer) 88%, transparent);
    display: flex; align-items: center; justify-content: center;
    animation: crawOverlayBgIn 0.2s ease;
  }

  /* Universal animated overlay system — toggle .craw-closing on any
     overlay element and call .remove() after ~300ms. Cards inside slide
     down on close; the backdrop fades out. Use closeCrawOverlay(id)
     helper instead of overlay.remove() to get the animation. */
  @keyframes crawOverlayBgIn   { from { opacity: 0 } to { opacity: 1 } }
  @keyframes crawOverlayBgOut  { from { opacity: 1 } to { opacity: 0 } }
  @keyframes crawOverlayCardIn  { from { transform: translateY(100%) } to { transform: translateY(0) } }
  @keyframes crawOverlayCardOut { from { transform: translateY(0)   } to { transform: translateY(100%) } }
  .craw-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 9999;
    display: flex; align-items: flex-end; justify-content: center;
    animation: crawOverlayBgIn 0.3s ease;
    cursor: pointer;
  }
  .craw-overlay > .craw-overlay-card {
    animation: crawOverlayCardIn 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    cursor: default;
  }
  .craw-overlay.craw-closing {
    animation: crawOverlayBgOut 0.28s ease forwards;
    pointer-events: none;
  }
  .craw-overlay.craw-closing > .craw-overlay-card {
    animation: crawOverlayCardOut 0.32s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }

  /* ── STALE-CONFIRM MODAL ── small centered popup the Confirm-Fresh button
     opens when a vendor's listing is stale (>7d). Hours + price pre-filled
     so the vendor can correct or attest in one step. */
  .stale-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.78);
    z-index: 1200; display: flex; align-items: center; justify-content: center;
    padding: 24px; animation: crawOverlayBgIn 0.3s ease forwards;
  }
  .stale-modal {
    background: var(--layer);
    border: 1px solid rgba(201,59,0,0.45);
    border-radius: 14px;
    padding: 22px 20px 18px;
    max-width: 420px; width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    animation: staleModalIn 0.38s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  @keyframes staleModalIn { from { transform: translateY(24px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
  .stale-eyebrow {
    font-size: 10px; font-weight: 800; color: #ef7a45;
    letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 6px;
  }
  .stale-title {
    font-family: var(--font-display); font-size: 20px; font-weight: 800;
    color: var(--text); line-height: 1.15; margin-bottom: 6px;
  }
  .stale-subtitle {
    font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 18px;
  }
  .stale-label {
    display: block; font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1.4px; margin: 12px 0 6px;
  }
  .stale-input {
    width: 100%; background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 11px 12px; color: var(--text);
    font-family: var(--font-body); font-size: 14px; line-height: 1.4;
    box-sizing: border-box; resize: vertical;
  }
  .stale-input:focus { outline: none; border-color: rgba(201,122,0,0.6); }
  .stale-price-row {
    display: flex; align-items: stretch;
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
  }
  .stale-price-row:focus-within { border-color: rgba(201,122,0,0.6); }
  .stale-prefix, .stale-suffix {
    display: flex; align-items: center; padding: 0 12px;
    color: var(--muted); font-size: 14px; font-weight: 700;
    background: rgba(0,0,0,0.18);
  }
  .stale-prefix { border-right: 1px solid var(--border); }
  .stale-suffix { border-left: 1px solid var(--border); }
  .stale-price { flex: 1; background: transparent; border: 0; border-radius: 0; font-size: 16px; }
  .stale-price:focus { outline: none; }
  .stale-actions {
    display: flex; gap: 10px; margin-top: 22px;
  }
  .stale-cancel, .stale-submit {
    flex: 1; padding: 13px 14px; border-radius: 9px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    letter-spacing: 0.3px; cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
  }
  .stale-cancel {
    background: transparent; border: 1px solid var(--border);
    color: var(--muted);
  }
  .stale-cancel:hover { background: var(--layer-2); color: var(--text); }
  .stale-submit {
    background: #ef7a45; border: 1px solid #ef7a45; color: #1a0f08;
  }
  .stale-submit:hover { background: #ff8a55; }
  .stale-submit:disabled { opacity: 0.6; cursor: default; }

  /* ── SPOT DETAIL ── */
  .detail-wrap { padding: 0 18px 24px; position: relative; }
  /* Back button positioned top-left over the hero/photo area on the
     spot detail. Rendered when the spot was opened from a list — taps
     return to that list instead of closing back to the map. */
  /* Sticky, zero-height wrapper keeps the back button pinned top-left while the
     sheet scrolls. The .sheet transform breaks position:fixed, so we use sticky
     (same mechanism as the handle bar) + an absolutely-positioned button. */
  .detail-back-wrap { position: sticky; top: 0; height: 0; z-index: 50; }
  .detail-back-btn {
    position: absolute; top: 10px; left: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px 4px 0;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .detail-back-btn:hover { background: rgba(0,0,0,0.72); }
  body.light .detail-back-btn {
    background: rgba(255,247,237,0.88); border-color: rgba(0,0,0,0.18); color: #2a1410;
  }
  body.light .detail-back-btn:hover { background: rgba(255,247,237,0.98); }
  /* When the spot detail is in a fullscreen sheet (i.e. opened from the
     All Spots / Saved list), push the first child below the status bar so
     the hero image and photo carousel don't bleed under the notch. We add
     14px of extra breathing room on top of safe-area so the title isn't
     immediately butting up against the status bar. The vendor-hero's
     -18px top margin gets neutralized in fullscreen so it sits flush at
     the safe-area boundary, not pulled above it. */
  .sheet.fullscreen .detail-wrap { padding-top: calc(env(safe-area-inset-top, 14px) + 14px); }
  .sheet.fullscreen .vendor-hero { margin-top: 0; }
  .sheet.fullscreen .cta-hero { margin-top: 0; }
  /* Full-bleed hero runs ALL the way to the top — under the notch, no gap.
     The hero background fills the safe-area; its controls (back button, dots)
     are pushed down so they clear the status bar / notch, and the hero is
     made taller by the inset so its content isn't cramped. */
  .sheet.fullscreen .detail-wrap:has(.vendor-hero:first-child) { padding-top: 0; }
  .sheet.fullscreen .detail-wrap:has(.cta-hero) { padding-top: 0; }
  .sheet.fullscreen .cta-hero { height: calc(232px + env(safe-area-inset-top, 0px)); }
  .sheet.fullscreen .detail-back-btn { top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .sheet.fullscreen .cta-hero-dots { top: calc(env(safe-area-inset-top, 0px) + 14px); }

  /* ── PHOTO LIGHTBOX ── Tap a carousel slide to open the image full-screen.
     Tap anywhere on the overlay (or the ✕) to dismiss. Replaces the old
     window.open(url, '_blank') flow which kicked users out of the app. */
  .photo-lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: env(safe-area-inset-top, 16px) 16px env(safe-area-inset-bottom, 16px);
    cursor: zoom-out;
    animation: photoLightboxFadeIn 0.18s ease-out;
  }
  @keyframes photoLightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .photo-lightbox-overlay img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  }
  .photo-lightbox-close {
    position: absolute; top: calc(env(safe-area-inset-top, 14px) + 14px); right: 16px;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  /* Multi-photo lightbox: prev/next arrows + counter pill. Hidden when
     there's only one photo (single-image opens behave like the old
     centered banner — tap-to-close, no chrome). */
  .photo-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 26px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  .photo-lightbox-nav:hover { background: rgba(0,0,0,0.75); }
  .photo-lightbox-nav.prev { left: 16px; }
  .photo-lightbox-nav.next { right: 16px; }
  .photo-lightbox-counter {
    position: absolute; bottom: calc(env(safe-area-inset-bottom, 14px) + 14px);
    left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 12px; border-radius: 999px;
    z-index: 2; line-height: 1;
  }
  .photo-lightbox-overlay img {
    transition: opacity 0.18s ease;
  }
  .detail-name { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.1; margin-bottom: 4px; }
  .detail-address { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; margin-bottom: 6px; }
  .detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
  .detail-tag {
    border: 1px solid var(--border-mid); color: var(--muted);
    padding: 4px 9px; border-radius: 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  }
  .detail-tag.boil { border-color: rgba(201,122,0,0.35); color: var(--amber); background: rgba(201,122,0,0.07); }

  /* SIZE VISUAL ── the hero rating */
  .size-section { margin-bottom: 16px; }
  .size-label { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
  .size-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .size-opt {
    background: transparent; border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: border-color .15s ease, background .15s ease, color .15s ease; cursor: default;
  }
  .size-opt.active {
    border-color: var(--red);
    background: rgba(201,59,0,0.09);
  }
  .size-opt-icon { line-height: 1; text-align: center; }
  .size-opt-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
  .size-opt.active .size-opt-label { color: var(--red); }
  .size-opt-sublabel { font-size: 10px; color: var(--muted); opacity: 0.85; text-align: center; margin-top: -1px; }
  .size-opt.active .size-opt-sublabel { opacity: 0.9; color: var(--red); }

  /* Other ratings */
  .ratings-section { margin-bottom: 16px; }
  .rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .rating-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
  .rating-icon-label { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); width: 28px; flex-shrink: 0; }
  .rating-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .rating-fill { height: 100%; border-radius: 3px; background: var(--red); }
  .rating-fill.amber { background: var(--amber); }
  .rating-label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; min-width: 60px; text-align: right; }

  /* Stats row */
  .stat-row { display: flex; gap: 8px; margin-bottom: 16px; }
  .stat-block {
    flex: 1; background: var(--layer-2); border: 1px solid var(--border); border-radius: 7px; padding: 10px;
  }
  .stat-block-label { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
  .stat-block-val { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text); line-height: 1; }
  .stat-block-val.red { color: var(--red); }
  .stat-block-val.amber { color: var(--amber); }
  .stat-block-sub { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

  /* Catering-mode detail sheet — the State A layout */
  .cater-cta {
    width: 100%; padding: 16px 14px; border-radius: 10px; border: 1.5px solid var(--cater-accent);
    background: var(--cater-cta-grad);
    color: #fff; font-family: var(--font-body); font-weight: 900;
    font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; box-shadow: var(--cater-cta-shadow), 0 0 8px 0 color-mix(in srgb, var(--cater-accent) 70%, transparent), 0 0 20px 2px color-mix(in srgb, var(--cater-accent) 45%, transparent);
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-bottom: 6px; transition: transform 0.12s, box-shadow 0.12s;
  }
  .cater-cta:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px var(--cater-accent); }
  .cater-cta .ico { font-size: 16px; }
  .cater-cta-sub { text-align: center; font-size: 10.5px; color: var(--muted); margin-bottom: 18px; letter-spacing: 0.8px; line-height: 1.5; }
  .cater-cta-sub strong { color: var(--text); }
  .cater-ce-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
  .cater-ce-block { background: var(--layer-2); border: 1px solid var(--cater-accent-border); border-radius: 8px; padding: 12px 8px; text-align: center; }
  /* Filled variant — when the stat has a real value (min lbs / price / lead
     days), match the boiled-side "Per Pound" red-fill treatment but in
     catering purple with off-cream text. */
  .cater-ce-block.filled { background: var(--cater-accent); border-color: var(--cater-accent); }
  .cater-ce-block.filled .cater-ce-lbl { color: rgba(245,230,197,0.78); }
  .cater-ce-block.filled .cater-ce-val { color: var(--cream); }
  body.light .cater-ce-block.filled .cater-ce-lbl { color: rgba(255,247,237,0.85); }
  body.light .cater-ce-block.filled .cater-ce-val { color: #fff7ed; }
  .cater-ce-lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px; font-weight: 700; }
  .cater-ce-val { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--cater-accent-text); line-height: 1.15; }
  .cater-ce-val.muted { color: var(--muted); font-size: 16px; font-style: italic; }
  .cater-section-h { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
  /* "You're X mi away" banner above the coverage heatmap */
  .cater-cov-you { font-size: 12.5px; line-height: 1.5; padding: 10px 13px; border-radius: 9px; margin-bottom: 10px; font-weight: 600; }
  .cater-cov-you.in  { background: rgba(95,160,80,0.12); border: 1px solid rgba(95,160,80,0.4); color: #7fb86a; }
  .cater-cov-you.in b { color: #8fce78; }
  .cater-cov-you.out { background: rgba(201,59,0,0.10); border: 1px solid rgba(201,59,0,0.4); color: #e0936f; }
  .cater-section-h::before { content: '//'; color: var(--cater-accent-text); }
  .cater-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  .cater-chip { background: var(--cater-accent-soft); border: 1px solid var(--cater-accent-border); color: var(--cater-accent-text); font-size: 10.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; letter-spacing: 0.3px; }
  .cater-chip.size { background: var(--cater-accent-strong); border-color: var(--cater-accent); color: var(--cater-accent-text); font-family: var(--font-display); font-weight: 700; }
  .cater-ttk { display: grid; gap: 6px; margin-bottom: 6px; }
  .cater-ttk-row { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 8px 10px; background: var(--layer-1, var(--layer-2)); border: 1px solid var(--border); border-radius: 8px; }
  .cater-ttk-row .n { color: var(--cater-accent-text); font-family: var(--font-display); font-size: 14px; line-height: 1; padding-top: 2px; }
  .cater-ttk-row .t { font-size: 12.5px; line-height: 1.5; color: var(--text); }
  .cater-ttk-row .t b { color: var(--cater-accent-text); font-weight: 700; }
  .cater-pro-badge { background: var(--cater-accent-soft); border: 1px solid var(--cater-accent-border); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
  .cater-pro-badge .ico { font-size: 16px; }
  .cater-pro-badge .t { color: var(--cater-accent-text); font-weight: 700; letter-spacing: 0.4px; font-size: 12px; }
  .cater-pro-badge .sub { color: var(--muted); font-size: 10.5px; font-weight: 500; }
  .cater-gap-note { background: var(--cater-accent-soft); border: 1px dashed var(--cater-accent-border); border-radius: 8px; padding: 10px 12px; color: var(--muted); font-size: 11.5px; line-height: 1.55; margin-bottom: 14px; }
  .cater-gap-note b { color: var(--cater-accent-text); }
  .cater-quote {
    font-style: italic; color: var(--text); font-size: 12.5px; line-height: 1.6;
    border-left: 3px solid var(--cater-accent); padding: 6px 0 6px 12px; margin: 14px 0;
    font-family: var(--font-display); font-weight: 400;
  }

  /* Review */
  .review-block {
    background: var(--layer-2); border-left: 3px solid var(--red);
    border-radius: 0 6px 6px 0; padding: 12px 14px;
    font-size: 12px; color: var(--text); line-height: 1.65;
    font-style: italic; margin-bottom: 16px;
  }
  .review-author { font-style: normal; font-size: 8px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; }

  /* Directions */
  .dir-label { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
  .dir-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .dir-btn {
    background: var(--layer-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 11px 4px;
    font-family: var(--font-body); font-weight: 700; font-size: 9px;
    text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; text-align: center; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.12s;
  }
  .dir-btn:hover { border-color: var(--red); color: var(--red); }

  /* ── LIST VIEW ── */
  .sort-row { display: flex; gap: 6px; margin-bottom: 14px; }
  .sort-pill {
    flex: 1; background: transparent; border: 1px solid var(--border);
    color: var(--muted); padding: 9px; border-radius: 5px;
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer; font-family: var(--font-body);
  }
  .sort-pill.active { background: rgba(201,59,0,0.1); border-color: var(--accent-dark); color: var(--red); }
  /* Spice dropdown pill */
  .spice-drop-wrap { position: relative; flex: 1; }
  .spice-pill { width: 100%; }
  .spice-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
    background: var(--layer-2); border: 1px solid var(--border-mid);
    border-radius: 6px; padding: 4px; flex-direction: column; gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  }
  .spice-opt {
    width: 100%; background: transparent; border: none; color: var(--text);
    padding: 8px 10px; text-align: left; font-family: var(--font-body);
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 4px;
  }
  .spice-opt:hover { background: rgba(255,255,255,0.05); }
  .spice-opt.sel { color: var(--red); background: rgba(201,59,0,0.1); }
  .list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer;
  }
  .list-row:last-child { border-bottom: none; }
  .list-pin {
    width: 38px; height: 38px; background: var(--red);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: none;
    border: 2px solid rgba(13,9,8,0.5); font-size: 17px; line-height: 1;
  }
  .list-pin.featured { background: #b06010; box-shadow: 0 2px 10px rgba(245,200,66,0.5), 0 0 0 2px #f5c842; }
  .list-pin img.list-claw { width: 100%; height: 100%; display: block; pointer-events: none; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
  /* Custom vendor logos are square photos — cover + round them to fill the circular pin. */
  .list-pin img.list-claw.custom-logo { border-radius: 50%; object-fit: cover; filter: none; }
  /* Generic claw-pin icon (replaces 🦞 emoji throughout the app). Width/height set inline. */
  .craw-icon { display: inline-block; vertical-align: middle; object-fit: contain; }
  .list-info { flex: 1; min-width: 0; }
  /* Flex row so the verified ✓ stays pinned to the end of the name and the
     name text — not the badge — is what gets ellipsis'd if it overflows.
     min-width:0 on the text is what allows the flex item to actually shrink
     below its content width inside a flex parent. */
  .list-name { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 2px; display: flex; align-items: center; gap: 5px; min-width: 0; }
  .list-name-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-name .paid-vendor-check { margin-left: 0; }
  .list-meta { font-size: 9px; color: var(--muted); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .list-right { text-align: right; flex-shrink: 0; }
  .list-size { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--red); }
  .list-ppb { font-size: 11px; color: var(--amber); font-weight: 700; margin-top: 2px; }

  /* ── FILTER SHEET ── */
  .filter-section { margin-bottom: 18px; }
  .filter-label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
  .filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
  .fc {
    background: transparent; border: 1px solid var(--border-mid);
    color: var(--muted); padding: 7px 13px; border-radius: 5px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; font-family: var(--font-body); transition: all 0.12s;
  }
  .fc.on { background: var(--red); color: #fff; border-color: var(--red); }
  .fc:hover:not(.on) { border-color: var(--red); color: var(--red); }
  /* Mode-themed list filters — catering = purple, live = blue. Scoped to the
     .fs-body mode class so boiled keeps the default red. Covers the sort pills
     (Nearest/A–Z/Size/Price) and the Size/Spice filter chips. */
  .fs-body.mode-catering .sort-pill.active { background: var(--cater-accent-soft); border-color: var(--cater-accent); color: var(--cater-accent-text); }
  .fs-body.mode-catering .fc.on { background: var(--cater-accent); color: #fff; border-color: var(--cater-accent); }
  .fs-body.mode-catering .fc:hover:not(.on) { border-color: var(--cater-accent); color: var(--cater-accent-text); }
  .fs-body.mode-live .sort-pill.active { background: rgba(74,139,191,0.12); border-color: #4a8bbf; color: #4a8bbf; }
  .fs-body.mode-live .fc.on { background: #4a8bbf; color: #fff; border-color: #4a8bbf; }
  .fs-body.mode-live .fc:hover:not(.on) { border-color: #4a8bbf; color: #4a8bbf; }
  .filter-clear { width: 100%; background: transparent; border: 1px solid var(--border-mid); color: var(--muted); padding: 12px; border-radius: 6px; font-family: var(--font-body); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; margin-top: 4px; }
  .filter-clear:hover { border-color: var(--red); color: var(--red); }

  /* ── SUBMIT FORM ── */
  .field-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #9a8070; text-transform: uppercase; display: block; margin-bottom: 5px; }
  .text-input { width: 100%; background: var(--layer-2); border: 1px solid var(--border); border-radius: 6px; padding: 11px 13px; color: var(--text); font-size: 16px; font-family: var(--font-body); outline: none; }
  .text-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(201,59,0,0.12); }
  /* Mode-themed input outlines — live = icy blue, catering = purple. */
  .text-input.theme-live  { border-color: rgba(74,139,191,0.45); }
  .text-input.theme-live:focus  { border-color: #4a8bbf; box-shadow: 0 0 0 3px rgba(74,139,191,0.18); }
  .text-input.theme-cater { border-color: var(--cater-accent-border); }
  .text-input.theme-cater:focus { border-color: var(--cater-accent); box-shadow: 0 0 0 3px rgba(139,109,184,0.18); }
  /* Every input/textarea/select inside the vendor catering section focuses in
     catering purple, not the default red — they share the cater theme without
     needing the .theme-cater class on each one. */
  #veCateringSection .text-input:focus,
  #veCateringSection input:focus,
  #veCateringSection textarea:focus,
  #veCateringSection select:focus { border-color: var(--cater-accent); box-shadow: 0 0 0 3px rgba(139,109,184,0.18); outline: none; }
  textarea.text-input { resize: none; min-height: 70px; }
  /* "Drop Pin At Current Location" — dark mode uses bright green for legibility
     on the dark surface; light mode forces forest green per no-lime-green rule. */
  .ve-geo-btn {
    margin-top: 8px; width: 100%; padding: 10px; border-radius: 8px;
    background: rgba(58,125,68,0.10); border: 1px solid rgba(58,125,68,0.5);
    color: #4eb15c; font-family: var(--font-body); font-size: 12px;
    font-weight: 800; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  }
  body.light .ve-geo-btn {
    color: #1f4019; background: rgba(31,64,25,0.08); border-color: rgba(31,64,25,0.55);
  }
  /* Address autocomplete dropdown — anchored under the address input. */
  #veAddressSugs, #cqAddressSugs { background: var(--layer); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; overflow: hidden; max-height: 240px; overflow-y: auto; }
  #veAddressSugs .ve-sug, #cqAddressSugs .cq-sug { padding: 10px 12px; font-size: 12px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); line-height: 1.45; }
  #veAddressSugs .ve-sug:last-child, #cqAddressSugs .cq-sug:last-child { border-bottom: 0; }
  #veAddressSugs .ve-sug:hover, #cqAddressSugs .cq-sug:hover { background: var(--layer-2); }
  body.light #veAddressSugs, body.light #cqAddressSugs { background: #fff; border-color: var(--border-mid); }
  body.light #veAddressSugs .ve-sug:hover, body.light #cqAddressSugs .cq-sug:hover { background: rgba(0,0,0,0.04); }
  .field-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .size-pick-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 14px; }
  .size-pick-btn {
    background: var(--layer-2); border: 1px solid var(--border); border-radius: 7px;
    padding: 10px 4px; text-align: center; cursor: pointer;
    font-family: var(--font-body); font-size: 9px; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: all 0.12s;
  }
  .size-pick-btn.selected { border-color: var(--red); background: rgba(201,59,0,0.1); color: var(--red); }
  .slider-wrap { background: var(--layer-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
  .slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .slider-row:last-child { margin-bottom: 0; }
  input[type=range].slider { flex: 1; -webkit-appearance: none; height: 4px; background: var(--border); border-radius: 2px; outline: none; }
  input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--red); border: 2px solid var(--bg); border-radius: 50%; cursor: pointer; }
  input[type=range].slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--red); border: 2px solid var(--bg); border-radius: 50%; cursor: pointer; }
  .slider-val { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--red); min-width: 46px; text-align: center; }
  .submit-btn { width: 100%; background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 14px; font-family: var(--font-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; margin-top: 6px; }
  .submit-btn:hover { background: var(--red-hover); }
  .submit-btn.theme-cater { background: var(--cater-accent); }
  .submit-btn.theme-cater:hover { background: #7c5cae; }
  .submit-btn.theme-live  { background: #4a8bbf; }
  .submit-btn.theme-live:hover  { background: #3d7aa8; }

  /* ── CRAWFISH PASSPORT ── */
  .pass-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
  .pass-modal{background:var(--layer);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:340px;width:100%;text-align:center}
  .pass-modal-emoji{font-size:34px;line-height:1}
  .pass-modal-title{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text);margin-top:6px}
  .pass-modal-sub{font-size:13px;color:var(--muted);margin:6px 0 16px;line-height:1.45}
  .pass-pound-input{display:flex;align-items:center;gap:10px;background:var(--layer-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px}
  .pass-pound-input input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-display);font-size:22px;font-weight:800;width:100%}
  .pass-pound-input .unit{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted)}
  .pass-modal-skip{background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:12px;cursor:pointer;margin-top:10px;width:100%}
  .pass-card{background:linear-gradient(135deg,rgba(201,59,0,.10),var(--layer-2));border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:6px}
  .pass-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .pass-card-title{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text);line-height:1.1}
  .pass-card-season{font-size:11px;color:var(--muted);margin-top:2px}
  .pass-badge-chip{background:rgba(212,160,23,.15);border:1px solid rgba(212,160,23,.4);color:var(--gold);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;white-space:nowrap}
  .pass-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
  .pass-stat{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 6px;text-align:center}
  .pass-stat-val{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text);line-height:1}
  .pass-stat-cap{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:5px}
  .pass-pounds{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px;margin-top:10px}
  .pass-pounds-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:800}
  .pass-pounds-row{display:flex;justify-content:space-between;margin-top:8px;gap:10px}
  .pass-pounds-val{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text);line-height:1}
  .pass-pounds-foot{font-size:11px;color:var(--muted);margin-top:9px;border-top:1px solid var(--border);padding-top:8px}
  .pass-mini-chip{display:inline-block;background:rgba(74,122,64,.2);border:1px solid rgba(74,122,64,.5);color:var(--green);border-radius:999px;padding:1px 7px;font-size:9px;font-weight:800;margin-left:4px}
  .pass-badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pass-badge{background:var(--layer-2);border:1px solid var(--border);border-radius:10px;padding:12px 6px;text-align:center;opacity:.4}
  .pass-badge.on{opacity:1;border-color:rgba(212,160,23,.4);background:rgba(212,160,23,.08)}
  .pass-badge-icon{font-size:22px;line-height:1}
  .pass-badge-name{font-size:9px;font-weight:700;color:var(--text);margin-top:6px;letter-spacing:.3px;line-height:1.2}
  .pass-cities{display:flex;flex-wrap:wrap;gap:6px}
  .pass-city-chip{background:var(--layer-2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:600}
  .pass-logsack{background:var(--layer-2);border:1px solid var(--border);border-radius:10px;padding:14px}
  .pass-logsack-sub{font-size:11px;color:var(--muted);margin:8px 0 12px}
  .pass-visits .pass-visit-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
  .pass-visit-city{color:var(--muted);font-size:12px;white-space:nowrap}
  .pass-empty{text-align:center;color:var(--muted);font-size:12px;padding:18px 0}

  /* ── CUSTOMER DASHBOARD (redesigned IA) ── */
  .cd-hero{background:linear-gradient(135deg,rgba(201,59,0,.16),var(--layer-2));border:1px solid rgba(201,59,0,.3);border-radius:14px;padding:16px;margin-bottom:14px}
  .cd-hero-row{display:flex;align-items:center;gap:12px}
  .cd-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--gold));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff;flex-shrink:0}
  .cd-name{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--cream);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cd-meta{font-size:11px;color:var(--muted);margin-top:2px}
  .cd-hero-go{margin-left:auto;flex-shrink:0;background:rgba(0,0,0,.25);border:1px solid var(--border-mid);border-radius:8px;color:var(--cream);font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.5px;padding:8px 12px;cursor:pointer}
  .cd-stats{display:flex;gap:8px;margin-top:13px}
  .cd-stat{flex:1;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:9px;padding:9px 6px;text-align:center}
  .cd-stat .v{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--cream);line-height:1}
  .cd-stat .c{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .cd-alert{border-radius:11px;padding:12px 13px;margin-bottom:12px;display:flex;align-items:center;gap:11px}
  .cd-alert-ico{font-size:20px;flex-shrink:0}
  .cd-alert-t{font-size:12.5px;font-weight:700}
  .cd-alert-s{font-size:11px;color:var(--muted);margin-top:1px;line-height:1.45}
  .cd-alert-red{background:rgba(201,59,0,.1);border:1px solid rgba(201,59,0,.45);align-items:flex-start}
  .cd-alert-green{background:rgba(45,122,58,.15);border:1px solid rgba(45,122,58,.5);align-items:flex-start}
  .cd-alert-cater{background:rgba(139,109,184,.12);border:1px solid var(--cater-accent-border,rgba(139,109,184,.5))}
  .cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
  .cd-tile{position:relative;background:var(--layer-2);border:1px solid var(--border);border-radius:11px;padding:13px;text-align:left;cursor:pointer;font-family:var(--font-body);display:flex;flex-direction:column;transition:border-color .12s}
  .cd-tile:active{border-color:var(--red)}
  @media(hover:hover){.cd-tile:hover{border-color:var(--border-mid)}}
  .cd-tile-ico{font-size:22px;line-height:1}
  .cd-tile-lab{font-size:12.5px;font-weight:700;color:var(--text);margin-top:8px}
  .cd-tile-sub{font-size:10px;color:var(--muted);margin-top:1px}
  .cd-tile-badge{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
  .cd-vendor-cta{background:rgba(201,122,0,.08);border:1px dashed rgba(201,122,0,.45);border-radius:11px;padding:13px 14px;margin-bottom:14px;text-align:center;cursor:pointer}
  .cd-vendor-t{font-size:12px;font-weight:800;color:var(--amber);letter-spacing:.3px}
  .cd-vendor-s{font-size:10.5px;color:var(--muted);margin-top:2px}
  .cd-quiet{border-top:1px solid var(--border);margin-top:4px;padding-top:6px}
  .cd-quiet-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 2px;background:none;border:none;cursor:pointer;font-family:var(--font-body)}
  .cd-quiet-row .l{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text);font-weight:600}
  .cd-quiet-ico{font-size:16px;width:20px;text-align:center}
  .cd-quiet-row + .cd-quiet-row{border-top:1px solid var(--border)}
  /* Light-mode: --cream stays a light tone, so force dark text + readable surfaces. */
  body.light .cd-name{color:var(--text)}
  body.light .cd-meta{color:var(--muted)}
  body.light .cd-hero-go{background:rgba(0,0,0,.06);color:var(--text);border-color:var(--border-mid)}
  body.light .cd-stat{background:rgba(255,255,255,.5);border-color:var(--border-mid)}
  body.light .cd-stat .v{color:var(--text)}
  body.light .cd-stat .c{color:var(--muted)}
  body.light .cd-vendor-cta{background:rgba(143,85,0,.14);border-color:var(--amber)}
  body.light .cd-vendor-t{color:var(--accent-dark)}
  body.light .cd-vendor-s{color:var(--text)}

  /* ── HOURS SUMMARY BOX ── Clickable rows in the Edit Boiled sheet
     that open the Boil-Hours / Open-Hours sub-sheet day picker. */
  .ve-hours-box {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; margin-bottom: 12px;
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer; text-align: left;
    transition: border-color 0.15s, background 0.15s;
    font-family: var(--font-body);
  }
  .ve-hours-box:hover { border-color: rgba(201,122,0,0.5); background: rgba(201,122,0,0.06); }
  .ve-hours-box .meta { flex: 1; min-width: 0; }
  .ve-hours-box .title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    color: #9a8070; text-transform: uppercase; margin-bottom: 3px;
  }
  .ve-hours-box .desc {
    font-size: 11px; color: var(--muted); margin-bottom: 6px; line-height: 1.4;
  }
  .ve-hours-box .val {
    font-size: 14px; color: var(--text); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ve-hours-box .val.empty { color: var(--muted); font-style: italic; font-weight: 400; }
  .ve-hours-box .chev {
    color: var(--muted); font-size: 22px; line-height: 1; flex-shrink: 0;
  }

  /* ── ACCOUNT SHEET ── */
  .auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
  .auth-tab {
    flex: 1; padding: 11px 0; text-align: center;
    font-family: var(--font-body); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .15s ease, border-bottom-color .15s ease;
  }
  .auth-tab.active { color: var(--red); border-bottom-color: var(--red); }
  .auth-panel { display: none; }
  .auth-panel.active { display: block; }
  .auth-field { margin-bottom: 13px; }
  .auth-btn { width: 100%; background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 14px; font-family: var(--font-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; margin-top: 4px; }
  .auth-btn:hover { background: var(--red-hover); }
  .vendor-cta {
    margin-top: 22px; padding: 14px 16px;
    background: rgba(201,122,0,0.08); border: 1px solid rgba(201,122,0,0.3);
    border-radius: 8px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; transition: background 0.15s;
  }
  .vendor-cta:hover { background: rgba(201,122,0,0.14); }
  .vendor-cta-left {}
  .vendor-cta-label { font-size: 8px; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 3px; }
  .vendor-cta-text { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
  .vendor-cta-arrow { color: var(--amber); font-size: 20px; }

  /* ── VENDOR FORM ── */
  .vendor-section { background: var(--layer); border: 1px solid var(--border); border-radius: 16px; padding: 16px 15px 8px; margin-bottom: 16px; }

  /* ── VENDOR SIGNUP · Multi-step wizard (mode picker + setup + confirm) ── */
  .vs-mode-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .vs-mode-card {
    background: var(--layer-2); border: 2px solid var(--border-mid);
    border-radius: 12px; padding: 16px;
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .vs-mode-card:hover { transform: translateY(-1px); }
  .vs-mode-card .vs-mode-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
    background: var(--layer); border: 1px solid var(--border);
  }
  .vs-mode-card .vs-mode-info { flex: 1; min-width: 0; }
  .vs-mode-card .vs-mode-ttl  { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
  .vs-mode-card .vs-mode-desc { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
  .vs-mode-card .vs-mode-check {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border-mid);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 16px; font-weight: 800; flex-shrink: 0;
  }
  /* Per-mode themed selected states */
  .vs-mode-card.live.selected     { background: rgba(74,139,191,0.10); border-color: #4a8bbf; }
  .vs-mode-card.live.selected     .vs-mode-icon  { background: rgba(74,139,191,0.10); border-color: #4a8bbf; }
  .vs-mode-card.live.selected     .vs-mode-check { background: #4a8bbf; border-color: #4a8bbf; color: #fff; }
  .vs-mode-card.live.selected     .vs-mode-ttl   { color: #8fb9d9; }
  .vs-mode-card.boiled.selected   { background: rgba(217,80,26,0.10);  border-color: var(--red); }
  .vs-mode-card.boiled.selected   .vs-mode-icon  { background: rgba(217,80,26,0.10);  border-color: var(--red); }
  .vs-mode-card.boiled.selected   .vs-mode-check { background: var(--red); border-color: var(--red); color: #fff; }
  .vs-mode-card.boiled.selected   .vs-mode-ttl   { color: #ff7b3a; }
  .vs-mode-card.catering.selected { background: var(--cater-accent-soft); border-color: var(--cater-accent); }
  .vs-mode-card.catering.selected .vs-mode-icon  { background: var(--cater-accent-soft); border-color: var(--cater-accent); }
  .vs-mode-card.catering.selected .vs-mode-check { background: var(--cater-accent); border-color: var(--cater-accent); color: #fff; }
  .vs-mode-card.catering.selected .vs-mode-ttl   { color: var(--cater-accent-text); }
  .vs-mode-card.ship.selected     { background: rgba(31,158,116,0.10); border-color: #1f9e74; }
  .vs-mode-card.ship.selected     .vs-mode-icon  { background: rgba(31,158,116,0.10); border-color: #1f9e74; }
  .vs-mode-card.ship.selected     .vs-mode-check { background: #1f9e74; border-color: #1f9e74; color: #fff; }
  .vs-mode-card.ship.selected     .vs-mode-ttl   { color: #3fd6a2; }

  /* Vendor Analytics — one stacked section per mode (Boiled · Live · Catering).
     The section header is button-styled (color-coded per mode) with the headline
     number on the right; the full per-mode dashboard renders directly below. */
  .va-section { margin-bottom: 22px; }
  .va-section-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--red); color: var(--cream);
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--red);
    border-bottom: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }
  .va-section-boiled   .va-section-btn { background: var(--red);                       border-color: var(--red); }
  .va-section-live     .va-section-btn { background: var(--live-deep, #2c5778);        border-color: var(--live-deep, #2c5778); }
  .va-section-catering .va-section-btn { background: var(--cater-accent, #8b6db8);     border-color: var(--cater-accent, #8b6db8); }
  body.light .va-section-catering .va-section-btn { background: var(--cater-accent, #5e3a8a); border-color: var(--cater-accent, #5e3a8a); color: #fff; }
  .va-section-btn-l {
    font-family: var(--font-body); font-size: 12px; font-weight: 900;
    letter-spacing: 2px; text-transform: uppercase;
  }
  .va-section-btn-r { text-align: right; }
  .va-section-btn-r .num {
    display: block;
    font-family: var(--font-display); font-size: 18px; font-weight: 800;
    line-height: 1;
  }
  .va-section-btn-r .sub {
    display: block; margin-top: 2px;
    font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; opacity: 0.75;
  }
  .va-section-body {
    background: var(--layer);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 14px;
  }

  /* Per-mode setup progress dots */
  .vs-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
  .vs-progress-dot { width: 22px; height: 3px; border-radius: 2px; background: var(--border-mid); }
  .vs-progress-dot.done   { background: var(--gold); }
  .vs-progress-dot.active { background: var(--text); }

  /* Step 4 summary pills (recap of picked modes) */
  .vs-summary-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 8px;
  }
  .vs-summary-pill { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; }
  .vs-summary-pill.live   { background: rgba(74,139,191,0.10); border: 1px solid #4a8bbf; color: #8fb9d9; }
  .vs-summary-pill.boiled { background: rgba(217,80,26,0.10);  border: 1px solid var(--red); color: #ff7b3a; }
  .vs-summary-pill.cater  { background: var(--cater-accent-soft); border: 1px solid var(--cater-accent); color: var(--cater-accent-text); }
  .vs-summary-name { flex: 1; font-size: 13px; font-weight: 700; }
  .vendor-section-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
  .vendor-section-title::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 8px rgba(212,160,23,0.7); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .check-group { display: flex; flex-direction: column; gap: 9px; }
  .check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .check-box {
    width: 18px; height: 18px; border: 1.5px solid var(--border-mid); border-radius: 4px;
    background: var(--layer-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
  }
  .check-box.checked { background: var(--red); border-color: var(--red); }
  .check-box.checked::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
  .check-label { font-size: 13px; color: var(--text); }
  .radio-group { display: flex; flex-direction: column; gap: 10px; }
  .radio-card {
    background: var(--layer-2); border: 1.5px solid var(--border); border-radius: 8px;
    padding: 13px 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: flex-start; gap: 12px;
  }
  .radio-card.selected { border-color: var(--red); background: rgba(201,59,0,0.07); }
  .radio-dot {
    width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border-mid);
    flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .radio-card.selected .radio-dot { border-color: var(--red); }
  .radio-card.selected .radio-dot::after { content: ''; width: 8px; height: 8px; background: var(--red); border-radius: 50%; display: block; }
  .radio-content {}
  .radio-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .radio-sub { font-size: 12px; color: #9a8070; line-height: 1.5; }
  .opt-in-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; cursor: pointer; }
  .opt-in-text { font-size: 12px; color: #9a8070; line-height: 1.5; }

  /* ── TOAST ── */
  .toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--layer-2); color: var(--text); border: 1px solid var(--border-mid);
    padding: 10px 18px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 9000;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── LIGHT MODE ── */
  /* Tokens deliberately darker than a typical light theme — the previous values
     were tuned to be soft on a dark background and read washed-out when the
     surface flipped to cream. Accent colors (--red/--amber/--gold/--green)
     override :root because :root's values are dark-mode-tuned. */
  body.light {
    /* High-Key Bone palette — whitest of the variants, barely-there warmth.
       Reads as luxury / editorial / minimalist. Tier accent colors pop
       harder against the cooler surface than the old cream did. */
    --bg: #faf6ec; --layer: #f1ead8; --layer-2: #e3d9c2;
    --border: #a99578; --border-mid: #8a7458;
    --text: #1d1208; --muted: #604a36; --accent-dark: #9a2e00;
    --red: #9a2e00; --red-hover: #7a2400;
    --amber: #8f5500; --gold: #a87a10; --gold-bright: #b8881a;
    --stale-amber: #7a5a08;
    --green: #1f4019;
    /* Catering theme — light-mode purple (deeper grape, readable on bone) */
    --cater-accent:        #5e3a8a;
    --cater-accent-text:   #432461;
    --cater-accent-soft:   rgba(94,58,138,0.10);
    --cater-accent-border: rgba(94,58,138,0.50);
    --cater-accent-strong: rgba(94,58,138,0.22);
    --cater-cta-grad:      linear-gradient(135deg, #7c5cae, #5e3a8a);
    --cater-cta-shadow:    0 8px 20px -8px rgba(94,58,138,0.6);
  }
  body.light .header { background: rgba(250,246,236,0.97); }
  body.light .maplibregl-ctrl-group { background: rgba(250,246,236,0.95) !important; border-color: var(--border) !important; }
  body.light .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
  body.light .sheet, body.light .sheet-backdrop { /* inherit */ }
  body.light .map-pin { border-color: #faf6ec; }
  /* Inline-styled bright greens (#82c272, #5fa050, etc.) were dark-mode-tuned —
     they hit ~1.9:1 contrast on cream. Override them via attribute selectors
     so the foreground text reads. Backgrounds (rgba(58,125,68,...)) are left
     alone — they still work as light tints on cream. */
  body.light [style*="color:#82c272" i],
  body.light [style*="color: #82c272" i],
  body.light [style*="color:#5fa050" i],
  body.light [style*="color: #5fa050" i],
  body.light [style*="color:#7bc870" i],
  body.light [style*="color: #7bc870" i],
  body.light [style*="color:#3a9a4a" i],
  body.light [style*="color: #3a9a4a" i] {
    color: #1f4019 !important;
  }
  body.light [style*="color:#3a7d44" i],
  body.light [style*="color: #3a7d44" i] {
    color: #143012 !important;
  }
  /* Pro tier orange (#ff7b3a) — light orange on cream reads as a pastel
     wash. Darkening the orange straight (deep umber) reads BROWN, not Pro —
     so it never matched the theme the way Verified's green does. Pull it to
     the deep brand RED instead: clearly reads as the Pro red, AA-legible on
     cream, and parallels the Verified-green accent (#5fa050 → #1f4019). */
  body.light [style*="color:#ff7b3a" i],
  body.light [style*="color: #ff7b3a" i] {
    color: #9c2b0e !important;
  }
  /* Pro tier "softer" orange (#ff9b65) used on the Contact Support card
     chevron + label — same deep-red treatment for theme parity. */
  body.light [style*="color:#ff9b65" i],
  body.light [style*="color: #ff9b65" i] {
    color: #9c2b0e !important;
  }
  /* Red alerts / removed-listing salmon (#e87070) — washed-out coral on
     cream. Flip to the same deep umber the Pro orange uses so all the
     warning/error reds read consistently dark. */
  body.light [style*="color:#e87070" i],
  body.light [style*="color: #e87070" i] {
    color: #5a1a00 !important;
  }
  /* Faint red-tinted alert panels (Listing removed notice, Submit an
     Appeal button, etc.) — bg is rgba(201,59,0,0.10) which reads as a
     pink wash on cream. Saturate to a richer salmon tint so the panel
     visually reads as the warning state it actually is. */
  body.light [style*="rgba(201,59,0,0.1)" i][style*="rgba(201,59,0,0.4)" i] {
    background: linear-gradient(180deg, rgba(154,46,0,0.22), rgba(154,46,0,0.10)) !important;
    border-color: rgba(154,46,0,0.65) !important;
  }
  /* Description body copy used across Pro/Verified/Featured CTAs and many
     inline panels — '#d8c1a6' is a warm cream tuned for dark mode and reads
     as near-invisible on the cream surface. Push it to a deep walnut. */
  body.light [style*="color:#d8c1a6" i],
  body.light [style*="color: #d8c1a6" i] {
    color: #2a1808 !important;
  }
  /* Class-targeted greens not covered by the above attribute selectors */
  body.light .verified-owner-badge .vob-text strong { color: #143012; }

  /* ── LIGHT MODE: cream-on-cream text fix ──
     --cream (#f5e6c5) is unchanged in light mode — same shade as the page
     background. Any element using color: var(--cream) on a non-colored
     background (i.e. NOT on a red/green/dark pill) reads as invisible.
     Override those specific spots back to var(--text) / var(--muted). The
     cream-on-red CTAs / pills / "Per Pound" box are left alone — they
     still pop on the saturated fill. */
  body.light .brutal-name,                                  /* spot name title */
  body.light .brutal-stats-row .stat .tier .word,           /* "MID-RANGE" label */
  body.light .twin-size .word,                              /* "LARGE" inside Crawfish Size box */
  body.light .dir-chooser-spot,                             /* Directions chooser title */
  body.light .hours-popover-row .t,                         /* Hours popover day cell */
  body.light .hours-sheet-row .time {                       /* Hours sub-sheet time text */
    color: var(--text);
  }
  body.light .hours-time {                                  /* "Closed today" sub-line */
    color: var(--muted);
  }
  /* Catering CTA label "CATERING AVAILABLE" — red-on-cream at 0.7 opacity
     looked washed out in light mode. Bump opacity so it reads. */
  body.light .cta-catering .left .ctaLbl { opacity: 0.95; }

  /* ── LIGHT MODE: vendor action buttons ──
     Soft-tinted action buttons read as washed-out on cream. Bump backgrounds
     to saturated darks and pair with light foreground text so the meaning of
     the color (yellow=boil, red=sold-out, green=verified/vanity) survives. */
  /* Yellow — Boil Day Posts (default style of .boil-post-compose-btn) */
  body.light .boil-post-compose-btn {
    background: linear-gradient(180deg, #c97a00, #8f5500) !important;
    border-color: #6e4400 !important;
    color: #fff8e8 !important;
  }
  body.light .boil-post-compose-btn:hover {
    background: linear-gradient(180deg, #b06800, #7a4800) !important;
  }
  /* Red — Mark Sold Out / Closed (inline-style override) */
  body.light .boil-post-compose-btn[style*="color:#e87070" i],
  body.light .boil-post-compose-btn[style*="color: #e87070" i] {
    background: linear-gradient(180deg, #9a2e00, #7a2400) !important;
    border-color: #5a1a00 !important;
    color: #fff !important;
  }
  /* Green — Set Vanity URL (inline-style override) */
  body.light .boil-post-compose-btn[style*="color:#82c272" i],
  body.light .boil-post-compose-btn[style*="color: #82c272" i] {
    background: linear-gradient(180deg, #1f4019, #143012) !important;
    border-color: #0a200a !important;
    color: #f0f8ed !important;
  }
  /* Embedded 📋 copy pill inside the Edit URL button — needs to pop on the
     saturated dark green outer button. */
  body.light .vanity-copy-inline {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.30) !important;
  }
  /* Green — Add Photo dashed slide */
  body.light .vendor-carousel-add {
    background: rgba(31,64,25,0.14) !important;
    border-color: #1f4019 !important;
    color: #143012 !important;
  }
  /* Green — Verified pill ("✓ Verified") */
  body.light .paid-vendor-pill.verified {
    background: #1f4019 !important;
    border-color: #143012 !important;
    color: #fff !important;
  }
  body.light .paid-vendor-pill.verified .pvp-check {
    background: #fff !important; color: #1f4019 !important;
  }
  /* Green — standalone Verified checkmark dot */
  body.light .paid-vendor-check.verified { background: #1f4019 !important; }
  /* Green — Verify & Review confirm button */
  body.light .confirm-btn {
    background: #1f4019 !important;
    border-color: #143012 !important;
    color: #fff !important;
  }
  body.light .confirm-btn:hover { background: #143012 !important; }
  /* Green — Message Owner (DM) button. Same treatment as Verify & Review
     so the two CTAs read with equal weight on cream. */
  body.light .dm-message-btn {
    background: #1f4019 !important;
    border-color: #143012 !important;
    color: #fff !important;
  }
  body.light .dm-message-btn:hover { background: #143012 !important; }
  /* Green — Verified-owner badge surrounding the check dot */
  body.light .verified-owner-badge {
    background: rgba(31,64,25,0.12) !important;
    border-color: #1f4019 !important;
  }
  body.light .verified-owner-badge .vob-icon { background: #1f4019 !important; }

  /* Green — REPLY chip + reply editor + post button. Default lime/mint
     (#82c272 / rgba(95,160,80,…)) washes out on cream. Snap to the same
     forest-green theme as Verify & Review so all green CTAs read together. */
  body.light .reply-btn {
    background: #1f4019 !important;
    border-color: #143012 !important;
    color: #fff !important;
  }
  body.light .reply-btn:hover { background: #143012 !important; }
  body.light .reply-editor {
    background: rgba(31,64,25,0.06) !important;
    border-color: rgba(31,64,25,0.35) !important;
  }
  body.light .reply-post {
    background: #1f4019 !important;
    color: #fff !important;
  }
  body.light .reply-post:hover:not(:disabled) { background: #143012 !important; }

  /* ── LIGHT MODE: admin panel colored buttons ── */
  /* Gold — ★ Featured Spots / ★ Featured Interest (inline bg rgba(212,160,23,…)) */
  body.light .auth-btn[style*="rgba(212,160,23" i] {
    background: linear-gradient(180deg, #a87a10, #6a4a00) !important;
    border: 1px solid #5a3a00 !important;
    color: #fff8e0 !important;
  }
  /* Green — 💳 Paid Vendors (inline color #82c272) */
  body.light .auth-btn[style*="#82c272" i] {
    background: linear-gradient(180deg, #1f4019, #143012) !important;
    border-color: #0a200a !important;
    color: #f0f8ed !important;
  }
  /* Red — 📊 Analytics (inline bg rgba(211,84,0,…)) */
  body.light .auth-btn[style*="rgba(211,84,0" i] {
    background: linear-gradient(180deg, #9a2e00, #7a2400) !important;
    border-color: #5a1a00 !important;
    color: #fff !important;
  }

  /* "In Season" header pill — same dark-green treatment as the Verified
     pill so it pops against the cream header in light mode. */
  body.light .season-badge.in {
    background: #1f4019 !important;
    border-color: #143012 !important;
    color: #fff !important;
  }
  body.light .season-badge.in .season-dot { background: #82c272 !important; }

  /* Featured hero "⚡ First Come · First Serve · Max 5 / City" pill —
     match the saturated dark amber the I'm Interested CTA already uses.
     Doubled selector chain so this beats the .upgrade-hero descendant
     gold-bright override that would otherwise force the text dark. */
  body.light .hero-fcfs-pill,
  body.light .upgrade-hero .hero-fcfs-pill,
  body.light .upgrade-hero .hero-fcfs-pill[style*="color" i] {
    background: linear-gradient(180deg, #b8881a, #8f5500) !important;
    border-color: #6e4400 !important;
    color: #fff8e0 !important;
  }
  /* "All 5 spots in your city are filled this week" notice —
     "5 spots in your city" pops as deep gold against the cream-amber
     surface; the rest of the line stays dark walnut. */
  body.light .hero-filled-notice {
    background: linear-gradient(180deg, rgba(168,122,16,0.28), rgba(168,122,16,0.12)) !important;
    border-color: rgba(110,68,0,0.65) !important;
  }
  body.light .hero-filled-notice div { color: #2a1808 !important; }
  body.light .hero-filled-notice strong { color: #6e4400 !important; }

  /* Email-me-the-PDF deck CTA — wrapper + .fpc-btn inherit the tier theme
     via .tier-<tier> so the button matches the PDF it sends: Verified =
     green, Pro = red, Featured = gold. Accent-text values are split dark/
     light because CSS custom props set on a class flip with body.light,
     unlike inline vars. */
  .upgrade-deck-cta { background: var(--layer-2); border: 1px dashed var(--border-mid); }
  .upgrade-deck-cta.tier-verified { border-color: rgba(58,125,68,0.55); }
  .upgrade-deck-cta.tier-pro      { border-color: rgba(201,59,0,0.55); }
  .upgrade-deck-cta.tier-featured { border-color: rgba(168,122,16,0.55); }
  .email-deck-btn.tier-verified { --fpc-accent: #5fa050;     --fpc-accent-text: #7bc870; }
  .email-deck-btn.tier-pro      { --fpc-accent: var(--red);  --fpc-accent-text: #ff7b3a; }
  .email-deck-btn.tier-featured { --fpc-accent: var(--gold); --fpc-accent-text: var(--gold-bright); }
  body.light .upgrade-deck-cta.tier-verified { background: rgba(58,125,68,0.10) !important; border-color: #2d5a32 !important; }
  body.light .upgrade-deck-cta.tier-pro      { background: rgba(201,59,0,0.10) !important; border-color: #7a2400 !important; }
  body.light .upgrade-deck-cta.tier-featured { background: rgba(168,122,16,0.10) !important; border-color: #6e4400 !important; }
  body.light .email-deck-btn.tier-verified { --fpc-accent: #3a7d44;     --fpc-accent-text: #1f4019; }
  body.light .email-deck-btn.tier-pro      { --fpc-accent: var(--red);  --fpc-accent-text: #9c2b0e; }
  body.light .email-deck-btn.tier-featured { --fpc-accent: var(--gold); --fpc-accent-text: #6e4400; }

  /* Contact Support card — fully FILLED tier color in light mode (no more
     low-alpha tints vanishing into cream). Verified/free/admin → forest
     green; Pro → dark red. All text inside flips to white for contrast. */
  body.light .contact-support-card {
    background: var(--green) !important;
    border-color: var(--green) !important;
  }
  body.light .contact-support-card,
  body.light .contact-support-card .alert-label,
  body.light .contact-support-card .alert-sub,
  body.light .contact-support-card span[style*="color"] { color: #fff !important; }
  /* Pro vendor Contact Support — inline bg is rgba(201,59,0,...). Fill solid
     dark red instead, matching the Pro CTA. */
  body.light .contact-support-card[style*="rgba(201,59,0" i] {
    background: var(--red) !important;
    border-color: var(--red-hover) !important;
  }
  body.light .contact-support-card[style*="rgba(201,59,0" i],
  body.light .contact-support-card[style*="rgba(201,59,0" i] .alert-label,
  body.light .contact-support-card[style*="rgba(201,59,0" i] .alert-sub,
  body.light .contact-support-card[style*="rgba(201,59,0" i] span[style*="color"] { color: #fff !important; }

  /* ── LIGHT MODE: pinned Boil Day + Sold Out/Closed banners ──
     The banners use very low-alpha inline gradients that disappear into cream.
     Saturate the tier-colored tint so the panel is clearly the colored banner,
     then force the text inside to dark walnut so it reads against the tint.
     (NOT an inversion to dark mode — still a light colored panel.) */
  body.light .boil-post-banner[style*="rgba(255,180,80" i] {
    background: linear-gradient(180deg, rgba(201,122,0,0.42), rgba(201,122,0,0.18)) !important;
    border-color: rgba(143,85,0,0.65) !important;
  }
  body.light .boil-post-banner[style*="rgba(201,59,0" i] {
    background: linear-gradient(180deg, rgba(154,46,0,0.32), rgba(154,46,0,0.12)) !important;
    border-color: rgba(154,46,0,0.70) !important;
  }
  body.light .boil-post-banner[style*="rgba(255,180,80" i] .bpb-label { color: #5a3500 !important; }
  body.light .boil-post-banner[style*="rgba(201,59,0" i] .bpb-label { color: #6e2a00 !important; }
  body.light .boil-post-banner .bpb-time { color: #4a3525 !important; }
  body.light .boil-post-banner .bpb-message { color: #2a1808 !important; }

  /* ── LIGHT MODE: Pro/Verified/Featured upgrade-page hero cards ──
     Same approach — saturate the tier tint enough that the panel reads as
     a colored hero, then force every inline-colored text node to a dark
     variant so the copy stays readable on the now-darker tint. */
  /* Verified + Pro heroes are FILLED with the tier color in light mode
     (matches the dashboard CTA buttons) — every inline-colored text node
     inside flips to white so it reads on the saturated background. */
  body.light .upgrade-hero-verified {
    background: var(--green) !important;
    border-color: var(--green) !important;
  }
  body.light .upgrade-hero-pro {
    background: var(--red) !important;
    border-color: var(--red-hover) !important;
  }
  body.light .upgrade-hero-verified,
  body.light .upgrade-hero-pro,
  body.light .upgrade-hero-verified [style*="color" i],
  body.light .upgrade-hero-pro [style*="color" i] {
    color: #fff !important;
  }
  /* Cadence toggle (Monthly / Yearly) sits on the hero — give it a
     translucent dark surface inside the solid tier hero so it still reads
     as a pill, not as part of the bg. */
  body.light .upgrade-hero-verified .upg-toggle,
  body.light .upgrade-hero-pro .upg-toggle {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.35) !important;
  }
  body.light .upgrade-hero-verified .upg-toggle .upg-toggle-active,
  body.light .upgrade-hero-pro .upg-toggle .upg-toggle-active {
    background: #fff !important;
    color: var(--text) !important;
  }

  /* Featured hero keeps the layered radial+linear gradient tint with the
     dark-text overrides below — only Pro/Verified flip to solid + white. */
  body.light .upgrade-hero-featured {
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(168,122,16,0.38), transparent 60%),
      linear-gradient(180deg, rgba(168,122,16,0.28), rgba(168,122,16,0.10)) !important;
    border-color: rgba(168,122,16,0.75) !important;
  }
  body.light .upgrade-hero-featured,
  body.light .upgrade-hero-featured [style*="color:var(--text)" i] {
    color: #120804 !important;
  }
  body.light .upgrade-hero-featured [style*="color:var(--gold-bright)" i] {
    color: #6a4a00 !important;
  }
  body.light .upgrade-hero-featured [style*="color:var(--muted)" i] {
    color: #4a3525 !important;
  }
  body.light .upgrade-hero-featured [style*="color:#fff" i] {
    color: #120804 !important;
  }

  /* ── Per-mode theming on the Featured upgrade page ──
     showUpgradePage adds .fpc-boiled / .fpc-live / .fpc-catering to the
     .fs-body wrapper when the user enters from a per-mode CTA. Every
     inline style on that page uses var(--gold), var(--gold-bright), or
     var(--gold-deep) — so remapping just those three local variables on
     the wrapper cascades the tier color through every descendant
     (section heads, scarcity panel, why-push dropdown, deck CTA, CTA
     button, the upgrade hero, all of it) without touching one inline. */
  .fs-body.fpc-boiled {
    --gold:        var(--red);
    --gold-bright: #ff7b3a;
    --gold-deep:   #6a1e00;
  }
  .fs-body.fpc-live {
    --gold:        #4a8bbf;
    --gold-bright: #6ba9d8;
    --gold-deep:   #1c3e5c;
  }
  .fs-body.fpc-catering {
    --gold:        var(--cater-accent);
    --gold-bright: #c4a4e8;
    --gold-deep:   #3d2a5c;
  }
  /* Light-mode versions of the same remap — accent-text shifts darker so
     it stays readable on the cream surface. */
  body.light .fs-body.fpc-boiled {
    --gold:        var(--red);
    --gold-bright: var(--red);
    --gold-deep:   #6a1e00;
  }
  body.light .fs-body.fpc-live {
    --gold:        #2c5778;
    --gold-bright: #1f4566;
    --gold-deep:   #1c3e5c;
  }
  body.light .fs-body.fpc-catering {
    --gold:        #5e3a8a;
    --gold-bright: #432461;
    --gold-deep:   #3d2a5c;
  }
  /* The light-mode hero pill / filled notice / deck CTA above hard-code
     the dark-amber treatment with !important, so the per-mode overrides
     have to specifically beat them for boiled / live / catering wrappers. */
  body.light .fs-body.fpc-boiled .hero-fcfs-pill,
  body.light .fs-body.fpc-boiled .upgrade-hero .hero-fcfs-pill {
    background: linear-gradient(180deg, #b53600, var(--red)) !important;
    border-color: var(--red) !important;
    color: #fff !important;
  }
  body.light .fs-body.fpc-live .hero-fcfs-pill,
  body.light .fs-body.fpc-live .upgrade-hero .hero-fcfs-pill {
    background: linear-gradient(180deg, #4a8bbf, #2c5778) !important;
    border-color: #1f4566 !important;
    color: #fff !important;
  }
  body.light .fs-body.fpc-catering .hero-fcfs-pill,
  body.light .fs-body.fpc-catering .upgrade-hero .hero-fcfs-pill {
    background: linear-gradient(180deg, #8b6db8, #5e3a8a) !important;
    border-color: #432461 !important;
    color: #fff !important;
  }
  body.light .fs-body.fpc-boiled .hero-filled-notice {
    background: linear-gradient(180deg, rgba(154,46,0,0.22), rgba(154,46,0,0.08)) !important;
    border-color: rgba(154,46,0,0.55) !important;
  }
  body.light .fs-body.fpc-live .hero-filled-notice {
    background: linear-gradient(180deg, rgba(44,87,120,0.22), rgba(44,87,120,0.08)) !important;
    border-color: rgba(44,87,120,0.55) !important;
  }
  body.light .fs-body.fpc-catering .hero-filled-notice {
    background: linear-gradient(180deg, rgba(94,58,138,0.22), rgba(94,58,138,0.08)) !important;
    border-color: rgba(94,58,138,0.55) !important;
  }
  /* Email-PDF deck CTA gets its tier color from .fpc-btn's own rules
     (background: 10% --fpc-accent + transparent, color: --fpc-accent-text).
     No per-mode override needed — the inline --fpc-accent on the button
     resolves to the right hue via the body remap. */
  /* Light-mode upgrade-hero-featured is hard-coded gold/amber with !important.
     When the body is tier-themed, override the hero bg + the gold-bright
     attribute-targeted text override so the hero reads in the right color. */
  body.light .fs-body.fpc-boiled .upgrade-hero-featured {
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(154,46,0,0.32), transparent 60%),
      linear-gradient(180deg, rgba(154,46,0,0.22), rgba(154,46,0,0.06)) !important;
    border-color: var(--red) !important;
  }
  body.light .fs-body.fpc-live .upgrade-hero-featured {
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(44,87,120,0.32), transparent 60%),
      linear-gradient(180deg, rgba(44,87,120,0.22), rgba(44,87,120,0.06)) !important;
    border-color: #2c5778 !important;
  }
  body.light .fs-body.fpc-catering .upgrade-hero-featured {
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(94,58,138,0.32), transparent 60%),
      linear-gradient(180deg, rgba(94,58,138,0.22), rgba(94,58,138,0.06)) !important;
    border-color: #5e3a8a !important;
  }
  /* The light-mode rule earlier hard-codes color:#6a4a00 for any element with
     inline color:var(--gold-bright). The themed hero's eyebrow + accent text
     use var(--fpc-accent-text) which is already remapped — but a few spots
     also reference var(--gold-bright) inline (and that !important wins).
     Re-route those to the tier accent for themed bodies. */
  body.light .fs-body.fpc-boiled [style*="color:var(--gold-bright)" i] {
    color: var(--red) !important;
  }
  body.light .fs-body.fpc-live [style*="color:var(--gold-bright)" i] {
    color: #1f4566 !important;
  }
  body.light .fs-body.fpc-catering [style*="color:var(--gold-bright)" i] {
    color: #432461 !important;
  }

  /* ── MODE PICKER MODAL ── */
  .mode-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: 19999; display: flex; align-items: center; justify-content: center;
    padding: 24px; opacity: 1; transition: opacity .25s ease;
  }
  .mode-modal.hidden { opacity: 0; pointer-events: none; }
  .mode-modal-box {
    background: var(--layer); border: 1px solid var(--border-mid);
    border-radius: 16px; padding: 28px 24px; max-width: 320px; width: 100%; text-align: center;
    transition: transform .25s cubic-bezier(.2,0,0,1), opacity .22s ease;
  }
  .mode-modal.hidden .mode-modal-box { transform: scale(.96); opacity: 0; }
  .mode-modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .mode-modal-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; margin-bottom: 24px; }
  .mode-btn-row { display: flex; gap: 12px; }
  .mode-btn {
    flex: 1; padding: 16px 8px; border-radius: 10px;
    border: 1.5px solid var(--border-mid); background: var(--layer-2);
    cursor: pointer; transition: transform .14s cubic-bezier(.2,0,0,1), border-color .15s ease, background .15s ease; font-family: var(--font-body);
  }
  .mode-btn:active { transform: scale(.96); }
  .mode-btn:hover { border-color: var(--red); }
  .mode-btn-icon { font-size: 28px; margin-bottom: 6px; }
  .mode-btn-label { font-size: 10px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 1.2px; }
  .mode-btn.recommended { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,160,23,0.08), var(--layer-2)); }
  .mode-btn-badge {
    display: inline-block; background: var(--gold-bright); color: #1a1208;
    font-size: 7px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px; margin-bottom: 8px;
  }

  /* ── SPLASH ── */
  .splash {
    position: fixed; inset: 0; background: var(--bg);
    z-index: 9999; display: flex; align-items: flex-start; justify-content: center;
    flex-direction: column; gap: 0; transition: opacity 0.45s ease-out;
    overflow-y: auto; padding: 32px 0 40px;
  }
  .splash.hidden { opacity: 0; pointer-events: none; }
  .mode-picker-wrap { margin: 0 auto; }
  .splash-craw { font-size: 56px; animation: rise 0.45s ease-out; }
  .splash-name { font-family: var(--font-logo); font-size: 52px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; line-height: 1; animation: rise 0.55s ease-out; }
  .splash-name .craw { color: var(--red); }
  .splash-name .daddy { color: var(--text); }
  .splash-tag { font-size: 9px; color: #c8a888; letter-spacing: 3px; text-transform: uppercase; margin-top: 4px; animation: rise 0.7s ease-out; }
  body.light .splash-tag { color: #4a3525; }

  /* Event Follow links — light-mode tuned: darker blue + earth brown. */
  body.light .event-fb-link { background: rgba(29,78,216,0.13); border-color: #1d4ed8; color: #1d4ed8; }
  body.light .event-ig-link { background: rgba(107,62,26,0.13); border-color: #6b3e1a; color: #6b3e1a; }

  /* Event Boost — light-mode tuned: deeper blue text for readability on cream. */
  body.light .event-card.boosted {
    background: linear-gradient(135deg, #e0ecff 0%, #c5d8fb 100%);
  }
  body.light .boost-countdown { color: #1d4ed8; }
  body.light .boost-cta-eyebrow { color: #1d4ed8; }
  body.light .boost-cta-title { color: #1e3a8a; }
  body.light .boost-cta-text { color: #2a1d10; }
  body.light .boost-active-text { color: #1e3a8a; }
  body.light .boost-active-time { color: #1e3a8a; }
  .splash-count { font-size: 11px; color: var(--red); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-top: 18px; opacity: 0.9; animation: rise 1.0s ease-out; }
  @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  @keyframes thankPop { from { opacity:0; transform:scale(.4) rotate(-12deg); } 60% { transform:scale(1.18) rotate(4deg); } to { opacity:1; transform:scale(1) rotate(0); } }

  /* ── MODE PICKER (3-card splash) ── */
  .mode-picker-wrap { padding: 28px 22px; width: 100%; max-width: 460px; box-sizing: border-box; }
  .mp-q { text-align: center; margin: 22px 0 18px; animation: rise 0.7s ease-out; }
  .mp-q .small { font-size: 10px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
  .mp-q .big { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.25; }
  .mp-q .big em { color: var(--red); font-style: normal; }
  body.light .mp-q .small { color: #6a503a; }
  body.light .mp-q .big em { color: var(--red); }

  .mp-cards { display: flex; flex-direction: column; gap: 12px; animation: rise 0.85s ease-out; }
  .mp-card {
    background: var(--layer-2); border: 1.5px solid var(--border-mid);
    border-radius: 14px; padding: 16px 18px; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    transition: transform .12s ease-out, border-color .12s, background .12s;
  }
  .mp-card:active { transform: scale(0.98); }
  .mp-card .ico {
    width: 56px; height: 56px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; flex-shrink: 0;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.6);
    overflow: hidden;
  }
  .mp-card .ico img {
    width: 44px; height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  }
  .mp-card.live   .ico { background: linear-gradient(135deg, #5a8db3, #2c5778); }
  .mp-card.boiled .ico { background: linear-gradient(135deg, #d9501a, #7a2400); }
  .mp-card.cater  .ico { background: linear-gradient(135deg, #b294e0, #5e3a8a); }
  .mp-card.ship   .ico { background: linear-gradient(135deg, #34c896, #0e4d39); }
  .mp-card .meta { flex: 1; min-width: 0; }
  .mp-card .label { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
  .mp-card .title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; margin-bottom: 4px; }
  .mp-card .desc { font-size: 11px; color: var(--muted); line-height: 1.45; }
  /* Right rail: count number + chevron inline, small label beneath (A2). */
  .mp-rail { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-shrink: 0; text-align: right; gap: 2px; }
  .mp-rail-top { display: flex; align-items: center; gap: 5px; }
  .mp-rail-n { font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -0.5px; color: #fff7e1; font-variant-numeric: tabular-nums; }
  .mp-rail-l { font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,247,225,0.7); white-space: nowrap; }
  .mp-card .arrow { font-size: 22px; flex-shrink: 0; }
  .mp-rail .arrow { font-size: 20px; color: rgba(255,247,225,0.85); }
  /* Empty-state: no count yet — label carries the message, number hides. */
  .mp-rail.is-empty .mp-rail-n { display: none; }
  .mp-rail.is-empty .mp-rail-l { font-size: 9px; color: rgba(255,247,225,0.82); white-space: normal; max-width: 92px; line-height: 1.25; }
  /* ── Mode picker cards: FILLED with the tier color, cream text inside.
     The mini count pill is a darker-tier chip with cream text so it reads
     as a button-like element against the saturated card surface. ── */
  .mp-card.boiled  {
    background: var(--red);
    border-color: color-mix(in srgb, var(--red) 80%, black);
  }
  .mp-card.live    {
    background: #4a8bbf;
    border-color: color-mix(in srgb, #4a8bbf 80%, black);
  }
  .mp-card.cater   {
    background: var(--cater-accent);
    border-color: color-mix(in srgb, var(--cater-accent) 75%, black);
  }
  .mp-card.ship    {
    background: #1f9e74;
    border-color: color-mix(in srgb, #1f9e74 80%, black);
  }
  body.light .mp-card.boiled {
    background: var(--red);
    border-color: color-mix(in srgb, var(--red) 80%, black);
  }
  body.light .mp-card.live   {
    background: #2c5778;
    border-color: color-mix(in srgb, #2c5778 80%, black);
  }
  body.light .mp-card.cater  {
    background: var(--cater-accent);
    border-color: color-mix(in srgb, var(--cater-accent) 75%, black);
  }
  body.light .mp-card.ship   {
    background: #1f9e74;
    border-color: color-mix(in srgb, #1f9e74 80%, black);
  }
  /* Cream text for every word in a filled mode card. */
  .mp-card.boiled .title, .mp-card.live .title, .mp-card.cater .title, .mp-card.ship .title,
  body.light .mp-card.boiled .title, body.light .mp-card.live .title, body.light .mp-card.cater .title, body.light .mp-card.ship .title {
    color: #fff7e1;
  }
  .mp-card.boiled .label, .mp-card.live .label, .mp-card.cater .label, .mp-card.ship .label,
  body.light .mp-card.boiled .label, body.light .mp-card.live .label, body.light .mp-card.cater .label, body.light .mp-card.ship .label {
    color: rgba(255,247,225,0.78);
  }
  .mp-card.boiled .desc, .mp-card.live .desc, .mp-card.cater .desc, .mp-card.ship .desc,
  body.light .mp-card.boiled .desc, body.light .mp-card.live .desc, body.light .mp-card.cater .desc, body.light .mp-card.ship .desc {
    color: rgba(255,247,225,0.92);
  }
  .mp-card.boiled .arrow, .mp-card.live .arrow, .mp-card.cater .arrow, .mp-card.ship .arrow,
  body.light .mp-card.boiled .arrow, body.light .mp-card.live .arrow, body.light .mp-card.cater .arrow, body.light .mp-card.ship .arrow {
    color: #fff7e1;
  }
  /* Count pillbox — tier color background (darker mix so it pops as a chip
     against the filled card), cream text, subtle lighter border. */
  .mp-card.boiled .count, .mp-card.live .count, .mp-card.cater .count,
  body.light .mp-card.boiled .count, body.light .mp-card.live .count, body.light .mp-card.cater .count {
    background: rgba(0,0,0,0.22) !important;
    border: 1px solid rgba(255,247,225,0.28) !important;
    color: #fff7e1 !important;
  }

  .mp-foot { text-align: center; font-size: 10px; color: var(--muted); letter-spacing: 1.5px; margin-top: 18px; animation: rise 1.1s ease-out; }

  /* ── MODE-PILL SWITCHER (persistent top-of-map row) ── */
  .mode-pill-row {
    display: flex; gap: 6px;
    padding: 8px 12px 8px;
    background: var(--bg);
  }
  .mode-pill {
    flex: 1; background: var(--layer-2); border: 1px solid var(--border-mid);
    color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 7px 6px; border-radius: 7px;
    text-align: center; cursor: pointer; font-family: var(--font-body);
    transition: background .12s, border-color .12s, color .12s;
  }
  .mode-pill.on-live    { background: rgba(74,139,191,0.18); border-color: #4a8bbf; color: #8fb9d9; }
  .mode-pill.on-boiled  { background: rgba(217,80,26,0.18); border-color: var(--red); color: #ff7b3a; }
  .mode-pill.on-cater   { background: var(--cater-accent-strong); border-color: var(--cater-accent); color: var(--cater-accent-text); }
  .mode-pill.on-ship    { background: rgba(31,158,116,0.18); border-color: #1f9e74; color: #3fd6a2; }
  body.light .mode-pill { background: #f5ece0; border-color: #c8b9a5; color: #6a503a; }
  /* Active mode pill — solid fill in the mode color with cream text so it
     reads as the selected tab instead of a tinted outline. */
  body.light .mode-pill.on-live   { background: #2c5778;     border-color: #2c5778;    color: #f5ece0; }
  body.light .mode-pill.on-boiled { background: var(--red);  border-color: var(--red); color: #fff7ed; }
  body.light .mode-pill.on-cater  { background: #5e3a8a;     border-color: #5e3a8a;    color: #f5ece0; }
  body.light .mode-pill.on-ship   { background: #1f6e4e;     border-color: #1f6e4e;    color: #f5ece0; }
  .mode-pill .ico { font-size: 11px; margin-right: 3px; }

  /* Availability segment (Open Now / Boiling Now / All) under the mode pills. */
  .avail-row {
    display: flex; gap: 6px; align-items: center;
    padding: 0 12px 8px;
    background: var(--bg);
    flex-wrap: wrap;
  }
  .avail-pill {
    background: transparent; border: 1px solid var(--border-mid);
    color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; padding: 7px 11px; border-radius: 5px;
    cursor: pointer; font-family: var(--font-body);
    transition: background .12s, border-color .12s, color .12s;
  }
  .avail-pill.on { background: var(--red); border-color: var(--red); color: #fff7ef; }
  .avail-count {
    margin-left: auto; align-self: center; white-space: nowrap;
    color: #ff7b3a; font-size: 12px; font-weight: 800; letter-spacing: 0.3px;
    font-family: var(--font-body); padding: 4px 2px;
  }
  /* Availability pills inside the vendor list sheet (mirror of the map's row).
     Rectangular corners are now the base .avail-pill style (map + list match). */
  .avail-row-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
  /* Collapsible "Filters" section in the vendor list — wraps availability + sort
     + size + spice under one toggle. */
  .list-filters-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: var(--layer-2); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; padding: 11px 14px; margin-bottom: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .list-filters-toggle .lf-chevron { font-size: 11px; color: var(--muted); transition: transform .15s ease; }
  .list-filters-toggle.open .lf-chevron { transform: rotate(180deg); }
  .list-filters-toggle .lf-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--red); color: #fff7ef; border-radius: 999px; min-width: 16px; height: 16px;
    padding: 0 5px; font-size: 9px; font-weight: 800; margin-left: 4px;
  }
  .list-filters-box { margin-bottom: 2px; }
  body.light .avail-pill { border-color: #c8b9a5; color: #6a503a; }
  body.light .avail-pill.on { background: var(--red); border-color: var(--red); color: #fff7ed; }
  body.light .avail-count { color: #9c2b0e; }

  /* Vertical-tinted map pins. Boiled keeps the existing red default. */
  .map-pin.mode-live   { background: #4a8bbf !important; }
  .map-pin.mode-ship   { background: #1f9e74 !important; }
  /* Shipper "Ships nationwide" subtitle — brand orange, readable in both modes. */
  .ship-natw { color: #ff5500; font-weight: 600; }
  body.light .ship-natw { color: #cc4400; }

  /* ── Vendor onboarding: welcome + setup checklist ── */
  .vo-prog { display: flex; align-items: center; margin-bottom: 16px; }
  .vo-dot { width: 9px; height: 9px; border-radius: 50%; background: #241d18; border: 1.5px solid var(--border-mid); flex: 0 0 auto; }
  .vo-dot.on { background: #1f9e74; border-color: #1f9e74; }
  .vo-dot.cur { background: #3fd6a2; border-color: #3fd6a2; box-shadow: 0 0 0 3px rgba(63,214,162,0.22); }
  .vo-line { flex: 1; height: 2px; background: var(--border-mid); margin: 0 5px; }
  .vo-line.on { background: #1f9e74; }
  .vo-card { background: linear-gradient(165deg, var(--layer-2), var(--layer)); border: 1px solid var(--border-mid); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
  .vo-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 7px; }
  .vo-h { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.15; margin: 0 0 14px; color: var(--text); }
  .vo-ck { display: flex; align-items: center; gap: 11px; padding: 11px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
  .vo-ck .b { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
  .vo-ck .b.done { background: #1f9e74; color: #fff; }
  .vo-ck .b.todo { border: 1.5px dashed var(--border-mid); color: var(--muted); }
  .vo-ck .tx { flex: 1; } .vo-ck .tx b { display: block; font-size: 12.5px; color: var(--text); font-weight: 700; } .vo-ck .tx span { font-size: 10.5px; color: var(--muted); }
  .vo-ck.dim .tx b { color: var(--muted); }
  .vo-pay { border-radius: 12px; padding: 13px; margin: 11px 0; border: 1px solid rgba(99,91,255,0.5); animation: voGlowPurple 2.4s ease-in-out infinite; }
  .vo-pay.done { border-color: rgba(31,158,116,0.55); animation: voGlowGreen 2.4s ease-in-out infinite; }
  @keyframes voGlowPurple { 0%,100% { box-shadow: 0 0 0 1px rgba(99,91,255,0.18), 0 8px 18px -14px rgba(99,91,255,0.45); } 50% { box-shadow: 0 0 0 1px rgba(99,91,255,0.45), 0 12px 32px -12px rgba(99,91,255,0.8); } }
  @keyframes voGlowGreen { 0%,100% { box-shadow: 0 0 0 1px rgba(31,158,116,0.18), 0 8px 18px -14px rgba(31,158,116,0.45); } 50% { box-shadow: 0 0 0 1px rgba(31,158,116,0.45), 0 12px 32px -12px rgba(31,158,116,0.8); } }
  @media (prefers-reduced-motion: reduce) { .vo-pay, .vo-pay.done { animation: none; } }
  .vo-pay .row { display: flex; align-items: center; gap: 11px; }
  .vo-pay .ic { width: 36px; height: 36px; border-radius: 9px; background: #635bff; color: #fff; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
  .vo-pay.done .ic { background: #1f9e74; }
  .vo-pay .tx { flex: 1; } .vo-pay .tx b { display: block; font-size: 13px; color: var(--text); font-weight: 700; } .vo-pay .tx span { font-size: 11px; color: var(--muted); }
  .vo-cta { display: block; width: 100%; border: none; border-radius: 12px; padding: 14px; font-family: var(--font-body); font-weight: 800; font-size: 14px; color: #fff7e1; cursor: pointer; margin-top: 6px; }
  .vo-cta.stripe { background: linear-gradient(180deg, #635bff, #4b44cc); }
  /* welcome value cards */
  .vo-val { background: var(--layer-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 13px; }
  .vo-val .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
  .vo-val .ic.gold { background: rgba(212,160,23,0.12); } .vo-val .ic.red { background: rgba(201,59,0,0.12); } .vo-val .ic.blue { background: rgba(74,139,191,0.12); } .vo-val .ic.green { background: rgba(31,158,116,0.12); }
  /* Light mode: the 0.12 tints wash out on the cream card bg — deepen them so the icon chips read. */
  body.light .vo-val .ic.gold { background: rgba(176,128,8,0.26); } body.light .vo-val .ic.red { background: rgba(201,59,0,0.24); } body.light .vo-val .ic.blue { background: rgba(50,108,156,0.26); } body.light .vo-val .ic.green { background: rgba(20,132,94,0.26); }
  .vo-val .tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); } .vo-val .tx span { font-size: 11.5px; color: var(--muted); }
  .vo-val .chev { color: var(--muted); font-size: 17px; }
  /* Live add-on upsell cards (cleaning / delivery) on the spot detail */
  .live-upsells { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
  .live-upsell { display: flex; align-items: center; gap: 11px; background: rgba(74,139,191,0.08); border: 1px solid var(--live-deep, #2c5778); border-radius: 10px; padding: 11px 13px; }
  .live-upsell .lu-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
  .live-upsell .lu-t { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: 0.2px; }
  .live-upsell .lu-s { font-size: 11.5px; color: #8fb9d9; font-weight: 600; margin-top: 1px; }
  body.light .live-upsell { background: rgba(74,139,191,0.10); }
  body.light .live-upsell .lu-s { color: #2c5778; }
  /* Season Pre-Order CTA */
  .live-preorder-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 4px 0 12px; padding: 14px 16px; border: none; border-radius: 12px; background: linear-gradient(135deg, #3f7da8, #2c5778); color: #fff; cursor: pointer; font-family: var(--font-body); text-align: left; box-shadow: 0 8px 20px -10px rgba(44,87,120,0.8); }
  .live-preorder-cta .lp-t { font-size: 14px; font-weight: 800; letter-spacing: 0.2px; }
  .live-preorder-cta .lp-s { font-size: 11.5px; opacity: 0.85; margin-top: 2px; font-weight: 600; }
  .live-preorder-cta .lp-arrow { font-size: 20px; font-weight: 800; flex-shrink: 0; }
  /* Reserve form — 7-day picker + deposit box */
  .lp-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lp-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; border: 1.5px solid var(--border-mid); background: var(--layer-2); border-radius: 9px; cursor: pointer; font-family: var(--font-body); }
  .lp-day .dow { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
  .lp-day .md { font-size: 12px; font-weight: 800; color: var(--text); }
  .lp-day.on { border-color: var(--live-deep, #2c5778); background: rgba(74,139,191,0.16); }
  .lp-day.on .dow { color: var(--live, #6ba9d8); }
  .lp-deposit { background: var(--live-deep, #2c5778); border-radius: 12px; padding: 13px 15px; margin: 6px 0 14px; }
  .lp-dep-row { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,0.88); margin-bottom: 5px; }
  .lp-dep-row span:last-child { font-weight: 700; color: #fff; }
  .lp-dep-row.tot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.28); font-size: 14px; }
  .lp-dep-row.tot span { color: #fff; font-weight: 800; }
  .lp-dep-note { font-size: 10.5px; color: rgba(255,255,255,0.78); margin-top: 7px; }
  /* Boiled-order pickup/delivery + tip toggle buttons. */
  .bo-opt { flex: 1; padding: 11px 8px; border-radius: 11px; background: var(--layer-2); border: 1.5px solid var(--border-mid); color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 800; cursor: pointer; text-align: center; }
  .bo-opt .ot { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.5px; color: var(--text); }
  .bo-opt .os { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; color: var(--muted); }
  .bo-opt.on { border-color: var(--red); background: rgba(201,59,0,0.10); color: #ff8a52; }
  .bo-opt.on .ot { color: #ff8a52; }
  .bo-opt.on .os { color: #ff9d6b; }
  body.light .bo-opt.on .ot, body.light .bo-opt.on .os { color: var(--red); }
  body.light .bo-opt.on { background: rgba(154,46,0,0.08); color: var(--red); border-color: var(--red); }
  /* Shipping setup step — selected chips/boxes use the shipping green, not the boiled red. */
  .ship-theme .bo-opt.on { border-color: #1f9e74; background: rgba(31,158,116,0.12); color: #3fd6a2; }
  .ship-theme .bo-opt.on .ot { color: #3fd6a2; }
  .ship-theme .bo-opt.on .os { color: #6fe0b8; }
  .ship-theme .bo-opt:focus, .ship-theme .bo-opt:focus-visible { outline: none; border-color: #1f9e74; box-shadow: 0 0 0 2px rgba(31,158,116,0.45); }
  .ship-theme .text-input { border-color: rgba(31,158,116,0.40); }
  .ship-theme .text-input:focus { border-color: #1f9e74; box-shadow: 0 0 0 3px rgba(31,158,116,0.18); }
  body.light .ship-theme .bo-opt.on { background: rgba(31,158,116,0.10); color: #157a59; border-color: #1f9e74; }
  body.light .ship-theme .bo-opt.on .ot, body.light .ship-theme .bo-opt.on .os { color: #157a59; }
  /* ── Boiled order redesign (hero carousel + weight stepper) ── */
  .bo-hero { position: relative; border-radius: 16px; overflow: hidden; height: 210px; border: 1px solid var(--border-mid);
    background: radial-gradient(120% 95% at 50% 18%, rgba(201,59,0,0.30), rgba(13,9,8,0.2) 58%), radial-gradient(80% 60% at 50% 120%, rgba(212,160,23,0.16), transparent 70%), linear-gradient(180deg,#1c130d,#0c0806); }
  .bo-hero .bo-hero-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-54%); width: 232px; filter: drop-shadow(0 16px 26px rgba(0,0,0,0.55)); }
  .bo-hero.empty .bo-hero-bg { filter: blur(9px) brightness(0.42) saturate(0.85); transform: translate(-50%,-50%) scale(1.15); }
  .bo-hero .bo-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
  .bo-hero .bo-hero-img.on { opacity: 1; }
  .bo-hero .bo-hero-empty { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
  .bo-hero .bo-hero-empty .ico { font-size: 27px; opacity: 0.5; margin-bottom: 8px; }
  .bo-hero .bo-hero-empty .t { font-family: var(--font-body); font-size: 12px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text); opacity: 0.92; }
  .bo-hero .bo-hero-empty .s { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .bo-hero .bo-hero-count { position: absolute; top: 11px; right: 11px; z-index: 4; background: rgba(8,5,4,0.62); color: var(--text); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 10px; }
  .bo-hero .bo-hero-chev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(8,5,4,0.5); color: var(--text); font-size: 17px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .bo-hero .bo-hero-chev.l { left: 9px; } .bo-hero .bo-hero-chev.r { right: 9px; }
  .bo-hero .bo-hero-dots { position: absolute; left: 0; right: 0; bottom: 58px; z-index: 4; display: flex; gap: 6px; justify-content: center; }
  .bo-hero .bo-hero-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(245,230,197,0.4); transition: width .2s; }
  .bo-hero .bo-hero-dots i.on { width: 18px; background: var(--gold-bright); }
  .bo-hero .bo-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 30px 14px 12px; background: linear-gradient(180deg,transparent,rgba(8,5,4,0.9)); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .bo-hero .bo-hero-cap .t { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
  .bo-hero .bo-hero-cap .t small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 4px; }
  .bo-hero .bo-hero-cap .ppl { flex-shrink: 0; background: rgba(212,160,23,0.16); border: 1px solid var(--gold-deep); color: var(--gold-bright); font-weight: 800; font-size: 13px; border-radius: 8px; padding: 5px 10px; }
  .bo-hero .bo-hero-cap .ppl span { font-size: 10px; font-weight: 600; }
  .bo-card { background: var(--layer); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
  .bo-card-h { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  /* DoorDash-style order item rows: thumbnail + name/price + qty stepper. */
  .bo-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); margin: 18px 2px 9px; }
  .bo-eyebrow .rule { flex: 1; border-top: 1px dashed var(--border-mid); }
  .bo-eyebrow.first { margin-top: 4px; }
  body.light .bo-eyebrow { color: #8f5500; }
  /* Dashed group card — items stack inside, separated by dashed hairlines. */
  .bo-seccard { border: 1.5px dashed var(--border-mid); border-radius: 16px; background: var(--layer); margin-bottom: 6px; }
  .bo-seccard.pad { padding: 13px 14px; }
  .bo-seccard .bo-irow { border: none; border-radius: 0; margin: 0; background: transparent; }
  .bo-seccard .bo-irow + .bo-irow { border-top: 1px dashed var(--border); }
  /* Step-2 recap card */
  .bo-recap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .bo-recap .l { font-size: 12.5px; line-height: 1.55; color: var(--text); min-width: 0; }
  .bo-recap .l b { color: var(--gold-bright); }
  body.light .bo-recap .l b { color: var(--red); }
  .bo-recap .l .mut { color: var(--muted); }
  .bo-edit { flex-shrink: 0; background: var(--layer-2); border: 1px solid var(--border-mid); color: var(--text); font-family: var(--font-body); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
  /* Owner nudge over the stock hero */
  .bo-hero-nudge { position: absolute; top: 11px; left: 11px; z-index: 5; background: rgba(8,5,4,0.74); border: 1px solid var(--gold-deep); color: var(--gold-bright); font-size: 10px; font-weight: 700; padding: 5px 9px; border-radius: 7px; max-width: 75%; line-height: 1.35; }
  .bo-irow { display: flex; align-items: center; gap: 12px; background: var(--layer); border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 18px; margin-bottom: 9px; }
  /* Image hard-right (DoorDash pattern); the qty stepper floats over the
     photo's bottom edge, so the row needs the extra bottom padding above. */
  .bo-irow-thumb { position: relative; width: 86px; height: 72px; border-radius: 13px; flex-shrink: 0; margin-left: auto; background: var(--layer-2); border: 1px solid var(--border-mid); display: flex; align-items: center; justify-content: center; }
  .bo-irow-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
  .bo-irow-thumb.empty .q { color: var(--muted); font-family: var(--font-display); font-size: 25px; font-weight: 700; }
  .bo-irow-info { flex: 1; min-width: 0; }
  .bo-irow-info .nm { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.15; }
  .bo-irow-info .pr { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .bo-irow-info .pr b { color: var(--gold-bright); font-weight: 800; }
  body.light .bo-irow-info .pr b { color: var(--red); }
  .bo-irow-qty { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: flex; align-items: center; flex-shrink: 0; background: #221610; border: 1px solid var(--border-mid); border-radius: 999px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.55); z-index: 2; }
  body.light .bo-irow-qty { background: #fff7e1; box-shadow: 0 6px 16px rgba(61,21,0,0.25); }
  .bo-irow-qty button { width: 30px; height: 30px; border: none; background: transparent; color: var(--text); font-size: 18px; font-weight: 300; line-height: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  body.light .bo-irow-qty button { color: #3d1500; }
  .bo-irow-qty .n { min-width: 20px; text-align: center; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
  body.light .bo-irow-qty .n { color: #3d1500; }
  .bo-irow-qty.active { background: var(--red); border-color: var(--red); }
  .bo-irow-qty.active button, .bo-irow-qty.active .n { color: #fff7e1; }
  .bo-irow-qty.zero { background: transparent; border-color: transparent; box-shadow: none; }
  .bo-irow-qty.zero button.minus, .bo-irow-qty.zero .n { display: none; }
  .bo-irow-qty.zero button.plus { background: linear-gradient(135deg,#e64e15,var(--red)); color: #fff7ef; border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(201,59,0,0.9); }
  .bo-food-summary { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 8px 2px 2px; margin-top: 6px; }
  .bo-food-summary span:last-child { color: var(--text); font-weight: 800; font-family: var(--font-display); }
  .bo-lbs-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
  .bo-preset { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 4px; border-radius: 11px; background: var(--layer-2); border: 1.5px solid var(--border-mid); color: var(--text); cursor: pointer; font-family: var(--font-body); transition: border-color .12s, background .12s; }
  .bo-preset .n { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1; }
  .bo-preset .u { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .bo-preset.on { border-color: var(--red); background: rgba(201,59,0,0.12); }
  .bo-preset.on .n { color: #ff7b3a; }
  .bo-preset:active { transform: scale(0.97); }
  .bo-stepper { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 14px; }
  .bo-step-btn { width: 72px; height: 72px; border: none; border-radius: 18px; font-size: 32px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 0; font-family: var(--font-body); }
  .bo-step-btn.minus { background: var(--layer-2); border: 1px solid var(--border-mid); color: var(--muted); }
  .bo-step-btn.plus { background: linear-gradient(135deg,#e64e15,var(--red)); color: #fff7ef; box-shadow: 0 10px 22px -8px rgba(201,59,0,0.7); }
  .bo-step-btn:active { transform: scale(0.96); }
  .bo-step-qty { text-align: center; }
  .bo-step-qty .n { font-family: var(--font-display); font-size: 52px; font-weight: 700; color: var(--text); line-height: 0.9; }
  .bo-step-qty .u { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
  .bo-card-totals { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 13px; font-size: 13px; color: var(--muted); }
  .bo-card-totals b { color: var(--text); }
  .bo-card-fine { font-size: 10.5px; color: var(--muted); margin-top: 8px; letter-spacing: 0.3px; }
  .bo-continue-cta { width: 100%; margin-top: 6px; border: none; border-radius: 14px; padding: 16px; background: linear-gradient(135deg,#e64e15,var(--red)); color: #fff7ef; font-family: var(--font-body); font-weight: 900; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; }
  .bo-continue-cta:active { transform: scale(0.99); }

  /* Sticky order CTA — the running total + Continue button dock just above the
     persistent tab bar so the CTA never scrolls off, however long the
     crawfish/sides/drinks list grows. The scroll container is .sheet; the
     full-bleed background masks rows scrolling underneath and a top fade lets
     them dissolve into the bar instead of hard-cutting. */
  .bo-step1-foot {
    position: sticky;
    bottom: var(--nav-h, 74px);
    margin: 8px -16px 0;
    padding: 6px 16px 12px;
    background: var(--layer);
    z-index: 6;
  }
  .bo-step1-foot::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -24px; height: 24px;
    background: linear-gradient(to top, var(--layer), transparent);
    pointer-events: none;
  }

  /* Pounds quick-pick (3 / 5 / 10 / Custom) — DoorDash-style chips, Crawdaddy themed. */
  .bo-lbs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .bo-lbs-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 13px 4px; border-radius: 11px; background: var(--layer-2); border: 1.5px solid var(--border-mid); color: var(--text); font-family: var(--font-body); cursor: pointer; transition: border-color .12s, background .12s; }
  .bo-lbs-pill .n { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1; }
  .bo-lbs-pill .u { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .bo-lbs-pill.bo-lbs-custom .n { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; }
  .bo-lbs-pill.on { border-color: var(--red); background: rgba(201,59,0,0.10); }
  .bo-lbs-pill.on .n { color: #ff8a52; }
  .bo-lbs-pill.on .u { color: #ff8a52; }
  body.light .bo-lbs-pill.on { background: rgba(154,46,0,0.08); border-color: var(--red); }
  body.light .bo-lbs-pill.on .n, body.light .bo-lbs-pill.on .u { color: var(--red); }
  @media (hover: hover) { .bo-lbs-pill:hover { border-color: var(--red); } }
  /* Extras checkboxes */
  .bo-extras { display: flex; flex-direction: column; gap: 8px; }
  .bo-extra-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
  .bo-extra-l { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
  .bo-extra-cb { width: 18px; height: 18px; accent-color: var(--red); }
  .bo-extra-p { font-size: 13px; font-weight: 800; color: var(--muted); }
  /* Customer drink pills (tap to select) */
  .bo-drinks { display: flex; flex-wrap: wrap; gap: 9px; }
  .bo-drink-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--layer-2); border: 1.5px solid var(--border-mid); border-radius: 999px; padding: 10px 15px; font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-body); cursor: pointer; transition: border-color .12s, background .12s; -webkit-tap-highlight-color: transparent; }
  .bo-drink-pill .dp { font-size: 11px; font-weight: 700; color: var(--muted); }
  .bo-drink-pill.on { border-color: var(--red); background: rgba(201,59,0,0.10); color: #ff8a52; }
  .bo-drink-pill.on .dp { color: #ff8a52; }
  body.light .bo-drink-pill.on { background: rgba(154,46,0,0.08); color: var(--red); }
  body.light .bo-drink-pill.on .dp { color: var(--red); }
  @media (hover: hover) { .bo-drink-pill:hover { border-color: var(--red); } }
  /* Vendor drink pills (with a ✕ to delete, top-right corner) */
  .bos-drink-pill { position: relative; display: inline-flex; align-items: center; background: var(--layer); border: 1px solid var(--border-mid); border-radius: 999px; padding: 10px 15px; font-size: 12.5px; font-weight: 700; color: var(--text); }
  /* Per-item photo box (extras + drinks editor rows) — tap to upload a photo. */
  .bos-item-pic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 9px; border: 1px solid var(--border-mid); background: var(--layer); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; overflow: hidden; padding: 0; }
  .bos-item-pic img { width: 100%; height: 100%; object-fit: cover; }
  .bos-item-pic:active { transform: scale(0.94); }
  /* Vendor order Confirm / Decline — Confirm is big + green + glowing so it
     can't be fat-fingered; Decline is a small red target beside it. */
  @keyframes bo-confirm-glow {
    0%,100% { box-shadow: 0 0 0 1px rgba(74,122,64,.55), 0 0 13px rgba(74,122,64,.42); }
    50%     { box-shadow: 0 0 0 1px rgba(74,122,64,.85), 0 0 22px rgba(74,122,64,.7); }
  }
  .bo-confirm-btn {
    flex: 3; padding: 16px 12px; border: none; border-radius: 10px;
    background: linear-gradient(180deg,#5b9a4c,#46763c); color: #fff;
    font-family: var(--font-body); font-size: 14px; font-weight: 900;
    letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
    animation: bo-confirm-glow 2s ease-in-out infinite;
  }
  .bo-confirm-btn:active { transform: scale(0.98); }
  .bo-decline-btn {
    flex: 1; padding: 9px 6px; border-radius: 8px;
    background: transparent; border: 1px solid var(--red); color: var(--red);
    font-family: var(--font-body); font-size: 10px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  }
  @media (prefers-reduced-motion: reduce) { .bo-confirm-btn { animation: none; } }
  /* Boiled Order Settings — bump tiny helper text so it's easier to read.
     Scoped to .bos-page so other forms keep their sizing. The attribute
     selectors override inline font-size:Npx via !important. */
  .bos-page .field-label { font-size: 10px; }
  .bos-page [style*="font-size:11px"]   { font-size: 13px !important; }
  .bos-page [style*="font-size:10.5px"] { font-size: 12px !important; }
  .bos-page [style*="font-size:10px"]   { font-size: 11.5px !important; }
  .bos-drink-pill .bdp-x { position: absolute; top: -8px; right: -8px; width: 21px; height: 21px; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--bg); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
  @media (hover: hover) { .bos-drink-pill .bdp-x:hover { filter: brightness(1.12); } }
  /* Delivery-time card (DoorDash-style: Express / Standard / Schedule Ahead) */
  .bo-dt-card { border: 1px solid var(--border-mid); border-radius: 12px; overflow: hidden; background: var(--layer-2); }
  .bo-dt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 14px 15px; cursor: pointer; text-align: left; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
  .bo-dt-row:last-child { border-bottom: none; }
  .bo-dt-row.on { background: rgba(201,59,0,0.07); }
  /* Schedule Ahead time picker — a contained field (box-sizing so it never
     bleeds past the card edge) with a visible "Choose a time" label + the
     native datetime picker on the right. */
  .bo-sched-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 12px; padding: 14px 16px; }
  .bo-sched-field .lbl { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
  .bo-sched-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 14px; text-align: right; -webkit-appearance: none; }
  .bo-dt-l { min-width: 0; }
  .bo-dt-t { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.1; }
  .bo-dt-s { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .bo-dt-r { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .bo-dt-fee { font-size: 13.5px; font-weight: 700; color: var(--text); }
  .bo-dt-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex-shrink: 0; }
  .bo-dt-radio.on { background: var(--red); border-color: var(--red); }
  /* Tip % pills */
  .bo-tip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .bo-tip-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 4px; border-radius: 11px; background: var(--layer-2); border: 1.5px solid var(--border-mid); color: var(--text); font-family: var(--font-body); cursor: pointer; }
  .bo-tip-pill .tp { font-size: 14px; font-weight: 800; }
  .bo-tip-pill .ta { font-size: 10px; color: var(--muted); font-weight: 700; }
  .bo-tip-pill.on { border-color: var(--red); background: rgba(201,59,0,0.10); }
  .bo-tip-pill.on .tp, .bo-tip-pill.on .ta { color: #ff8a52; }
  body.light .bo-tip-pill.on { background: rgba(154,46,0,0.08); border-color: var(--red); }
  body.light .bo-tip-pill.on .tp, body.light .bo-tip-pill.on .ta { color: var(--red); }
  /* Deals & gift cards button */
  .bo-deals-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--layer-2); border: 1px dashed var(--border-mid); border-radius: 10px; padding: 14px; margin: 4px 0 16px; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text); }
  /* Saved-address picker rows */
  .bo-saved-addr { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 9px; padding: 11px 13px; cursor: pointer; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--text); text-align: left; }
  /* Applied promo/gift rows in the Deals modal */
  .bo-applied-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(74,122,64,0.10); border: 1px solid rgba(74,122,64,0.4); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--text); }
  .bo-applied-row button { background: none; border: none; color: var(--red); font-family: var(--font-body); font-size: 11px; font-weight: 800; cursor: pointer; }
  /* Address autocomplete dropdown */
  .bo-addr-sugs { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--layer); border: 1px solid var(--border-mid); border-radius: 10px; overflow: hidden; max-height: 240px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  .bo-addr-sug { padding: 11px 13px; font-size: 12.5px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); line-height: 1.4; }
  .bo-addr-sug:last-child { border-bottom: none; }
  @media (hover: hover) { .bo-addr-sug:hover { background: var(--layer-2); } }
  @media (hover: hover) { .bo-saved-addr:hover { border-color: var(--red); } }
  /* Always-on red summary (matches the screenshot) */
  .bo-summary { background: var(--red); border-radius: 12px; padding: 14px 16px; margin: 6px 0 2px; }
  .bo-sum-row { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.9); margin-bottom: 6px; }
  .bo-sum-row span:last-child { font-weight: 700; color: #fff; }
  .bo-sum-row.tot { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.3); font-size: 17px; }
  .bo-sum-row.tot span { color: #fff; font-weight: 800; }
  body.light .bo-summary { background: var(--red); }
  .map-pin.mode-cater  { background: var(--cater-accent) !important; }

  /* Empty-state card shown in mode views with no vendors yet. */
  .mode-empty {
    background: var(--layer-2); border: 1.5px dashed var(--border-mid);
    border-radius: 14px; padding: 28px 22px; text-align: center;
    margin: 12px;
  }
  .mode-empty .em-ico { font-size: 40px; margin-bottom: 10px; opacity: 0.7; }
  .mode-empty .em-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .mode-empty .em-body { font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
  .mode-empty .em-cta {
    display: inline-block;
    background: linear-gradient(180deg, var(--red), #8a2700);
    border: 1.5px solid #8a2700;
    color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 11px;
    letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 16px; border-radius: 8px;
    text-decoration: none; cursor: pointer;
  }

  /* ── HEADER ADD BUTTON ── */
  .header-add {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--red); border: none; color: #fff;
    font-size: 20px; font-weight: 300; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background 0.12s;
  }
  .header-add:hover { background: var(--red-hover); }

  /* ── INLINE CHIP ROW (list filters) ── */
  .chip-row {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row .fc { flex-shrink: 0; white-space: nowrap; padding: 5px 10px; font-size: 9px; }
  .chip-divider { height: 1px; background: var(--border); margin: 6px 0 10px; }

  /* ── EVENT CARDS ── */
  .event-card {
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 13px 14px; margin-bottom: 10px;
  }
  .event-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .event-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.2; flex: 1; }
  .event-badge {
    padding: 3px 8px; border-radius: 4px;
    font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    flex-shrink: 0; margin-top: 2px;
  }
  .event-meta { font-size: 12px; color: var(--text); opacity: 0.75; letter-spacing: 0.3px; margin-bottom: 6px; font-weight: 500; }
  .event-desc { font-size: 13px; color: var(--text); line-height: 1.55; }
  .event-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
  .event-tab {
    flex-shrink: 0; padding: 6px 12px; border-radius: 20px;
    background: transparent; border: 1px solid var(--border-mid);
    color: var(--muted); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; font-family: var(--font-body); transition: all 0.12s;
  }
  .event-tab.active { background: var(--red); border-color: var(--red); color: #fff; }

  /* ── (HUD + Aura CSS lives at line ~3616 — search ".hud-glow". The earlier
     duplicate block that used to sit here was a stray paste from the preview
     HTML and had transition: all 0.15s on .aura-* which made theme toggles
     lag, since it overrode the canonical block's no-color-transition fix.) ── */

  /* ── EVENT CREATOR TOOLBAR ── */
  /* Compact tri-button row that only the creator (or admin) sees at the top
     of their event sheet: Edit · Post Update · Who's Going. */
  .creator-tb-btn {
    background: var(--layer-2);
    border: 1px solid var(--border-mid);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .creator-tb-btn:hover {
    border-color: var(--green);
    color: var(--green);
  }

  /* ── EVENT FOLLOW LINKS (FB / IG) ── */
  /* Dark-mode tuned: bright social colors that pop on near-black. */
  .event-fb-link { background: rgba(24,119,242,0.13); border-color: #1877f2; color: #1877f2; }
  .event-ig-link { background: rgba(225,48,108,0.13); border-color: #e1306c; color: #e1306c; }

  /* ── FEATURED CLAIM PANEL ── */
  .fcp {
    background: var(--layer-2);
    border: 1.5px solid rgba(212,160,23,0.40);
    border-radius: 12px;
    padding: 16px 14px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
  }
  .fcp::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(212,160,23,0.10), transparent 70%);
    pointer-events: none;
  }
  .fcp.fcp-taken  { border-color: var(--border-mid); }
  .fcp.fcp-active { border-color: rgba(212,160,23,0.65); background: linear-gradient(135deg, rgba(212,160,23,0.10), rgba(212,160,23,0.02)); }

  .fcp-eyebrow {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 800;
    color: var(--gold-bright);
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 5px;
  }
  .fcp-eyebrow.muted { color: var(--muted); }
  .fcp-title {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    color: var(--text); line-height: 1.2; margin-bottom: 3px;
  }
  .fcp-city {
    font-size: 11px; color: var(--muted); letter-spacing: 0.4px; margin-bottom: 12px;
  }
  .fcp-slots { display: flex; gap: 7px; margin-bottom: 12px; align-items: center; }
  .fcp-slot {
    flex: 1; height: 9px; border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-mid);
  }
  .fcp-slot.taken {
    background: var(--gold); border-color: var(--gold);
    box-shadow: 0 0 6px rgba(212,160,23,0.45);
  }
  .fcp-slot.mine {
    background: #82c272; border-color: #82c272;
    box-shadow: 0 0 6px rgba(130,194,114,0.5);
  }
  .fcp-status-line {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px; gap: 10px;
  }
  .fcp-status { font-size: 12px; font-weight: 700; color: var(--text); }
  .fcp-remaining {
    font-size: 10px; color: var(--muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
  }
  .fcp-remaining.warn { color: var(--gold-bright); }
  .fcp-remaining.full { color: var(--red); }
  .fcp-reset {
    font-size: 10px; color: var(--muted);
    margin-bottom: 12px; padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid var(--border);
  }
  .fcp-btn {
    display: block; width: 100%;
    padding: 13px 16px;
    background: var(--gold); color: #1a0e04;
    border: none; border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 800; font-size: 12px;
    text-transform: uppercase; letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(212,160,23,0.25);
    transition: all 0.18s;
  }
  .fcp-btn:hover { background: var(--gold-bright); transform: translateY(-1px); }
  .fcp-btn.disabled {
    background: var(--layer); color: var(--muted);
    border: 1px solid var(--border-mid);
    box-shadow: none; cursor: not-allowed;
  }
  .fcp-btn.disabled:hover { transform: none; }
  .fcp-btn-fine { text-align: center; font-size: 10px; color: var(--muted); margin-top: 8px; }
  .fcp-active-info {
    background: rgba(95,160,80,0.10);
    border: 1px solid rgba(95,160,80,0.45);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .fcp-active-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
  .fcp-active-label {
    color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
    font-size: 9px; font-weight: 700;
  }
  .fcp-active-val { color: #82c272; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Light-mode tuning */
  body.light .fcp-active-val { color: #1f4019; }

  /* ── FEATURED PER-MODE CARDS (.fpc — Boiled / Live / Catering) ── */
  /* Single template, one card per applicable mode. Theme via .fpc-<mode>. */
  .fpc {
    --fpc-accent:        var(--gold);
    --fpc-accent-text:   var(--gold-bright);
    --fpc-accent-soft:   rgba(212,160,23,0.10);
    --fpc-accent-border: rgba(212,160,23,0.50);
    --fpc-cta-shadow:    0 8px 20px -8px rgba(212,160,23,0.7);
    --fpc-cta-fg:        #1a0e04;
    --fpc-cta-grad:      linear-gradient(135deg, #f0bf3a, #d4a017);
    background: linear-gradient(135deg, var(--fpc-accent-soft), rgba(255,255,255,0.01));
    border: 1.5px solid var(--fpc-accent-border);
    border-radius: 16px; padding: 22px 18px; margin-bottom: 14px;
    position: relative; overflow: hidden;
  }
  .fpc::after {
    content: ''; position: absolute; top: -40%; right: -20%;
    width: 240px; height: 240px;
    background: radial-gradient(circle, var(--fpc-accent-soft) 0%, transparent 70%);
    pointer-events: none;
  }
  .fpc-live {
    --fpc-accent:        #4a8bbf;
    --fpc-accent-text:   #6ba9d8;
    --fpc-accent-soft:   rgba(74,139,191,0.10);
    --fpc-accent-border: rgba(74,139,191,0.55);
    --fpc-cta-shadow:    0 8px 20px -8px rgba(74,139,191,0.75);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      linear-gradient(135deg, #6ba9d8, #4a8bbf);
  }
  .fpc-catering {
    --fpc-accent:        var(--cater-accent);
    --fpc-accent-text:   var(--cater-accent-text);
    --fpc-accent-soft:   var(--cater-accent-soft);
    --fpc-accent-border: var(--cater-accent-border);
    --fpc-cta-shadow:    var(--cater-cta-shadow);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      var(--cater-cta-grad);
  }
  /* Boiled = red across the rest of the app, so the Featured Boiled card
     wears red too (overrides the gold default on .fpc). Bundle stays gold
     because that's the savings/premium signal, not a mode. */
  .fpc-boiled {
    --fpc-accent:        var(--red);
    --fpc-accent-text:   #ff7b3a;
    --fpc-accent-soft:   rgba(201,59,0,0.10);
    --fpc-accent-border: rgba(201,59,0,0.50);
    --fpc-cta-shadow:    0 8px 20px -8px rgba(201,59,0,0.7);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      linear-gradient(135deg, #e64e15, var(--red));
  }
  /* NOTE: the light-mode override for .fpc-boiled is intentionally NOT here.
     It lives near the other light-mode mode overrides (.fpc-live / .fpc-catering)
     so it falls AFTER `body.light .fpc` (gold default) in the stylesheet
     and actually wins the cascade. See further down. */
  .fpc-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 900; color: var(--fpc-accent-text);
    text-transform: uppercase; letter-spacing: 2.2px; margin-bottom: 8px;
    position: relative; z-index: 1;
  }
  .fpc-title {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    color: var(--text); line-height: 1.15; margin-bottom: 4px;
    position: relative; z-index: 1;
  }
  .fpc-sub {
    font-size: 12px; color: var(--muted); margin-bottom: 16px;
    position: relative; z-index: 1; line-height: 1.5;
  }
  .fpc-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 14px; position: relative; z-index: 1;
  }
  .fpc-stat {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--fpc-accent-border);
    border-radius: 10px; padding: 10px 12px;
  }
  body.light .fpc-stat { background: rgba(0,0,0,0.05); }
  .fpc-stat-label {
    font-size: 9px; color: var(--fpc-accent-text);
    letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800;
    opacity: 0.85; margin-bottom: 2px;
  }
  .fpc-stat-val {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    color: var(--text); line-height: 1.1;
  }
  .fpc-stat-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .fpc-slots {
    display: flex; gap: 6px; margin-bottom: 14px;
    position: relative; z-index: 1;
  }
  .fpc-slot {
    flex: 1; height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-mid);
  }
  body.light .fpc-slot { background: rgba(0,0,0,0.05); }
  .fpc-slot.taken {
    background: var(--fpc-accent);
    border-color: var(--fpc-accent);
    box-shadow: 0 0 6px var(--fpc-accent-border);
  }
  .fpc-slot.mine {
    background: #82c272;
    border-color: #82c272;
    box-shadow: 0 0 6px rgba(130,194,114,0.5);
  }
  /* Light-mode bans lime green — fill the active slot with forest green. */
  body.light .fpc-slot.mine {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 6px rgba(31,64,25,0.5);
  }
  .fpc-bullets {
    font-size: 12.5px; color: rgba(245,230,197,0.85);
    line-height: 1.7; margin-bottom: 16px;
    position: relative; z-index: 1; padding: 0; list-style: none;
  }
  body.light .fpc-bullets { color: rgba(18,8,4,0.78); }
  .fpc-bullets li { padding-left: 20px; position: relative; }
  .fpc-bullets li::before {
    content: '◆'; position: absolute; left: 4px;
    color: var(--fpc-accent-text); font-size: 10px; top: 4px;
  }
  /* Animatable CSS variable for the border-beam rotation. Required so the
     conic-gradient can spin via the variable instead of transform:rotate
     (rotating the whole pseudo-element shifts its mask, breaking the ring). */
  @property --fpc-beam-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
  @keyframes fpc-beam-spin {
    to { --fpc-beam-angle: 360deg; }
  }
  /* Outline button — no fill. A bright laser beam runs around the border
     in the mode's accent color (red / blue / purple / gold). Three stacked
     drop-shadows make the beam glow like a neon laser as it travels. */
  .fpc-btn {
    display: block; width: 100%; padding: 16px;
    /* Light tier-color shade at rest — just enough presence on the bg so the
       button doesn't feel hollow, without competing with the laser beam. */
    background: color-mix(in srgb, var(--fpc-accent) 10%, transparent);
    color: var(--fpc-accent-text);
    border: 1.5px solid color-mix(in srgb, var(--fpc-accent) 30%, transparent);
    border-radius: 10px;
    font-family: var(--font-body); font-weight: 900; font-size: 13px;
    letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer;
    position: relative; z-index: 1;
    isolation: isolate;
    overflow: hidden;                       /* clip the sheen sweep to the button's rounded shape so it can't visibly start outside */
    transition: transform 0.16s ease, background 0.2s ease, color 0.2s ease;
  }
  /* The laser — short bright arc of the accent color with a near-white
     "head" at its peak. The standard "two masks, exclude" trick clips it
     to a 2px ring. Three stacked drop-shadows = neon glow that follows
     the moving beam: tight 3px core → 10px halo → 22px outer bloom. */
  .fpc-btn:not([disabled])::before {
    content: '';
    position: absolute; inset: 0;          /* was -2px — keeps the ring inside the button now that overflow is hidden */
    border-radius: inherit;
    padding: 3px;
    /* Stops are symmetric around the peak (~320deg) — the seam where 360°
       wraps to 0° is fully transparent on both sides so the wrap-around
       is invisible. */
    background: conic-gradient(
      from var(--fpc-beam-angle, 0deg),
      transparent 0deg,
      transparent 235deg,
      color-mix(in srgb, var(--fpc-accent) 80%, transparent) 265deg,
      var(--fpc-accent) 300deg,
      color-mix(in srgb, var(--fpc-accent) 55%, white) 320deg,
      var(--fpc-accent) 340deg,
      color-mix(in srgb, var(--fpc-accent) 80%, transparent) 355deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: fpc-beam-spin 3s linear infinite;
    pointer-events: none;
    z-index: 2;
    /* GPU hint — keeps the drop-shadow filter on its own composited
       layer so the bloom doesn't shimmer / re-rasterize each frame. */
    will-change: filter;
    transform: translateZ(0);
    filter:
      drop-shadow(0 0 3px var(--fpc-accent))
      drop-shadow(0 0 10px var(--fpc-accent))
      drop-shadow(0 0 22px color-mix(in srgb, var(--fpc-accent) 70%, transparent));
  }
  .fpc-btn:hover:not([disabled]) {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--fpc-accent) 10%, transparent);
  }
  .fpc-btn:hover:not([disabled])::before {
    filter:
      drop-shadow(0 0 4px var(--fpc-accent))
      drop-shadow(0 0 14px var(--fpc-accent))
      drop-shadow(0 0 30px color-mix(in srgb, var(--fpc-accent) 80%, transparent));
  }
  .fpc-btn[disabled] {
    background: var(--layer); color: var(--muted);
    border: 1px solid var(--border-mid); box-shadow: none;
    cursor: not-allowed; opacity: 0.7;
  }
  /* ── Glossy diagonal sheen on press ────────────────────────────
     ::after is the sheen — sits off-screen at rest, sweeps across
     when .is-pressed is added via the delegated click handler at
     the bottom of body. Z-indexed below the laser ring (which is
     at z-index:3) so the ring keeps spinning during the wash. */
  .fpc-btn:not([disabled])::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    /* Tighter band — sharp edges, no soft 25→42 ramp that was visible
       before the bright peak reached the button. With overflow:hidden on
       the parent the sheen is now fully clipped to the button shape. */
    background: linear-gradient(
      110deg,
      transparent 44%,
      rgba(255,255,255,0.55) 50%,
      transparent 56%);
    transform: translateX(-100%);
    mix-blend-mode: overlay;       /* sheen brightens beneath instead of fully covering text */
    pointer-events: none;
    z-index: 1;
  }
  .fpc-btn.is-pressed {
    background: var(--fpc-accent);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    border-color: color-mix(in srgb, var(--fpc-accent) 90%, white);
    transform: translateY(1px) scale(0.985);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -2px 0 rgba(0,0,0,0.30),
      0 10px 30px -8px color-mix(in srgb, var(--fpc-accent) 80%, transparent);
  }
  .fpc-btn.is-pressed::after {
    transform: translateX(100%);
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* When .is-pressed comes off, snap the sheen back off-screen
     instantly instead of letting it sweep in reverse. The 0.1s
     delay covers the brief overlap with the button-bg fade-out. */
  .fpc-btn:not(.is-pressed)::after {
    transition: transform 0s 0.1s;
    transform: translateX(-100%);
  }
  @media (prefers-reduced-motion: reduce) {
    .fpc-btn:not([disabled])::before { animation: none; }
    .fpc-btn.is-pressed::after, .fpc-btn:not(.is-pressed)::after { transition: none; }
  }
  /* ── LIGHT MODE press: the sheen fills the box with the tier color as
     it sweeps across. The ::after becomes a colored gradient whose stop
     position animates left → right via @property --fpc-fill, so the bg
     is "painted" by the dash. Dark mode keeps the instant-fill + overlay
     white-sheen pattern from above. */
  @property --fpc-fill {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
  }
  @keyframes fpc-fill-sweep {
    from { --fpc-fill: -5%; }
    to   { --fpc-fill: 105%; }
  }
  body.light .fpc-btn.is-pressed {
    /* Don't snap the bg to full color — let the sheen paint it. Keep the
       resting lighter tint visible behind until the wash has covered it. */
    background: color-mix(in srgb, var(--fpc-accent) 12%, var(--bg));
    color: #fff;
    transition: none;
  }
  body.light .fpc-btn.is-pressed::after {
    background: linear-gradient(
      90deg,
      var(--fpc-accent) 0%,
      var(--fpc-accent) calc(var(--fpc-fill, 0%) - 4%),
      color-mix(in srgb, var(--fpc-accent) 30%, white) var(--fpc-fill, 0%),
      transparent calc(var(--fpc-fill, 0%) + 6%),
      transparent 100%);
    mix-blend-mode: normal;
    transform: none;
    transition: none;
    animation: fpc-fill-sweep 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  body.light .fpc-btn:not(.is-pressed)::after {
    animation: none;
  }
  /* Text wrapper — sits above the sheen so the colored fill doesn't
     cover the label as it sweeps. Below the laser ring (z-index:3). */
  .fpc-btn .fpc-btn-text {
    position: relative;
    z-index: 2;
  }
  .fpc-fine { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 10px; position: relative; z-index: 1; }
  .fpc-active-line {
    background: rgba(95,160,80,0.10);
    border: 1px solid rgba(95,160,80,0.45);
    border-radius: 8px; padding: 10px 12px;
    font-size: 11px; color: rgba(245,230,197,0.85); line-height: 1.5;
    position: relative; z-index: 1;
  }
  body.light .fpc-active-line {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
  }
  /* Light-mode palette: darker, fully-saturated accents that read on cream.
     CTA button flips to a solid color (no gradient) with white text. */
  body.light .fpc {
    --fpc-accent:        #8a5e0d;
    --fpc-accent-text:   #6a4708;
    --fpc-accent-soft:   rgba(138,94,13,0.15);
    --fpc-accent-border: rgba(138,94,13,0.55);
    --fpc-cta-shadow:    0 8px 20px -10px rgba(138,94,13,0.55);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      #8a5e0d;
  }
  body.light .fpc-live {
    --fpc-accent:        #2c5778;
    --fpc-accent-text:   #1f4566;
    --fpc-accent-soft:   rgba(44,87,120,0.13);
    --fpc-accent-border: rgba(44,87,120,0.55);
    --fpc-cta-shadow:    0 8px 20px -10px rgba(44,87,120,0.55);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      #2c5778;
  }
  body.light .fpc-catering {
    --fpc-accent:        #5e3a8a;
    --fpc-accent-text:   #432461;
    --fpc-accent-soft:   rgba(94,58,138,0.13);
    --fpc-accent-border: rgba(94,58,138,0.55);
    --fpc-cta-shadow:    0 8px 20px -10px rgba(94,58,138,0.55);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      #5e3a8a;
  }
  body.light .fpc-boiled {
    /* Lock every Featured Boiled accent to the light-mode dark red so the
       panel doesn't bleed gold on cream. Placed here AFTER `body.light .fpc`
       so it wins the cascade (same specificity → later rule wins). */
    --fpc-accent:        var(--red);
    --fpc-accent-text:   var(--red);
    --fpc-accent-soft:   rgba(154,46,0,0.10);
    --fpc-accent-border: rgba(154,46,0,0.50);
    --fpc-cta-shadow:    0 8px 20px -8px rgba(154,46,0,0.6);
    --fpc-cta-fg:        #fff;
    --fpc-cta-grad:      linear-gradient(135deg, #b53600, var(--red));
  }
  /* body.light .fpc-slot earlier won the cascade; explicitly fill the taken
     pill so claimed slots actually look claimed on cream. */
  body.light .fpc-slot.taken {
    background: var(--fpc-accent);
    border-color: var(--fpc-accent);
    box-shadow: none;
  }
  /* Mode-toggle tabs above the card. Metaball indicator: a sliding pill +
     a satellite drop that flies ahead and merges into the pill on arrival,
     blended via the SVG goo filter for a liquid "catch-up" effect. */
  .fpc-tabs {
    position: relative;
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  body.light .fpc-tabs { background: rgba(0,0,0,0.04); }
  .fpc-tabs-bg {
    position: absolute;
    top: 4px; right: 4px; bottom: 4px; left: 4px;
    filter: url(#fpc-gooey);
    pointer-events: none;
    z-index: 0;
  }
  .fpc-indicator {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: calc(100% / 3);
    border-radius: 7px;
    background: var(--red);
    transform: translateX(0%);
    transition:
      transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.35s ease,
      opacity 0.3s ease;
  }
  .fpc-satellite {
    position: absolute;
    top: 50%; left: 0;
    width: 14px; height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--red);
    opacity: 0;
    transition: background 0.35s ease;
  }
  .fpc-tabs.moving .fpc-satellite {
    animation: fpcSatFly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes fpcSatFly {
    0%   { transform: var(--sat-start, translateX(0) scale(0.5)); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: var(--sat-end,   translateX(0) scale(1.4)); opacity: 0; }
  }
  .fpc-tabs.fpc-tabs-boiled    .fpc-indicator,
  .fpc-tabs.fpc-tabs-boiled    .fpc-satellite { background: var(--red); }
  .fpc-tabs.fpc-tabs-live      .fpc-indicator,
  .fpc-tabs.fpc-tabs-live      .fpc-satellite { background: #4a8bbf; }
  .fpc-tabs.fpc-tabs-catering  .fpc-indicator,
  .fpc-tabs.fpc-tabs-catering  .fpc-satellite { background: var(--cater-accent); }
  /* Bundle is in a separate row — hide the modes-row indicator when the
     bundle tab is the active selection. */
  .fpc-tabs.fpc-tabs-bundle .fpc-indicator { opacity: 0; }

  .fpc-tab {
    position: relative;
    z-index: 2;
    flex: 1; padding: 9px 8px;
    background: transparent; border: none; color: var(--muted);
    font-family: var(--font-body); font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
    border-radius: 7px; cursor: pointer;
    transition: color 0.35s ease;
  }
  .fpc-tab:hover:not(.active) { color: var(--text); }
  /* Active tab keeps the mode-appropriate text color; the metaball indicator
     paints the background. */
  .fpc-tabs.fpc-tabs-boiled    .fpc-tab.active { color: var(--cream); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
  .fpc-tabs.fpc-tabs-live      .fpc-tab.active { color: #fff;          text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
  .fpc-tabs.fpc-tabs-catering  .fpc-tab.active { color: #fff;          text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

  /* Bundle pill — sits in its own row below the mode tabs. Visually distinct
     gold treatment even when inactive so vendors notice the savings. */
  .fpc-bundle-row {
    margin: -4px 0 10px;
    display: flex;
  }
  .fpc-tab.fpc-tab-bundle {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(212,162,39,0.12);
    border: 1px solid rgba(212,162,39,0.55);
    color: var(--gold);
    padding: 12px 12px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0.6px;
    font-size: 12px;
  }
  .fpc-tab.fpc-tab-bundle .fpc-bundle-star { font-size: 14px; line-height: 1; }
  .fpc-tab.fpc-tab-bundle .fpc-bundle-badge {
    background: var(--gold); color: #1a0e04;
    font-size: 9px; font-weight: 900; letter-spacing: 1.2px;
    padding: 3px 7px; border-radius: 999px; line-height: 1;
  }
  .fpc-tab.fpc-tab-bundle.active {
    background: rgba(212,162,39,0.20);
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,162,39,0.12) inset;
  }
  /* "All 3" bundle pill — solid gold in light mode so it reads as a premium
     savings tag rather than a soft outline. */
  body.light .fpc-tab.fpc-tab-bundle { background: #a87a10; border-color: #a87a10; color: #fff7ed; }
  body.light .fpc-tab.fpc-tab-bundle .fpc-bundle-star { color: #fff7ed; }
  body.light .fpc-tab.fpc-tab-bundle .fpc-bundle-badge { background: rgba(255,255,255,0.22); color: #fff7ed; }
  body.light .fpc-tab.fpc-tab-bundle.active { box-shadow: 0 0 0 2px rgba(168,122,16,0.18) inset; }

  /* Bundle card — gold-themed, distinct from the per-mode cards. */
  .fpc.fpc-bundle {
    background: linear-gradient(180deg, rgba(212,162,39,0.08), rgba(212,162,39,0.02));
    border: 1.5px solid rgba(212,162,39,0.55);
  }
  .fpc.fpc-bundle .fpc-eyebrow { color: var(--gold); }
  .fpc-bundle-modes { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; }
  .fpc-bundle-mode {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; border-radius: 9px;
    background: rgba(0,0,0,0.20); border: 1px solid var(--border);
    font-size: 13px;
  }
  body.light .fpc-bundle-mode { background: rgba(255,247,237,0.55); }
  .fpc-bundle-mode .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .fpc-bundle-mode.live .dot { background: #4a8bbf; }
  .fpc-bundle-mode.boi  .dot { background: var(--red); }
  .fpc-bundle-mode.cat  .dot { background: var(--cater-accent); }
  .fpc-bundle-mode .name { font-weight: 700; min-width: 70px; }
  .fpc-bundle-mode.live .name { color: #8fb9d9; }
  .fpc-bundle-mode.boi  .name { color: #ff7b3a; }
  .fpc-bundle-mode.cat  .name { color: var(--cater-accent-text); }
  body.light .fpc-bundle-mode.live .name { color: #1f4566; }
  body.light .fpc-bundle-mode.boi  .name { color: var(--red); }
  /* Light-mode: every "boiled accent text" element that defaults to the
     dark-mode bright orange (#ff7b3a) falls back to --red so all the boiled
     reds match the Per Pound box across the app. */
  body.light .vs-mode-card.boiled.selected .vs-mode-ttl,
  body.light .vs-summary-pill.boiled { color: var(--red); }
  /* NB: the splash boiled card arrow stays cream (#fff7e1, set above) — it sits
     ON the red card, so coloring it --red here made it invisible in light mode. */
  body.light .fpc-bundle-mode.cat  .name { color: #432461; }
  .fpc-bundle-mode .desc { color: var(--muted); font-size: 12.5px; flex: 1; }
  .fpc-bundle-mode .check { color: var(--gold); font-weight: 900; font-size: 14px; }

  .fpc-bundle-price {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 14px 16px; margin-bottom: 6px;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(212,162,39,0.55);
    border-radius: 10px;
  }
  /* WAS/NOW pricing box — solid gold fill in light mode so it reads as a
     premium pricing band instead of a faint outlined tint. */
  body.light .fpc-bundle-price { background: #a87a10; border-color: #a87a10; box-shadow: 0 6px 18px -10px rgba(168,122,16,0.45); }
  .fpc-bundle-was-lbl, .fpc-bundle-now-lbl {
    font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  }
  .fpc-bundle-was-lbl { color: var(--muted); }
  .fpc-bundle-now-lbl { color: var(--gold); }
  body.light .fpc-bundle-price .fpc-bundle-was-lbl,
  body.light .fpc-bundle-price .fpc-bundle-now-lbl { color: rgba(255,247,237,0.85); }
  .fpc-bundle-was { font-family: var(--font-display); font-size: 18px; color: var(--muted); text-decoration: line-through; line-height: 1; }
  .fpc-bundle-now { font-family: var(--font-display); font-size: 28px; color: var(--gold); font-weight: 800; line-height: 1; }
  body.light .fpc-bundle-price .fpc-bundle-was { color: rgba(255,247,237,0.65); }
  body.light .fpc-bundle-price .fpc-bundle-now { color: #fff7ed; }
  .fpc-bundle-save { text-align: center; font-size: 11.5px; color: var(--gold); font-weight: 800; letter-spacing: 0.6px; margin: 4px 0 14px; }
  /* Save-line text reads as a neutral brown in light mode so the gold-on-gold
     stacking (WAS/NOW box → save line → First-Time Buyer box) gets a calmer
     middle beat instead of three gold lines in a row. */
  body.light .fpc-bundle-save { color: var(--muted); }
  /* Bundle's First-Time Buyer Special box uses the SAME gold fill as the
     WAS/NOW pricing box above it so the two pricing surfaces visually pair.
     Other tiers (boiled/live/cater) still use their own --fpc-accent. */
  body.light .fpc-bundle .fpc-firsttimer { background: #a87a10; border-color: #a87a10; }
  /* Bundle button — same outline + gold beam treatment as the per-mode CTAs,
     just inherits gold via the parent card's --fpc-accent. */
  .fpc-btn.fpc-btn-bundle:disabled { opacity: 0.55; cursor: not-allowed; }
  .fpc-bundle-fine { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.55; margin-top: 10px; }

  /* First-Time Buyer Special — band above the Claim CTA on Featured cards.
     Inherits the parent card's mode accent (--fpc-accent / --fpc-accent-text /
     --fpc-cta-fg) so Live = blue, Boiled = red, Catering = purple, Bundle =
     gold. Static panel — the "fancy" lives on the CTA's border beam now. */
  /* First-Time Buyer Special — FILLED with the tier color in both modes.
     Prices ($200 / $300-struck) read as a lighter mix of the tier color
     (white-tinted), every other line is cream/off-white so it reads
     legible on the saturated colored fill. Dark mode uses a darker mix
     so the box doesn't read as a glowing flag against the dark surface;
     light mode keeps full saturation since the cream bg needs the punch. */
  .fpc-firsttimer {
    margin: 10px 0 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--fpc-accent) 72%, black);
    border: 1px solid color-mix(in srgb, var(--fpc-accent) 85%, black);
    border-radius: 10px;
    text-align: center;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -1px 0 rgba(0,0,0,0.25);
  }
  body.light .fpc-firsttimer {
    background: var(--fpc-accent);
    border-color: color-mix(in srgb, var(--fpc-accent) 90%, white);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.18);
  }
  .fpc-ft-badge {
    display: inline-block;
    background: rgba(255,255,255,0.20); color: #fff7e1;
    font-size: 9px; font-weight: 900; letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 9px; border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.18);
  }
  .fpc-ft-prices { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .fpc-ft-was {
    font-family: var(--font-display); font-size: 16px;
    color: rgba(245,230,197,0.82);
    text-decoration: line-through;
  }
  .fpc-ft-now {
    font-family: var(--font-display); font-size: 28px;
    /* CLEAR lighter version of the tier color so it reads as "light red /
       light blue / lavender / light gold" against the saturated fill —
       50/50 mix of tier + white gives a vivid pastel of the same hue. */
    color: color-mix(in srgb, var(--fpc-accent) 50%, white);
    font-weight: 800; line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  }
  .fpc-ft-per {
    font-size: 10.5px;
    color: rgba(245,230,197,0.96);   /* cream/off-white */
    letter-spacing: 0.3px;
  }
  /* Gold tier needs a bit more contrast — 50/50 gold+white gets close to
     pale cream, which can wash out against the gold fill. Push it lighter
     (toward straight cream) so it stays distinct from the bg. */
  .fpc-featured .fpc-firsttimer .fpc-ft-now,
  .fpc-btn-bundle ~ * .fpc-ft-now { color: #fff7e1; }
  /* LIGHT MODE — the filled red/blue/purple box already pops against the
     cream surface, so all the in-box text reads as off-white cream for
     maximum contrast (instead of the lighter-tier mix we use in dark mode). */
  body.light .fpc-firsttimer .fpc-ft-now,
  body.light .fpc-firsttimer .fpc-ft-was,
  body.light .fpc-firsttimer .fpc-ft-per {
    color: #fff7e1;
  }
  body.light .fpc-firsttimer .fpc-ft-was {
    color: rgba(255,247,225,0.55);   /* dimmed cream + strike-through */
  }

  /* Now that all Featured rings are unified gold, override the per-mode
     paid-vendor pin to use the gold treatment regardless of mode. The
     base .map-pin.gold rule already does this for boiled featured;
     extend to live + catering so every featured map pin reads the same. */
  .map-pin.paid-vendor.featured-gold {
    box-shadow: 0 2px 14px rgba(245,200,66,0.7), 0 0 0 2px #f5c842, 0 0 0 4px rgba(95,160,80,0.6) !important;
  }

  /* ── EVENT BOOST ── */
  .event-card.boosted {
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04));
    border: 2px solid #3b82f6;
    box-shadow:
      0 0 0 3px rgba(59,130,246,0.18),
      0 0 24px rgba(59,130,246,0.45),
      0 4px 18px rgba(59,130,246,0.30);
  }
  .boost-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #3b82f6; color: #fff;
    padding: 4px 9px; border-radius: 5px;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(59,130,246,0.50);
  }
  .boost-countdown {
    margin-top: 8px; font-size: 10px; font-weight: 700;
    color: #60a5fa; text-transform: uppercase; letter-spacing: 1.5px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .boost-cta-wrap {
    margin-top: 14px; padding: 14px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(59,130,246,0.04));
    border: 1.5px dashed #3b82f6;
    text-align: center;
  }
  .boost-cta-eyebrow {
    font-size: 9px; font-weight: 800; color: #60a5fa;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px;
  }
  .boost-cta-title {
    font-family: var(--font-display); font-size: 16px; font-weight: 700;
    color: var(--text); margin-bottom: 6px;
  }
  .boost-cta-text {
    font-size: 12px; color: var(--text); opacity: 0.82;
    line-height: 1.5; margin-bottom: 12px;
  }
  .boost-cta-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #3b82f6; color: #fff;
    padding: 11px 22px; border-radius: 8px; border: none;
    font-family: var(--font-body); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.5px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(59,130,246,0.45);
    transition: all 0.18s ease;
  }
  .boost-cta-btn:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,130,246,0.55); }
  .boost-cta-btn:disabled { opacity: 0.6; cursor: wait; }
  .boost-cta-fine { margin-top: 8px; font-size: 10px; color: var(--muted); }
  .boost-active {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(96,165,250,0.08));
    border: 1px solid #3b82f6;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .boost-active-text {
    font-size: 11px; font-weight: 700; color: #60a5fa;
    text-transform: uppercase; letter-spacing: 1.5px;
  }
  .boost-active-time {
    font-size: 12px; font-weight: 700; color: #60a5fa;
    font-variant-numeric: tabular-nums;
  }
  .boost-active-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;
    box-shadow: 0 0 12px #3b82f6;
  }

  /* ── TIME PILLS ── */
  .time-pill {
    padding: 6px 10px; border-radius: 20px; font-size: 10px; font-weight: 700;
    font-family: var(--font-body); letter-spacing: 0.3px; cursor: pointer;
    background: var(--layer); border: 1px solid var(--border-mid);
    color: var(--muted); transition: all 0.12s; white-space: nowrap;
  }
  .time-pill.active { background: rgba(180,30,0,0.12); border-color: var(--red); color: var(--red); }

  /* ── LEADERBOARD ── */
  .lb-select {
    width: 100%;
    padding: 13px 40px 13px 14px;
    margin: 12px 0 14px;
    background-color: var(--layer);
    border: 1px solid var(--border-mid);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23b41e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    transition: border-color 0.12s, color 0.12s;
  }
  .lb-select:hover { border-color: var(--red); }
  .lb-select:focus { outline: none; border-color: var(--red); color: var(--red); }
  .lb-select option { background: var(--layer); color: var(--text); }
  .lb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.12s;
  }
  .lb-row:hover { background: rgba(255,255,255,0.02); }
  .lb-row:last-child { border-bottom: none; }
  .lb-rank { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--red); min-width: 28px; text-align: center; }
  .lb-rank.gold { color: #f5c842; }
  .lb-rank.silver { color: #aaa; }
  .lb-rank.bronze { color: #c88560; }
  .lb-info { flex: 1; min-width: 0; }
  .lb-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lb-meta { font-size: 9px; color: var(--muted); margin-top: 1px; }
  .lb-score { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }

  /* ── ALERT TOGGLE ── */
  .alert-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .alert-label { font-size: 15px; font-weight: 700; color: var(--text); }
  .alert-sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
  .toggle-wrap { flex-shrink: 0; }
  .toggle {
    width: 42px; height: 24px; background: var(--border-mid);
    border-radius: 12px; cursor: pointer; position: relative;
    transition: background 0.2s;
  }
  .toggle.on { background: var(--red); }
  .toggle::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    transition: transform 0.2s;
  }
  .toggle.on::after { transform: translateX(18px); }
  .section-head {
    font-size: 9px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 2px;
    padding: 14px 0 10px; border-top: 1px solid var(--border); margin-top: 14px;
  }

  /* Featured collapsible — single-row teaser that opens the full Featured
     pricing card on tap. Native <details> for accessibility + zero JS. */
  details.feat-collapsible { margin-bottom: 20px; }
  details.feat-collapsible > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    background: var(--layer-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  details.feat-collapsible > summary::-webkit-details-marker,
  details.feat-collapsible > summary::marker { display: none; }
  .feat-toggle-star {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d4a800, #a87a10);
    color: #fff7ed;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px -4px rgba(212,168,0,0.6);
  }
  .feat-toggle-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .feat-toggle-ttl {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .feat-toggle-pill {
    display: inline-block;
    margin-left: 6px;
    background: #a87a10;
    color: #fff7ed;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
  }
  .feat-toggle-sub {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
  }
  .feat-toggle-chev {
    color: var(--muted);
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  details.feat-collapsible[open] > summary .feat-toggle-chev { transform: rotate(180deg); }

  /* ── Featured collapsible — animated gold laser beam ──
     Same conic-gradient + mask + drop-shadow pattern used on the Claim CTA,
     just in gold so the "Boost Your Listing" teaser pulls eye attention even
     when collapsed. Reuses --fpc-beam-angle (already declared earlier). */
  @keyframes feat-beam-spin {
    to { --fpc-beam-angle: 360deg; }
  }
  details.feat-collapsible > summary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  details.feat-collapsible > summary::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 2.5px;
    /* Same wrap-safe stops as the Claim CTA beam — symmetric around the peak
       so the 360° seam is fully transparent. */
    background: conic-gradient(
      from var(--fpc-beam-angle, 0deg),
      transparent 0deg,
      transparent 235deg,
      rgba(212,168,0,0.55) 265deg,
      #d4a800 300deg,
      #fff5b8 320deg,
      #d4a800 340deg,
      rgba(212,168,0,0.55) 355deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: feat-beam-spin 3.4s linear infinite;
    pointer-events: none;
    z-index: 2;
    will-change: filter;
    transform: translateZ(0);
    filter:
      drop-shadow(0 0 3px #d4a800)
      drop-shadow(0 0 10px #d4a800)
      drop-shadow(0 0 22px rgba(212,168,0,0.6));
  }
  /* Reduced motion: still show the beam but stop the spin so it doesn't
     trigger vestibular discomfort. */
  @media (prefers-reduced-motion: reduce) {
    details.feat-collapsible > summary::before {
      animation: none;
    }
  }

  /* ── ACCOUNT SETTINGS — AERO GLASS HUD ── */
  /* Standalone profile sheet design: gradient-ring avatar, HUD stats grid,
     freestanding Aura action buttons. Replaces the old boxed profile card. */
  .hud-glow {
    position: absolute;
    top: -20px; left: 20px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(201,59,0,0.15) 0%, transparent 70%);
    filter: blur(25px);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
  }
  body.light .hud-glow { background: radial-gradient(circle, rgba(154,46,0,0.15) 0%, transparent 70%); }
  .hud-user-block {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 20px;
    z-index: 2;
  }
  .hud-avatar-ring {
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--amber, #c97a00));
    display: inline-flex;
    box-shadow: 0 0 16px rgba(201,59,0,0.25);
  }
  /* Tappable profile header at the top of the account dashboard → Account
     Settings. Borderless to match the standalone header look, chevron signals
     it opens a screen. (Avatar inside keeps its own tap to change the picture.) */
  .hud-acct-link {
    position: relative; display: flex; align-items: center; gap: 16px;
    width: 100%; margin: 0 0 18px; padding: 4px 2px;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: inherit; -webkit-tap-highlight-color: transparent;
  }
  .hud-acct-link:active { opacity: 0.7; }
  .hud-acct-link .hud-username-wrap { flex: 1; min-width: 0; }
  .hud-acct-view { flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
  .hud-avatar {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 21px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  body.light .hud-avatar { border-color: rgba(0,0,0,0.10); }
  .hud-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  /* Tappable profile icon — small pencil badge signals it can be changed. */
  .hud-avatar-edit {
    position: absolute; bottom: -2px; right: -2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--red); color: #fff;
    border: 2px solid var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1; font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
  .hud-avatar-ring:active .hud-avatar { transform: scale(0.94); transition: transform 0.1s; }
  /* ── PROFILE ICON PICKER MODAL ── */
  .avatar-picker-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: fadeIn 0.18s ease;
  }
  .avatar-picker {
    width: 100%; max-width: 340px;
    background: var(--layer); border: 1px solid var(--border-mid);
    border-radius: 16px; padding: 22px 20px 20px;
    box-shadow: 0 20px 50px -12px rgba(0,0,0,0.7);
    animation: staleModalIn 0.22s ease;
  }
  .avatar-picker h3 {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    color: var(--text); margin: 0 0 4px; text-align: center;
  }
  .avatar-picker .sub { font-size: 11px; color: var(--muted); text-align: center; margin: 0 0 18px; }
  .avatar-picker .ap-preview {
    width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 18px;
    background: var(--layer-2); border: 2px solid var(--border-mid);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: 800; font-size: 34px; color: var(--text);
    overflow: hidden;
  }
  .avatar-picker .ap-preview img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-picker .ap-action {
    width: 100%; padding: 13px; border: none; border-radius: 9px; cursor: pointer;
    background: var(--red); color: #fff;
    font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  }
  .avatar-picker .ap-action:active { transform: scale(0.98); }
  .avatar-picker .ap-remove {
    width: 100%; margin-top: 10px; padding: 11px;
    background: transparent; border: 1px solid rgba(201,59,0,0.4); border-radius: 8px;
    color: #e87070; font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  }
  .avatar-picker .ap-close {
    margin-top: 10px; width: 100%; padding: 11px;
    background: transparent; border: 1px solid var(--border-mid); border-radius: 8px;
    color: var(--muted); font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  }
  .hud-username-wrap { flex: 1; min-width: 0; }
  .hud-username {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
    line-height: 1.1;
    flex-wrap: wrap;
  }
  .hud-badge {
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 7px;
    border-radius: 4px;
    display: inline-flex; align-items: center;
    gap: 3px;
    line-height: 1;
  }
  /* Pro = brand red (was orange, too low-contrast on cream). Verified = brand
     green. Both get a stronger border in light mode for legibility. */
  .hud-badge.pro       { background: rgba(201,59,0,0.15);  border: 1px solid rgba(201,59,0,0.55); color: var(--red); }
  .hud-badge.verified  { background: rgba(58,125,68,0.15); border: 1px solid rgba(58,125,68,0.55); color: var(--green); }
  body.light .hud-badge.pro      { background: rgba(154,46,0,0.08); border-color: var(--red);   color: var(--red); }
  body.light .hud-badge.verified { background: rgba(58,125,68,0.08); border-color: var(--green); color: var(--green); }
  /* Verified check chip — green circle with white ✓ inside the pill */
  .hud-verified-check {
    display: inline-flex;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
  }
  .hud-badge.free      { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); }
  body.light .hud-badge.free { background: rgba(0,0,0,0.04); }
  .hud-email {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .hud-vendor-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
    display: inline-flex; align-items: center;
    gap: 4px;
  }
  .hud-admin-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--amber, #c97a00);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
  }
  .hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 24px;
    z-index: 2;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  body.light .hud-grid { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
  .hud-item {
    background: var(--layer-2);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .hud-item-lbl {
    font-size: 8.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
  }
  .hud-item-val {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
  }

  /* Aura buttons — freestanding, outside any boxed card */
  .aura-sec-title {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 2px;
  }
  .aura-buttons-container {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
  }
  .aura-btn {
    background: var(--layer-2);
    border: 1.5px solid var(--border-mid, var(--border));
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    /* Only animate motion + glow on hover — color/border/background swap
       instantly so theme toggles flip dark↔light with no lag. */
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease;
    width: 100%;
  }
  .aura-btn:hover {
    border-color: var(--red);
    color: var(--text);
    transform: translateX(3px);
    background: rgba(201,59,0,0.04);
    box-shadow: 0 4px 15px rgba(201,59,0,0.08);
  }
  .aura-btn .arrow {
    color: var(--muted);
    font-size: 16px;
    /* Arrow translate is the hover signature; color flips instantly so
       theme toggles don't drag a 150ms color lag through the icon. */
    transition: transform 0.15s ease;
  }
  .aura-btn:hover .arrow {
    color: var(--red);
    transform: translateX(2px);
  }
  /* Tier-themed Aura buttons (Get Verified / Go Pro) — keep their solid fill on hover */
  .aura-btn.aura-btn-tier-pro:hover,
  .aura-btn.aura-btn-tier-verified:hover {
    transform: translateX(0) scale(1.01);
    filter: brightness(1.05);
  }
  .aura-btn.aura-btn-tier-pro:hover .arrow,
  .aura-btn.aura-btn-tier-verified:hover .arrow { color: rgba(255,255,255,0.85); }

  .aura-signout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 12px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    /* No color transitions — theme toggle flips instantly. */
    width: 100%;
    text-align: center;
    margin-top: 6px;
  }
  .aura-signout-btn:hover {
    background: rgba(201,59,0,0.06);
    border-color: rgba(201,59,0,0.35);
    color: var(--red);
  }

  /* ── ADMIN PANEL ── */
  .admin-sub-card {
    background: var(--layer-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px; margin-bottom: 10px;
  }
  .admin-section-head {
    font-size: 9px; font-weight: 700; color: var(--amber);
    text-transform: uppercase; letter-spacing: 2px; padding: 10px 0 8px;
  }
  .admin-tag {
    font-size: 9px; font-weight: 700; color: var(--muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; padding: 3px 7px; text-transform: uppercase; letter-spacing: 0.5px;
  }
  .admin-action-btn {
    flex: 1; padding: 11px; border-radius: 5px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    font-family: var(--font-body); border: 1px solid var(--border-mid);
    background: transparent; color: var(--muted);
  }
  .admin-action-btn.approve { border-color: var(--green); color: var(--green); }
  .admin-action-btn.reject  { border-color: #8b1a1a; color: #c94444; }
  .admin-action-btn.approve:hover { background: rgba(74,122,64,0.15); }
  .admin-action-btn.reject:hover  { background: rgba(201,59,0,0.1); }
  .size-report-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
  .size-report-row:last-child { border-bottom:none; }
  .size-report-del { background:transparent; border:none; color:var(--muted); font-size:11px; cursor:pointer; padding:4px 6px; border-radius:4px; flex-shrink:0; }
  .size-report-del:hover { color:#c94444; background:rgba(201,68,68,0.1); }
  .photo-mod-card { background:var(--layer-2); border:1px solid var(--border); border-radius:8px; padding:8px; }
  /* ── DAY PICKER ── */
  .day-picker { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
  .day-btn {
    padding:6px 10px; border-radius:5px; font-size:10px; font-weight:700;
    font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.5px;
    border:1px solid var(--border-mid); background:transparent;
    color:var(--muted); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .day-btn.on { background:rgba(201,59,0,0.15); border-color:var(--red); color:var(--text); }
  /* Mode-themed day pickers — icy blue for Live, purple for Catering. The
     wrapping .day-picker root carries a theme class so all .day-btn children
     (and the per-day open/close rows rendered later) inherit. */
  .day-picker.theme-live  .day-btn        { border-color: rgba(74,139,191,0.45); color: #8fb9d9; }
  .day-picker.theme-live  .day-btn.on     { background: rgba(74,139,191,0.18); border-color: #4a8bbf; color: var(--text); }
  .day-picker.theme-cater .day-btn        { border-color: var(--cater-accent-border); color: var(--cater-accent-text); }
  .day-picker.theme-cater .day-btn.on     { background: var(--cater-accent-soft); border-color: var(--cater-accent); color: var(--text); }
  /* ── ADDRESS AUTOCOMPLETE ── */
  .addr-wrap { position:relative; }
  .addr-suggestions {
    position:absolute; top:100%; left:0; right:0; z-index:999;
    background:var(--layer-2); border:1px solid var(--border-mid);
    border-radius:0 0 8px 8px; max-height:160px; overflow-y:auto;
  }
  .addr-suggestion {
    padding:8px 12px; font-size:10px; color:var(--text); cursor:pointer;
    border-bottom:1px solid var(--border);
  }
  .addr-suggestion:last-child { border-bottom:none; }
  .addr-suggestion:hover { background:var(--layer); }

  /* ── LIVE SIZE SECTION ── */
  .live-section { margin-bottom: 16px; }
  .live-label { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
  .live-vendor-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--layer-2); border: 1px solid var(--border-mid);
    border-radius: 8px; padding: 10px 13px; margin-bottom: 10px;
  }
  .live-vendor-badge { background: rgba(201,59,0,0.12); border: 1px solid rgba(201,59,0,0.3); border-radius: 4px; padding: 3px 8px; font-size: 8px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
  .live-vendor-info { flex: 1; }
  .live-vendor-size { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
  .live-vendor-meta { font-size: 9px; color: var(--muted); margin-top: 2px; }
  .vote-tally { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .vote-tally-box { background: var(--layer-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 6px; text-align: center; }
  .vote-tally-num { font-family: var(--font-body); font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
  .vote-tally-num.green { color: var(--green); }
  .vote-tally-label { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 5px; }
  .live-photos { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
  .live-photos::-webkit-scrollbar { display: none; }
  .live-photo { width: 58px; height: 58px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; cursor: pointer; }
  .live-no-photos { font-size: 9px; color: var(--muted); font-style: italic; margin-bottom: 12px; }
  .confirm-btn {
    width: 100%; background: rgba(74,122,64,0.12); border: 1px solid rgba(74,122,64,0.4);
    color: #7bc870; padding: 11px; border-radius: 8px;
    font-family: var(--font-body); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; margin-bottom: 8px;
    transition: background 0.12s;
  }
  .confirm-btn:hover { background: rgba(74,122,64,0.2); }
  .vendor-toggle-btn {
    width: 100%; background: transparent; border: 1px solid var(--border);
    color: var(--muted); padding: 8px; border-radius: 6px;
    font-family: var(--font-body); font-weight: 700; font-size: 9px;
    text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: all 0.12s;
  }
  .vendor-toggle-btn:hover { border-color: var(--amber); color: var(--amber); }
  .vendor-update-panel { background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 8px; padding: 14px; margin-top: 8px; display: none; }
  .vendor-update-panel.open { display: block; }
  .vendor-size-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
  .vsz-btn {
    background: transparent; border: 1px solid var(--border-mid); border-radius: 7px;
    padding: 12px 4px; text-align: center; cursor: pointer;
    font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--muted);
    transition: all 0.12s; display: flex; flex-direction: column; align-items: center; gap: 5px;
  }
  .vsz-btn .vsz-label { font-family: var(--font-body); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
  .vsz-btn.selected { border-color: var(--amber); background: rgba(201,122,0,0.08); color: var(--amber); }
  .vsz-btn.selected .vsz-label { color: var(--amber); }

  /* ── CONFIRM SHEET ── */
  .vote-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
  .vote-card {
    background: var(--layer-2); border: 1.5px solid var(--border); border-radius: 10px;
    padding: 16px 8px; text-align: center; cursor: pointer; transition: all 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .vote-card.selected { border-color: var(--red); background: rgba(201,59,0,0.08); }
  .vote-card-icon { font-size: 24px; line-height: 1; }
  .vote-card-label { font-family: var(--font-body); font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
  .vote-card.selected .vote-card-label { color: var(--red); }
  .photo-upload-area {
    background: var(--layer-2); border: 1.5px dashed var(--border-mid);
    border-radius: 8px; padding: 20px; text-align: center; cursor: pointer;
    margin-bottom: 14px; transition: border-color 0.12s;
  }
  .photo-upload-area:hover { border-color: var(--red); }
  .photo-upload-area.has-photo { border-style: solid; border-color: var(--green); }
  .photo-preview { width: 100%; max-height: 160px; object-fit: cover; border-radius: 6px; display: none; }
  .photo-preview.visible { display: block; }
  .upload-prompt { font-size: 11px; color: var(--muted); }

  /* ── BRUTALIST CTA REDESIGN ── */
  .brutal-name-block { margin-top: 20px; margin-bottom: 20px; }
  .brutal-name { font-family: var(--font-body); font-size: 36px; font-weight: 900; text-transform: uppercase; line-height: 0.95; color: var(--cream); margin-bottom: 8px; }
  /* Paid-vendor green check pinned to the end of the detail-view name — sized up
     so it reads as a real verification mark next to the 36px display title. */
  .brutal-name .paid-vendor-check { width: 20px; height: 20px; font-size: 12px; margin-left: 10px; vertical-align: middle; position: relative; bottom: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
  /* Glue the last word + verified ✓ (and Top 10 tag) together so the badge never
     drops onto its own line — it wraps as one unit with the final word instead. */
  .brutal-name .brutal-name-end { white-space: nowrap; }
  .brutal-address { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); line-height: 1.5; }

  /* Public aggregate rating row — sits under the address on spot detail.
     Hidden via the helper when no reviews exist. */
  .spot-rating-row {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 8px 0 0; padding: 0;
    background: none; border: none;
    font-size: 14px; font-weight: 800; color: #ffc857; line-height: 1;
    letter-spacing: 0.3px;
  }
  .spot-rating-row .stars { letter-spacing: 0.8px; }
  /* Row under the address holding the rating pill + the View on Map button. */
  .spot-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  .spot-meta-row .spot-rating-row { margin: 0; }
  /* Owner-only "Edit Photos" pill — sits inline on the rating row. Outlined in
     the brand orange to read as an action without competing with the gold rating. */
  .photos-pill {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    background: rgba(201,59,0,0.10); border: 1px solid var(--red);
    color: var(--red); font-family: var(--font-body); line-height: 1;
    font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
    padding: 6px 11px; border-radius: 5px; cursor: pointer; white-space: nowrap;
    -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s;
  }
  .photos-pill:active { background: var(--red); color: #fff7ef; }
  body.light .photos-pill { background: rgba(154,46,0,0.08); }
  .spot-rating-row .count { color: var(--muted); font-weight: 600; font-size: 11px; }
  /* Light mode — the dark-mode gold (#ffc857) disappears on cream. Swap to
     a saturated deeper gold + opaque bg so the rating reads at a glance. */
  body.light .spot-rating-row {
    background: none;
    border: none;
    box-shadow: none;
    color: #7a5510;
  }

  /* Tiny rating pill for list rows — compact star + count, sits in the meta line. */
  .rating-pill-inline {
    display: inline-flex; align-items: center; gap: 3px;
    color: #ffc857; font-weight: 700; font-size: 11px; letter-spacing: 0.4px;
  }
  .rating-pill-inline .rp-dot { color: var(--muted); margin: 0 4px; font-weight: 400; }
  .rating-pill-inline .rp-count { color: var(--muted); font-weight: 600; }
  body.light .rating-pill-inline { color: #7a5510; }

  /* Tiny social-icon row next to the address — Yelp / Google pattern.
     Hidden when both URLs are empty; each icon only renders if its URL exists. */
  .social-tiny-row { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
  .social-tiny {
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; transition: color 0.15s, transform 0.12s;
    text-decoration: none;
  }
  .social-tiny:hover { transform: translateY(-1px); }
  .social-tiny.fb:hover { color: #1877F2; }
  .social-tiny.ig:hover { color: #E4405F; }
  .social-tiny svg { width: 16px; height: 16px; fill: currentColor; }
  .brutal-hours { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
  .brutal-hours .lbl { color: var(--red); font-weight: 800; margin-right: 4px; }
  .brutal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .brutal-tag { background: var(--red); color: var(--cream); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; }
  .brutal-tag.outline { background: transparent; border: 2px solid var(--text); color: var(--text); }
  .brutal-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
  .brutal-price-val { font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -1px; line-height: 1; }
  .brutal-price-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; }
  .brutal-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
  .brutal-btn { border: 2px solid var(--red); background: transparent; color: var(--text); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 14px 10px; text-align: center; cursor: pointer; text-decoration: none; font-family: inherit; border-radius: 10px; transition: background 0.12s ease, color 0.12s ease; -webkit-tap-highlight-color: transparent; }
  /* Hover = FULL color fill (not a faint tint), but only on real hover devices
     so touch taps don't leave a lingering half-filled state on mobile. */
  @media (hover: hover) { .brutal-btn:hover { background: var(--red); color: var(--cream); border-color: var(--red); } }
  /* Tap fill — button flashes solid red with cream text on click. Works in
     both dark + light modes because var(--red) and var(--cream) flip with
     the theme tokens. */
  .brutal-btn:active { background: var(--red); color: var(--cream); border-color: var(--red); }
  body.light .brutal-btn:active { color: #fff7ed; }

  /* Compact "View on Map" pill that lives next to the vendor name at the top of
     the spot sheet (moved out of the action grid). Mode-themed, full-fill hover. */
  .spot-map-btn { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; border: 1.5px solid var(--red); background: var(--red); color: var(--cream); font-family: var(--font-body); font-weight: 800; font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; padding: 8px 11px; border-radius: 8px; cursor: pointer; transition: filter 0.12s ease; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .spot-map-btn:active { filter: brightness(0.9); }
  @media (hover: hover) { .spot-map-btn:hover { filter: brightness(1.08); } }
  .spot-map-btn.cater { border-color: var(--cater-accent); background: var(--cater-accent); color: var(--cream); }
  .spot-map-btn.live { border-color: var(--live-deep, #2c5778); background: var(--live-deep, #2c5778); color: #fff; }
  body.light .spot-map-btn { background: var(--red); color: var(--cream); }
  body.light .spot-map-btn.cater { background: var(--cater-accent); color: var(--cream); border-color: var(--cater-accent); }
  body.light .spot-map-btn.live { background: var(--live-deep, #2c5778); color: #fff; border-color: var(--live-deep, #2c5778); }

  /* Catering-mode variant — purple outline + purple tap fill. Used on the
     Directions / Save Spot / Open Hours buttons when currentMode is
     catering, so the action grid reads as the purple-themed catering
     view (vs. the red-themed boiled view). */
  .brutal-btn.cater { border-color: var(--cater-accent); color: var(--cater-accent-text); }
  @media (hover: hover) { .brutal-btn.cater:hover { background: var(--cater-accent); color: var(--cream); border-color: var(--cater-accent); } }
  .brutal-btn.cater:active { background: var(--cater-accent); color: var(--cream); border-color: var(--cater-accent); }
  .brutal-btn.cater.primary { background: var(--cater-accent); color: var(--cream); border-color: var(--cater-accent); }
  .brutal-btn.cater.primary:hover { background: var(--cater-accent-text); }
  .brutal-btn.cater.saved { background: var(--cater-accent); color: var(--cream); border-color: var(--cater-accent); }
  body.light .brutal-btn.cater { color: var(--cater-accent); }
  body.light .brutal-btn.cater:active,
  body.light .brutal-btn.cater.primary,
  body.light .brutal-btn.cater.saved { color: #fff7ed !important; }

  /* Ship-mode variant — green outline + green tap fill. Mirrors the cater pattern. */
  .brutal-btn.ship { border-color: #1f9e74; color: #3fd6a2; }
  @media (hover: hover) { .brutal-btn.ship:hover { background: #1f9e74; color: var(--cream); border-color: #1f9e74; } }
  .brutal-btn.ship:active { background: #1f9e74; color: var(--cream); border-color: #1f9e74; }
  .brutal-btn.ship.primary { background: #1f9e74; color: var(--cream); border-color: #1f9e74; }
  .brutal-btn.ship.saved { background: #1f9e74; color: var(--cream); border-color: #1f9e74; }
  body.light .brutal-btn.ship { color: #176e51; border-color: #1f9e74; }
  body.light .brutal-btn.ship:active,
  body.light .brutal-btn.ship.primary,
  body.light .brutal-btn.ship.saved { color: #fff7ed !important; }

  /* Live-mode variant — icy blue outline + blue tap fill. Mirrors the cater
     pattern but in --live (sky blue) / --live-deep so the Save Spot / Call /
     Directions buttons match the live-mode visual theme. */
  .brutal-btn.live { border-color: var(--live-deep, #2c5778); color: var(--live, #6ba9d8); }
  @media (hover: hover) { .brutal-btn.live:hover { background: var(--live-deep, #2c5778); color: var(--cream); border-color: var(--live-deep, #2c5778); } }
  .brutal-btn.live:active { background: var(--live-deep, #2c5778); color: var(--cream); border-color: var(--live-deep, #2c5778); }
  .brutal-btn.live.primary { background: var(--live-deep, #2c5778); color: var(--cream); border-color: var(--live-deep, #2c5778); }
  .brutal-btn.live.primary:hover { background: var(--live, #6ba9d8); }
  .brutal-btn.live.saved { background: var(--live-deep, #2c5778); color: var(--cream); border-color: var(--live-deep, #2c5778); }
  body.light .brutal-btn.live { color: var(--live-deep, #2c5778); }
  body.light .brutal-btn.live:active,
  body.light .brutal-btn.live.primary,
  body.light .brutal-btn.live.saved { color: #fff !important; }

  /* ── LIGHT MODE — fill every spot-sheet CTA with its mode color by default,
     so Directions / Save Spot / Open Hours / Click-Here-For-Boiling read as
     solid buttons (vs. dark mode's outlined treatment). Press feedback is
     already wired by the global scale(0.95) + brightness() rule, so these
     just override the resting palette to be filled. */
  body.light .brutal-btn {
    background: var(--red);
    color: #fff7e1;
    border-color: var(--red);
  }
  body.light .brutal-btn:hover {
    background: var(--red-hover, #a82a00);
    border-color: var(--red-hover, #a82a00);
    color: var(--cream);
  }
  body.light .brutal-btn.cater {
    background: var(--cater-accent);
    color: var(--cream);
    border-color: var(--cater-accent);
  }
  body.light .brutal-btn.cater:hover {
    background: var(--cater-accent-text);
    border-color: var(--cater-accent-text);
    color: var(--cream);
  }
  body.light .brutal-btn.live {
    background: var(--live-deep, #2c5778);
    color: #fff;
    border-color: var(--live-deep, #2c5778);
  }
  body.light .brutal-btn.live:hover {
    background: #1f4566;
    border-color: #1f4566;
    color: #fff;
  }
  /* Ship-mode action buttons — filled green + cream text in light mode (was
     falling back to the red base fill). Mirrors the cater/live treatment. */
  body.light .brutal-btn.ship {
    background: #1f9e74;
    color: #fff7e1;
    border-color: #1f9e74;
  }
  body.light .brutal-btn.ship:hover {
    background: #15795a;
    border-color: #15795a;
    color: #fff7e1;
  }
  /* Ship-cart accent text — the bright dark-mode greens/orange wash out on the
     cream light background; darken them so they stay readable in both modes. */
  .ship-accent { color: #3fd6a2; }
  body.light .ship-accent { color: #15795a; }
  .ship-warn { color: #ff9b78; }
  body.light .ship-warn { color: #b8451f; }
  .ship-fresh-card { background: rgba(31,158,116,0.08); border: 1px solid rgba(63,214,162,0.35); }
  body.light .ship-fresh-card { background: rgba(31,158,116,0.12); border-color: rgba(31,158,116,0.5); }
  .ship-fresh-ttl { color: #dffaef; }
  body.light .ship-fresh-ttl { color: #0f5e44; }
  .ship-fresh-bdy { color: #bfe9d6; }
  body.light .ship-fresh-bdy { color: #176e51; }

  /* Claim card button — themed per mode (boiled red / live blue / catering purple
     / ship green) with cream text, in both light + dark. */
  .claim-spot-banner .claim-spot-btn { background: var(--red); color: #fff7e1; }
  body.light .claim-spot-banner .claim-spot-btn { background: var(--red); color: #fff7e1; }
  .claim-spot-banner.live .claim-spot-btn { background: #2c5778; color: #fff7e1; }
  .claim-spot-banner.catering .claim-spot-btn { background: var(--cater-accent, #8b6db8); color: #fff7e1; }
  .claim-spot-banner.ship .claim-spot-btn { background: #1f9e74; color: #fff7e1; }
  /* Light mode needs the per-mode rules at higher specificity than the default
     body.light fallback above, or every mode renders red. */
  body.light .claim-spot-banner.live .claim-spot-btn { background: #2c5778; color: #fff7e1; }
  body.light .claim-spot-banner.catering .claim-spot-btn { background: #5e3a8a; color: #fff7e1; }
  body.light .claim-spot-banner.ship .claim-spot-btn { background: #1f9e74; color: #fff7e1; }

  /* Ship-mode list active states (sort pills + filter chips) — green like live/cater. */
  .fs-body.mode-ship .sort-pill.active { background: rgba(31,158,116,0.12); border-color: #1f9e74; color: #1f9e74; }
  .fs-body.mode-ship .fc.on { background: #1f9e74; color: #fff; border-color: #1f9e74; }
  .fs-body.mode-ship .fc:hover:not(.on) { border-color: #1f9e74; color: #1f9e74; }
  /* Light mode — darken every mode's highlighted sort pill so it reads on cream. */
  body.light .sort-pill.active { background: rgba(154,46,0,0.10); border-color: #9a2e00; color: #9a2e00; }
  body.light .fs-body.mode-live .sort-pill.active { background: rgba(44,87,120,0.12); border-color: #2c5778; color: #2c5778; }
  body.light .fs-body.mode-catering .sort-pill.active { background: rgba(94,58,138,0.12); border-color: #5e3a8a; color: #5e3a8a; }
  body.light .fs-body.mode-ship .sort-pill.active { background: rgba(21,121,90,0.12); border-color: #15795a; color: #15795a; }
  body.light .fs-body.mode-ship .fc.on { background: #15795a; border-color: #15795a; }
  /* Wide cross-mode CTA ("Click Here For Boiling / Catering / Live") — same
     filled treatment in light mode. Eyebrow text de-saturates onto the fill
     for the same hierarchy the dark-mode hover state already establishes. */
  body.light .cta-catering {
    background: var(--red);
    color: var(--cream);
    border-color: var(--red);
  }
  body.light .cta-catering .left .ctaLbl { color: rgba(245,230,197,0.85); opacity: 1; }
  body.light .cta-catering:hover,
  body.light .cta-catering:active,
  body.light .cta-catering:focus-visible {
    background: var(--red-hover, #a82a00);
    border-color: var(--red-hover, #a82a00);
    color: var(--cream);
  }
  body.light .cta-catering.cater {
    background: var(--cater-accent);
    color: var(--cream);
    border-color: var(--cater-accent);
  }
  body.light .cta-catering.cater .left .ctaLbl { color: rgba(245,230,197,0.85); opacity: 1; }
  body.light .cta-catering.cater:hover,
  body.light .cta-catering.cater:active,
  body.light .cta-catering.cater:focus-visible {
    background: var(--cater-accent-text);
    border-color: var(--cater-accent-text);
    color: var(--cream);
  }
  body.light .cta-catering.live {
    background: #2c5778;
    color: #fff;
    border-color: #2c5778;
  }
  body.light .cta-catering.live .left .ctaLbl { color: rgba(245,230,197,0.85); opacity: 1; }
  body.light .cta-catering.live:hover,
  body.light .cta-catering.live:active,
  body.light .cta-catering.live:focus-visible {
    background: #1f4566;
    border-color: #1f4566;
    color: #fff;
  }

  /* Cross-mode CTA variants — colored by DESTINATION, not the current mode.
     Default (.cta-catering) stays red for "Click Here For Boiling".
     .cater → purple for "Click Here For Catering".
     .live  → icy blue for "Click Here For Live Crawfish". */
  .cta-catering.cater {
    border-color: var(--cater-accent);
    color: var(--cater-accent-text);
  }
  .cta-catering.cater:hover,
  .cta-catering.cater:active,
  .cta-catering.cater:focus-visible {
    background: var(--cater-accent); color: var(--cream); border-color: var(--cater-accent);
  }
  .cta-catering.cater:hover .left .ctaLbl,
  .cta-catering.cater:active .left .ctaLbl,
  .cta-catering.cater:focus-visible .left .ctaLbl { color: rgba(245,230,197,0.85); }
  body.light .cta-catering.cater:hover,
  body.light .cta-catering.cater:active,
  body.light .cta-catering.cater:focus-visible { color: #fff7ed; }

  .cta-catering.live {
    border-color: #4a8bbf;
    color: #6ba9d8;
  }
  .cta-catering.live:hover,
  .cta-catering.live:active,
  .cta-catering.live:focus-visible {
    background: #4a8bbf; color: #fff; border-color: #4a8bbf;
  }
  .cta-catering.live:hover .left .ctaLbl,
  .cta-catering.live:active .left .ctaLbl,
  .cta-catering.live:focus-visible .left .ctaLbl { color: rgba(255,255,255,0.85); }
  body.light .cta-catering.live { color: var(--cream); border-color: #2c5778; }
  body.light .cta-catering.live:hover,
  body.light .cta-catering.live:active,
  body.light .cta-catering.live:focus-visible { background: #1f4566; border-color: #1f4566; color: var(--cream); }

  /* My Listings card — collapsible via native <details>. Header is always
     visible (business name + status pill + chevron); body holds the action
     buttons. Default open when there's 1 listing, collapsed when many. */
  .listing-card {
    background: var(--layer-2);
    border: 1px solid rgba(201,59,0,0.4);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  /* Catering variant — purple outline so My Catering Listings reads as the
     catering vertical's identity rather than the default red boiled border. */
  .listing-card.catering-card { border-color: var(--cater-accent-border); }
  /* Live variant — blue outline so My Live Listings reads as the live vertical's
     identity rather than the default red boiled border. */
  .listing-card.live-card { border-color: rgba(74,139,191,0.45); }
  .listing-card > summary { list-style: none; cursor: pointer; user-select: none;
    padding: 14px;
    display: flex; align-items: flex-start; gap: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .listing-card > summary::-webkit-details-marker,
  .listing-card > summary::marker { display: none; }
  .listing-card .lc-info { flex: 1; min-width: 0; }
  .listing-card .lc-name {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    color: var(--text); line-height: 1.2;
  }
  .listing-card .lc-status { font-size: 11px; margin-top: 3px; line-height: 1.4; }
  .listing-card .lc-status.lc-green { color: var(--green); }
  .listing-card .lc-status.lc-red   { color: var(--red); }
  .listing-card .lc-status.lc-amber { color: var(--amber); }
  .listing-card .lc-pill {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 7px; border-radius: 4px; border: 1px solid; flex-shrink: 0;
    align-self: flex-start;
  }
  .listing-card .lc-pill-green { color: var(--green); border-color: rgba(58,125,68,0.4); }
  .listing-card .lc-pill-red   { color: var(--red);   border-color: rgba(201,59,0,0.4); }
  .listing-card .lc-pill-amber { color: var(--amber); border-color: rgba(201,122,0,0.4); }
  .listing-card .lc-chev {
    color: var(--muted); font-size: 14px; line-height: 1;
    flex-shrink: 0; transition: transform 0.18s ease;
    transform: rotate(-90deg); padding-top: 3px;
  }
  .listing-card[open] .lc-chev { transform: rotate(0deg); }
  .listing-card .listing-card-body { padding: 0 14px 14px; }
  /* Section header inside a listing card — same kerning/weight as the
     section labels Catering Dashboard already uses, but tighter top margin
     so it reads as a sub-group inside the card vs. a top-level dashboard
     section. */
  .lc-section-head {
    font-size: 10px; color: var(--muted);
    letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800;
    margin: 16px 0 6px; padding-top: 4px;
  }
  .lc-section-head:first-child { margin-top: 0; padding-top: 0; }

  /* ── LIQUID GLASS CAPSULES (Redesigned .stacked-btn Variation E) ── */
  .stacked-btn {
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px; /* Rounded rectangle — matches account dashboard tiles */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text) !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease, 
                box-shadow 0.25s ease, 
                color 0.25s ease;
  }

  /* Liquid Gradient overlays */
  .stacked-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
    z-index: 1;
  }

  .stacked-btn .sb-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    position: relative;
    z-index: 2;
  }
  .stacked-btn .sb-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-align: left;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stacked-btn .sb-content.has-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .stacked-btn .sb-sub {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .stacked-btn .sb-sub.on { color: #3a9d4f; }
  body.light .stacked-btn .sb-sub.on { color: #2d5a32; }
  .stacked-btn .sb-chevron {
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    padding-right: 4px;
    position: relative;
    z-index: 2;
    transition: transform 0.2s, color 0.2s;
  }
  .stacked-btn .sb-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    position: relative;
    z-index: 2;
  }

  /* Liquid color overlays on hover */
  .stacked-btn.variant-neutral:hover::before {
    background: linear-gradient(90deg, rgba(245, 230, 197, 0.08), rgba(245, 230, 197, 0.01));
    opacity: 1;
  }
  .stacked-btn.variant-red:hover::before {
    background: linear-gradient(90deg, rgba(201, 59, 0, 0.2), rgba(201, 59, 0, 0.02));
    opacity: 1;
  }
  .stacked-btn.variant-green:hover::before {
    background: linear-gradient(90deg, rgba(74, 122, 64, 0.2), rgba(74, 122, 64, 0.02));
    opacity: 1;
  }
  .stacked-btn.variant-gold:hover::before {
    background: linear-gradient(90deg, rgba(201, 122, 0, 0.2), rgba(201, 122, 0, 0.02));
    opacity: 1;
  }
  .stacked-btn.variant-catering:hover::before {
    background: linear-gradient(90deg, rgba(139, 109, 184, 0.2), rgba(139, 109, 184, 0.02));
    opacity: 1;
  }
  .stacked-btn.variant-live:hover::before {
    background: linear-gradient(90deg, rgba(51, 113, 158, 0.2), rgba(51, 113, 158, 0.02));
    opacity: 1;
  }

  /* Hover borders and bright colors (Dark mode) */
  .stacked-btn:hover {
    transform: translateY(-2px);
    border-color: var(--border-mid) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
  }
  /* Dark mode hover text — dialed back so it reads as "softer cream" rather
     than the previous neon-bright fluorescents. Each color drops ~10-15% on
     saturation/brightness so the listing card doesn't shout. */
  .stacked-btn.variant-neutral:hover { color: var(--cream, #f5ebd6) !important; border-color: rgba(245, 230, 197, 0.18) !important; }
  .stacked-btn.variant-red:hover     { color: #f08c70 !important; border-color: rgba(201, 59, 0, 0.4) !important; }
  .stacked-btn.variant-green:hover   { color: #95d486 !important; border-color: rgba(74, 122, 64, 0.4) !important; }
  .stacked-btn.variant-gold:hover    { color: #e6bf80 !important; border-color: rgba(201, 122, 0, 0.4) !important; }
  .stacked-btn.variant-catering:hover { color: #ccb8eb !important; border-color: rgba(139, 109, 184, 0.4) !important; }
  .stacked-btn.variant-live:hover     { color: #a8cee6 !important; border-color: rgba(51, 113, 158, 0.4) !important; }

  .stacked-btn:hover .sb-chevron {
    transform: translateX(3px);
    color: var(--cream, #f5ebd6);
  }

  /* Internal structure */
  .stacked-btn .sb-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .stacked-btn .sb-emoji-badge {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .stacked-btn .sb-dot-badge {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sb-accent);
    opacity: 0.6;
    margin-left: 8px;
    margin-right: 8px;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .stacked-btn .sb-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-align: left;
    color: var(--sb-fg) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
  }
  .stacked-btn .sb-chevron {
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    padding-right: 4px;
    transition: all 0.15s;
  }
  .stacked-btn .sb-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
  }

  /* Locked / Dimmed Teaser style */
  .stacked-btn.locked {
    --sb-accent: var(--border-mid) !important;
    --sb-bg: rgba(20, 14, 11, 0.3) !important;
    --sb-border: var(--border) !important;
    --sb-fg: rgba(245, 230, 197, 0.45) !important;
    cursor: pointer;
  }
  .stacked-btn.locked .sb-lock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }
  .stacked-btn.locked.tier-pro .sb-lock-pill {
    background: var(--gold);
    color: #1a1209;
  }
  .stacked-btn.locked.tier-verified .sb-lock-pill {
    background: var(--green);
    color: #fff;
  }

  /* Microinteractions (Hover states) */
  .stacked-btn:hover {
    border-color: var(--sb-accent) !important;
    background: rgba(28, 20, 16, 0.6) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    transform: translateX(4px);
  }
  .stacked-btn:hover .sb-emoji-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .stacked-btn:hover .sb-dot-badge {
    opacity: 1;
    transform: scale(1.3);
  }
  .stacked-btn:hover .sb-label {
    color: var(--cream, #f5ebd6) !important;
  }
  .stacked-btn:hover .sb-chevron {
    color: var(--sb-accent);
    transform: translateX(2px);
  }
  .stacked-btn.locked:hover {
    background: rgba(28, 20, 16, 0.4) !important;
    border-color: var(--border-mid) !important;
  }
  .stacked-btn.locked:hover .sb-label {
    color: rgba(245, 230, 197, 0.8) !important;
  }

  /* Active depth press */
  .stacked-btn:active {
    transform: translateX(4px) scale(0.97) translateY(1px) !important;
  }

  /* ── Catering availability calendar ──
     Shown inside the Request a Quote sheet. Two-month rolling view; each
     day cell carries the vendor's booking count vs. their max-per-day cap.
     Full days get a red X and can't be picked. */
  .cq-cal { background: var(--layer-2); border: 1px solid var(--cater-accent-border); border-radius: 10px; padding: 10px 10px 12px; }
  .cq-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
  .cq-cal-month { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); }
  .cq-cal-nav { background: none; border: 1px solid var(--border-mid); color: var(--text); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; font-family: var(--font-body); display: flex; align-items: center; justify-content: center; }
  .cq-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
  .cq-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 4px 6px; }
  .cq-cal-dow span { text-align: center; font-size: 9px; font-weight: 800; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
  .cq-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 4px; }
  .cq-cal-day {
    position: relative; aspect-ratio: 1 / 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--font-body); padding: 0;
  }
  .cq-cal-day.empty { visibility: hidden; cursor: default; }
  .cq-cal-day.before-lead, .cq-cal-day.past { color: rgba(245,230,197,0.20); cursor: not-allowed; background: transparent; }
  body.light .cq-cal-day.before-lead, body.light .cq-cal-day.past { color: rgba(42,20,16,0.25); }
  .cq-cal-day.available { background: var(--layer); border-color: var(--border); }
  .cq-cal-day.available:hover { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); }
  .cq-cal-day.partial { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); }
  .cq-cal-day.partial:hover { background: var(--cater-accent-strong); }
  .cq-cal-day .cq-cal-count {
    position: absolute; bottom: 3px; font-size: 8px; font-weight: 700;
    color: var(--cater-accent-text); letter-spacing: 0.4px; line-height: 1;
  }
  .cq-cal-day.full { background: rgba(201,59,0,0.06); border-color: rgba(201,59,0,0.30); color: rgba(245,230,197,0.40); cursor: not-allowed; }
  body.light .cq-cal-day.full { color: rgba(42,20,16,0.40); background: rgba(154,46,0,0.06); border-color: rgba(154,46,0,0.30); }
  .cq-cal-day.full::after {
    content: '✕'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--red); font-size: 22px; font-weight: 900; line-height: 1;
    pointer-events: none;
  }
  .cq-cal-day.selected { background: var(--cater-accent); border-color: var(--cater-accent); color: #fff; }
  .cq-cal-day.selected:hover { background: var(--cater-accent); }
  .cq-cal-day.selected .cq-cal-count { color: rgba(255,255,255,0.85); }
  .cq-cal-day.today:not(.selected) { box-shadow: inset 0 0 0 1px var(--cater-accent-border); }
  .cq-cal-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 10px; font-size: 10px; color: var(--muted); letter-spacing: 0.3px; }
  .cq-cal-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid transparent; }
  .cq-cal-legend .sw.available { background: var(--layer); border-color: var(--border); }
  .cq-cal-legend .sw.partial { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); }
  .cq-cal-legend .sw.full { background: rgba(201,59,0,0.10); border-color: rgba(201,59,0,0.45); position: relative; }
  .cq-cal-legend .sw.full::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 10px; font-weight: 900; line-height: 1; }
  /* Vendor-blocked (blackout) day — vendor manually marked unavailable. Hatched
     fill, dimmed, unselectable. Distinct from 'full' (which is booked-out). */
  .cq-cal-day.blocked { background: repeating-linear-gradient(45deg, rgba(245,230,197,0.04), rgba(245,230,197,0.04) 4px, rgba(245,230,197,0.10) 4px, rgba(245,230,197,0.10) 8px); border-color: var(--border-mid); color: rgba(245,230,197,0.32); cursor: not-allowed; }
  body.light .cq-cal-day.blocked { background: repeating-linear-gradient(45deg, rgba(42,20,16,0.03), rgba(42,20,16,0.03) 4px, rgba(42,20,16,0.09) 4px, rgba(42,20,16,0.09) 8px); color: rgba(42,20,16,0.34); }
  .cq-cal-legend .sw.blocked { background: repeating-linear-gradient(45deg, rgba(245,230,197,0.06), rgba(245,230,197,0.06) 3px, rgba(245,230,197,0.16) 3px, rgba(245,230,197,0.16) 6px); border-color: var(--border-mid); }

  /* ── Auto-Quote estimate card (customer Request-a-Quote sheet) ──
     Live-updates as the customer fills headcount / lbs / add-ons. Only shown
     when the vendor has set a catering price-per-lb. */
  .cq-est { background: var(--cater-cta-grad); border-radius: 12px; padding: 14px 15px; margin: 4px 0 18px; box-shadow: var(--cater-cta-shadow); }
  .cq-est-cap { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.78); font-weight: 800; margin-bottom: 9px; }
  .cq-est-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.88); margin-bottom: 5px; }
  .cq-est-row .v { font-weight: 700; color: #fff; white-space: nowrap; }
  .cq-est-tot { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.28); display: flex; justify-content: space-between; align-items: center; }
  .cq-est-tot .k { font-size: 13px; font-weight: 700; color: #fff; }
  .cq-est-tot .v { font-size: 23px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
  .cq-est-dep { font-size: 11px; color: rgba(255,255,255,0.82); margin-top: 7px; font-weight: 600; }
  .cq-est-note { font-size: 9.5px; color: rgba(255,255,255,0.70); margin-top: 8px; letter-spacing: 0.3px; line-height: 1.4; }
  /* Add-on chips (customer side) */
  /* Customer add-ons — stacked rows, each with a photo + a − / + quantity stepper */
  .cq-addons { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 16px; }
  .cq-addon-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px; border: 1.5px solid var(--border-mid); background: var(--layer-2); transition: border-color 0.12s, background 0.12s; }
  .cq-addon-row.on { border-color: var(--cater-accent-border); background: var(--cater-accent-strong); }
  .cq-addon-img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
  .cq-addon-main { flex: 1; min-width: 0; }
  .cq-addon-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; }
  .cq-addon-price { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
  .cq-addon-row.on .cq-addon-price { color: var(--cater-accent-text); }
  .cq-step { display: flex; align-items: center; flex-shrink: 0; border: 1.5px solid var(--border-mid); border-radius: 9px; overflow: hidden; }
  .cq-step button { width: 32px; height: 32px; background: var(--layer); border: none; color: var(--text); font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); }
  .cq-step button:active { background: var(--cater-accent-strong); }
  .cq-step button:disabled { opacity: 0.3; cursor: default; }
  .cq-step .qv { min-width: 28px; text-align: center; font-size: 14px; font-weight: 800; color: var(--text); }
  /* DoorDash-style: collapsed shows just a + ; expands into the stepper once added */
  .cq-add { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; border: 1.5px solid var(--cater-accent-border); background: var(--layer); color: var(--cater-accent-text); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); }
  .cq-add:active { background: var(--cater-accent-strong); }
  .cq-addon-row .cq-step { display: none; }
  .cq-addon-row.on .cq-step { display: flex; }
  .cq-addon-row.on .cq-add { display: none; }

  /* ── Vendor add-on editor rows + blackout mini-calendar (settings) ── */
  .ve-addon-row { display: grid; grid-template-columns: 42px 1fr 72px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
  .ve-addon-img { width: 42px; height: 42px; border-radius: 9px; border: 1.5px dashed var(--border-mid); background: var(--layer-2) center/cover no-repeat; color: var(--muted); font-size: 20px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color 0.15s; }
  .ve-addon-img:hover { border-color: var(--cater-accent-border); }
  .ve-addon-img.has-img { border-style: solid; color: transparent; }
  /* Travel-zone editor rows: "Within [__] mi · $[__]" */
  .ve-tz-row { display: grid; grid-template-columns: auto 64px auto auto 1fr; gap: 7px; align-items: center; margin-bottom: 8px; }
  .ve-tz-row .text-input { margin: 0; text-align: center; }
  .ve-tz-pre { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .ve-tz-dollar { font-size: 13px; font-weight: 800; color: var(--cater-accent-text); }
  .ve-addon-row .text-input { margin: 0; }
  .ve-addon-kind { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 9px 8px; border-radius: 8px; border: 1.5px solid var(--border-mid); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .ve-addon-kind.perhead { border-color: var(--cater-accent-border); background: var(--cater-accent-soft); color: var(--cater-accent-text); }
  .ve-bo-cal { background: var(--layer-2); border: 1px solid var(--cater-accent-border); border-radius: 10px; padding: 10px; margin-top: 8px; }
  .ve-bo-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 9px; }
  .ve-bo-month { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); }
  .ve-bo-nav { background: none; border: 1px solid var(--border-mid); color: var(--text); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
  .ve-bo-nav:disabled { opacity: 0.35; cursor: not-allowed; }
  .ve-bo-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; padding: 0 2px 5px; }
  .ve-bo-dow span { text-align: center; font-size: 8.5px; font-weight: 800; color: var(--muted); letter-spacing: 0.5px; }
  .ve-bo-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
  .ve-bo-day { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border-radius: 7px; background: var(--layer); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
  .ve-bo-day.empty { visibility: hidden; cursor: default; }
  .ve-bo-day.past { color: rgba(245,230,197,0.18); cursor: not-allowed; background: transparent; border-color: transparent; }
  .ve-bo-day.booked { background: var(--cater-accent-soft); border-color: var(--cater-accent-border); color: var(--cater-accent-text); cursor: not-allowed; }
  .ve-bo-day.blocked { background: repeating-linear-gradient(45deg, rgba(201,59,0,0.10), rgba(201,59,0,0.10) 4px, rgba(201,59,0,0.22) 4px, rgba(201,59,0,0.22) 8px); border-color: rgba(201,59,0,0.45); color: var(--text); }
  /* ── Light Mode — listing-card action buttons ──
     Slightly darker tan fill (was 0.35 opacity, now 0.55 so the buttons read
     against the cream surface). Dark text at rest. Each variant gets its own
     dark colored border so the semantic identity reads at a glance even when
     not interacting. Hover/active flips the text to the brand mode color. */
  body.light .stacked-btn {
    background: rgba(214, 192, 150, 0.55) !important;
    border: 1px solid rgba(42, 20, 16, 0.22) !important;
    color: #120604 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px -2px rgba(42,20,16,0.08) !important;
  }
  /* Per-variant border at rest is intentionally NOT colored — the buttons
     stay neutral until hover, then the brand color appears on the border
     + text together (handled in the hover block below). */
  
  /* Liquid color overlays on hover in light mode - higher contrast color leaks */
  body.light .stacked-btn.variant-neutral:hover::before {
    background: linear-gradient(90deg, rgba(42, 20, 16, 0.05), rgba(42, 20, 16, 0.005)) !important;
  }
  body.light .stacked-btn.variant-red:hover::before {
    background: linear-gradient(90deg, rgba(201, 59, 0, 0.14), rgba(201, 59, 0, 0.01)) !important;
  }
  body.light .stacked-btn.variant-green:hover::before {
    background: linear-gradient(90deg, rgba(74, 122, 64, 0.14), rgba(74, 122, 64, 0.01)) !important;
  }
  body.light .stacked-btn.variant-gold:hover::before {
    background: linear-gradient(90deg, rgba(201, 122, 0, 0.14), rgba(201, 122, 0, 0.01)) !important;
  }
  body.light .stacked-btn.variant-catering:hover::before {
    background: linear-gradient(90deg, rgba(139, 109, 184, 0.14), rgba(139, 109, 184, 0.01)) !important;
  }
  body.light .stacked-btn.variant-live:hover::before {
    background: linear-gradient(90deg, rgba(51, 113, 158, 0.14), rgba(51, 113, 158, 0.01)) !important;
  }

  /* Hover/active states (Light mode) — text flips to the brand color for
     each variant so the interaction signals "this is the [boiled/live/etc]
     action". Background gets a slightly brand-tinted layer on top of the
     darker tan resting fill. */
  body.light .stacked-btn:hover {
    background: rgba(214, 192, 150, 0.75) !important;
    box-shadow: 0 4px 15px rgba(42,20,16,0.14) !important;
    border-color: rgba(42, 20, 16, 0.38) !important;
  }
  body.light .stacked-btn.variant-neutral:hover  { color: #120604 !important; }
  body.light .stacked-btn.variant-red:hover,
  body.light .stacked-btn.variant-red:active     { color: var(--red) !important; border-color: var(--red) !important; }
  body.light .stacked-btn.variant-green:hover,
  body.light .stacked-btn.variant-green:active   { color: var(--green) !important; border-color: var(--green) !important; }
  body.light .stacked-btn.variant-gold:hover,
  body.light .stacked-btn.variant-gold:active    { color: #a87a10 !important; border-color: #a87a10 !important; }
  body.light .stacked-btn.variant-catering:hover,
  body.light .stacked-btn.variant-catering:active { color: var(--cater-accent) !important; border-color: var(--cater-accent) !important; }
  body.light .stacked-btn.variant-live:hover,
  body.light .stacked-btn.variant-live:active    { color: var(--live-deep, #2c5778) !important; border-color: var(--live-deep, #2c5778) !important; }
  /* sb-label inherits the button's color so the brand-color flip cascades
     through the named label structure too. */
  body.light .stacked-btn:hover .sb-label,
  body.light .stacked-btn:active .sb-label { color: inherit !important; }

  body.light .stacked-btn .sb-chevron      { color: rgba(42, 20, 16, 0.6) !important; }
  body.light .stacked-btn:hover .sb-chevron { color: inherit !important; }

  body.light .stacked-btn.locked {
    background: rgba(28, 20, 16, 0.03) !important;
    border: 1px solid rgba(42, 20, 16, 0.08) !important;
    color: rgba(42, 20, 16, 0.45) !important;
  }

  /* ── Confirm Hours / Price button — outlined treatment in light mode. ──
     Soft tan fill (matches the .stacked-btn resting state) + dark colored
     border + dark text. On hover, text flips to the state's brand color
     to match the .stacked-btn interaction pattern. */
  body.light .vconfirm-btn.vconfirm-verified {
    background: rgba(214, 192, 150, 0.55) !important;
    border-color: var(--green) !important;
    color: #120604 !important;
  }
  body.light .vconfirm-btn.vconfirm-verified:hover,
  body.light .vconfirm-btn.vconfirm-verified:active { color: var(--green) !important; }

  body.light .vconfirm-btn.vconfirm-late {
    background: rgba(214, 192, 150, 0.55) !important;
    border-color: #a87a10 !important;
    color: #120604 !important;
  }
  body.light .vconfirm-btn.vconfirm-late:hover,
  body.light .vconfirm-btn.vconfirm-late:active { color: #a87a10 !important; }

  /* Stale = caution-yellow border + pulse (set further down). Dark text. */
  body.light .vconfirm-btn.vconfirm-stale {
    background: rgba(214, 192, 150, 0.55) !important;
    border-color: #b88a00 !important;
    color: #120604 !important;
  }
  body.light .vconfirm-btn.vconfirm-stale:hover,
  body.light .vconfirm-btn.vconfirm-stale:active { color: #8a6500 !important; }

  body.light .vconfirm-btn.vconfirm-done {
    background: var(--layer-2) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
  }
  /* Meta sub-line stays a regular muted brown on the now-tan resting fill. */
  body.light .vconfirm-btn .vconfirm-meta {
    color: rgba(42,29,16,0.62) !important;
  }
  body.light .vconfirm-btn:active:not([disabled]) { filter: brightness(0.95); }

  /* Dark-mode stale also flips to yellow + caution so the state is
     consistent across themes (was red gradient before). */
  .vconfirm-btn.vconfirm-stale {
    background: rgba(212,162,0,0.16) !important;
    border-color: rgba(212,162,0,0.65) !important;
    color: #f0c733 !important;
  }

  /* Pulse animation on the "go-tap-me" states — verified (gentle nudge to
     re-confirm before staleness) and stale (urgent "you're late"). Late
     stays static to avoid 3 competing animations across listings.
     Dark mode just fades opacity since the text is already a forest-green
     tint at rest. */
  @keyframes vconfirm-pulse {
    0%, 100% { opacity: 1; transform: translateZ(0); }
    50%      { opacity: 0.68; }
  }
  /* Light mode verified pulse — fade text + border between the resting dark
     palette and a saturated forest green so the button visibly "breathes"
     green on the cream surface. */
  @keyframes vconfirm-pulse-light {
    0%, 100% { color: #120604; border-color: var(--green); }
    50%      { color: var(--green); border-color: var(--green); filter: brightness(1.04); }
  }
  @keyframes vconfirm-pulse-urgent {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(212,162,0,0); }
    50%      { opacity: 0.85; box-shadow: 0 0 0 6px rgba(212,162,0,0.18); }
  }
  .vconfirm-btn.vconfirm-verified:not([disabled]) {
    animation: vconfirm-pulse 2.4s ease-in-out infinite;
  }
  body.light .vconfirm-btn.vconfirm-verified:not([disabled]) {
    animation: vconfirm-pulse-light 2.6s ease-in-out infinite !important;
  }
  .vconfirm-btn.vconfirm-stale:not([disabled]) {
    animation: vconfirm-pulse-urgent 1.6s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vconfirm-btn.vconfirm-verified:not([disabled]),
    body.light .vconfirm-btn.vconfirm-verified:not([disabled]),
    .vconfirm-btn.vconfirm-stale:not([disabled]) { animation: none !important; }
  }

  /* Catering + Live variants in light mode — text stays DARK at rest, the
     brand --sb-accent only kicks in on hover (handled in the hover block
     above which flips color + border to the accent color). */
  body.light .stacked-btn.variant-catering {
    --sb-accent: #8b6db8 !important;
    --sb-bg: rgba(139, 109, 184, 0.06) !important;
    --sb-border: rgba(139, 109, 184, 0.2) !important;
    --sb-fg: #120604 !important;
  }
  body.light .stacked-btn.variant-live {
    --sb-accent: #33719e !important;
    --sb-bg: rgba(51, 113, 158, 0.06) !important;
    --sb-border: rgba(51, 113, 158, 0.2) !important;
    --sb-fg: #120604 !important;
  }

  /* ── GLIDE-ON-PRESS · global smoothness pass ──
     Every interactive surface gets:
       1. A consistent GPU-accelerated transition (transform + background + color)
       2. A press-down scale + 2px Y-translate on :active for tactile feedback
       3. -webkit-tap-highlight-color: transparent so iOS doesn't paint the gray flash
     transform + opacity are GPU-composited — never trigger layout/paint, so this
     is cheap even on older phones. Keeps the existing :active fill rules (those
     control color); this just adds the motion + smoothness. */
  .brutal-btn, .stacked-btn, .cta-catering, .submit-btn,
  .mode-pill, .fpc-tab, .fpc-btn, .vendor-cta, .auth-btn, .claim-spot-btn,
  .brutal-sizes .size-opt, .vc-delete, .day-btn, .size-pick-btn,
  .ve-hours-box, .boil-post-compose-btn, .branding-edit-btn,
  .cater-cta, .msg-send, .confirm-btn, .detail-back-btn,
  .photo-lightbox-close, .stale-cancel, .stale-submit,
  .vs-mode-card, .glide-btn {
    transition:
      transform 0.14s cubic-bezier(0.2, 0, 0, 1),
      background 0.18s ease,
      color 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      filter 0.18s ease,
      opacity 0.18s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
  }
  /* Press depth — visibly noticeable. scale(0.95) is roughly the press feel
     of an iOS / Material button; smaller than 0.95 reads as no-press. */
  .brutal-btn:active, .stacked-btn:active, .cta-catering:active, .submit-btn:active,
  .mode-pill:active, .fpc-tab:active, .fpc-btn:active, .vendor-cta:active, .auth-btn:active, .claim-spot-btn:active,
  .brutal-sizes .size-opt:active, .day-btn:active, .size-pick-btn:active,
  .ve-hours-box:active, .boil-post-compose-btn:active, .branding-edit-btn:active,
  .cater-cta:active, .msg-send:active, .confirm-btn:active,
  .stale-cancel:active, .stale-submit:active,
  .vs-mode-card:active, .glide-btn:active {
    transform: scale(0.95) translateY(2px);
    filter: brightness(1.05);
  }
  /* The float-style buttons (close, lightbox, photo delete) feel weird with
     a Y shift — they get scale only, slightly deeper. */
  .detail-back-btn:active, .photo-lightbox-close:active, .vc-delete:active {
    transform: scale(0.88);
  }
  /* The 3 dashboard vendor rows (Boiled / Live / Catering) are inline-styled
     buttons — target them via onclick handler so all three get the tap glide
     animation without needing a class refactor. */
  button[onclick*="showMyListingsPage"],
  button[onclick*="showMyLiveListingsPage"],
  button[onclick*="showCateringDashboard"] {
    transition: transform 0.14s cubic-bezier(0.2,0,0,1), filter 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
  }
  button[onclick*="showMyListingsPage"]:active,
  button[onclick*="showMyLiveListingsPage"]:active,
  button[onclick*="showCateringDashboard"]:active {
    transform: scale(0.98) translateY(1px);
    filter: brightness(1.08);
  }

  /* Smooth scrolling on key scroll containers so jumps to bottom (chat),
     scroll-into-view, and back-nav restoring scroll all feel premium. */
  .sheet, .fs-body, .msg-body, .dm-thread, #listRowsWrap {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* Respect users who've asked the OS for reduced motion — skip the press
     animation entirely. They still get color feedback from the existing
     :active fill rules. */
  @media (prefers-reduced-motion: reduce) {
    .brutal-btn, .stacked-btn, .cta-catering, .submit-btn,
    .mode-pill, .fpc-tab, .vendor-cta, .auth-btn, .claim-spot-btn,
    .brutal-sizes .size-opt, .day-btn, .vs-mode-card {
      transition: background 0.10s ease, color 0.10s ease, border-color 0.10s ease;
    }
    .brutal-btn:active, .stacked-btn:active, .cta-catering:active, .submit-btn:active,
    .mode-pill:active, .fpc-tab:active, .vs-mode-card:active { transform: none; }
  }
  .brutal-btn.primary { background: var(--red); color: var(--cream); border-color: var(--red); grid-column: span 2; font-size: 15px; }
  .brutal-btn.saved { background: var(--red); color: var(--cream); border-color: var(--red); }
  .brutal-btn.saved:hover { background: var(--red-hover, #a82a00); }
  .brutal-btn.primary:hover { background: var(--red-hover, #a82a00); }
  .brutal-amenities { border: 2px solid var(--red); padding: 16px; margin-bottom: 16px; }
  .brutal-sizes { display: flex; gap: 6px; margin-bottom: 24px; }
  .brutal-sizes .size-opt { border-radius: 8px; border: 2px solid var(--red); background: transparent; flex: 1; text-align: center; padding: 7px 4px; cursor: pointer; }
  .brutal-sizes .size-opt.active { background: var(--red); color: var(--cream); border-color: var(--red); }
  .brutal-sizes .size-opt.active .size-opt-sublabel { color: rgba(245,230,197,0.78); }
  .brutal-sizes .size-opt-icon { font-size: 18px; margin-bottom: 2px; line-height: 1; }
  .brutal-sizes .size-opt-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
  .brutal-sizes .size-opt-sublabel { font-size: 9px; color: var(--muted); }
  /* 3-col stats row — Open Now (clickable popover) · Spice Level · Price Range. */
  .brutal-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 20px; align-items: flex-start; }
  /* Live variant: Open Now + Source (origin) inline — Source takes the rest. */
  .brutal-stats-row.live-stats { grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
  .brutal-stats-row.live-stats .stat-source { text-align: left; }
  .live-origin-inline { font-size: 13.5px; font-weight: 800; color: var(--live, #6ba9d8); line-height: 1.3; }
  body.light .live-origin-inline { color: var(--live-deep, #2c5778); }
  /* Open Now stat — first cell, opens a floating 7-day popover that does not push siblings. */
  .hours-stat { position: relative; cursor: pointer; user-select: none; }
  .hours-stat.disabled { cursor: default; }
  .hours-head-line { display: inline-flex; align-items: center; gap: 5px; }
  .hours-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a7d44; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(58,125,68,0.18); }
  .hours-dot.closed { background: var(--red); box-shadow: 0 0 0 2px rgba(201,59,0,0.18); }
  .hours-dot.unknown { background: var(--muted); box-shadow: none; }
  .hours-status { font-size: 10px; font-weight: 900; letter-spacing: 1.4px; color: #4eb15c; text-transform: uppercase; line-height: 1; white-space: nowrap; }
  .hours-status.closed { color: #d65430; }
  .hours-status.unknown { color: var(--muted); }
  body.light .hours-status { color: #1f4019; }
  body.light .hours-status.closed { color: #9a2e00; }
  .hours-bottom-line { display: inline-flex; align-items: center; gap: 4px; }
  .hours-time { font-size: 11px; font-weight: 700; color: var(--cream); letter-spacing: 0.3px; line-height: 1; white-space: nowrap; font-family: var(--font-body); }
  .hours-chevron { font-size: 9px; color: var(--muted); line-height: 1; transition: transform 0.18s ease; display: inline-block; }
  .hours-stat.open .hours-chevron { transform: rotate(180deg); }
  .hours-popover {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    display: none; width: max-content; min-width: 220px; max-width: calc(100vw - 32px);
    background: var(--layer); border: 1.5px solid var(--border-mid); border-radius: 12px;
    padding: 4px 14px 10px; box-shadow: 0 14px 32px rgba(0,0,0,0.55); text-align: left;
  }
  .hours-stat.open .hours-popover { display: block; animation: hoursPopFade 0.16s ease; }
  @keyframes hoursPopFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .hours-popover-row { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-family: var(--font-body); }
  .hours-popover-row:last-child { border-bottom: 0; }
  body.light .hours-popover-row { border-bottom-color: rgba(0,0,0,0.06); }
  .hours-popover-row .d { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; }
  .hours-popover-row .t { font-size: 13px; color: var(--cream); font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; }
  .hours-popover-row .t.closed { color: var(--muted); font-style: italic; font-weight: 500; }
  .hours-popover-row.today .d, .hours-popover-row.today .t { color: var(--red); font-weight: 800; }
  body.light .hours-popover-row .t { color: var(--text); }
  /* ── Staleness badges (Verified / Stale) ───────────────────────────────── */
  .staleness-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px 4px 7px; border-radius: 4px;
    font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
    font-family: var(--font-body); line-height: 1; white-space: nowrap;
  }
  .staleness-badge.verified { background: rgba(58,125,68,0.18); color: #4eb15c; border: 1px solid rgba(58,125,68,0.55); }
  .staleness-badge.late     { background: rgba(212,168,0,0.18); color: #e6c14a; border: 1px solid rgba(212,168,0,0.55); }
  .staleness-badge.stale    { background: rgba(201,59,0,0.16);  color: #ef7a45; border: 1px solid rgba(201,59,0,0.55);  }
  .staleness-badge .ic { font-size: 11px; line-height: 1; }
  body.light .staleness-badge.verified { color: #1f4019; background: rgba(31,64,25,0.15); border-color: rgba(31,64,25,0.6); }
  body.light .staleness-badge.late     { color: #6a4a00; background: rgba(212,168,0,0.18); border-color: rgba(212,168,0,0.6); }
  body.light .staleness-badge.stale    { color: #8a2400; background: rgba(138,36,0,0.12);  border-color: rgba(138,36,0,0.55); }
  /* Boil-hours sheet header meta row — badge + last-verified ago */
  .hours-sheet-meta { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
  .hours-sheet-meta .ago { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; font-weight: 600; }
  /* Permanent disclaimer banner on stale spot detail */
  .stale-disclaimer {
    background: linear-gradient(180deg, rgba(214,128,38,0.16), rgba(214,128,38,0.06));
    border: 1.5px solid rgba(214,128,38,0.55);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
    display: flex; gap: 12px; align-items: flex-start;
  }
  .stale-disclaimer .ic { font-size: 22px; line-height: 1; margin-top: 1px; }
  .stale-disclaimer .body { flex: 1; min-width: 0; }
  .stale-disclaimer .title { font-size: 12px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #d68026; margin-bottom: 6px; line-height: 1.2; }
  .stale-disclaimer .copy { font-size: 12px; color: rgba(245,230,197,0.9); line-height: 1.5; margin-bottom: 10px; }
  body.light .stale-disclaimer .copy { color: var(--text); }
  body.light .stale-disclaimer .title { color: #8a4f10; }
  .stale-disclaimer .call-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #d68026; color: #1a0c00;
    padding: 8px 14px; border-radius: 8px;
    font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none;
  }
  body.light .stale-disclaimer .call-btn { background: #8a4f10; color: #fff; }
  /* List view — verified + stale section split */
  .list-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px 8px; margin-top: 4px;
  }
  .list-section-head .left { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .list-section-head .ttl { font-size: 10px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; font-weight: 800; }
  .list-section-head .count { font-size: 10px; color: var(--muted); font-weight: 600; }
  .list-section-stale .list-section-head { cursor: pointer; user-select: none; border-top: 1px dashed var(--border-mid); padding-top: 14px; margin-top: 14px; }
  .list-section-stale .chev { color: var(--muted); font-size: 11px; transition: transform 0.18s ease; display: inline-block; }
  .list-section-stale.collapsed .chev { transform: rotate(-90deg); }
  .list-section-stale.collapsed .list-section-body { display: none; }
  .list-section-stale .stale-blurb {
    background: rgba(214,128,38,0.08); border: 1px dashed rgba(214,128,38,0.4);
    border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px;
    font-size: 11.5px; color: rgba(245,230,197,0.82); line-height: 1.5;
  }
  body.light .list-section-stale .stale-blurb { color: var(--text); }
  .list-row.list-row-stale .list-name { color: rgba(245,230,197,0.78); }
  body.light .list-row.list-row-stale .list-name { color: rgba(18,8,4,0.65); }
  /* Closed spots stay listed at full strength (no fade in the menu). */
  .brutal-stats-row .stat { text-align: center; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; }
  .brutal-stats-row .stat .lbl { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; font-weight: 800; line-height: 1.2; }
  /* Status tag — open = green, closed = red. Stays squared (brutalist) per spec. */
  .brutal-stats-row .stat .tag { background: #3a7d44; color: var(--cream); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 5px 9px; line-height: 1; border-radius: 0; }
  .brutal-stats-row .stat .tag.closed { background: var(--red); color: var(--cream); }
  .brutal-stats-row .stat .tag.unknown { background: var(--border-mid); color: var(--muted); }
  .brutal-stats-row .stat .peppers { display: inline-flex; gap: 2px; align-items: center; font-size: 14px; line-height: 1; }
  .brutal-stats-row .stat .peppers span.off { opacity: 0.18; }
  .brutal-stats-row .stat .tier { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .brutal-stats-row .stat .tier .marks { font-size: 16px; font-weight: 900; color: var(--amber); letter-spacing: -1.5px; line-height: 1; }
  .brutal-stats-row .stat .tier .marks .off { color: var(--border-mid); }
  .brutal-stats-row .stat .tier .word { font-size: 8.5px; color: var(--cream); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
  /* Side-by-side: Price per pound (left) + Crawfish Size (right) */
  .brutal-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .twin-price { background: var(--red); color: #fff7e1; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; border-radius: 14px; }
  .twin-price .lbl { font-size: 9px; opacity: 0.85; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; margin-bottom: 6px; }
  .twin-price .price { font-size: 40px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
  /* Live-native Per Sack card (blue) + Sacks Left card */
  .twin-price.live { background: var(--live-deep, #2c5778); }
  .twin-price .sack-sub { font-size: 10px; opacity: 0.82; font-weight: 700; margin-top: 5px; letter-spacing: 0.3px; }
  body.light .twin-price.live { background: var(--live-deep, #2c5778); color: #fff; }
  .twin-size.live-sacks { display: flex; flex-direction: column; align-items: center; justify-content: center; border-color: var(--live-deep, #2c5778); }
  .twin-size.live-sacks .sacks-n { font-size: 38px; font-weight: 900; color: var(--live, #4a8bbf); line-height: 1; letter-spacing: -1px; }
  .twin-size.live-sacks .sacks-n.na { font-size: 26px; letter-spacing: 0; }
  body.light .twin-size.live-sacks .sacks-n { color: var(--live-deep, #2c5778); }
  .twin-size.live-sacks .sacks-sub { font-size: 9.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
  .twin-size { border: 2px solid var(--border-mid); padding: 10px 6px; text-align: center; border-radius: 14px; }
  .twin-size .lbl { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.8px; font-weight: 800; margin-bottom: 4px; }
  .twin-size .icon { font-size: 28px; line-height: 1; margin-bottom: 2px; }
  .twin-size .word { font-size: 14px; color: var(--cream); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1; margin-bottom: 4px; }
  .twin-size .scale { display: flex; gap: 6px; justify-content: center; font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; }
  .twin-size .scale .on { color: var(--red); font-weight: 900; border-bottom: 2px solid var(--red); padding-bottom: 1px; }
  /* Catering CTA — outlined → fills red on hover/tap */
  .cta-catering {
    width: 100%; background: transparent; border: 2px solid var(--red);
    color: var(--red); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; font-family: inherit; text-align: left; margin-bottom: 16px;
    border-radius: 12px;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .cta-catering:hover, .cta-catering:active, .cta-catering:focus-visible { background: var(--red); color: var(--cream); }
  .cta-catering .left .ctaLbl { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; margin-bottom: 4px; opacity: 0.7; }
  .cta-catering:hover .left .ctaLbl, .cta-catering:active .left .ctaLbl, .cta-catering:focus-visible .left .ctaLbl { opacity: 1; color: rgba(245,230,197,0.85); }
  .cta-catering .left .ctaTtl { font-size: 15px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; }
  .cta-catering .arrow { font-size: 22px; font-weight: 900; }
  /* Directions chooser sheet — slides up from bottom */
  .dir-chooser-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; animation: crawOverlayBgIn 0.3s ease; }
  .dir-chooser-card { background: var(--bg); width: 100%; max-width: 420px; padding: 22px 18px 28px; border-top: 4px solid var(--red); border-radius: 18px 18px 0 0; animation: crawOverlayCardIn 0.38s cubic-bezier(0.32, 0.72, 0, 1); }
  .dir-chooser-lbl { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: 6px; }
  .dir-chooser-spot { font-family: var(--font-body); font-size: 18px; font-weight: 900; color: var(--cream); margin-bottom: 18px; text-transform: uppercase; line-height: 1.05; }
  .dir-chooser-btn { display: block; padding: 14px; border: 2px solid var(--red); color: var(--text); text-decoration: none; text-align: center; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; font-size: 13px; margin-bottom: 8px; background: transparent; cursor: pointer; font-family: inherit; width: 100%; border-radius: 10px; }
  .dir-chooser-btn:hover { background: rgba(201,59,0,0.10); }
  .dir-chooser-cancel { display: block; width: 100%; padding: 12px; background: transparent; border: 0; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 11px; cursor: pointer; font-family: inherit; margin-top: 6px; }
  /* Mode-themed directions / hours sheets — match the CTA that opened them. */
  .dir-chooser-overlay.live  .dir-chooser-card { border-top-color: var(--live-deep, #2c5778); }
  .dir-chooser-overlay.live  .dir-chooser-btn  { border-color: var(--live-deep, #2c5778); }
  .dir-chooser-overlay.live  .dir-chooser-btn:hover { background: rgba(74,139,191,0.12); }
  .dir-chooser-overlay.cater .dir-chooser-card { border-top-color: var(--cater-accent); }
  .dir-chooser-overlay.cater .dir-chooser-btn  { border-color: var(--cater-accent); }
  .dir-chooser-overlay.cater .dir-chooser-btn:hover { background: rgba(139,109,184,0.12); }
  /* Hours sheet — Boil Hours / Open Hours modal */
  .hours-sheet-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border-mid); }
  .hours-sheet-row:last-child { border-bottom: 0; }
  .hours-sheet-row .day { font-family: inherit; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
  .hours-sheet-row .time { color: var(--cream); font-size: 14px; font-weight: 600; line-height: 1.4; }
  .hours-sheet-row .time.closed { color: var(--muted); font-style: italic; font-weight: 500; }
  .hours-sheet-note { font-size: 11px; color: var(--muted); margin-top: 14px; line-height: 1.55; padding: 12px 14px; border: 1.5px dashed var(--border-mid); border-radius: 10px; text-align: center; }
  @keyframes slideUpDir { from { transform: translateY(20px); } to { transform: translateY(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ── OPENING INTRO (first session only) — facets assemble → zoom into home ──
     Every stage is a CSS animation with an animation-delay, so the whole
     sequence runs on the compositor and stays on-time even while the app's
     startup JS is hammering the main thread. (A JS-timer version collapsed into
     a flash on slower devices when the timers bunched behind the boot work.)
     --asmEnd (set by JS) = when the last facet lands; later beats key off it. */
  .craw-intro{ display:none; }
  html.craw-intro-on .craw-intro{
    display:flex; position:fixed; inset:0; z-index:10001; background:var(--bg);
    align-items:center; justify-content:center;
  }
  .ci-stage{ position:relative; width:min(78vw,340px); aspect-ratio:1/1; transform-origin:50% 50%; }
  .ci-pieces{ position:absolute; inset:0; transform-origin:50% 50%; }
  /* No forced layer promotion here — the running transform/opacity animation
     composites on the GPU on its own. Pinning 32 permanent layers (will-change /
     translateZ) overruns a phone's layer budget and causes flicker. */
  .ci-piece{ position:absolute; opacity:0; }
  .ci-piece img{ width:100%; height:100%; display:block; }
  .ci-wordmark{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) scale(.55);
    font-family:var(--font-logo); font-size:clamp(34px,9vw,52px); font-weight:700; letter-spacing:5px;
    text-transform:uppercase; line-height:1; white-space:nowrap; opacity:0; transform-origin:50% 50%; }
  .ci-wordmark .craw{ color:var(--red); } .ci-wordmark .daddy{ color:var(--text); }
  .ci-tagline{ position:absolute; top:calc(100% + 70px); left:50%; transform:translate(-50%,9px);
    font-size:clamp(9px,2.6vw,11px); color:#c8a888; letter-spacing:3.5px; text-transform:uppercase;
    font-weight:500; white-space:nowrap; opacity:0; }
  body.light .ci-tagline{ color:#4a3525; }
  /* NB: animate TO an explicit identity transform (not `none`) — interpolating a
     translate/rotate/scale list to `none` makes browsers fall back to matrix
     decomposition, which arcs/skews the pieces in mid-flight (the "glitch"). */
  /* Decelerating ease that ENDS flat (no >1 control point) — pieces settle in
     with no overshoot/bounce, and the wordmark scales in without a pop. */
  @keyframes ciAssemble{ from{ transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.34); opacity:0; } to{ transform:translate(0px,0px) rotate(0deg) scale(1); opacity:1; } }
  @keyframes ciPop{ from{opacity:0;transform:translateX(-50%) scale(.93);} to{opacity:1;transform:translateX(-50%) scale(1);} }
  @keyframes ciTag{ from{opacity:0;transform:translate(-50%,9px);} to{opacity:1;transform:translate(-50%,0);} }
  @keyframes ciFade{ to{ opacity:0; } }
  .craw-intro.play .ci-piece{ animation:ciAssemble .72s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--d); }
  .craw-intro.play .ci-wordmark{ animation:ciPop .5s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--asmEnd) + .16s); }
  .craw-intro.play .ci-tagline{ animation:ciTag .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--asmEnd) + .38s); }
  /* No zoom — the whole assembled scene just fades out to reveal the home. */
  .craw-intro.play{ animation:ciFade .7s ease both; animation-delay:calc(var(--asmEnd) + 1.7s); }
  @media (prefers-reduced-motion: reduce){
    .craw-intro.play .ci-piece{ animation:ciAssemble .45s ease both !important; animation-delay:0s !important; }
    .craw-intro.play .ci-pieces, .craw-intro.play .ci-stage{ animation:none !important; }
  }

/* ── CLOSED-NOW PINS (Open Now filter) ──────────────────────────────────────
   Spots whose hours/flags say they're closed right now stay on the map but
   render dimmed + desaturated instead of disappearing — full coverage stays
   visible without claiming everyone's boiling. Tap still opens the sheet. */
.map-pin.pin-closed { opacity: 0.35; filter: grayscale(0.85); }
.map-pin.pin-closed:hover, .map-pin.pin-closed:active { opacity: 0.85; filter: grayscale(0.3); }

/* ── LIVE ORDER TRACKING ────────────────────────────────────────────────────
   DoorDash-style in-app tracking: mini map + status timeline + order card. */
.track-map { width:100%; height:210px; border-radius:14px; overflow:hidden; border:1px solid var(--border-mid); margin-bottom:12px; }
.track-card { background:var(--layer-2); border:1px solid var(--border-mid); border-radius:14px; padding:16px; margin-bottom:12px; }
.track-headline { font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--text); line-height:1.2; }
.track-eta { font-size:12px; color:#82c272; font-weight:700; margin-top:4px; }
.track-bar { display:flex; align-items:flex-start; margin:16px 0 4px; }
.track-seg { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; min-width:46px; }
.track-seg .dot { width:13px; height:13px; border-radius:50%; background:var(--border-mid); transition:background .35s, box-shadow .35s; }
.track-seg.on .dot { background:var(--red); box-shadow:0 0 10px rgba(201,59,0,0.55); }
.track-seg .lbl { font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.7px; color:var(--muted); white-space:nowrap; }
.track-seg.on .lbl { color:var(--text); }
.track-line { flex:1 1 auto; height:3px; background:var(--border-mid); border-radius:2px; margin:5px 3px 0; transition:background .35s; }
.track-line.on { background:var(--red); }
.track-sub { font-size:12px; color:var(--muted); line-height:1.55; margin-top:8px; }
.track-row { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--text); padding:4px 0; }
.track-pin { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; border:2px solid rgba(255,255,255,0.85); box-shadow:0 3px 10px rgba(0,0,0,0.45); }
.track-pin.home { background:#1d1d1f; }
.track-pin.store { background:var(--red); }
.track-pin.dasher { background:#11253a; }
body.light .track-pin.home { background:#3a3a3c; }

  /* ── Vendor Sign Up · Gold Standard (2026-06) ── */
  .vs-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg,#2a1006 0%,#180c06 60%,var(--layer) 100%); border: 1px solid var(--border); border-radius: 16px; padding: 16px 15px; margin-bottom: 16px; }
  .vs-hero img { width: 42px; height: 42px; flex-shrink: 0; }
  .vs-hero .k { font-size: 9.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
  .vs-hero .h { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; line-height: 1.2; color: var(--text); }
  .vs-hero .h em { font-style: italic; color: var(--gold-bright); }
  body.light .vs-hero { background: linear-gradient(160deg,#f5e3bd 0%,#f9efd8 100%); border-color: #e3cf9f; }
  body.light .vs-hero .k { color: #8f5500; }
  body.light .vs-hero .h em { color: var(--red); }
  .vs-progress-wrap { margin-bottom: 14px; }
  .vs-progress-track { height: 4px; background: var(--layer-2); border-radius: 999px; overflow: hidden; margin-bottom: 7px; }
  body.light .vs-progress-track { background: rgba(61,21,0,0.12); }
  .vs-progress-track .fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius: 999px; transition: width .25s; }
  .vs-progress-label { font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); font-weight: 800; }
  body.light .vs-progress-label { color: #8f5500; }
  .submit-btn.vs-cta { background: linear-gradient(135deg,#e04a00,var(--red)); border-radius: 13px; box-shadow: 0 10px 26px -8px rgba(201,59,0,0.65); color: #fff7e1; }
  .vs-reassure { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 12px; }

  /* ── Spot card 2026-06: mode glow + status marquee + The Rundown ── */
  /* Hero scrim bleeds into the mode color (orange boiled / blue live / purple catering). */
  .cta-hero .cta-hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.04) 26%, rgba(0,0,0,0) 46%, var(--ms, rgba(0,0,0,0.2)) 72%, var(--mb, rgba(13,9,8,0.62)) 100%); }
  .spot-marquee { position: relative; z-index: 6; margin: 0 -18px; padding: 9px 14px; text-align: center;
    font-family: var(--font-body); font-size: 10.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; }
  .spot-marquee.open { background: #4e8d46; color: #0a1a07; }
  body.light .spot-marquee.open { background: #2d5a32; color: #fff7e1; }
  .spot-marquee.closed { background: var(--red); color: #fff7e1; }
  /* Closed ribbon follows the mode: blue for live, purple for catering. */
  .spot-marquee.closed.live { background: #2c5778; }
  .spot-marquee.closed.cater { background: #8b6db8; }
  .spot-marquee.unknown { background: var(--layer-2); color: var(--muted); }
  .spot-rundown { margin-bottom: 16px; }
  .rd-title { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 800;
    letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); margin: 4px 0 2px; }
  body.light .rd-title { color: #8f5500; }
  .rd-title .rule { flex: 1; border-top: 1px dashed var(--border-mid); }
  .rd-row { position: relative; display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 12px 2px; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
  .rd-row .k { color: var(--muted); font-weight: 600; flex-shrink: 0; }
  .rd-row .v { font-weight: 700; color: var(--text); text-align: right; }
  .rd-row .v.price { font-family: var(--font-display); font-size: 17px; color: #ff8e54; }
  body.light .rd-row .v.price { color: var(--red); }
  .rd-row .v.st-open { color: #7ed492; }
  body.light .rd-row .v.st-open { color: #2d5a32; }
  .rd-row .v.st-closed { color: #e87070; }
  .rd-row .v.st-unknown { color: var(--muted); }
  .rd-row .v .chev { color: var(--muted); font-size: 10px; }
  .rd-row.hours-stat { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rd-row.hours-stat.disabled { cursor: default; }
  .rd-row.hours-stat .hours-popover { top: calc(100% + 4px); left: 0; right: 0; width: auto; }

  /* ── Boiled Order Settings: green "Accept boiled orders" card + laser ring ── */
  .bos-accept-card { position: relative; isolation: isolate; overflow: hidden;
    background: var(--layer-2); border: 1px solid var(--border-mid); border-radius: 10px; padding: 13px 14px;
    transition: background .25s, border-color .25s; }
  .bos-accept-card.on { background: rgba(45,122,58,0.16); border-color: #3a9d4f;
    box-shadow: 0 0 18px -6px rgba(58,157,79,0.55); }
  body.light .bos-accept-card.on { background: rgba(45,90,50,0.10); border-color: #2d5a32; }
  /* Same conic beam as .fpc-btn, in green, clipped to a 2px ring. */
  .bos-accept-card.on::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: conic-gradient(
      from var(--fpc-beam-angle, 0deg),
      transparent 0deg,
      transparent 235deg,
      rgba(58,157,79,0.8) 265deg,
      #3a9d4f 300deg,
      #b8f0c2 320deg,
      #3a9d4f 340deg,
      rgba(58,157,79,0.8) 355deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: fpc-beam-spin 3s linear infinite;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 3px #3a9d4f) drop-shadow(0 0 9px rgba(58,157,79,0.6));
  }
  /* SMS-required gate: red flash when the vendor tries to save without it. */
  .bos-required-flash { animation: bosReqFlash 0.9s ease 2; }
  @keyframes bosReqFlash {
    0%, 100% { border-color: var(--border-mid); box-shadow: none; }
    50% { border-color: var(--red); box-shadow: 0 0 0 3px rgba(201,59,0,0.25); }
  }

  /* ── Spot card 2026-06: name-block layout + gold V&R ── */
  .spot-rating-row .stars { letter-spacing: 2px; font-size: 16px; }
  .spot-rating-row .avg { color: #ffc857; }
  .spot-rating-row .count { color: var(--muted); font-weight: 700; font-size: 12.5px; margin-left: 2px; }
  .spot-top10-row { margin: 2px 0 8px; }
  .spot-top10-chip { display: inline-block; background: var(--amber); color: var(--bg); font-size: 10.5px;
    font-weight: 800; padding: 4px 9px 3px; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1; border-radius: 3px; }
  .photos-pill { background: none; border: none; color: var(--muted); font-family: var(--font-body);
    font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; margin-left: 10px; }
  .confirm-btn.vr-gold { background: rgba(212,160,23,0.07); border: 1.5px solid var(--gold); color: var(--gold-bright);
    text-transform: uppercase; letter-spacing: 1.8px; font-weight: 800; font-size: 12px; border-radius: 12px; padding: 14px; }
  body.light .confirm-btn.vr-gold { background: rgba(143,85,0,0.06); border-color: #a87b00; color: #8f5500; }

  /* ── Spot meta icon buttons: camera / map pin / phone (SVG, currentColor) ── */
  .spot-icon-row { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
  .spot-icon-btn { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--layer); border: 1.5px solid var(--border-mid); border-radius: 11px; cursor: pointer;
    color: #fff7e1; text-decoration: none; padding: 0; -webkit-tap-highlight-color: transparent; }
  .spot-icon-btn svg { width: 18px; height: 18px; display: block; }
  .spot-icon-btn:active { transform: scale(0.94); }
  body.light .spot-icon-btn { color: #3d1500; background: rgba(61,21,0,0.04); border-color: rgba(61,21,0,0.3); }

  /* ── Duotone spot heroes (2026-06-11): every vendor photo renders B&W with a
     faint wash of the mode color — orange boiled, purple catering, blue live.
     Uniform, on-brand pages no matter what gets uploaded. Tint values approved
     off the previews board (hue 38% color-blend, saturate .7, multiply 5%). ── */
  .cta-hero { --hero-hue: var(--m, #c93b00); }
  .cta-hero.live { --hero-hue: #4a8bbf; }  /* brighter than the live CTA navy so it doesn't muddy */
  .cta-hero .cta-hero-slide { filter: grayscale(1) contrast(1.04) brightness(1.08); }
  /* No-photo placeholder: heavily blurred so it never reads as a real photo. */
  .cta-hero .cta-hero-blur { filter: grayscale(1) contrast(1.04) brightness(0.62) blur(18px); }
  .cta-hero-hue, .cta-hero-hue2 { position: absolute; inset: 0; pointer-events: none; }
  .cta-hero-hue { background: var(--hero-hue); mix-blend-mode: color; opacity: 0.38; filter: saturate(0.7); }
  .cta-hero-hue2 { background: var(--hero-hue); mix-blend-mode: multiply; opacity: 0.05; }

  /* ── Admin Ops Bento dashboard (replaces the flat admin button grid) ── */
  .adm-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .adm-tile { display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer; color: var(--text); background: linear-gradient(165deg, var(--layer-2), var(--layer)); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; transition: transform 0.1s ease, border-color 0.15s ease; }
  .adm-tile:active { transform: scale(0.98); }
  .adm-tile:hover { border-color: var(--border-mid); }
  .adm-tile .v { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -0.5px; color: var(--text); }
  .adm-tile .l { font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  .adm-tile .d { font-size: 10px; font-weight: 700; margin-top: 5px; color: #7bc870; }
  .adm-tile .d.flat { color: var(--muted); }
  .adm-hero { background: linear-gradient(160deg, rgba(201,59,0,0.16), var(--layer)); border: 1px solid rgba(201,59,0,0.40); border-radius: 16px; padding: 13px 15px 7px; margin-bottom: 12px; }
  .adm-hero-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .adm-hero-h .t { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text); }
  .adm-hero-h .pill { font-size: 10px; font-weight: 800; color: #fff; background: #c93b00; border-radius: 999px; padding: 3px 10px; }
  .adm-hrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; color: var(--text); background: transparent; border: none; border-top: 1px solid rgba(255,255,255,0.05); padding: 9px 0; }
  .adm-hrow .ic { font-size: 14px; }
  .adm-hrow .t { flex: 1; font-size: 12.5px; color: var(--text); }
  .adm-hrow .n { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--gold-bright); min-width: 16px; text-align: right; }
  .adm-hrow .n.zero { color: var(--muted); font-weight: 600; }
  .adm-hrow .go { font-size: 14px; color: var(--muted); }
  .adm-mod { background: var(--layer-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; }
  .adm-mod .mt { font-family: var(--font-display); font-weight: 800; font-size: 13px; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; color: var(--text); }
  .adm-mline { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; font-family: inherit; cursor: pointer; color: var(--muted); background: transparent; border: none; font-size: 11px; padding: 4px 0; }
  .adm-mline:hover { color: var(--text); }
  .adm-mline .ml { display: flex; align-items: center; gap: 6px; }
  .adm-mline b { color: var(--text); font-weight: 700; }
  .adm-mline .go { color: var(--muted); font-size: 13px; }
  .adm-dot { width: 7px; height: 7px; border-radius: 50%; background: #c93b00; display: inline-block; flex-shrink: 0; }
  .adm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .adm-tool { font-size: 11px; color: var(--muted); background: var(--layer-2); border: 1px solid var(--border); border-radius: 7px; padding: 10px 11px; min-height: 38px; display: inline-flex; align-items: center; cursor: pointer; font-family: inherit; }
  .adm-tool:hover { color: var(--text); border-color: var(--border-mid); }

/* ── Interface polish — make-interfaces-feel-better (additive only, 2026-06-21) ── */
body{ -webkit-font-smoothing:antialiased; text-wrap:pretty; }
.fs-title,.pass-modal-title{ text-wrap:balance; }
/* Tactile press feedback. These buttons had NO transition before, so this only adds. */
.submit-btn,.auth-btn,.add-spot-pill,.fpc-btn,.aura-btn,.msg-send{ transition:transform .14s cubic-bezier(.2,0,0,1); }
.submit-btn:active,.auth-btn:active,.add-spot-pill:active,.fpc-btn:active,.aura-btn:active,.msg-send:active{ transform:scale(.96); }
/* Tabular numerals on money + live values so widths don't jitter. */
.price,.hud-item-val{ font-variant-numeric:tabular-nums; }

/* ============================================================================
   POLISH v2 — make-interfaces-feel-better audit (additive only, 2026-06-21)
   Press feedback, tabular numerals, text balance, and image rims on the
   controls/displays the first pass missed. All purely additive: a comprehensive
   6-property transition (so any existing hover transition is preserved) + an
   :active scale, tabular-nums (render-only), text-wrap, and outline rims.
   ========================================================================== */
/* --- press feedback: button-like controls (scale .95) --- */
.sort-pill, .fc, .avail-pill, .locate-btn, .city-filter-pill, .list-filters-toggle,
.dir-chooser-btn, .dir-chooser-cancel, .dir-btn, .reply-btn, .bo-edit, .bo-deals-btn,
.bo-opt, .vo-cta, .admin-action-btn, .adm-tool, .cd-hero-go, .cd-quiet-row, .lp-day,
.cq-cal-day, .cq-cal-nav, .pass-modal-skip, .event-tab, .lc-chev {
  transition: transform .14s cubic-bezier(.2,0,0,1), background .18s ease, color .18s ease,
    border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.sort-pill:active, .fc:active, .avail-pill:active, .locate-btn:active, .city-filter-pill:active,
.list-filters-toggle:active, .dir-chooser-btn:active, .dir-chooser-cancel:active, .dir-btn:active,
.reply-btn:active, .bo-edit:active, .bo-deals-btn:active, .bo-opt:active, .vo-cta:active,
.admin-action-btn:active, .adm-tool:active, .cd-hero-go:active, .cd-quiet-row:active, .lp-day:active,
.cq-cal-day:active, .cq-cal-nav:active, .pass-modal-skip:active, .event-tab:active, .lc-chev:active {
  transform: scale(.95);
  filter: brightness(1.05);
}
/* --- press feedback: full-width rows & cards (subtler scale .985) --- */
.list-row, .lb-row, .event-card, .cd-tile, .adm-hrow, .adm-mline, .admin-sub-card,
.bo-dt-row, .bo-saved-addr, .bo-extra-row {
  transition: transform .14s cubic-bezier(.2,0,0,1), background .18s ease,
    border-color .18s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.list-row:active, .lb-row:active, .event-card:active, .cd-tile:active, .adm-hrow:active,
.adm-mline:active, .admin-sub-card:active, .bo-dt-row:active, .bo-saved-addr:active, .bo-extra-row:active {
  transform: scale(.985);
  filter: brightness(1.06);
}
/* --- press feedback: quantity steppers + small adds (deeper scale .9) --- */
.bo-irow-qty button, .bo-step-qty button, .cq-step button, .cq-add {
  transition: transform .12s cubic-bezier(.2,0,0,1), background .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bo-irow-qty button:active, .bo-step-qty button:active, .cq-step button:active, .cq-add:active {
  transform: scale(.9);
}
/* deepen the Continue CTA press (was scale .99 — reads as no-press) */
.bo-continue-cta:active { transform: scale(.96) translateY(1px); filter: brightness(1.05); }

/* --- tabular numerals on dynamic money / counts / ratings (render-only) --- */
.twin-price .price, .twin-size.live-sacks .sacks-n, .stat-block-val, .cater-ce-val, .hours-time,
.bo-sum-row, .bo-card-totals, .bo-food-summary, .bo-step-qty .n, .bo-irow-qty .n,
.adm-tile .v, .adm-hrow .n, .adm-mline b, .cd-stat .v,
.fpc-bundle-now, .fpc-bundle-was, .fpc-stat-val, .fpc-ft-now, .fpc-ft-was,
.pass-stat-val, .pass-pounds-val, .pass-pound-input input,
.lb-rank, .lb-score, .boost-countdown, .nav-badge, .avail-count, .rating-pill-inline,
.list-ppb, .list-size, .feature-meta, .feature-dist,
.cq-est-tot .v, .cq-est-row .v, .lp-dep-row, .lp-dep-note, .track-row, .track-eta {
  font-variant-numeric: tabular-nums;
}

/* --- text-wrap: balance on display headings --- */
.mode-modal-title, .mp-q .big, .detail-name, .dir-chooser-spot, .lc-name, .vo-h { text-wrap: balance; }

/* --- subtle dark-mode rim on content photos (outline = no box-shadow clobber) --- */
.feature-thumb img, .bo-irow-thumb img, .bo-hero-img, .cq-addon-img, .bos-item-pic img,
.photo-lightbox-overlay img, .hud-avatar img, .live-photo, .list-pin img.custom-logo {
  outline: 1px solid rgba(255,255,255,.10); outline-offset: -1px;
}

/* Inline My-Listings CTAs (Add Another Spot / Open Your <Mode> Business) — press feedback */
.ml-cta { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.ml-cta:active { transform: scale(.97); filter: brightness(1.04); }

/* ============================================================================
   POLISH v3 — held-back animations (2026-06-21): accordion cross-fades,
   selection-checkmark pop, async-count fade-in, push-card dismiss collapse.
   CSS-driven (max-height/grid + opacity/keyframes) — no fragile JS height math.
   ========================================================================== */
.list-filters-box { max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s cubic-bezier(.2,0,0,1), opacity .2s ease; }
.list-filters-box.open { max-height: 600px; opacity: 1; }
.ship-faq-a { max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .25s cubic-bezier(.2,0,0,1), opacity .2s ease; }
.ship-faq-a.open { max-height: 600px; opacity: 1; }
@keyframes ckPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.vs-mode-check .vs-check-glyph { display: inline-block; opacity: 0; transform: scale(.5); }
.vs-mode-card.selected .vs-mode-check .vs-check-glyph { opacity: 1; transform: scale(1);
  animation: ckPop .22s cubic-bezier(.2,0,0,1); }
@keyframes countIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mp-rail-n { animation: countIn .4s ease both; }
@media (prefers-reduced-motion: reduce) {
  .list-filters-box, .ship-faq-a { transition: none; }
  .mp-rail-n, .vs-mode-check .vs-check-glyph { animation: none; }
}

/* "Watch how <mode> works" help-card title — themed DARK color in light mode
   (var(--cream) is unreadable on the light cream card; dark-mode keeps cream). */
.vhelp-tl { color: var(--cream); }
body.light .vhelp-tl-boiled   { color: #9a2e00; }
body.light .vhelp-tl-live     { color: #2c5778; }
body.light .vhelp-tl-catering { color: #432461; }
body.light .vhelp-tl-ship     { color: #146b4d; }

/* spice peppers — emoji w/ VS16 + color-emoji font so Windows renders them red, not white */
.pep-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:13px;line-height:1;vertical-align:-1px}
.pep-emoji.off{opacity:.18}