/* ============================================================================
   VENTURE — visual design system
   Premium / playful / cinematic / minimal / experimental-lab feel.
   Dark base, one warm accent, restrained motion, strong type hierarchy.
   ========================================================================= */

:root {
  --bg:        #08080f;
  --bg-2:      #121220;
  --surface:   #16162a;
  --surface-2: #1d1d38;
  --border:    #29293f;
  --text:      #f5f4fb;
  --text-dim:  #aeacc4;
  --text-faint:#736f92;

  --accent:      #ff5d3a;   /* warm ember — the primary action color */
  --accent-soft: #ff8a63;
  --accent-glow: rgba(255, 93, 58, 0.35);

  --novelty-popular: #5fd68a;
  --novelty-hidden:  #f4c752;
  --novelty-wtf:     #ff5d8f;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --shadow-lift: 0 24px 70px -22px rgba(0,0,0,0.65);
  --shadow-soft: 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.05), 0 18px 50px -18px rgba(255,93,58,0.4);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(ellipse 90% 50% at 15% -8%, rgba(255,93,58,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 120% 80% at 85% 0%, #1e1a38 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  touch-action: pan-y;
}
body { width: 100%; }
/* Global button reset: without this, any button that doesn't explicitly set
   its own background/border falls back to the browser's native button
   chrome (light gray, embossed border) — exactly what was happening to the
   bottom nav items, which broke the dark theme on every single screen. */
button {
  font-family: inherit; cursor: pointer; background: none; border: none;
  color: inherit; margin: 0; -webkit-appearance: none; appearance: none;
}
input, select { font-family: inherit; }
::selection { background: var(--accent-glow); }

/* Global press feedback: every interactive control compresses slightly on
   press so the whole app feels responsive under a thumb, not just the
   handful of buttons that had :active rules before. */
button, .v-chip, .v-interest-chip, .v-novelty-opt, .v-nav-btn, .v-tab {
  transition: transform 0.12s var(--ease-out), background-color 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
button:active, .v-chip:active, .v-interest-chip:active, .v-novelty-opt:active, .v-tab:active {
  transform: scale(0.96);
}

/* ---------------------------------------------------------------- topbar */
.v-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(8,8,15,0.68);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border);
}
.v-home-link {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--text-dim);
  border: 1px solid var(--border);
}
.v-home-link svg { width: 18px; height: 18px; }
.v-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.v-brand-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.12em; color: var(--text);
}
.v-brand-sub {
  font-size: 11.5px; color: var(--text-faint); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* all icon-only buttons hold to a 44x44 minimum tap target (Apple HIG /
   WCAG target size) — the old 36px box was the kind of thing that reads
   fine on a mouse cursor and feels fiddly under a real thumb. */
.v-icon-btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim);
}
.v-icon-btn svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------------- main */
/* padding-bottom tracks the real, measured bottom-nav height (set by JS as
   --bottomnav-h) instead of a guessed fixed number — on iPhones with a home
   indicator / safe-area inset the nav is taller than a flat 120px guess,
   which was clipping the last item in every scrollable list and hiding
   controls behind the nav bar. This single fix applies to every view. */
#v-main { max-width: 640px; margin: 0 auto; padding: 0 0 calc(28px + var(--bottomnav-h, 70px)); }
/* Home view needs extra bottom clearance so its form content can scroll
   fully clear of the now-fixed (not sticky) CTA bar sitting on top of it. */
#view-home { padding-bottom: 110px; }
.v-view { display: none; }
/* IMPORTANT: view containers must animate opacity ONLY, never transform.
   Any transform value — including an identity translateY(0) left behind by
   animation-fill-mode:both once the animation ends — causes the element to
   establish a new containing block for its position:fixed descendants per
   the CSS spec. #view-home contains .v-sticky-cta (position:fixed), and a
   transform on its ancestor silently rebased "fixed" to be relative to that
   ancestor's box instead of the viewport, pushing the primary CTA button
   far down the page until the user scrolled almost to the bottom. Keep
   this animation transform-free so position:fixed always resolves against
   the real viewport. */
.v-view-active { display: block; animation: v-view-in 0.3s ease both; }
@keyframes v-view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------- home hero */
.v-hero { padding: 40px 20px 18px; text-align: left; animation: v-hero-in 0.5s var(--ease-out) both; }
@keyframes v-hero-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.v-headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 9vw, 46px); line-height: 1.06; margin: 0 0 12px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, #cfcbe8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v-subtext { color: var(--text-dim); font-size: 16px; line-height: 1.5; margin: 0; max-width: 46ch; }

