* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --brand-orange: #F97316;
      --brand-pink: #EC4899;
      --brand-gradient: linear-gradient(135deg, #F97316 0%, #EC4899 100%);
      --flame: #F97316;
      --warm: #FB923C;
      /* Dark theme overrides */
      --cream: #0a0a0d;
      --dark: #f0f0f8;
      --mid: #b0a8b8;
      --light-mid: #7a7a8f;
      --card-bg: #1a1a22;
      --accent-green: #2DB87A;
    }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--dark);
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }
    h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; }

    /* ─── NAV ──────────────────────────────────────────────────────────────── */
    nav {
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: var(--cream);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .logo-icon {
      width: 30px;
      height: 30px;
      object-fit: contain;
    }
    .logo-wordmark {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -1px;
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .partner-pill {
      font-size: 12px;
      color: var(--light-mid);
      background: rgba(232,85,58,0.08);
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 500;
    }
    .partner-pill.active { background: rgba(45,184,122,0.12); color: var(--accent-green); }

    /* ─── TIER BADGES ON SWIPE CARDS ──────────────────────────────────────── */
    /* Base badge shape — all tiers share this */
    .tier-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 700;
      padding: 3px 9px; border-radius: 12px;
      letter-spacing: 0.04em; text-transform: uppercase;
      white-space: nowrap; vertical-align: middle;
      font-family: 'Space Grotesk', sans-serif;
    }

    /* Premium — silver/blue, understated but elevated */
    .tier-badge-premium {
      background: linear-gradient(135deg, #6B7FD7 0%, #4F63C9 100%);
      color: #fff;
      box-shadow: 0 2px 6px rgba(79,99,201,0.32);
    }
    .tier-badge-premium::before { content: '✦'; font-size: 9px; }

    /* Boosted — warm gold, clearly paid tier */
    .tier-badge-boosted {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(217,119,6,0.38);
    }
    .tier-badge-boosted::before { content: '▲'; font-size: 8px; }

    /* Founding Member — special treatment, dark bg with gold shimmer */
    .tier-badge-founder {
      background: linear-gradient(135deg, #1A1615 0%, #2D2420 100%);
      color: #F59E0B;
      border: 1px solid rgba(245,158,11,0.6);
      box-shadow: 0 2px 10px rgba(245,158,11,0.28), inset 0 0 8px rgba(245,158,11,0.06);
      animation: founderShimmer 3s ease-in-out infinite;
    }
    .tier-badge-founder::before { content: '⭐'; font-size: 10px; }
    @keyframes founderShimmer {
      0%, 100% { box-shadow: 0 2px 10px rgba(245,158,11,0.28), inset 0 0 8px rgba(245,158,11,0.06); }
      50%       { box-shadow: 0 2px 16px rgba(245,158,11,0.48), inset 0 0 12px rgba(245,158,11,0.12); }
    }

    /* Featured — warm orange-red, eye-catching for promoted restaurants */
    .tier-badge-featured {
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(239,68,68,0.35);
    }
    .tier-badge-featured::before { content: '🔥'; font-size: 9px; }

    /* Promoted — subtle gold ⭐ for active promoted_slot windows.
       Distinct from .tier-badge-featured above, which is the admin
       badge_type='featured' column (orange-red 🔥). Promoted slot is the
       consumer-facing B2B paid-promotion signal that pins the card to the
       top of the deck for its date window. */
    .promoted-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: linear-gradient(135deg, #B8860B 0%, #8B6914 100%);
      color: #FFFBEB;
      font-size: 10px; font-weight: 700;
      padding: 3px 9px; border-radius: 12px;
      letter-spacing: 0.04em; text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(184,134,11,0.30);
      font-family: 'Space Grotesk', sans-serif;
      vertical-align: middle;
    }
    .promoted-badge::before { content: '⭐'; font-size: 9px; }

    /* Verified — green trust signal */
    .tier-badge-verified {
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: #fff;
      box-shadow: 0 2px 6px rgba(16,185,129,0.32);
    }
    .tier-badge-verified::before { content: '✓'; font-size: 9px; font-weight: 900; }

    /* Complimentary — soft purple, gifted/comp listing */
    .tier-badge-complimentary {
      background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
      color: #fff;
      box-shadow: 0 2px 6px rgba(124,58,237,0.32);
    }
    .tier-badge-complimentary::before { content: '🎁'; font-size: 9px; }

    /* Legacy alias — old founding_member bool still renders correctly */
    .founding-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: linear-gradient(135deg, #1A1615 0%, #2D2420 100%);
      color: #F59E0B; font-size: 10px; font-weight: 700;
      padding: 3px 9px; border-radius: 12px;
      letter-spacing: 0.04em; text-transform: uppercase;
      border: 1px solid rgba(245,158,11,0.6);
      box-shadow: 0 2px 10px rgba(245,158,11,0.28);
      font-family: 'Space Grotesk', sans-serif;
    }
    .founding-badge::before { content: '⭐'; font-size: 10px; }

    /* Away toggle button */
    .away-btn {
      font-size: 12px;
      color: var(--mid);
      background: white;
      border: 1px solid rgba(26,22,21,0.12);
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: border-color 0.15s, color 0.15s;
    }
    .away-btn:hover { border-color: var(--flame); color: var(--flame); }
    .away-btn.active { background: rgba(232,85,58,0.08); border-color: var(--flame); color: var(--flame); }

    /* Dining mode pill in nav */
    .dining-mode-pill {
      font-size: 12px;
      color: var(--mid);
      background: white;
      border: 1px solid rgba(26,22,21,0.12);
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: border-color 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .dining-mode-pill:hover { border-color: var(--flame); color: var(--flame); }

    /* ─── AWAY ZIP MODAL ───────────────────────────────────────────────────── */
    #away-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(26,22,21,0.5);
      z-index: 9998;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    #away-modal.visible { display: flex; }
    .away-modal-box {
      background: white;
      border-radius: 20px;
      padding: 28px 24px;
      max-width: 360px;
      width: 100%;
      text-align: center;
      box-shadow: 0 16px 48px rgba(26,22,21,0.18);
      animation: modalIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes modalIn {
      from { transform: scale(0.92) translateY(12px); opacity: 0; }
      to   { transform: scale(1) translateY(0); opacity: 1; }
    }
    .away-modal-box h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 6px;
      letter-spacing: -0.3px;
      color: #1a1615;
    }
    .away-modal-box p {
      font-size: 14px;
      color: var(--mid);
      line-height: 1.5;
      margin-bottom: 20px;
    }
    .away-zip-input {
      width: 100%;
      padding: 14px 18px;
      font-size: 20px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      letter-spacing: 3px;
      border: 2px solid rgba(232,85,58,0.3);
      border-radius: 12px;
      text-align: center;
      outline: none;
      background: #0a0a0d;
      color: #f0f0f8;
      -webkit-text-fill-color: #f0f0f8;
      color-scheme: dark;
      margin-bottom: 10px;
    }
    .away-zip-input:focus { border-color: var(--flame); }
    .away-zip-input:-webkit-autofill,
    .away-zip-input:-webkit-autofill:focus {
      -webkit-text-fill-color: #f0f0f8;
      -webkit-box-shadow: 0 0 0 1000px #0a0a0d inset;
    }
    .away-error { font-size: 12px; color: var(--flame); min-height: 16px; margin-bottom: 10px; }
    .away-submit-btn {
      width: 100%;
      background: var(--flame);
      color: white;
      border: none;
      border-radius: 12px;
      padding: 14px;
      font-size: 15px;
      font-weight: 700;
      font-family: 'Space Grotesk', sans-serif;
      cursor: pointer;
      margin-bottom: 10px;
    }
    .away-cancel-btn {
      background: transparent;
      border: none;
      color: var(--light-mid);
      font-size: 13px;
      cursor: pointer;
      padding: 8px;
      font-family: 'DM Sans', sans-serif;
    }

    /* ─── MAIN LAYOUT ──────────────────────────────────────────────────────── */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 16px 100px;
      max-width: 480px;
      margin: 0 auto;
      width: 100%;
    }

    /* ─── LOADING ──────────────────────────────────────────────────────────── */
    #loading-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 16px;
      text-align: center;
      padding: 40px;
    }
    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(232,85,58,0.2);
      border-top-color: var(--flame);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading-screen p { color: var(--mid); font-size: 15px; }

    /* ─── INVITE SCREEN ────────────────────────────────────────────────────── */
    #invite-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      text-align: center;
      padding: 20px 0;
      width: 100%;
    }
    .invite-icon { font-size: 52px; margin-bottom: 4px; }
    #invite-screen h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
    #invite-screen .invite-desc {
      color: var(--mid);
      font-size: 15px;
      line-height: 1.6;
      max-width: 320px;
    }
    .name-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .name-row-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--mid);
      white-space: nowrap;
    }
    .name-field {
      flex: 1;
      padding: 12px 16px;
      font-size: 15px;
      font-family: 'DM Sans', sans-serif;
      border: 2px solid rgba(232,85,58,0.2);
      border-radius: 10px;
      outline: none;
      background: var(--cream);
      color: var(--dark);
      transition: border-color 0.15s;
    }
    .name-field::placeholder { color: var(--mid); }
    .name-field::-webkit-input-placeholder { color: var(--mid); }
    .name-field:focus { border-color: var(--flame); }
    .invite-link-box {
      background: white;
      border: 2px solid rgba(232,85,58,0.2);
      border-radius: 14px;
      padding: 14px 16px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .invite-link-box span {
      flex: 1;
      font-size: 13px;
      color: var(--mid);
      word-break: break-all;
      text-align: left;
      line-height: 1.4;
    }
    .invite-copy-btn {
      background: var(--flame);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      font-family: 'Space Grotesk', sans-serif;
      transition: background 0.15s, transform 0.1s;
      flex-shrink: 0;
    }
    .invite-copy-btn:hover { background: #d44831; }
    .invite-copy-btn:active { transform: scale(0.96); }
    .invite-copy-btn.copied { background: var(--accent-green); }
    .invite-or-text {
      font-size: 13px;
      color: var(--light-mid);
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .invite-or-text::before, .invite-or-text::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(26,22,21,0.1);
    }
    .invite-start-btn {
      background: var(--flame);
      color: white;
      border: none;
      border-radius: 14px;
      padding: 16px 40px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      font-family: 'Space Grotesk', sans-serif;
      transition: background 0.15s, transform 0.1s;
      box-shadow: 0 4px 16px rgba(232,85,58,0.25);
    }
    .invite-start-btn:hover { background: #d44831; transform: translateY(-1px); }
    .invite-start-btn:active { transform: translateY(0); }
    .invite-async-note {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--accent-green);
      background: rgba(45,184,122,0.08);
      padding: 10px 16px;
      border-radius: 10px;
      width: 100%;
      justify-content: center;
    }

    /* ─── SWIPE INTERFACE ──────────────────────────────────────────────────── */
    #swipe-screen { display: none; flex-direction: column; align-items: center; width: 100%; gap: 0; }

    /* Location indicator */
    .location-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--light-mid);
      margin-bottom: 14px;
      align-self: flex-start;
    }
    .location-bar span { font-weight: 500; color: var(--mid); }

    /* Progress */
    .progress-bar-wrap {
      width: 100%;
      height: 4px;
      background: rgba(26,22,21,0.08);
      border-radius: 2px;
      margin-bottom: 20px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--flame), var(--warm));
      border-radius: 2px;
      transition: width 0.4s ease;
    }

    /* Card stack */
    .card-stack {
      position: relative;
      width: 100%;
      height: 460px;
      margin-bottom: 20px;
    }
    .restaurant-card {
      position: absolute;
      inset: 0;
      background: white;
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(26,22,21,0.10), 0 2px 4px rgba(26,22,21,0.04);
      overflow: hidden;
      cursor: grab;
      user-select: none;
      touch-action: none;
      transition: transform 0.08s ease, opacity 0.08s ease;
      will-change: transform;
      display: flex;
      flex-direction: column;
    }
    .restaurant-card:active { cursor: grabbing; }
    .restaurant-card.behind {
      transform: scale(0.96) translateY(8px);
      z-index: 0;
    }
    .restaurant-card.front { z-index: 10; }

    /* Card photo area — cuisine-colored gradient with emoji */
    .card-photo {
      width: 100%;
      height: 200px;
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .card-photo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
    }
    .card-photo-emoji {
      font-size: 72px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    }
    .card-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.3) 100%);
      z-index: 2;
    }

    /* Decision overlays on the card */
    .decision-overlay {
      position: absolute;
      top: 16px;
      padding: 8px 16px;
      border-radius: 10px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.1s;
      pointer-events: none;
      z-index: 20;
    }
    .overlay-yes { right: 16px; background: rgba(45,184,122,0.15); color: var(--accent-green); border: 3px solid var(--accent-green); }
    .overlay-no  { left: 16px;  background: rgba(232,85,58,0.12);  color: var(--flame);        border: 3px solid var(--flame);        }

    /* Card content below photo */
    .card-content {
      padding: 18px 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .card-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #1a1615;
      letter-spacing: -0.5px;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    .card-meta {
      font-size: 14px;
      color: #6b6b6b;
      margin-bottom: 10px;
    }
    .card-rating {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
    }
    .stars { color: #F5A623; font-size: 15px; letter-spacing: 1px; }
    .rating-num { font-size: 14px; color: #555; font-weight: 500; }
    .review-count { font-size: 13px; color: #888; }
    .card-bottom {
      margin-top: auto;
    }
    .card-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tag {
      font-size: 11px;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 20px;
      background: rgba(26,22,21,0.05);
      color: #555;
    }
    .tag.cuisine { background: rgba(232,85,58,0.08); color: #E8553A; }
    .card-hours {
      font-size: 11px;
      color: #888;
      padding: 4px 0 2px;
      max-width: 100%;
      overflow-wrap: break-word;
      line-height: 1.3;
    }
    /* Compact website link on swipe cards — shown as small inline link */
    .card-website-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #6366f1;
      padding: 3px 8px;
      background: rgba(99,102,241,0.08);
      border-radius: 10px;
      text-decoration: none;
      margin-top: 4px;
    }
    .card-website-link:hover { background: rgba(99,102,241,0.15); }

    /* Swipe buttons */
    .swipe-actions {
      display: flex;
      justify-content: center;
      gap: 32px;
      padding: 4px 0 8px;
      width: 100%;
    }
    .action-btn {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      border: none;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 16px rgba(26,22,21,0.12);
    }
    .action-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(26,22,21,0.16); }
    .action-btn:active { transform: scale(0.95); }
    .btn-nope {
      background: white;
      color: var(--flame);
      border: 2px solid rgba(232,85,58,0.25);
    }
    .btn-nope:hover { border-color: var(--flame); background: #fff5f3; }
    .btn-yes {
      background: white;
      color: var(--accent-green);
      border: 2px solid rgba(45,184,122,0.25);
    }
    .btn-yes:hover { border-color: var(--accent-green); background: #f0fdf7; }

    .swipe-hint {
      font-size: 12px;
      color: var(--light-mid);
      text-align: center;
      margin-top: 8px;
    }

    /* ─── DONE SCREEN ──────────────────────────────────────────────────────── */
    #done-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
      padding: 40px 20px;
    }
    #done-screen .done-icon { font-size: 56px; }
    #done-screen h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
    #done-screen p { color: var(--mid); font-size: 15px; line-height: 1.6; max-width: 300px; }
    .waiting-partner {
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      border-radius: 12px;
      padding: 14px 20px;
      font-size: 14px;
      color: var(--mid);
      border: 1px solid rgba(26,22,21,0.06);
    }
    .waiting-dot {
      width: 8px; height: 8px;
      background: var(--accent-green);
      border-radius: 50%;
      animation: pulse 1.5s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.3} }

    .done-invite-box {
      background: white;
      border: 2px solid rgba(232,85,58,0.15);
      border-radius: 14px;
      padding: 16px 20px;
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
    }
    .done-invite-box .invite-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--flame);
      font-family: 'Space Grotesk', sans-serif;
    }
    .done-invite-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .done-invite-row span {
      flex: 1;
      font-size: 13px;
      color: var(--light-mid);
      word-break: break-all;
      text-align: left;
    }
    .done-copy-btn {
      background: var(--flame);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      font-family: 'Space Grotesk', sans-serif;
    }
    .done-copy-btn.copied { background: var(--accent-green); }

    /* ─── FREE TIER UPSELL MODAL ───────────────────────────────────────────── */
    #upsell-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10,10,13,0.75);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    #upsell-modal-overlay.open { display: flex; }
    #upsell-modal {
      background: #1a1a22;
      border: 1px solid rgba(249,115,22,0.25);
      border-radius: 20px;
      padding: 32px 28px;
      max-width: 340px;
      width: 90%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.6);
      animation: modal-in 0.25s ease;
    }
    @keyframes modal-in {
      from { transform: scale(0.88) translateY(12px); opacity: 0; }
      to   { transform: scale(1)    translateY(0);    opacity: 1; }
    }
    .upsell-icon { font-size: 48px; }
    .upsell-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #f0f0f8;
      line-height: 1.2;
    }
    .upsell-body {
      font-size: 14px;
      color: #b0a8b8;
      line-height: 1.6;
    }
    .upsell-features {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      text-align: left;
    }
    .upsell-feature {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #f0f0f8;
    }
    .upsell-feature .check { color: #2DB87A; font-weight: 700; }
    .upsell-price {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: #F97316;
    }
    .upsell-price span { font-size: 14px; font-weight: 400; color: #7a7a8f; }
    .upsell-cta-btn {
      background: var(--brand-gradient);
      color: white;
      border: none;
      border-radius: 12px;
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 700;
      font-family: 'Space Grotesk', sans-serif;
      cursor: pointer;
      width: 100%;
      letter-spacing: -0.3px;
      text-decoration: none;
      display: inline-block;
      text-align: center;
      transition: opacity 0.15s;
    }
    .upsell-cta-btn:hover { opacity: 0.9; }
    .upsell-dismiss {
      font-size: 13px;
      color: #7a7a8f;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px 8px;
    }
    .upsell-dismiss:hover { color: #b0a8b8; }

    /* ─── MATCH SCREEN ─────────────────────────────────────────────────────── */
    #match-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      text-align: center;
      padding: 40px 20px;
      animation: matchPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes matchPop {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .match-badge {
      background: var(--brand-gradient);
      color: white;
      padding: 8px 24px;
      border-radius: 100px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-top: 8px;
    }
    #match-screen h2 {
      font-size: clamp(26px, 6vw, 36px);
      font-weight: 700;
      letter-spacing: -1px;
      line-height: 1.1;
    }
    .match-restaurant-card {
      background: white;
      border-radius: 20px;
      overflow: hidden;
      width: 100%;
      max-width: 320px;
      box-shadow: 0 8px 32px rgba(26,22,21,0.1);
      border: 2px solid rgba(45,184,122,0.2);
    }
    .match-card-photo {
      width: 100%;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .match-card-photo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .match-card-photo-emoji {
      font-size: 56px;
      position: relative;
      z-index: 1;
    }
    .match-card-info {
      padding: 16px 20px;
      background: white;
    }
    .match-card-info .card-name { font-size: 20px; margin-bottom: 4px; color: #1a1615; }
    .match-card-info .card-meta { font-size: 13px; margin-bottom: 8px; }
    .match-card-info .card-rating { margin-bottom: 0; }

    .book-table-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent-green);
      color: white;
      border: none;
      border-radius: 14px;
      padding: 16px 32px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: background 0.15s, transform 0.1s;
      box-shadow: 0 4px 16px rgba(45,184,122,0.3);
      text-decoration: none;
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }
    .book-table-btn:hover { background: #25a06b; transform: translateY(-1px); }
    .book-table-btn:active { transform: translateY(0); }

    .new-session-btn {
      background: transparent;
      color: var(--flame);
      border: 2px solid var(--flame);
      border-radius: 12px;
      padding: 12px 32px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: background 0.15s, color 0.15s;
    }
    .new-session-btn:hover { background: var(--flame); color: white; }

    .yelp-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--mid);
      border: 2px solid rgba(26,22,21,0.12);
      border-radius: 12px;
      padding: 12px 28px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      font-family: 'Space Grotesk', sans-serif;
      transition: border-color 0.15s, color 0.15s;
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }
    .yelp-btn:hover { border-color: var(--mid); color: var(--dark); }
    /* ─── SHARE PHOTO BUTTON ──────────────────────────────────────────────────────── */
    .share-photo-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--brand-gradient);
      color: white;
      border: none;
      border-radius: 14px;
      padding: 16px 32px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: opacity 0.15s, transform 0.1s;
      box-shadow: 0 4px 16px rgba(232,85,58,0.3);
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }
    .share-photo-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .share-photo-btn:active { transform: translateY(0); }

    /* Share with friends row */
    .share-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 320px;
    }
    .share-friends-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #2DB87A;
      color: white;
      border: none;
      border-radius: 14px;
      padding: 16px 24px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: opacity 0.15s, transform 0.1s;
      box-shadow: 0 4px 16px rgba(45,184,122,0.3);
      flex: 1;
      min-width: 140px;
      justify-content: center;
    }
    .share-friends-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .share-friends-btn:active { transform: translateY(0); }
    .share-friends-btn.copied { background: #1e8449; }
    .sms-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #2980b9;
      color: white;
      border: none;
      border-radius: 14px;
      padding: 16px 20px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: opacity 0.15s, transform 0.1s;
      box-shadow: 0 4px 16px rgba(41,128,185,0.3);
      justify-content: center;
      min-width: 80px;
    }
    .sms-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .sms-btn:active { transform: translateY(0); }

    /* God Mode match action buttons */
    .match-god-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 320px;
    }
    .god-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Space Grotesk', sans-serif;
      padding: 12px 20px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.1s;
      flex: 1;
      justify-content: center;
      min-width: 90px;
    }
    .god-btn:active { transform: scale(0.96); }
    .god-btn-save {
      background: rgba(99,102,241,0.15);
      color: #818cf8;
      border: 2px solid rgba(99,102,241,0.3);
    }
    .god-btn-save:hover { background: rgba(99,102,241,0.25); }
    .god-btn-share {
      background: rgba(236,72,153,0.15);
      color: #f472b6;
      border: 2px solid rgba(236,72,153,0.3);
    }
    .god-btn-share:hover { background: rgba(236,72,153,0.25); }
    .god-btn-rematch {
      background: rgba(249,115,22,0.15);
      color: var(--flame);
      border: 2px solid rgba(249,115,22,0.3);
    }
    .god-btn-rematch:hover { background: rgba(249,115,22,0.25); }

    /* Nav camera icon (shown after match) */
    .nav-camera-btn {
      display: none;
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 8px;
      transition: background 0.15s;
      line-height: 1;
    }
    .nav-camera-btn:hover { background: rgba(232,85,58,0.08); }
    .nav-camera-btn.visible { display: inline-flex; align-items: center; }

    /* ─── PHOTO OVERLAY MODAL ──────────────────────────────────────────────────────── */
    #photo-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(26,22,21,0.85);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #photo-modal.visible { display: flex; }
    .photo-modal-box {
      background: var(--cream);
      border-radius: 20px;
      width: 100%;
      max-width: 400px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: 90dvh;
    }
    .photo-modal-header {
      padding: 18px 20px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(26,22,21,0.06);
    }
    .photo-modal-header h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }
    .photo-modal-close {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: var(--light-mid);
      padding: 2px 6px;
      border-radius: 6px;
    }
    .photo-modal-close:hover { background: rgba(26,22,21,0.06); }
    .photo-canvas-wrap {
      padding: 16px 20px;
      display: flex;
      justify-content: center;
      overflow-y: auto;
    }
    #photo-canvas {
      border-radius: 12px;
      max-width: 100%;
      display: block;
    }
    .photo-modal-actions {
      padding: 12px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .photo-download-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--accent-green);
      color: white;
      border: none;
      border-radius: 12px;
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: background 0.15s;
    }
    .photo-download-btn:hover { background: #25a06b; }
    .photo-retake-btn {
      background: transparent;
      color: var(--light-mid);
      border: none;
      font-size: 14px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      text-align: center;
      padding: 4px;
    }
    .photo-retake-btn:hover { color: var(--dark); }

    /* ─── GALLERY SUBMIT MODAL ─────────────────────────────────────────────── */
    #gallery-submit-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(26,22,21,0.75);
      z-index: 300;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    #gallery-submit-modal.visible { display: flex; }
    .gallery-submit-box {
      background: white;
      border-radius: 20px;
      padding: 32px 24px 28px;
      max-width: 340px;
      width: 100%;
      text-align: center;
      box-shadow: 0 16px 48px rgba(26,22,21,0.18);
      animation: modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
    }
    .gallery-submit-icon { font-size: 40px; margin-bottom: 14px; }
    .gallery-submit-box h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .gallery-submit-box p {
      font-size: 14px;
      color: var(--light-mid);
      margin-bottom: 20px;
    }
    .gallery-submit-names {
      margin-bottom: 16px;
    }
    .gallery-submit-names input {
      width: 100%;
      border: 1.5px solid rgba(26,22,21,0.12);
      border-radius: 10px;
      padding: 11px 14px;
      font-size: 14px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: border-color 0.15s;
    }
    .gallery-submit-names input:focus { border-color: var(--brand-orange); }
    .gallery-submit-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 14px;
    }
    .gallery-submit-yes {
      background: linear-gradient(135deg, #F97316, #EC4899);
      color: white;
      border: none;
      border-radius: 12px;
      padding: 13px 20px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: opacity 0.15s;
    }
    .gallery-submit-yes:hover { opacity: 0.9; }
    .gallery-submit-yes:disabled { opacity: 0.6; cursor: not-allowed; }
    .gallery-submit-no {
      background: transparent;
      border: none;
      color: var(--light-mid);
      font-size: 14px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      padding: 4px;
    }
    .gallery-submit-no:hover { color: var(--dark); }
    .gallery-submit-link {
      font-size: 13px;
      color: var(--brand-orange);
      text-decoration: none;
      font-weight: 600;
    }
    .gallery-submit-link:hover { text-decoration: underline; }

    /* ─── ERROR ────────────────────────────────────────────────────────────── */
    #error-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
      padding: 40px;
    }
    #error-screen .error-icon { font-size: 48px; }
    #error-screen h2 { font-size: 22px; font-weight: 700; }
    #error-screen p { color: var(--mid); font-size: 15px; }

    /* ─── CARD WATERMARK ────────────────────────────────────────────────────── */
    .card-watermark {
      position: absolute;
      bottom: 8px;
      right: 10px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(0,0,0,0.28);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: 20px;
      padding: 3px 8px 3px 5px;
      pointer-events: none;
    }
    .card-watermark img {
      width: 13px;
      height: 13px;
      object-fit: contain;
      opacity: 0.85;
    }
    .card-watermark span {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 10px;
      font-weight: 700;
      color: rgba(255,255,255,0.80);
      letter-spacing: 0.3px;
    }

    /* Cuisine color map for card backgrounds */
    .bg-thai    { background: linear-gradient(135deg, #FF6B35 0%, #F7C59F 100%); }
    .bg-japanese { background: linear-gradient(135deg, #E8C5A0 0%, #D4956A 100%); }
    .bg-italian { background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%); }
    .bg-mexican { background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%); }
    .bg-chinese { background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%); }
    .bg-indian  { background: linear-gradient(135deg, #E67E22 0%, #F1C40F 100%); }
    .bg-burgers { background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%); }
    .bg-american { background: linear-gradient(135deg, #2C3E50 0%, #3498DB 100%); }
    .bg-korean  { background: linear-gradient(135deg, #E74C3C 0%, #8E44AD 100%); }
    .bg-vietnamese { background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%); }
    .bg-mediterranean { background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%); }
    .bg-seafood { background: linear-gradient(135deg, #2980B9 0%, #1ABC9C 100%); }
    .bg-steakhouse { background: linear-gradient(135deg, #7F8C8D 0%, #2C3E50 100%); }
    .bg-french  { background: linear-gradient(135deg, #8E44AD 0%, #2980B9 100%); }
    .bg-greek   { background: linear-gradient(135deg, #2980B9 0%, #16A085 100%); }
    .bg-pizza   { background: linear-gradient(135deg, #E74C3C 0%, #E67E22 100%); }
    .bg-default { background: linear-gradient(135deg, #E8553A 0%, #FF8F6B 100%); }

    /* ─── ORDER BUTTONS (match screen only) ──────────────────────────────── */
    .match-order-btns {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 320px;
      flex-wrap: wrap;
    }
    .order-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 1;
      font-size: 15px;
      font-weight: 600;
      font-family: 'Space Grotesk', sans-serif;
      padding: 14px 20px;
      border-radius: 14px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .order-btn:active { transform: scale(0.96); }
    .order-btn-delivery {
      background: rgba(232,85,58,0.1);
      color: var(--flame);
      border: 2px solid rgba(232,85,58,0.25);
    }
    .order-btn-delivery:hover { background: rgba(232,85,58,0.18); transform: translateY(-1px); }
    .order-btn-pickup {
      background: rgba(45,184,122,0.1);
      color: var(--accent-green);
      border: 2px solid rgba(45,184,122,0.25);
    }
    .order-btn-pickup:hover { background: rgba(45,184,122,0.18); transform: translateY(-1px); }
    .order-btn-website {
      display: inline-flex; align-items: center; gap: 6px; justify-content: center;
      background: rgba(99,102,241,0.1); color: #6366f1;
      border: 2px solid rgba(99,102,241,0.25);
      font-size: 15px; font-weight: 600; padding: 14px 20px; border-radius: 14px;
      cursor: pointer; text-decoration: none; width: 100%; max-width: 320px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .order-btn-website:hover { background: rgba(99,102,241,0.18); transform: translateY(-1px); }
    .order-btn-reserve {
      background: rgba(45,184,122,0.1);
      color: var(--accent-green);
      border: 2px solid rgba(45,184,122,0.25);
    }
    .order-btn-reserve:hover { background: rgba(45,184,122,0.18); transform: translateY(-1px); }
    .order-btn-phone {
      display: inline-flex; align-items: center; gap: 6px; justify-content: center;
      background: rgba(234,179,8,0.1); color: #ca8a04;
      border: 2px solid rgba(234,179,8,0.25);
      font-size: 15px; font-weight: 600; padding: 14px 20px; border-radius: 14px;
      cursor: pointer; text-decoration: none; width: 100%; max-width: 320px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .order-btn-phone:hover { background: rgba(234,179,8,0.18); transform: translateY(-1px); }
    .order-btn-directions {
      display: inline-flex; align-items: center; gap: 6px; justify-content: center;
      background: rgba(16,185,129,0.1); color: #059669;
      border: 2px solid rgba(16,185,129,0.25);
      font-size: 15px; font-weight: 600; padding: 14px 20px; border-radius: 14px;
      cursor: pointer; text-decoration: none; width: 100%; max-width: 320px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .order-btn-directions:hover { background: rgba(16,185,129,0.18); transform: translateY(-1px); }
    #match-action-btns {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 320px;
      margin-bottom: 4px;
    }
    @media (min-width: 480px) {
      #match-action-btns { flex-direction: row; flex-wrap: wrap; }
      #match-action-btns .order-btn { flex: 1; min-width: 120px; max-width: none; width: auto; }
    }

    @media (min-width: 480px) {
      .card-stack { height: 500px; }
      .card-photo { height: 220px; }
    }

    /* ─── DARK THEME OVERRIDES ────────────────────────────────────────────── */
    /* Replaces all hardcoded white/light backgrounds with dark surface colors */
    .away-btn, .dining-mode-pill,
    .btn-nope, .btn-yes,
    .invite-link-box,
    .card-info-wrap, .done-invite-box,
    .gallery-submit-box,
    .match-restaurant-card {
      background: #1a1a22 !important;
      border-color: rgba(255,255,255,0.1) !important;
    }
    .btn-nope { color: var(--flame) !important; }
    .btn-nope:hover { background: rgba(249,115,22,0.1) !important; }
    .btn-yes { color: var(--accent-green) !important; }
    .away-modal-box {
      background: #1a1a22 !important;
      border: 1px solid rgba(255,255,255,0.1) !important;
    }
    .invite-link-box {
      border: 2px solid rgba(249,115,22,0.25) !important;
    }
    /* Card overlay (match screen) */
    .match-overlay-inner, .session-card-overlay {
      background: #0a0a0d !important;
    }
  
/* Shared card hierarchy on discovery, previews and successful matches. */
.card-badge-row{display:flex;align-items:center;justify-content:center;margin:5px 0 8px;clear:both}.card-badge-row .tier-badge{max-width:100%;white-space:normal;text-align:center}

/* One consistent paid-partner badge row in both swipe and successful-match cards. */
.tier-badge-exclusive{display:inline-flex;align-items:center;background:linear-gradient(110deg,#26154b,#5334a2);border:1px solid #b99cff;color:#f2eaff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:11px;letter-spacing:.045em;box-shadow:0 2px 12px rgba(140,94,220,.25)}

/* Use the owner sample's orange-to-pink treatment for diner match actions. */
#match-screen :is(.order-btn,.god-btn,.share-friends-btn,.sms-btn,.share-photo-btn,.new-session-btn){background:linear-gradient(110deg,#f97316,#ec4899);color:#fff;border:1px solid transparent;box-shadow:0 4px 16px rgba(249,115,22,.22)}
#match-screen :is(.order-btn,.god-btn,.share-friends-btn,.sms-btn,.share-photo-btn,.new-session-btn):hover{background:linear-gradient(110deg,#f97316,#ec4899);color:#fff;filter:brightness(1.08)}
#match-screen :is(.order-btn,.god-btn,.share-friends-btn,.sms-btn,.share-photo-btn,.new-session-btn):focus-visible{outline:3px solid #fff;outline-offset:3px}
#match-screen button:disabled{opacity:.5;cursor:default}