/* ==========================================================================
   You & Me — Commercial Photo Studio & Shared Activities Hub
   Palette: Light Blue (#EAF6FF, #D8EEFC, #2B6F9A) + Deep Ink (#143750)
   Typography: Instrument Serif, Plus Jakarta Sans, JetBrains Mono, Caveat
   ========================================================================== */

:root {
  --ink: #122d42;
  --ink-secondary: #43647d;
  --ink-muted: #6c8ca3;
  --blue-primary: #2b6f9a;
  --blue-hover: #1e5679;
  --blue-light: #eaf6ff;
  --blue-pale: #f4faff;
  --blue-accent: #68b5de;
  --blue-line: #cde3f2;
  --rose-accent: #e05a7a;
  --rose-light: #fff0f3;
  --amber-accent: #d99b26;
  --amber-light: #fef7e6;
  --mint-accent: #2e9685;
  --mint-light: #eaf8f5;
  --purple-accent: #7c65b8;
  --purple-light: #f3f0fc;
  --cream: #fbf8f1;
  --white: #ffffff;

  --shadow-xs: 0 1px 3px rgba(18, 45, 66, 0.05);
  --shadow-sm: 0 4px 14px rgba(18, 45, 66, 0.06);
  --shadow-md: 0 12px 32px rgba(18, 45, 66, 0.09);
  --shadow-lg: 0 24px 56px rgba(18, 45, 66, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --font-serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-script: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: linear-gradient(180deg, #f2f9ff 0%, #f9fcff 55%, #eff7fe 100%);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

/* ============================================================ */
/* GLOBAL HEADER & NAVIGATION BAR */
/* ============================================================ */
.app-header {
  height: 74px;
  padding: 0 clamp(16px, 3.5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--blue-line);
  background: rgba(246, 251, 255, 0.92);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 60;
  gap: 14px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand {
  font-family: var(--font-serif);
  font-size: 31px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.brand-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--blue-light);
  color: var(--blue-primary);
  border: 1px solid var(--blue-line);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* Primary Nav Bar */
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--blue-light);
  padding: 5px;
  border-radius: var(--radius-full);
  border: 1px solid var(--blue-line);
  overflow-x: auto;
  max-width: 100%;
}

.nav-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  border-radius: var(--radius-full);
  transition: all 0.16s ease;
  white-space: nowrap;
}

.nav-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.65);
}

.nav-btn.active {
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* 5-Step Shared Stepper Bar */
.studio-stepper-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-light);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--blue-line);
}

.stepper-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  transition: all 0.18s ease;
}

.stepper-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
}

.stepper-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-line);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.stepper-item.active {
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.stepper-item.active .stepper-num {
  background: var(--ink);
  color: var(--white);
}

.stepper-item.completed {
  color: var(--blue-primary);
}

.stepper-item.completed .stepper-num {
  background: var(--blue-primary);
  color: var(--white);
}

.stepper-arrow {
  font-size: 11px;
  color: var(--ink-muted);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.room-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--blue-accent);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--blue-primary);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

/* ============================================================ */
/* BUTTONS & BADGES */
/* ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: all 0.16s ease;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  box-shadow: 0 4px 12px rgba(18, 45, 66, 0.15);
}

.btn.primary:hover:not(:disabled) {
  background: var(--blue-primary);
  border-color: var(--blue-primary);
  transform: translateY(-1px);
}

.btn.secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--blue-line);
}

.btn.secondary:hover:not(:disabled) {
  background: var(--blue-light);
  border-color: var(--blue-accent);
}

.btn.ghost {
  background: rgba(234, 246, 255, 0.7);
  color: var(--blue-primary);
  border: 1px solid var(--blue-line);
}

.btn.ghost:hover {
  background: var(--blue-light);
  color: var(--ink);
}

.btn.btn-lg {
  padding: 14px 26px;
  font-size: 15px;
  border-radius: var(--radius-md);
}

.btn.btn-sm {
  padding: 7px 13px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.btn.btn-block {
  width: 100%;
}

.btn-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-primary);
  padding: 6px 10px;
}

.btn-text:hover {
  text-decoration: underline;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-full);
  margin-bottom: 18px;
  transition: all 0.15s ease;
}

.btn-back:hover {
  background: var(--blue-light);
  color: var(--ink);
}

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 8px;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--blue-light);
  color: var(--blue-primary);
  border: 1px solid var(--blue-line);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.telemetry-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--white);
  color: var(--ink-secondary);
  border: 1px solid var(--blue-line);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.subtext {
  color: var(--ink-secondary);
  font-size: 15px;
  max-width: 640px;
}

/* ============================================================ */
/* MAIN LAYOUT & CONTAINERS */
/* ============================================================ */
.app-main {
  max-width: 1340px;
  margin: 0 auto;
  padding: 28px clamp(16px, 3.5vw, 48px) 80px;
}

.center-panel {
  max-width: 620px;
  margin: 24px auto;
}

.card-box {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-md);
}

.card-box h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 8px;
}

/* ============================================================ */
/* VIEW 1: COMMERCIAL HOMEPAGE */
/* ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: clamp(28px, 4.5vw, 56px);
  padding: 20px 0 56px;
}

.hero-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(50px, 6.2vw, 82px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}

.hero-title .highlight {
  color: var(--blue-primary);
  font-style: italic;
}

.hero-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 560px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.hero-modes-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 10px 14px;
  background: rgba(234, 246, 255, 0.65);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  width: fit-content;
}

.modes-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-right: 4px;
}

.mode-chip {
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  transition: all 0.15s ease;
}

.mode-chip:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.trust-metrics {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-item strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.metric-item span {
  font-size: 12px;
  color: var(--ink-muted);
}

.metric-divider {
  width: 1px;
  height: 28px;
  background: var(--blue-line);
}

/* Hero Right Visual Showcase */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-stage {
  position: relative;
  width: 100%;
  min-height: 520px;
  background: radial-gradient(circle at 50% 45%, #d6ecfc 0%, #eaf6ff 62%, #f4faff 100%);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.showcase-strip {
  width: 268px;
  background: var(--white);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #d7e8f4;
  box-shadow: var(--shadow-lg);
  transform: rotate(-2.5deg);
  transition: transform 0.3s ease;
}

.showcase-strip:hover {
  transform: rotate(0deg) scale(1.02);
}

.showcase-strip-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-primary);
  margin-bottom: 10px;
}