/* ------------------------------------------------------------------ form */
.v-form { padding: 6px 20px 4px; display: flex; flex-direction: column; gap: 26px; }
.v-field { display: flex; flex-direction: column; gap: 10px; }
.v-label {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: space-between;
}
.v-distance-value { color: var(--accent-soft); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13.5px; }

.v-input {
  width: 100%; min-width: 0; padding: 14px 16px;
  /* 16px is the iOS Safari zoom threshold — anything smaller and the browser
     force-zooms the whole page on focus, which reads as "broken" on mobile.
     Every text input/select in the app must stay at 16px minimum. */
  font-size: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); outline: none; transition: border-color 0.15s;
}
.v-input:focus { border-color: var(--accent-soft); }
.v-location-row { display: flex; gap: 8px; }
.v-location-row .v-input { flex: 1; min-width: 0; }
.v-loc-btn {
  flex: 0 0 auto; width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-dim);
}
.v-loc-btn svg { width: 20px; height: 20px; }
.v-loc-btn.v-active { color: var(--accent); border-color: var(--accent); }

.v-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.v-chip {
  padding: 12px 16px; min-height: 44px; font-size: 14px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.v-chip.v-chip-selected {
  background: var(--accent); border-color: var(--accent); color: #1a0d08; font-weight: 700;
  box-shadow: 0 4px 16px -4px var(--accent-glow);
  animation: v-chip-pop 0.3s var(--ease-spring);
}
@keyframes v-chip-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

.v-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--pct, 50%), var(--surface-2) var(--pct, 50%), var(--surface-2) 100%);
  outline: none;
}
.v-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--accent); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.v-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--text);
  border: 3px solid var(--accent); cursor: pointer;
}

.v-interest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.v-interest-chip {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 13.5px; font-weight: 500; text-align: left;
}
.v-interest-chip span:first-child { font-size: 17px; }
.v-interest-chip.v-chip-selected {
  background: var(--surface-2); border-color: var(--accent-soft); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
  animation: v-chip-pop 0.3s var(--ease-spring);
}
.v-interest-surprise { grid-column: span 2; justify-content: center; background: linear-gradient(135deg, var(--surface), var(--surface-2)); }
.v-interest-surprise.v-chip-selected { border-color: var(--accent); background: linear-gradient(135deg, rgba(255,93,58,0.18), var(--surface-2)); }

.v-novelty-field { gap: 12px; }
.v-novelty-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v-novelty-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 68px;
  padding: 16px 6px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md);
}
.v-novelty-opt.v-novelty-selected { animation: v-chip-pop 0.3s var(--ease-spring); }
.v-novelty-emoji { font-size: 22px; }
.v-novelty-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.v-novelty-sub { font-size: 10.5px; color: var(--text-faint); text-align: center; line-height: 1.3; }
.v-novelty-opt.v-novelty-selected[data-novelty="popular"] { border-color: var(--novelty-popular); box-shadow: 0 0 0 3px rgba(95,214,138,0.15); }
.v-novelty-opt.v-novelty-selected[data-novelty="hidden"] { border-color: var(--novelty-hidden); box-shadow: 0 0 0 3px rgba(244,199,82,0.15); }
.v-novelty-opt.v-novelty-selected[data-novelty="wtf"] { border-color: var(--novelty-wtf); box-shadow: 0 0 0 3px rgba(255,93,143,0.15); }

.v-secondary-link {
  align-self: flex-start; color: var(--text-dim); font-size: 14px; font-weight: 500;
  padding: 8px 0; border-bottom: 1px dashed var(--border); display: flex; align-items: center; gap: 8px;
}
.v-history-count {
  background: var(--accent); color: #1a0d08; font-weight: 700; font-size: 11px;
  padding: 1px 7px; border-radius: 999px;
}

/* ------------------------------------------------- progressive disclosure */
/* "More preferences" starts collapsed so the home screen only asks for
   location, time, budget, and novelty — four inputs, not seven — before
   FIND SOMETHING is usable. Group size / distance / interests are optional
   refinements, not gatekeeping requirements. */
.v-more-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; min-height: 44px; background: transparent; border: none;
  color: var(--text-faint); font-size: 13.5px; font-weight: 600;
}
.v-more-chevron { width: 16px; height: 16px; transition: transform 0.2s; }
.v-more-toggle.v-more-open .v-more-chevron { transform: rotate(180deg); }
.v-more-panel { display: flex; flex-direction: column; gap: 26px; padding-top: 4px; animation: v-fade-in 0.25s ease both; }
.v-optional-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); background: var(--surface-2); padding: 2px 8px; border-radius: 999px;
}

/* ------------------------------------------------------------- sticky cta */
/* FIXED, not sticky: with `position: sticky`, the CTA only docks once the
   page has been scrolled far enough that its natural in-flow position meets
   the sticky offset — on a form taller than one screen (which this one is,
   especially with More Preferences open), that meant the single most
   important action in the whole app was invisible until the user scrolled
   almost to the bottom. `position: fixed` keeps it permanently docked above
   the bottom nav regardless of scroll position, matching the brief's "large,
   visually dominant... the obvious action on the page" requirement. Bottom
   offset still tracks the measured --bottomnav-h so it never overlaps the nav. */
.v-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: var(--bottomnav-h, 0px); z-index: 30;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--bg) 75%, transparent);
  display: flex; flex-direction: column; gap: 10px;
  max-width: 640px; margin: 0 auto;
}
.v-cta-main {
  position: relative; overflow: hidden;
  width: 100%; padding: 19px; border-radius: var(--radius-md); border: none;
  background: linear-gradient(135deg, var(--accent) 0%, #ff7a49 55%, #ff8f5a 100%);
  color: #1a0d08; font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 0 20px 50px -16px rgba(255,93,58,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.v-cta-main:active { transform: scale(0.97); }
/* subtle animated sheen sweeping across the button so the single most
   important action on the page reads as alive, not static */
.v-cta-main::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: v-cta-sheen 3.2s ease-in-out infinite;
}
@keyframes v-cta-sheen { 0% { left: -60%; } 35%, 100% { left: 140%; } }
.v-cta-sparkle { font-size: 18px; display: inline-block; animation: v-sparkle-pulse 1.8s ease-in-out infinite; }
@keyframes v-sparkle-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.15) rotate(8deg); opacity: 0.85; } }
.v-dice { font-size: 19px; display: inline-block; }
.v-cta-secondary {
  width: 100%; padding: 13px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  font-weight: 600; font-size: 14px;
}
.v-cta-secondary:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- discovery */
.v-discovery-wrap {
  min-height: calc(100vh - 60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 20px; text-align: center;
}
/* Radar effect: concentric rings expand and fade outward from the dice,
   like Venture is actively scanning for something — reinforces "searching"
   rather than "loading a page". Pure CSS, cheap to run, GPU-friendly. */
.v-discovery-radar { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
.v-radar-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--accent-soft);
  opacity: 0;
  animation: v-radar-pulse 2.1s ease-out infinite;
}
@keyframes v-radar-pulse {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.v-discovery-dice {
  position: relative; z-index: 1; font-size: 56px;
  animation: v-spin-roll 1.1s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(255,93,58,0.35));
}
@keyframes v-spin-roll {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-14deg) scale(1.05); }
  50% { transform: rotate(10deg) scale(0.98); }
  75% { transform: rotate(-6deg) scale(1.03); }
}
.v-discovery-line {
  font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--text);
  min-height: 28px;
  animation: v-fade-in 0.3s ease both;
}
.v-discovery-progress { width: 220px; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.v-discovery-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width 0.4s var(--ease-out); }
/* Teaser chips: small facts about the pick surface one at a time during the
   search animation ("Hidden Gem", "24 min", "Nature") so it feels like real
   information is being assembled, not a spinner stalling for time. */
.v-discovery-teasers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 34px; max-width: 280px; }
.v-discovery-teaser {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  animation: v-teaser-in 0.35s var(--ease-spring) both;
}
@keyframes v-teaser-in { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ------------------------------------------------------------------ result */
/* The recommendation is the whole product. Every dimension here is bigger
   and bolder than the rest of the app on purpose — this is the "holy shit"
   moment the app exists to produce, everything else is supporting cast. */
.v-result-wrap { padding: 0 0 20px; }
.v-result-badge {
  margin: 18px 20px 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-soft);
  animation: v-fade-in 0.4s var(--ease-out) both;
}
.v-result-direction-note {
  margin: 4px 20px 14px; font-size: 13px; color: var(--text-faint); font-style: italic;
}
.v-hero-art {
  margin: 14px 16px 0; height: 44vh; min-height: 260px; max-height: 400px;
  border-radius: var(--radius-xl); position: relative; overflow: hidden;
  box-shadow: var(--shadow-lift);
  animation: v-hero-reveal 0.55s var(--ease-out) both;
}
@keyframes v-hero-reveal { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.v-hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%);
}
.v-novelty-score {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(8,8,15,0.75); backdrop-filter: blur(10px);
  border-radius: 16px; padding: 10px 16px; text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
  animation: v-score-pop 0.5s 0.15s var(--ease-spring) both;
}
@keyframes v-score-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
.v-novelty-score-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1; color: var(--accent-soft); }
.v-novelty-score-label { display: block; font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.v-result-title-block { position: relative; margin: -60px 20px 0; z-index: 2; animation: v-fade-in 0.5s 0.1s var(--ease-out) both; }
.v-result-name { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.12; margin: 0 0 6px; text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.v-result-loc { color: var(--text-dim); font-size: 14.5px; margin: 0; display: flex; align-items: center; gap: 6px; }

.v-result-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 20px 20px 0; padding: 0;
  animation: v-fade-in 0.5s 0.18s var(--ease-out) both;
}
.v-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 14px;
}
.v-stat-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.v-stat-value { font-size: 15.5px; font-weight: 700; margin-top: 3px; }