.showcase-slot {
  height: 112px;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
  border: 1px solid #e2eef7;
}

.slot-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.slot-half {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.left-half {
  background: linear-gradient(160deg, #d7edfc 0%, #b5dbf5 100%);
  border-right: 1.5px solid var(--white);
}

.right-half {
  background: linear-gradient(160deg, #fce4ec 0%, #f5c6d6 100%);
}

.city-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  padding: 2px 5px;
  border-radius: 4px;
}

.avatar-illustration {
  width: 52px;
  height: 68px;
  border-radius: 26px 26px 0 0;
  background: var(--ink);
  position: relative;
}

.avatar-illustration::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 11px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
}

.right-half .avatar-illustration,
.right-half .avatar-illustration::before {
  background: #2b6f9a;
}

.pose-tag {
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(18, 45, 66, 0.78);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 4px;
}

.showcase-strip-footer {
  text-align: center;
  padding-top: 6px;
}

.strip-serif-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
}

.strip-mono-date {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.showcase-floating-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  max-width: 215px;
}

.showcase-floating-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-primary);
}

.card-top-right {
  top: 24px;
  right: 20px;
}

.card-bottom-left {
  bottom: 24px;
  left: 20px;
}

.mini-stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--blue-primary);
  border: 1px dashed var(--blue-primary);
  display: inline-block;
  padding: 2px 6px;
  margin-bottom: 4px;
}

.mini-route {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.mini-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-secondary);
  margin: 4px 0 6px;
}

.mini-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-primary);
}

.mini-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mint-accent);
  background: var(--mint-light);
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  margin-bottom: 4px;
}

.mini-score {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  line-height: 1.1;
}

.mini-sub {
  font-size: 11px;
  color: var(--ink-secondary);
  margin-top: 2px;
}

/* ============================================================ */
/* COMMERCIAL ACTIVITY DIRECTORY ON HOMEPAGE */
/* ============================================================ */
.section-block {
  padding: 48px 0 32px;
  border-top: 1px solid var(--blue-line);
}

.section-header-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 32px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.06;
  margin-bottom: 8px;
}

.section-sub {
  color: var(--ink-secondary);
  max-width: 600px;
  font-size: 15px;
}

.filter-pills, .choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-btn {
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  background: var(--white);
  color: var(--ink-secondary);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-full);
  transition: all 0.15s ease;
}

.pill-btn:hover {
  border-color: var(--blue-accent);
  color: var(--ink);
  background: var(--blue-pale);
}

.pill-btn.selected, .pill-btn.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.commercial-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-primary);
  box-shadow: var(--shadow-md);
}

.product-card.featured-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
}

.product-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.product-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.tag-blue { background: var(--blue-light); color: var(--blue-primary); }
.tag-amber { background: var(--amber-light); color: #9a6700; }
.tag-rose { background: var(--rose-light); color: var(--rose-accent); }
.tag-mint { background: var(--mint-light); color: var(--mint-accent); }
.tag-purple { background: var(--purple-light); color: var(--purple-accent); }

.product-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

.product-card h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--ink);
}

.product-card p {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.55;
  margin-bottom: 18px;
  flex-grow: 1;
}

.product-card-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.mini-chip {
  font-size: 11px;
  font-weight: 600;
  background: var(--blue-light);
  color: var(--ink-secondary);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

.product-card-footer {
  padding-top: 14px;
  border-top: 1px solid #e6f2fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cta-text {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue-primary);
}

/* Footer */
.app-footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--blue-line);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
}

.footer-tagline {
  font-size: 13px;
  color: var(--ink-muted);
}

.footer-links-col {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.footer-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ============================================================ */
/* VIEW 2: ACTIVITIES DIRECTORY */
/* ============================================================ */
.page-Hero-header {
  text-align: center;
  max-width: 680px;
  margin: 12px auto 40px;
}

.page-Hero-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 400;
  margin-bottom: 10px;
}

.page-Hero-header .subtext {
  margin: 0 auto;
}

.activities-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.dir-card {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.dir-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-primary);
}

.dir-card h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
}

.dir-card p {
  font-size: 14px;
  color: var(--ink-secondary);
  flex-grow: 1;
}

/* ============================================================ */
/* VIEW 3, 4, 5: SETUP, JOIN & WAITING ROOM */
/* ============================================================ */
.mode-tab-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--blue-light);
  padding: 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--blue-line);
  margin: 20px 0 24px;
}

.mode-tab {
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  transition: all 0.15s ease;
}

.mode-tab.selected {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.form-group {
  margin-bottom: 18px;
  text-align: left;
}

.form-group label, .control-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 8px;
}

input[type="text"], textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

input[type="text"]:focus, textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(43, 111, 154, 0.12);
}

.code-input {
  font-family: var(--font-mono);
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.color-picker-row {
  display: flex;
  gap: 10px;
}

.color-dot, .draw-color-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  transition: transform 0.15s ease;
}

.color-dot.selected, .draw-color-dot.selected {
  border-color: var(--ink);
  transform: scale(1.12);
}

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.theme-option {
  padding: 12px 14px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  background: var(--blue-pale);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s ease;
}

.theme-option:hover {
  border-color: var(--blue-accent);
}

.theme-option.selected {
  background: var(--blue-light);
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 2px rgba(43, 111, 154, 0.18);
}

.theme-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.theme-desc {
  font-size: 11px;
  color: var(--ink-muted);
}

.setup-alt-join {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--blue-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-secondary);
}