.v-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 20px 0; animation: v-fade-in 0.5s 0.24s var(--ease-out) both; }
.v-exp-tag { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }

.v-why-section {
  margin: 24px 20px 0; padding: 20px; background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  animation: v-fade-in 0.5s 0.3s var(--ease-out) both;
  position: relative; overflow: hidden;
}
.v-why-section::before {
  content: ''; position: absolute; top: -40%; right: -20%; width: 60%; height: 140%;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.v-why-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 4px; position: relative; }
.v-why-context { font-size: 12.5px; color: var(--text-faint); margin: 0 0 14px; line-height: 1.5; position: relative; }
.v-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; position: relative; }
.v-why-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.v-why-list li::before { content: "✓"; color: var(--novelty-popular); font-weight: 700; flex: 0 0 auto; }

.v-blurb { margin: 18px 20px 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); animation: v-fade-in 0.5s 0.34s var(--ease-out) both; }

.v-info-grid-title { margin: 24px 20px 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.v-info-list { margin: 0 20px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.v-info-row { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.v-info-row:last-child { border-bottom: none; }
.v-info-row span:first-child { color: var(--text-faint); }
.v-info-row span:last-child { color: var(--text); font-weight: 500; text-align: right; }

.v-itinerary-toggle { margin: 20px 20px 0; }
.v-itinerary-link {
  width: 100%; padding: 14px; border-radius: var(--radius-md); background: var(--surface-2);
  border: 1px dashed var(--border); color: var(--accent-soft); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.v-result-actions { margin: 28px 20px 0; display: flex; flex-direction: column; gap: 10px; animation: v-fade-in 0.5s 0.4s var(--ease-out) both; }
.v-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-btn {
  padding: 16px; border-radius: var(--radius-md); font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border);
  min-height: 52px;
}
.v-btn-interested {
  background: linear-gradient(135deg, var(--accent) 0%, #ff8449 100%); color: #1a0d08; border: none;
  font-size: 15.5px; box-shadow: 0 16px 40px -14px rgba(255,93,58,0.5);
}
.v-btn-interested.v-btn-liked {
  animation: v-like-pop 0.4s var(--ease-spring);
}
@keyframes v-like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.v-btn-another { background: var(--surface); color: var(--text); }
.v-btn-notforme { background: var(--surface); color: var(--text-dim); }
.v-btn-share { background: var(--surface); color: var(--text); }
.v-btn-directions { background: var(--surface-2); color: var(--text); }
.v-btn-website { background: transparent; color: var(--text-dim); border-style: dashed; }
.v-different-direction { text-align: center; font-size: 13px; color: var(--text-faint); margin: 14px 20px 0; font-style: italic; }
.v-saved-toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border: 1px solid var(--accent-soft); color: var(--text);
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all 0.3s var(--ease-out); z-index: 60; box-shadow: var(--shadow-lift);
  display: flex; align-items: center; gap: 6px;
}
.v-saved-toast.v-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------- hero art gradients (per-experience "art" key) */
.v-art-ember      { background: linear-gradient(135deg, #ff6a3d, #ff2e63 60%, #3a0e2e); }
.v-art-marsh      { background: linear-gradient(135deg, #3d6b4f, #1c3d2e 60%, #0d1f18); }
.v-art-stage      { background: linear-gradient(135deg, #6b2fb3, #2a0e4d 60%, #14071f); }
.v-art-track      { background: linear-gradient(135deg, #2b2b3d, #ff5d3a 60%, #14141f); }
.v-art-vault      { background: linear-gradient(135deg, #4a4a2a, #8a7a1a 60%, #1a1a10); }
.v-art-ocean      { background: linear-gradient(135deg, #1a5b7a, #0d2f47 60%, #04141f); }
.v-art-coast      { background: linear-gradient(135deg, #2d8a7a, #114a42 60%, #06201c); }
.v-art-target     { background: linear-gradient(135deg, #b34a2f, #4a1a0f 60%, #1a0805); }
.v-art-clay       { background: linear-gradient(135deg, #b3703f, #6b3a1a 60%, #2b160a); }
.v-art-gallery    { background: linear-gradient(135deg, #4a4a6b, #1e1e35 60%, #0d0d1a); }
.v-art-disco      { background: linear-gradient(135deg, #ff2e9a, #6b2fb3 60%, #14071f); }
.v-art-neon       { background: linear-gradient(135deg, #ff2e9a, #2b2fb3 60%, #0d0621); }
.v-art-lab        { background: linear-gradient(135deg, #2fb3a0, #1a4a6b 60%, #071a26); }
.v-art-oddity     { background: linear-gradient(135deg, #4a2f6b, #1a0f2b 60%, #080510); }
.v-art-market     { background: linear-gradient(135deg, #d68a2f, #6b3a14 60%, #2b1608); }
.v-art-noodle     { background: linear-gradient(135deg, #d6a02f, #6b4a14 60%, #2b1e08); }
.v-art-sushi      { background: linear-gradient(135deg, #2f6bd6, #14306b 60%, #08142b); }
.v-art-stars      { background: linear-gradient(135deg, #1a1a4a, #0d0d26 60%, #030309); }
.v-art-range      { background: linear-gradient(135deg, #5a6b3f, #2b3320 60%, #12160d); }
.v-art-drivein    { background: linear-gradient(135deg, #3a2f6b, #14102b 60%, #060512); }
.v-art-antique    { background: linear-gradient(135deg, #8a6b3f, #4a3a20 60%, #1e170d); }
.v-art-laser      { background: linear-gradient(135deg, #2fd6b3, #143a6b 60%, #08142b); }
.v-art-tidal      { background: linear-gradient(135deg, #2f8ad6, #143a5a 60%, #061826); }
.v-art-orchard    { background: linear-gradient(135deg, #a0b33f, #4a5a1a 60%, #1e260a); }
.v-art-planet     { background: linear-gradient(135deg, #3f2fb3, #14086b 60%, #060329); }
.v-art-dancefloor { background: linear-gradient(135deg, #d62f9a, #6b1450 60%, #2b0820); }
.v-art-canyon     { background: linear-gradient(135deg, #6b8a3f, #2f4a1e 60%, #12200a); }
.v-art-vr         { background: linear-gradient(135deg, #2fb3d6, #143a6b 60%, #06182b); }
.v-art-zen        { background: linear-gradient(135deg, #b39f6b, #4a4020 60%, #1e1a0d); }
.v-art-circus     { background: linear-gradient(135deg, #d6472f, #6b1e14 60%, #2b0c08); }
.v-art-cheese     { background: linear-gradient(135deg, #d6b32f, #6b5a14 60%, #2b2308); }
.v-art-climb      { background: linear-gradient(135deg, #6b4a3f, #2b1e1a 60%, #120d0a); }
.v-art-brewery    { background: linear-gradient(135deg, #b3702f, #5a3714 60%, #241608); }
.v-art-rooftop    { background: linear-gradient(135deg, #2f4ab3, #14205a 60%, #060c26); }
.v-art-press      { background: linear-gradient(135deg, #6b3f2f, #2b1a14 60%, #120a08); }
.v-art-boardwalk  { background: linear-gradient(135deg, #2fb3a0, #14705a 60%, #062e26); }
.v-art-aerial     { background: linear-gradient(135deg, #d62f6b, #6b1437 60%, #2b0816); }
.v-art-dimsum     { background: linear-gradient(135deg, #d6702f, #6b3714 60%, #2b1608); }
.v-art-vinyl      { background: linear-gradient(135deg, #4a2f2b, #1e1210 60%, #0a0605); }
.v-art-garden     { background: linear-gradient(135deg, #3f8a3f, #1e4a1e 60%, #0d200d); }
.v-art-butterfly  { background: linear-gradient(135deg, #d6472f, #d6a02f 60%, #2b1608); }
.v-art-arcade     { background: linear-gradient(135deg, #2f2fb3, #b32f8a 60%, #14071f); }
.v-art-longexposure { background: linear-gradient(135deg, #1a1a4a, #4a2f6b 60%, #060512); }

/* ----------------------------------------------------------------- modals */
.v-modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(6,6,10,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: v-fade-in 0.2s ease both;
}
/* CRITICAL: the class rule above sets display:flex, which silently overrides
   the browser's built-in `[hidden] { display: none }` rule at equal
   specificity (the later rule in the stylesheet wins). Without this line,
   any overlay marked hidden in the HTML (share modal, not-for-me modal)
   renders fully visible and un-clickable-through on page load — exactly the
   "permanently stuck on Share screen, nothing responds" bug. This selector
   has higher specificity than the bare class rule, so it always wins. */
.v-modal-overlay[hidden] { display: none; }
.v-modal {
  width: 100%; max-width: 640px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
  animation: v-modal-slide-up 0.3s var(--ease-out) both;
}
@keyframes v-modal-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.v-modal::before {
  content: ''; display: block; width: 36px; height: 4px; border-radius: 999px;
  background: var(--border); margin: 0 auto 18px;
}
.v-modal h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 6px; }
.v-modal-sub { color: var(--text-faint); font-size: 13px; margin: 0 0 16px; }
.v-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.v-modal-x { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--text-dim); font-size: 15px; }
.v-modal-options { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.v-modal-options button {
  padding: 16px 14px; min-height: 48px; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 14.5px;
}
.v-modal-options button:active { background: var(--surface-2); }
.v-modal-cancel { width: 100%; padding: 16px; min-height: 48px; text-align: center; color: var(--text-faint); font-size: 14px; }
.v-share-link-row { display: flex; gap: 8px; margin-bottom: 16px; }

/* ------------------------------------------------------------- history modal */
.v-modal-large { padding-top: 20px; }
#history-search { margin-bottom: 10px; }
.v-history-add-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 14px;
}
.v-history-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.v-history-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.v-history-item-name { font-size: 14.5px; font-weight: 500; }
.v-history-item-feedback { display: flex; gap: 6px; }
.v-history-feedback-btn {
  width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 15px; border: 1px solid var(--border);
}
.v-history-feedback-btn.v-fb-active { border-color: var(--accent); background: var(--accent-glow); }

/* ------------------------------------------------------------------ itinerary */
.v-itinerary-wrap { padding: 20px; }
.v-itinerary-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 10px 0 20px; }
.v-itinerary-steps { display: flex; flex-direction: column; }
.v-itin-step { display: flex; gap: 14px; padding-bottom: 24px; position: relative; animation: v-fade-in 0.35s var(--ease-out) both; }
.v-itin-step:nth-child(1) { animation-delay: 0.05s; } .v-itin-step:nth-child(2) { animation-delay: 0.1s; }
.v-itin-step:nth-child(3) { animation-delay: 0.15s; } .v-itin-step:nth-child(4) { animation-delay: 0.2s; }
.v-itin-step:nth-child(5) { animation-delay: 0.25s; }
.v-itin-step:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 30px; bottom: 0; width: 2px; background: var(--border);
}
.v-itin-time { flex: 0 0 56px; font-weight: 700; font-size: 12.5px; color: var(--accent-soft); padding-top: 6px; }
.v-itin-dot { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 17px; z-index: 1; }
.v-itin-body { padding-top: 6px; }
.v-itin-label { font-weight: 600; font-size: 14.5px; }
.v-itin-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.v-itinerary-back { margin-top: 10px; }

/* ---------------------------------------------------------------- page titles */
.v-page-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; padding: 24px 20px 2px; margin: 0; }
.v-page-subtitle { color: var(--text-faint); font-size: 14px; padding: 0 20px; margin: 0 0 4px; }

/* ------------------------------------------------------------------- tabbar */
.v-tabbar { display: flex; gap: 6px; padding: 14px 20px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-tab {
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap;
  flex: 0 0 auto;
}
.v-tab-active { background: var(--accent); border-color: var(--accent); color: #1a0d08; box-shadow: 0 6px 16px -6px var(--accent-glow); }

/* --------------------------------------------------------------- adventures grid */
/* Saved is a visual collection, not a database table: two-column grid of
   image-forward cards rather than thin text rows, per redesign item #7. */
.v-adventures-grid { padding: 10px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v-adv-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; animation: v-fade-in 0.3s var(--ease-out) both;
}
.v-adv-thumb { width: 100%; height: 100px; flex: 0 0 auto; position: relative; }
.v-adv-feedback {
  position: absolute; top: 8px; right: 8px; font-size: 14px; background: rgba(8,8,15,0.65);
  backdrop-filter: blur(6px); width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.v-adv-info { flex: 1; min-width: 0; padding: 10px 12px 12px; }
.v-adv-name { font-weight: 700; font-size: 13.5px; margin: 0 0 3px; line-height: 1.25; }
.v-adv-meta { font-size: 11px; color: var(--text-faint); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------- timeline */
.v-timeline { padding: 6px 20px 20px; }
.v-timeline-year { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 18px 0 6px; color: var(--text-faint); }
.v-timeline-month { font-weight: 600; font-size: 14px; color: var(--accent-soft); margin: 14px 0 8px; }
.v-timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.v-timeline-emoji { font-size: 18px; }
.v-timeline-name { font-weight: 600; font-size: 14.5px; }
.v-timeline-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ------------------------------------------------------------------------ profile */
.v-profile-section { padding: 8px 20px 20px; border-bottom: 1px solid var(--border); }
.v-profile-section h3 { font-family: var(--font-display); font-size: 15px; margin: 10px 0 14px; }
.v-profile-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.v-profile-value { color: var(--accent-soft); font-weight: 700; }
.v-select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 10px;
  padding: 8px 10px; font-size: 13.5px;
}
.v-dislike-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.v-dislike-chip {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text-dim);
}
.v-dislike-chip button { color: var(--text-faint); font-size: 14px; }
.v-dislike-input-row { display: flex; gap: 8px; }

/* --------------------------------------------------------------------- empty states */
.v-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 70px 30px; gap: 6px; animation: v-fade-in 0.4s var(--ease-out) both; }
.v-empty-emoji {
  font-size: 32px; margin-bottom: 14px; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, var(--surface-2), var(--surface));
  border: 1px solid var(--border); color: var(--accent-soft);
}
.v-empty-title { font-weight: 700; font-size: 18px; margin: 0; font-family: var(--font-display); }
.v-empty-sub { color: var(--text-faint); font-size: 14px; margin: 0 0 22px; max-width: 34ch; line-height: 1.5; }
.v-empty-cta { width: auto; padding: 15px 28px; }

/* ------------------------------------------------------------------------ bottom nav */
.v-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: rgba(8,8,15,0.8); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.v-bottomnav[hidden] { display: none; }
.v-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; color: var(--text-faint); font-size: 10.5px; font-weight: 600;
  position: relative;
}
.v-nav-btn svg { width: 22px; height: 22px; transition: transform 0.2s var(--ease-spring); }
.v-nav-active { color: var(--accent); }
.v-nav-active svg { transform: translateY(-1px) scale(1.06); }
.v-nav-active::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  animation: v-nav-dot-in 0.25s var(--ease-spring) both;
}
@keyframes v-nav-dot-in { from { opacity: 0; transform: translateX(-50%) scale(0); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* ------------------------------------------------------------------- my history */
.v-myhist-header { padding: 0 20px; }
.v-myhist-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 4px 0 18px; max-width: 46ch; }
.v-myhist-progress-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 4px; }
.v-myhist-progress-text { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
#myhist-reviewed-count { font-weight: 700; font-size: 14.5px; }
.v-myhist-progress-sub { font-size: 12.5px; color: var(--text-faint); }
.v-progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.v-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--novelty-popular)); transition: width 0.4s ease; }
.v-myhist-coverage { font-size: 12.5px; color: var(--accent-soft); margin: 8px 0 0; font-weight: 600; }

.v-myhist-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 0; align-items: center; }
.v-myhist-quick-btn { flex: 1 1 auto; min-width: 140px; white-space: nowrap; padding: 13px 16px; min-height: 44px; }
.v-myhist-toolbar .v-input { flex: 1 1 180px; min-width: 0; padding: 13px 14px; }
.v-myhist-filters { padding: 12px 20px 4px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.v-myhist-filters .v-chip { flex: 0 0 auto; }

.v-myhist-list { padding: 8px 20px 4px; display: flex; flex-direction: column; gap: 8px; }
/* Stacked layout: top row is image+name+meta, bottom row is the three
   actions at full width. A single horizontal row (image, text, 3 buttons)
   never fit on a 390px phone — this was overlapping and truncating badly. */
.v-myhist-item {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); animation: v-fade-in 0.3s var(--ease-out) both;
}
.v-myhist-item-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v-myhist-item-emoji {
  font-size: 20px; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--surface-2), var(--border));
}
.v-myhist-item-info { flex: 1; min-width: 0; }
.v-myhist-item-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.v-myhist-item-meta { font-size: 12px; color: var(--text-faint); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-myhist-item-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.v-myhist-btn {
  padding: 11px 10px; min-height: 44px; font-size: 12.5px; font-weight: 700; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); white-space: nowrap;
}
.v-myhist-btn-done.v-myhist-active { background: var(--novelty-popular); border-color: var(--novelty-popular); color: #072012; }
.v-myhist-btn-notdone.v-myhist-active { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); }
.v-myhist-btn-notinterested { font-size: 16px; padding: 11px 12px; color: var(--text-faint); background: transparent; border-style: dashed; }
.v-myhist-btn-notinterested.v-myhist-active { background: rgba(255,93,143,0.12); border-color: var(--novelty-wtf); color: var(--novelty-wtf); border-style: solid; }
.v-myhist-more-row { padding: 10px 20px 20px; }

/* ------------------------------------------------------------------- quick review */
.v-qr-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px; min-height: calc(100vh - 60px); text-align: center; }
.v-qr-exit { align-self: flex-start; margin-bottom: 14px; }
.v-qr-progress { color: var(--text-faint); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.v-qr-progress-track { width: 100%; max-width: 320px; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 26px; }
.v-qr-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--novelty-popular)); transition: width 0.3s var(--ease-out); }
.v-qr-prompt { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 24px; }
.v-qr-card {
  width: 100%; max-width: 320px; padding: 44px 24px; background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  animation: v-qr-pop 0.32s var(--ease-spring) both;
}
@keyframes v-qr-pop { from { opacity: 0; transform: scale(0.9) translateY(14px) rotate(-1.5deg); } to { opacity: 1; transform: scale(1) translateY(0) rotate(0); } }
/* Card exits in the direction of the answer — right/green for "yes",
   left/muted for "not yet" — so confirming an answer feels resolved before
   the next card appears, per the redesign's "satisfying interaction" ask. */
.v-qr-card-out-right { animation: v-qr-out-right 0.22s ease-in forwards !important; }
.v-qr-card-out-left { animation: v-qr-out-left 0.22s ease-in forwards !important; }
@keyframes v-qr-out-right { to { transform: translateX(120%) rotate(8deg); opacity: 0; } }
@keyframes v-qr-out-left { to { transform: translateX(-120%) rotate(-8deg); opacity: 0; } }
.v-qr-emoji { font-size: 52px; margin-bottom: 16px; }
.v-qr-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.v-qr-city { color: var(--text-faint); font-size: 14px; margin: 0 0 12px; }
.v-qr-category {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-soft); background: rgba(255,93,58,0.12); padding: 5px 12px; border-radius: 999px;
}
.v-qr-actions { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.v-qr-btn { padding: 19px; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 700; font-size: 15px; border: none; min-height: 56px; }
.v-qr-btn:active { transform: scale(0.96); }
.v-qr-yes { background: linear-gradient(135deg, var(--novelty-popular), #3fae6e); color: #072012; box-shadow: 0 12px 32px -12px rgba(95,214,138,0.5); }
.v-qr-no { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.v-qr-skip { margin-top: 16px; color: var(--text-faint); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ onboarding banner */
.v-onboard-banner {
  margin: 0 20px 20px; padding: 18px; background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--accent-glow); border-radius: var(--radius-lg); animation: v-fade-in 0.3s ease both;
}
.v-onboard-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; margin: 0 0 4px; }
.v-onboard-sub { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.45; }
.v-onboard-actions { display: flex; gap: 10px; }
.v-onboard-actions button { flex: 1; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; }
.v-onboard-build { background: var(--accent); border: none; color: #1a0d08; }
.v-onboard-skip { background: transparent; border: 1px solid var(--border); color: var(--text-faint); }

/* --------------------------------------------------------- recommendation-side done link */
.v-already-done-row { margin: 14px 20px 0; }
.v-already-done-link {
  width: 100%; padding: 12px; border-radius: var(--radius-sm); background: transparent;
  border: 1px dashed var(--border); color: var(--text-faint); font-size: 13px; font-weight: 500;
}

/* ------------------------------------------------------------------------ roll dice mode label */
.v-roll-context { margin: 18px 20px 0; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 14px; color: var(--text-dim); }
.v-roll-context strong { color: var(--text); }

/* --------------------------------------------------------------------------- responsive */
@media (min-width: 560px) {
  .v-interest-grid { grid-template-columns: repeat(3, 1fr); }
  .v-interest-surprise { grid-column: span 3; }
  .v-action-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  body { padding-bottom: 0; }
}