/* Waiting Lobby */
.room-code-display {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 18px;
  background: var(--blue-light);
  border: 2px dashed var(--blue-primary);
  border-radius: var(--radius-md);
  color: var(--ink);
  margin: 20px 0;
  text-align: center;
}

.inline-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.participants-list {
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.occupant-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-primary);
  margin-bottom: 8px;
}

.occupants-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.user-pill .dot, .collab-cursor-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.waiting-bypass-box {
  padding-top: 16px;
  border-top: 1px solid var(--blue-line);
}

.waiting-hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 8px;
}

/* ============================================================ */
/* STUDIO STEP 1: FRAME SELECTION */
/* ============================================================ */
.stepper-banner, .shoot-header, .pick-header, .style-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--blue-line);
}

.step-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue-primary);
  background: var(--blue-light);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 6px;
}

.stepper-banner h2, .shoot-header h2, .pick-header h2, .style-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400;
}

.collab-hint {
  font-size: 14px;
  color: var(--ink-secondary);
}

.frame-selector-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
}

.frame-controls-panel {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.control-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.choice-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.choice-card {
  padding: 16px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.choice-card:hover {
  border-color: var(--blue-accent);
}

.choice-card.selected {
  background: var(--blue-light);
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 2px rgba(43, 111, 154, 0.18);
}

.choice-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.choice-sub {
  font-size: 12px;
  color: var(--ink-secondary);
}

.color-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--blue-line);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.color-chip.selected {
  border: 3px solid var(--ink);
  transform: scale(1.1);
}

.collab-status-card {
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-secondary);
}

.collab-cursor-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.frame-preview-panel {
  background: var(--blue-light);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.mock-strip-preview {
  width: 260px;
  background: var(--white);
  padding: 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transition: all 0.25s ease;
}

.mock-header {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  color: var(--blue-primary);
  margin-bottom: 10px;
}

.mock-slots-grid {
  display: grid;
  gap: 8px;
}

.mock-slots-grid.grid-2x2 {
  grid-template-columns: 1fr 1fr;
}

.mock-slot {
  height: 76px;
  background: rgba(104, 181, 222, 0.18);
  border: 1px dashed var(--blue-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-primary);
}

.mock-footer {
  text-align: center;
  padding-top: 12px;
}

.mock-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
}

.mock-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ============================================================ */
/* STUDIO STEP 2: CAMERA & 6-SHOT BURST */
/* ============================================================ */
.shoot-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shots-counter {
  background: var(--blue-light);
  border: 1px solid var(--blue-line);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 14px;
}

.camera-stage {
  position: relative;
  background: #0d2233;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--blue-line);
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}

.video-grid.single-cam {
  grid-template-columns: 1fr;
}

.video-pane {
  position: relative;
  background: #102a3f;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.video-pane video,
.synth-video-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-pane video.mirrored {
  transform: scaleX(-1);
}

.video-pane-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(18, 45, 66, 0.82);
  color: var(--white);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  z-index: 5;
}

.video-pane-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(16, 42, 63, 0.88);
  color: #cbd5e1;
  font-size: 14px;
  z-index: 4;
}

.countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 34, 51, 0.35);
  z-index: 15;
}

.countdown-number {
  font-family: var(--font-serif);
  font-size: 130px;
  color: var(--white);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.camera-flash {
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.25s ease;
}

.camera-flash.active {
  opacity: 0.95;
}

.pose-challenge-card {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--blue-line);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  max-width: 90%;
}

.pose-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  background: var(--blue-light);
  color: var(--blue-primary);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pose-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.shoot-controls {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pose-category-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pills-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.shoot-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.captured-strip-tray {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 720px;
}

.tray-thumb {
  aspect-ratio: 3 / 2;
  background: var(--blue-pale);
  border: 1px dashed var(--blue-line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  overflow: hidden;
}

.tray-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================ */
/* STUDIO STEP 3: PICK PHOTOS */
/* ============================================================ */
.pick-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timer-badge {
  background: var(--blue-light);
  border: 1px solid var(--blue-line);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.pick-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid transparent;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.16s ease;
}

.pick-card:hover {
  transform: translateY(-2px);
}

.pick-card.selected {
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(43, 111, 154, 0.22);
}

.pick-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.pick-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(18, 45, 66, 0.8);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* ============================================================ */
/* STUDIO STEP 4: STYLE WORKBENCH */
/* ============================================================ */
.style-workbench {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

.canvas-container {
  background: var(--blue-light);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas-stage-wrap {
  position: relative;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}

#main-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.doodle-canvas-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.doodle-canvas-layer.drawing-active {
  pointer-events: auto;
  cursor: crosshair;
}

.sticker-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sticker-item {
  position: absolute;
  width: 64px;
  height: 64px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
}

.sticker-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-tools-panel {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.tool-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--blue-light);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.tool-tab {
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
}

.tool-tab.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.filter-card {
  padding: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.filter-card.selected {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.sticker-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.sticker-btn {
  aspect-ratio: 1;
  padding: 10px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.sticker-btn:hover {
  transform: scale(1.06);
  background: var(--blue-light);
}

.sticker-hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 12px;
}

.color-palette-10 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nib-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.nib-btn {
  padding: 9px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.nib-btn.selected {
  background: var(--ink);
  color: var(--white);
}

.draw-action-buttons {
  display: flex;
  gap: 10px;
}

.phrase-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phrase-chip {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-full);
  color: var(--ink-secondary);
}

.phrase-chip:hover {
  background: var(--blue-light);
  color: var(--ink);
}

/* ============================================================ */
/* STUDIO STEP 5: DONE & WALLPAPER STUDIO */
/* ============================================================ */
.done-container {
  max-width: 980px;
  margin: 0 auto;
}

.done-container h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 400;
  margin-bottom: 6px;
}

.done-workbench {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  margin-top: 24px;
  align-items: start;
}

.done-preview-wrap {
  background: var(--blue-light);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  justify-content: center;
}

#done-preview-canvas {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.done-options-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wallpaper-studio-card {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 24px;
}

.card-desc {
  font-size: 13px;
  color: var(--ink-secondary);
}

.done-action-links {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}

/* ============================================================ */
/* VIEW 6: DAILY SPARK (Couples & Friends) */
/* ============================================================ */
.activity-page-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.activity-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sparks-header, .quiz-header {
  margin-bottom: 24px;
}

.sparks-header h2, .quiz-header h2, .postcards-header h2, .decider-container h2 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 8px;
}

.category-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.spark-stage-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}

.spark-card-inner {
  background: linear-gradient(145deg, #ffffff 0%, #eaf6ff 100%);
  border: 1.5px solid var(--blue-line);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}

.spark-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spark-category-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--blue-primary);
  border: 1px solid var(--blue-line);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.spark-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.spark-prompt {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.28;
  color: var(--ink);
  margin: 28px 0;
}

.spark-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  border-top: 1px solid var(--blue-line);
  padding-top: 14px;
}

.spark-notes-box {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.notes-header h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 4px;
}

.notes-header p {
  font-size: 13px;
  color: var(--ink-secondary);
  margin-bottom: 14px;
}

.notes-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.saved-notes-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--blue-line);
}

.saved-notes-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.spark-saved-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.saved-note-item {
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.saved-note-prompt {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-primary);
  margin-bottom: 4px;
}

.saved-note-text {
  font-size: 14px;
  color: var(--ink);
}

.saved-note-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* ============================================================ */
/* VIEW 7: TWO-PLAYER SYNC QUIZ */
/* ============================================================ */
.quiz-pack-pills {
  margin-bottom: 24px;
}

.quiz-workbench {
  max-width: 820px;
}

.quiz-players-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--blue-line);
}

.quiz-player-input label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.quiz-vs-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue-primary);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.quiz-turn-banner {
  background: var(--blue-light);
  border: 1px solid var(--blue-accent);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 22px;
}

.quiz-question-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 20px;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quiz-option-btn {
  padding: 16px 18px;
  background: var(--blue-pale);
  border: 1.5px solid var(--blue-line);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.15s ease;
}

.quiz-option-btn:hover {
  background: var(--blue-light);
  border-color: var(--blue-primary);
  transform: translateY(-1px);
}

.quiz-results-box {
  text-align: center;
  padding: 16px 0;
}

.quiz-score-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--blue-light);
  border: 3px solid var(--blue-primary);
  color: var(--blue-primary);
  font-family: var(--font-serif);
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.quiz-comparison-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  text-align: left;
}

.quiz-comp-row {
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.quiz-comp-q {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.quiz-comp-answers {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-secondary);
}

/* ============================================================ */
/* VIEW 8: COMMERCIAL POSTCARD & BOARDING PASS STUDIO */
/* ============================================================ */
.postcards-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

.postcard-workbench {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 28px;
  align-items: start;
}

.postcard-preview-stage {
  position: sticky;
  top: 94px;
}

.postcard-canvas-wrap {
  background: var(--white);
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--blue-line);
  box-shadow: var(--shadow-lg);
}

#postcard-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.postcard-telemetry-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.postcard-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.control-group-card {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

.layout-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.layout-card {
  padding: 12px;
  background: var(--blue-pale);
  border: 1.5px solid var(--blue-line);
  border-radius: var(--radius-md);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.layout-card:hover {
  border-color: var(--blue-accent);
}

.layout-card.selected {
  background: var(--blue-light);
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 2px rgba(43, 111, 154, 0.16);
}

.layout-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.layout-card-desc {
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.35;
}

.design-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.design-card {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--blue-line);
  background: var(--blue-pale);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

.design-card:hover {
  border-color: var(--blue-accent);
}

.design-card.selected {
  background: var(--blue-light);
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 2px rgba(43, 111, 154, 0.16);
}

.design-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(18, 45, 66, 0.15);
  flex-shrink: 0;
}

.design-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.design-desc {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
}

.city-dual-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
}

.city-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-bottom: 4px;
}

.btn-swap-cities {
  width: 38px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--blue-light);
  border: 1px solid var(--blue-line);
  color: var(--blue-primary);
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-swap-cities:hover {
  background: var(--ink);
  color: var(--white);
}

.mini-status-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-primary);
  background: var(--blue-light);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.photo-upload-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ============================================================ */
/* VIEW 9: HANGOUT & DATE NIGHT WHEEL */
/* ============================================================ */
.decider-container {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.decider-container .subtext {
  margin: 0 auto 20px;
}

.decider-workbench {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 16px;
}

.wheel-stage {
  position: relative;
  width: min(390px, 88vw);
  height: min(390px, 88vw);
  margin: 0 auto;
}

#decider-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.wheel-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: var(--ink);
  z-index: 10;
}

.btn-spin-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.decider-result {
  background: var(--white);
  border: 2px solid var(--blue-accent);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.result-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--blue-primary);
  margin-bottom: 6px;
}

.result-title {
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 8px;
}

.result-desc {
  font-size: 14px;
  color: var(--ink-secondary);
}

.inline-inputs {
  display: flex;
  gap: 8px;
}

/* Toast Notice */
.toast-notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}

/* ============================================================ */
/* RESPONSIVE BREAKPOINTS */
/* ============================================================ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .commercial-activity-grid, .activities-directory-grid { grid-template-columns: repeat(2, 1fr); }
  .frame-selector-layout, .style-workbench, .done-workbench, .spark-stage-grid, .postcard-workbench, .decider-workbench {
    grid-template-columns: 1fr;
  }
  .postcard-preview-stage { position: static; }
}

@media (max-width: 680px) {
  .app-header { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .commercial-activity-grid, .activities-directory-grid, .choice-cards-row, .layout-selector-grid, .design-card-grid, .quiz-options-grid {
    grid-template-columns: 1fr;
  }
  .video-grid { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Quiet editorial direction: one main action, generous reading space, tactile paper. */
:root {
  --ink: #152f42;
  --ink-secondary: #486476;
  --ink-muted: #617b8c;
  --blue-primary: #397ba0;
  --blue-hover: #285f7c;
  --blue-light: #e4f1f8;
  --blue-pale: #f4f9fc;
  --blue-accent: #83b7d1;
  --blue-line: #d1e2eb;
  --shadow-sm: 0 8px 28px rgba(37, 69, 87, .045);
  --shadow-md: 0 16px 44px rgba(37, 69, 87, .08);
}
html, body { background: #f5fafc; }
.app-header { height: 76px; background: rgba(250,253,254,.96); border-bottom-color: #e0edf2; }
.brand { font-size: 32px; letter-spacing: -.035em; }
.header-nav { background: transparent; border: 0; padding: 0; gap: 2px; }
.nav-btn { color: #506a7b; padding: 9px 12px; font-weight: 600; }
.nav-btn.active { background: #e4f1f7; box-shadow: none; color: #173d54; }
.app-main { max-width: 1440px; padding-top: 0; }
.hero { min-height: 660px; grid-template-columns: 1fr 1fr; padding: 66px 0 84px; gap: clamp(50px,7vw,100px); }
.hero-content { max-width: 590px; }
.hero-pill-row { margin-bottom: 30px; }
.hero-pill-row .eyebrow-pill { padding: 0; border: 0; background: transparent; color: #547a8c; font-size: 10px; letter-spacing: .18em; }
.hero-pill-row .telemetry-pill { display: none; }
.hero-title { font-size: clamp(60px,6.6vw,96px); letter-spacing: -.045em; line-height: .94; margin-bottom: 26px; }
.hero-title .highlight { color: #6ca5bf; }
.hero-desc { max-width: 430px; font-size: 16px; line-height: 1.75; margin-bottom: 30px; }
.hero-actions { gap: 10px; margin-bottom: 28px; }
.hero-actions .btn { min-height: 52px; }
.hero-actions .btn.ghost { padding-left: 10px; padding-right: 10px; }
.hero-modes-bar { background: transparent; border: 0; border-top: 1px solid #dcebf1; border-radius: 0; padding: 20px 0 0; margin: 0; }
.modes-label { color: #6f8795; font-weight: 600; margin-right: 8px; }
.mode-chip { background: #fff; font-size: 12px; font-weight: 600; }
.trust-metrics { display: none; }
.showcase-stage { min-height: 560px; border: 0; border-radius: 48% 48% 44% 44%; background: #dceef6; box-shadow: none; overflow: visible; }
.showcase-strip { box-shadow: 0 20px 55px rgba(52,85,103,.16); }
.showcase-floating-card { box-shadow: 0 12px 35px rgba(52,85,103,.09); }
.showcase-floating-card.card-bottom-left .mini-score { font-size: 24px; line-height: 1.1; }
.section-block { padding: 80px 0; border-top-color: #dbeaf1; }
.section-header-split { margin-bottom: 36px; gap: 28px; }
.section-title { font-size: clamp(40px,4.5vw,58px); letter-spacing: -.03em; }
.section-sub { margin-top: 12px; font-size: 15px; }
.commercial-activity-grid { gap: 14px; }
.product-card { min-height: 250px; padding: 28px; border-radius: 16px; border-color: #dceaf0; box-shadow: none; background: #fff; }
.product-card.featured-card { background: #eaf5fa; border-color: #dcebf2; }
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-card h3 { font-size: 29px; letter-spacing: -.015em; }
.product-card p { max-width: 36ch; color: #526c7b; line-height: 1.65; }
.product-tag { background: transparent; padding: 0; color: #527f94; font-size: 10px; letter-spacing: .12em; }
.product-meta { font-size: 10px; letter-spacing: .04em; }
.mini-chip { background: rgba(255,255,255,.68); border: 1px solid #dbeaf0; font-weight: 500; }
.product-card-footer { border-color: #e3eef2; }
.app-footer { border-top: 1px solid #dbeaf1; padding-top: 48px; }
.activity-page-wrap { max-width: 1300px; }
.postcards-header { padding: 34px 0 30px; margin-bottom: 8px; border-bottom: 1px solid #dceaf0; }
.postcards-header h2 { font-size: clamp(48px,5vw,68px); letter-spacing: -.04em; }
.postcards-header .subtext { font-size: 16px; margin-top: 12px; }
.postcard-workbench { grid-template-columns: minmax(0,1.18fr) minmax(360px,.82fr); gap: clamp(24px,4vw,58px); padding-top: 30px; }
.postcard-preview-stage { background: #e5f2f8; border-radius: 20px; padding: clamp(20px,3vw,40px); }
.postcard-canvas-wrap { padding: 0; background: #fff; border-radius: 4px; border: 0; box-shadow: 0 15px 32px rgba(38,66,80,.14); overflow: hidden; }
#postcard-canvas { border-radius: 0; }
.postcard-telemetry-bar { background: transparent; border: 0; border-radius: 0; padding: 12px 0 0; flex-wrap: wrap; gap: 8px; font-size: 10px; color: #617d8a; }
.postcard-controls { gap: 0; background: white; border: 1px solid #e0edf2; border-radius: 18px; overflow: hidden; }
.control-group-card { border: 0; border-bottom: 1px solid #e8f0f3; border-radius: 0; box-shadow: none; padding: 24px; }
.postcard-controls > .btn { margin: 20px; width: calc(100% - 40px); }
.layout-selector-grid { grid-template-columns: 1fr; }
.layout-card { background: #fbfdfe; padding: 14px 16px; border: 1px solid #dceaf0; }
.layout-card.selected, .design-card.selected { box-shadow: none; border-color: #4c91b0; background: #eef7fa; }
.design-card { background: #fbfdfe; border-width: 1px; }
.city-dual-inputs input, .postcard-controls input, .postcard-controls textarea { border-radius: 8px; background: #fbfdfe; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #478dad; outline-offset: 3px; }
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 28px; min-height: 570px; }
  .postcard-workbench { grid-template-columns: 1fr; }
  .postcard-preview-stage { position: static; }
}
@media (max-width: 760px) {
  .app-header { gap: 8px; }
  .header-nav { order: 3; width: 100%; max-width: 100%; justify-content: flex-start; padding-bottom: 4px; }
  .nav-btn { padding: 8px 10px; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 30px; padding: 55px 0 58px; }
  .hero-title { font-size: clamp(57px,13vw,76px); }
  .hero-desc { font-size: 15px; }
  .hero-actions { align-items: stretch; }
  .showcase-stage { min-height: 430px; }
  .commercial-activity-grid { grid-template-columns: 1fr; }
  .section-block { padding: 55px 0; }
  .postcards-header { padding: 24px 0; }
  .postcards-header h2 { font-size: 46px; }
  .postcard-workbench { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .postcard-preview-stage { padding: 18px; }
  .postcard-telemetry-bar { font-size: 9px; }
  .design-card-grid { grid-template-columns: 1fr 1fr; }
  .control-group-card { padding: 20px; }
}
@media (max-width: 760px) {
  .app-header { height: auto; min-height: 76px; padding: 12px 16px 7px; }
  .header-nav { flex: 0 0 100%; min-width: 0; }
  .activity-top-bar { gap: 12px; flex-wrap: wrap; margin-top: 12px; }
}
@media (max-width: 760px) {
  /* Expose every destination without hiding the last links off-screen. */
  .app-header { position: relative; align-items: center; }
  .header-nav { flex-wrap: wrap; overflow: visible; gap: 2px 4px; padding: 4px 0 0; }
  .nav-btn { padding: 7px 9px; font-size: 12px; }
}

/* Readability: clear letterforms throughout the interface. */
h1, h2, h3, h4, .brand, .brand-name { letter-spacing: -0.025em; }
h1 em, h2 em, .strip-serif-caption { font-style: normal; }
.hero-title { font-size: clamp(42px, 5vw, 70px); line-height: 1.08; letter-spacing: -0.035em; }
.hero-title .highlight { font-style: normal; }
@media (max-width: 760px) { .hero-title { font-size: clamp(38px, 10vw, 55px); line-height: 1.1; } }

/* A warmer, more playful You & Me: pictures lead, words support. */
:root {
  --ink:#292333; --ink-secondary:#5b5260; --ink-muted:#716775;
  --blue-primary:#6851a2; --blue-hover:#513d89; --blue-light:#eee8f7;
  --blue-pale:#fbf8f4; --blue-accent:#ae9cd4; --blue-line:#e8dde8;
  --shadow-sm:0 8px 24px rgba(79,55,79,.07); --shadow-md:0 16px 38px rgba(79,55,79,.10);
}
html, body { background:#fcf8f3; color:var(--ink); }
.app-header { background:rgba(255,252,248,.97); border-bottom:1px solid #efe4df; }
.brand { color:#38283f; font-weight:750; }
.nav-btn { color:#5f5561; }
.nav-btn.active { background:#f1e7f7; color:#593c83; }
.btn.primary { background:#62428a; border-color:#62428a; color:#fff; }
.btn.primary:hover { background:#4e3471; border-color:#4e3471; }
.btn.secondary, .mode-chip { border-color:#e3d8e2; background:#fffdfa; color:#46344e; }
.btn.secondary:hover, .mode-chip:hover { background:#f8eaf1; border-color:#d2b8d3; }
.hero { padding-top:58px; gap:clamp(30px,5vw,70px); align-items:center; }
.hero-title { color:#35273a; font-weight:800; }
.hero-title .highlight { color:#b45e7a; }
.hero-desc { color:#5e5361; }
.hero-pill-row .eyebrow-pill { color:#936584; }
.showcase-stage .showcase-strip, .showcase-stage .showcase-floating-card { display:none; }
.section-block { border-color:#ebdfe5; }
.section-title { color:#35273a; font-weight:800; }
.product-card, .product-card.featured-card { background:#fffdfa; border:1px solid #ede2e3; border-radius:22px; overflow:hidden; box-shadow:0 8px 24px rgba(87,56,76,.05); padding:18px 18px 22px; }
.product-card::before, .dir-card::before { content:''; display:block; width:100%; aspect-ratio:2 / 1; border-radius:16px; background-position:center; background-size:cover; margin-bottom:22px; }
#card-couple-booth::before, #dir-open-duo::before, #dir-open-solo::before { background-image:url('/illustrations/booth.svg'); }
#card-postcard::before, #dir-open-postcards::before { background-image:url('/illustrations/postcard.svg'); }
#card-daily-spark::before, #dir-open-sparks::before { background-image:url('/illustrations/spark.svg'); }
#card-sync-quiz::before, #dir-open-quiz::before { background-image:url('/illustrations/quiz.svg'); }
#card-date-wheel::before, #dir-open-decider::before { background-image:url('/illustrations/wheel.svg'); }
#card-group-booth::before { background-image:url('/illustrations/group.svg'); }
.product-card h3 { font-size:23px; font-weight:750; color:#362b3a; }
.product-card p { color:#625866; }
.product-card:hover, .dir-card:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:0 16px 32px rgba(99,63,87,.12); }
.product-card, .dir-card { transition:transform .22s ease, box-shadow .22s ease; }
.product-tag { color:#966079; letter-spacing:.08em; }
.product-card-footer { border-color:#eee5e8; }
.cta-text { color:#684092; font-weight:750; }
.pill-btn.selected { background:#654391; border-color:#654391; color:white; }
.pill-btn:not(.selected) { background:#fffdfa; border-color:#e6dce3; color:#55475b; }
.app-footer { border-color:#e8dce0; }
.footer-copyright { margin-top:14px; color:#6c5b68; font-size:13px; }
.activity-page-wrap, #view-activities { color:#382b3c; }
#view-activities .page-Hero-header { padding:38px 0 24px; }
#view-activities .page-Hero-header h2 { color:#382b3c; font-weight:800; }
.activities-directory-grid { gap:18px; }
.dir-card { background:#fffdfa; border:1px solid #ecdee7; border-radius:24px; padding:18px; overflow:hidden; box-shadow:0 8px 24px rgba(87,56,76,.05); }
.dir-card::before { aspect-ratio: 2 / 1; }
.dir-card h3 { font-weight:750; color:#382b3c; }
.dir-card p { color:#625866; line-height:1.55; }
.dir-badge { color:#a15e83; }
#view-setup .card-box { background:#fffdfa; border-color:#eadce5; box-shadow:0 16px 44px rgba(89,57,79,.08); }
#view-setup .setup-hint { margin:4px 0 12px; color:#756779; font-size:13px; line-height:1.45; }
#view-setup .mode-tab-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0; background:transparent; }
#view-setup .mode-tab { min-width:0; min-height:126px; border:1px solid #eadce4; background:#fffaf8; border-radius:16px; padding:10px 8px; color:#514355; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:12px; line-height:1.3; }
#view-setup .mode-tab::before { content:''; display:block; width:70px; height:55px; border-radius:12px; background:#f7e0d8 url('/illustrations/booth.svg') center / cover; }
#view-setup .mode-tab[data-mode=solo]::before { background-image:url('/illustrations/spark.svg'); background-color:#eee1f1; }
#view-setup .mode-tab[data-mode=friends]::before { background-image:url('/illustrations/quiz.svg'); background-color:#dcebdc; }
#view-setup .mode-tab[data-mode=group]::before { background-image:url('/illustrations/group.svg'); background-color:#e9e1f4; }
#view-setup .mode-tab.selected { border-color:#a874b2; box-shadow:0 0 0 2px #d9c3e5; background:#f8effa; color:#573a70; }
#view-setup .theme-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#view-setup .theme-option { min-width:0; min-height:140px; padding:12px; border:1px solid #eadfe6; background:#fffdfa; border-radius:16px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; text-align:left; }
#view-setup .theme-option::before { content:''; display:block; width:100%; height:62px; margin-bottom:7px; border:6px solid #fffaf4; border-bottom-width:12px; border-radius:4px; box-shadow:0 2px 7px #4b354125; background:linear-gradient(90deg,#a6d1db 0 48%,#f3c6c6 48% 100%); }
#view-setup .theme-option[data-theme=namsan]::before { background:linear-gradient(140deg,#f4dfcb,#d4d1e6); border-color:#fff; }
#view-setup .theme-option[data-theme=travel]::before { background:repeating-linear-gradient(135deg,#eac2b2 0 8px,#faf3d8 8px 16px,#9ac5d8 16px 24px); border-color:#fff9ed; }
#view-setup .theme-option[data-theme=vintage]::before { background:linear-gradient(120deg,#a8755d,#e7b990); border-color:#e6cda7; }
#view-setup .theme-option[data-theme=midnight]::before { background:linear-gradient(130deg,#2f2744,#77608f); border-color:#3a2f4d; }
#view-setup .theme-option[data-theme=birthday]::before { background:radial-gradient(circle,#f3c76e 10%,transparent 12%) 0 0/20px 20px,#f1aac1; border-color:#fff4db; }
#view-setup .theme-option.selected { border-color:#a874b2; box-shadow:0 0 0 2px #dfcbea; background:#fcf5fb; }
#view-sparks .spark-card { background:#f7e4ef; border-color:#e8cadb; color:#503a52; }
#view-sparks .spark-card .spark-card-footer { border-color:#ddb9d1; }
#view-sparks .spark-stage-grid > *:nth-child(2) { background:#fff8e8; border-color:#f0dfbc; }
#quiz-workbench.player-two { background:#fff5f5; border-color:#e8b7c6; }
#quiz-workbench.player-two #quiz-turn-banner { background:#f9e0e9; border-color:#eab8ca; color:#653b51; }
#quiz-workbench.player-two .quiz-option, #quiz-workbench.player-two .quiz-options-grid button { background:#fff5f8; border-color:#e6bfd0; }
.wheel-entry-list { display:grid; gap:8px; margin:14px 0; }
.wheel-entry { display:flex; align-items:center; gap:8px; }
.wheel-entry-input { flex:1; min-width:0; background:#fffdfa; border:1px solid #e2d5df; border-radius:10px; padding:10px 12px; color:#382b3c; }
.wheel-entry-remove { flex:0 0 auto; padding:9px 12px; border:1px solid #e1c7d3; background:#fff6f8; color:#9b5066; border-radius:10px; cursor:pointer; }
#choice-postcard-frame { gap:8px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #a45f8e; outline-offset:3px; }
@media (max-width:760px) {
 .hero { padding-top:38px; }
 .showcase-stage { border-radius:22px; aspect-ratio:3 / 2; min-height:0; }
 #view-setup .mode-tab-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #view-setup .theme-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .product-card::before, .dir-card::before { aspect-ratio:2 / 1; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
#view-setup .mode-tab[data-mode=couple]::before { background-image:url('/illustrations/mode-duo.svg'); }
#view-setup .mode-tab[data-mode=solo]::before { background-image:url('/illustrations/mode-solo.svg'); }
#view-setup .mode-tab[data-mode=friends]::before { background-image:url('/illustrations/mode-friends.svg'); }
#view-setup .mode-tab[data-mode=group]::before { background-image:url('/illustrations/mode-group.svg'); }
#quiz-progress { display:flex; align-items:center; gap:8px; margin:18px 0 20px; }
.quiz-progress-step { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#eee7ef; color:#75677b; font-size:12px; font-weight:750; }
.quiz-progress-step.current { background:#705096; color:#fff; box-shadow:0 0 0 4px #e9dbf1; }
.quiz-progress-step.done { background:#aacdad; color:#244634; }
#quiz-workbench.player-two .quiz-progress-step.current { background:#cf6e91; box-shadow:0 0 0 4px #f8dce7; }
.design-swatch { display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:750; }
@media (prefers-reduced-motion:no-preference) {
  .showcase-stage { animation: hero-drift 6s ease-in-out infinite; }
  .product-card:hover::before, .dir-card:hover::before { animation: card-hello .45s ease both; }
  @keyframes hero-drift { 0%,100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-7px) rotate(.4deg); } }
  @keyframes card-hello { 50% { transform:scale(1.025) rotate(.6deg); } }
}

/* Photo-frame previews mirror the patterns drawn into the exported strip. */
.mock-strip-preview.frame-picnic { background-color: #fff7e8 !important; background-image: repeating-linear-gradient(0deg, transparent 0 16px, #dc809344 16px 32px), repeating-linear-gradient(90deg, transparent 0 16px, #dc809344 16px 32px) !important; }
.mock-strip-preview.frame-daisies { background-color:#fff9e7 !important; background-image: radial-gradient(circle, #eebd45 0 3px, #fff 4px 8px, transparent 9px) !important; background-size: 38px 38px !important; }
.mock-strip-preview.frame-confetti { background-color:#fff0f5 !important; background-image: radial-gradient(ellipse, #e991ad 0 3px, transparent 4px), radial-gradient(ellipse, #b29add 0 3px, transparent 4px), radial-gradient(ellipse, #eab94b 0 3px, transparent 4px) !important; background-size: 43px 49px, 57px 61px, 67px 71px !important; background-position: 0 0, 15px 15px, 25px 30px !important; }

/* The booth is the heart of the home page. */
#view-home .hero-sample-label { position:absolute; bottom:14px; right:14px; z-index:2; color:#fff; background:rgba(33,27,36,.68); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:600; }
.frame-gallery { margin:10px 0 32px; padding:76px 0 70px; border-top:1px solid #eadfe5; overflow:hidden; }
.frame-gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.frame-gallery-heading h2 { font-size:clamp(30px,3.4vw,45px); letter-spacing:-.035em; line-height:1.12; max-width:650px; margin:10px 0 14px; }
.frame-gallery-heading p:not(.eyebrow) { color:#685f68; line-height:1.6; max-width:540px; margin:0; }
.frame-gallery-cta.footer-link { flex:none; font-size:14px; font-weight:700; padding:15px 20px; color:white; }
.frame-gallery-track { display:flex; align-items:flex-start; justify-content:center; gap:clamp(16px,2.5vw,36px); padding:15px 12px 34px; overflow-x:auto; overscroll-behavior-inline:contain; }
.sample-frame { flex:0 0 150px; display:flex; flex-direction:column; gap:8px; padding:11px 11px 16px; border-radius:3px; box-shadow:0 12px 26px rgba(60,42,55,.17); background:#f6e3e6; transform:rotate(-3deg); }
.sample-frame:nth-child(even) { transform:rotate(3deg); margin-top:17px; }
.sample-frame-label { color:#554456; text-align:center; font-size:10px; font-weight:800; letter-spacing:.04em; padding:4px 0; }
.sample-frame-photo:nth-of-type(3) { background-position:45% 45%; filter:saturate(.8); }
.sample-frame-footer { font-size:10px; text-align:center; color:#65516a; font-weight:700; padding:4px 0 0; }
.frame-picnic { background:repeating-linear-gradient(90deg,#dce9d3 0 12px,#eef3e7 12px 24px); }
.frame-daisy { background:radial-gradient(circle,#efc568 2px,transparent 3px) 0 0/19px 19px,#fff5db; }
.frame-travel { background:repeating-linear-gradient(135deg,#f2c3bf 0 8px,#fffaf3 8px 16px,#b6d5e6 16px 24px); }
.frame-confetti { background:radial-gradient(circle,#ed97ae 2px,transparent 3px) 0 0/18px 18px,#f3e6f6; }
.frame-blush { background:#f8dce4; }
@media(max-width:760px){ .app-header .header-nav { order:0; flex:0 1 auto; width:auto; padding:0; gap:2px; } .app-header { justify-content:space-between; flex-wrap:wrap; } .app-header .nav-btn { font-size:12px; padding:8px 7px; } .frame-gallery { padding:52px 0 42px; } .frame-gallery-heading { flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:24px; } .frame-gallery-track { justify-content:flex-start; margin:0 -16px; padding:12px 16px 30px; } .sample-frame { flex-basis:125px; } }
@media(max-width:430px){ .app-header .brand { font-size:19px; } .app-header .header-right .btn { padding:9px 10px; font-size:12px; } }
#card-draw-together::before, #dir-open-draw::before { background-image:url('/illustrations/draw.svg'); }
#card-game-room::before, #dir-open-game-room::before { background-image:url('/illustrations/play.svg'); }
#card-draw-together, #card-game-room { position:relative; }
#card-draw-together .cta-text, #card-game-room .cta-text, #dir-open-draw a, #dir-open-game-room a, a.nav-btn { text-decoration:none; }
/* Whole card is the link, like the other activity cards. */
#card-draw-together .cta-text::after, #card-game-room .cta-text::after { content:''; position:absolute; inset:0; }
.frame-picnic { background:repeating-linear-gradient(90deg,#f3cad2 0 12px,#fff3ec 12px 24px); }

/* Phone header: name and Join Code on one row, the page links as tabs below.
   Doubled class names win over the older mobile rules above. */
@media (max-width: 760px) {
  .app-header.app-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; height: auto; min-height: 0; padding: 12px 16px 10px; }
  .app-header .header-left { grid-column: 1; grid-row: 1; }
  .app-header .header-right { grid-column: 2; grid-row: 1; }
  .app-header .header-nav.header-nav { grid-column: 1 / -1; grid-row: 2; order: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0; background: #f3ebef; border-radius: 14px; }
  .app-header .studio-stepper-bar { grid-column: 1 / -1; }
  .app-header .nav-btn.nav-btn { display: flex; justify-content: center; align-items: center; padding: 9px 4px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
  .app-header .nav-btn.active { background: #fffdfa; box-shadow: 0 1px 3px rgba(53, 39, 58, .1); }
  .app-header .brand.brand { font-size: 22px; font-weight: 750; }
  .app-header .header-right .btn { padding: 8px 13px; font-size: 12.5px; }
}