:root {
  color-scheme: dark;
  --font: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg: #0b090e;
  --page-bg: #08070a;
  --bg-raised: #141118;
  --surface: rgba(35, 29, 38, .76);
  --surface-solid: #211b25;
  --surface-soft: rgba(255,255,255,.055);
  --glass: rgba(25, 20, 29, .72);
  --text: #fff8fb;
  --muted: #b8adb6;
  --faint: #b0aab6;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --accent: #ff8298;
  --accent-strong: #ff6b88;
  --accent-soft: rgba(255, 130, 152, .14);
  --gold: #e6bd83;
  --success: #7fe2b3;
  --yellow: #ffd36e;
  --danger: #ff6477;
  --shadow: 0 18px 50px rgba(0,0,0,.32);
  --card-shadow: 0 10px 32px rgba(0,0,0,.2);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* Aliases used by game-mode/arc/roadmap/focus components */
  --surface-raised: rgba(35, 29, 38, .76);
  --border-subtle: rgba(255,255,255,.09);
  --glass-bg: rgba(25, 20, 29, .72);
  --radius-card: 18px;
  --text-primary: #fff8fb;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5eff1;
  --page-bg: #eee5e8;
  --bg-raised: #fff9fa;
  --surface: rgba(255,255,255,.8);
  --surface-solid: #fffafb;
  --surface-soft: rgba(80, 42, 53, .055);
  --glass: rgba(255, 250, 251, .76);
  --text: #2a2025;
  --muted: #70636a;
  --faint: #978a90;
  --line: rgba(72, 42, 52, .1);
  --line-strong: rgba(72, 42, 52, .18);
  --accent: #d84062;
  --accent-strong: #c92e52;
  --accent-soft: rgba(216,64,98,.1);
  --gold: #a66c27;
  --success: #15875b;
  --yellow: #9a6900;
  --danger: #d52d48;
  --shadow: 0 24px 70px rgba(58,32,41,.22);
  --card-shadow: 0 10px 30px rgba(66,42,50,.1);
  --surface-raised: rgba(255,255,255,.8);
  --border-subtle: rgba(72, 42, 52, .1);
  --glass-bg: rgba(255, 250, 251, .76);
  --text-primary: #2a2025;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html {
  background: var(--page-bg);
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-y: auto;
  overflow-x: clip;
  display: grid;
  place-items: center;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(117,55,96,.22), transparent 33%),
    radial-gradient(circle at 84% 88%, rgba(160,92,63,.16), transparent 30%),
    var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { margin-bottom: 12px; font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.04; font-weight: 760; }
h2 { margin-bottom: 10px; font-size: 1.35rem; line-height: 1.15; }
h3 { margin-bottom: 8px; font-size: 1.02rem; }
p { color: var(--muted); line-height: 1.55; }
em { color: var(--accent); font-style: normal; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 12px;
  top: -80px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
}
.skip-link:focus { top: 12px; }

#app {
  position: relative;
  width: min(430px, calc(100vw - 24px));
  max-width: 100vw;
  height: min(930px, calc(100dvh - 20px));
  min-height: min(700px, calc(100dvh - 20px));
  margin-inline: auto;
  overflow: hidden;
  border: 5px solid #17131a;
  border-radius: 46px;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 35px 100px rgba(0,0,0,.58), 0 0 80px rgba(255,104,139,.08);
  isolation: isolate;
}

.shop-exit {
  position: absolute;
  z-index: 80;
  top: max(13px, env(safe-area-inset-top, 0px));
  left: 14px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(11,9,14,.9);
  color: var(--text);
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: var(--card-shadow);
}
.intro-facts { display:grid; gap:8px; margin:14px 0; text-align:left; }
.intro-facts p { margin:0; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.intro-facts strong,.intro-facts span { display:block; }
.intro-facts span { margin-top:3px; color:var(--muted); font-size:.78rem; }
.intro-shop-link { margin-top:8px; }

:root[data-theme="light"] #app { border-color: #d8cfd2; }

.device-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% -10%, rgba(255,118,150,.11), transparent 31%),
    var(--bg);
}
.topbar {
  z-index: 25;
  flex: 0 0 64px;
  padding: max(7px, env(safe-area-inset-top, 0px)) 16px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  -webkit-app-region: drag;
}.brand-button, .icon-button, .nav-item { -webkit-app-region: no-drag; }

.brand-button {
  min-width: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.brand-seal, .landing-mark span {
  display: grid;
  place-items: center;
  color: #2a1019;
  background: linear-gradient(145deg, #ffd1d8, var(--accent) 58%, #c84a70);
  box-shadow: inset 0 1px rgba(255,255,255,.62), 0 7px 22px rgba(255,102,137,.27);
}

.brand-seal { width: 37px; height: 37px; border-radius: 14px; font-weight: 850; }
.brand-copy { min-width: 0; display: grid; }
.brand-copy strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy small { margin-top: 1px; color: var(--faint); font-size: .68rem; }

.top-actions { display: flex; align-items: center; gap: 6px; }
.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--muted);
  background: var(--surface-soft);
  cursor: pointer;
  transition: .3s var(--ease);
}
.icon-button:hover { color: var(--text); background: var(--accent-soft); transform: translateY(-1px); }
.ui-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  contain: layout paint;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.app-scroll::-webkit-scrollbar { display: none; }

.bottom-nav {
  z-index: 25;
  box-sizing: border-box;
  flex: 0 0 calc(76px + env(safe-area-inset-bottom, 0px));
  min-height: calc(76px + env(safe-area-inset-bottom, 0px));
  padding: 7px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid;
  align-items: center;
  grid-template-columns:repeat(5,1fr);
  align-items: stretch;
  border-top: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}

.nav-item {
  position: relative;
  min-width: 0;
  padding: 7px 2px 4px;
  min-height: 58px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 19px;
  color: var(--faint);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.nav-item .ui-icon { width: 22px; height: 22px; }
.nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .64rem; font-weight: 650; }
.nav-item.is-active { color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.nav-item.is-active::before { content:""; position:absolute; top:4px; width:17px; height:3px; border-radius:99px; background:var(--accent); }

.page {
  width: 100%;
  max-width: 100%;
  padding: 22px max(14px, calc(18px + env(safe-area-inset-left, 0px))) calc(42px + env(safe-area-inset-bottom, 0px)) max(14px, calc(18px + env(safe-area-inset-right, 0px)));
  overflow-x: clip;
  animation: page-in .38s var(--ease);
}
.page.narrow { max-width: none; }
@keyframes page-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.onboarding-page {
  position: relative;
  min-height: 100%;
  padding: calc(28px + env(safe-area-inset-top, 0px)) max(19px, calc(24px + env(safe-area-inset-left, 0px))) calc(34px + env(safe-area-inset-bottom, 0px)) max(19px, calc(24px + env(safe-area-inset-right, 0px)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  animation: page-in .42s var(--ease);
}
.wizard-page { justify-content: flex-start; padding-top: 18px; }
.landing-page { padding-top: 54px; }
.landing-page h1, .age-page h1, .wizard-page h1 { font-size: 2.55rem; }
.landing-mark { position:relative; z-index:1; margin-bottom: 22px; }
.landing-mark span { width: 68px; height: 68px; border-radius: 24px; font-size: 1.8rem; font-weight: 850; }
.ambient-orb { position:absolute; border-radius:50%; filter:blur(8px); pointer-events:none; opacity:.7; }
.orb-one { width:230px; height:230px; top:-80px; right:-105px; background:radial-gradient(circle, rgba(255,105,143,.35), transparent 66%); }
.orb-two { width:250px; height:250px; bottom:20px; left:-150px; background:radial-gradient(circle, rgba(214,165,105,.16), transparent 68%); }
.landing-page > *:not(.ambient-orb) { position: relative; z-index: 1; }

.hero-lede { font-size: 1.02rem; line-height: 1.62; }
.eyebrow, .spark-kicker {
  margin-bottom: 9px;
  color: var(--accent);
  font-size: .69rem;
  font-weight: 780;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.glass-card, .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 58%), var(--surface);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.panel { margin: 0; }
.pad { padding: 20px; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quick-action-tile {
  min-width: 0;
  min-height: 94px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font: inherit;
  line-height: 1.15;
  box-shadow: none;
}
.quick-action-tile .qa-icon { font-size: 1.35rem; line-height: 1; }
.quick-action-tile span:last-child {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text);
}
.quick-action-tile:active { transform: scale(.97); }
.spark-preview { margin: 20px 0 18px; padding: 20px; }
.spark-preview h2 { font-size: 1.28rem; }
.spark-preview p { margin-bottom: 16px; font-size: .9rem; }
.card-footer { padding-top: 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); color:var(--muted); font-size:.71rem; font-weight:650; }

.trust-strip {
  margin-top: 13px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(127,226,179,.17);
  border-radius: 18px;
  background: rgba(127,226,179,.07);
  color: var(--success);
  font-size: .76rem;
  line-height: 1.35;
}
.trust-strip .ui-icon { flex:0 0 auto; }
.trust-strip span { display:grid; gap:2px; }
.trust-strip small { color:var(--muted); }
.trust-strip.compact { padding: 11px 13px; }

.age-page { justify-content: flex-start; padding-top: 30px; }
.age-badge { width: 58px; height: 36px; margin-bottom:18px; display:grid; place-items:center; border-radius:15px; color:#2a1019; background:linear-gradient(135deg,#ffd1d8,var(--accent)); font-size:.9rem; font-weight:850; box-shadow:0 8px 24px rgba(255,107,136,.23); }
.age-card { margin: 15px 0 2px; padding: 9px 16px 16px; }
.attestation-list { display:grid; }
.attestation { min-height:78px; display:grid; grid-template-columns:28px 1fr; align-items:center; gap:13px; border-bottom:1px solid var(--line); cursor:pointer; }
.attestation:last-child { border-bottom:0; }
.attestation input { position:absolute; opacity:0; pointer-events:none; }
.check-box { width:25px; height:25px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--surface-soft); transition:.25s var(--ease); }
.attestation input:checked + .check-box { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.attestation input:checked + .check-box::after { content:""; display:block; width:9px; height:5px; margin:7px 0 0 7px; border:2px solid #2a1019; border-top:0; border-right:0; transform:rotate(-45deg); }
.attestation strong, .attestation small { display:block; }
.attestation strong { margin-bottom:4px; color:var(--text); font-size:.88rem; }
.attestation small { color:var(--faint); font-size:.71rem; }

.wizard-progress { min-height:30px; margin-bottom:22px; display:flex; align-items:center; justify-content:space-between; color:var(--faint); font-size:.68rem; font-weight:700; }
.progress-dots { display:flex; align-items:center; gap:7px; }
.progress-dots span { width:8px; height:8px; border-radius:99px; background:#555555; transition:.3s var(--ease); }
.progress-dots span.is-done { background:rgba(255,130,152,.45); }
.progress-dots span.is-current { width:25px; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.trust-card { margin:18px 0; padding:22px; }
.feature-icon { width:48px; height:48px; margin-bottom:17px; display:grid; place-items:center; border-radius:17px; color:var(--accent); background:var(--accent-soft); }
.feature-icon .ui-icon { width:25px; height:25px; }
.trust-list { margin:16px 0 0; padding:0; display:grid; gap:13px; list-style:none; color:var(--muted); font-size:.84rem; }
.trust-list li { position:relative; padding-left:23px; }
.trust-list li::before { content:"✓"; position:absolute; left:0; color:var(--success); font-weight:800; }

.wizard-form { margin-top:16px; display:grid; gap:20px; }
.wizard-actions, .form-actions, .hero-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wizard-actions { margin-top:auto; padding-top:16px; }
.form-actions { margin-top:22px; }
.sticky-actions {
  position: sticky;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-solid);
  border-top: 1px solid var(--line);
  z-index: 20;
  margin-top: auto;
  isolation: isolate;
}
.sticky-actions .button { flex: 1 1 140px; min-width: 0; }
.hero-actions { margin-top:18px; flex-wrap:wrap; }

.button {
  min-height: 50px;
  padding: 12px 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--text);
  background: var(--surface-soft);
  font-weight: 720;
  font-size: .84rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
}
.button:hover:not(:disabled) { transform:translateY(-2px); }
.button:active:not(:disabled) { transform:scale(.98); }
.button:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset:2px; }
.button.primary { color:#2a1019; background:linear-gradient(135deg,#ffd1da,var(--accent) 55%,#e95778); box-shadow:0 10px 25px rgba(255,99,133,.22), inset 0 1px rgba(255,255,255,.6); }
:root[data-theme="light"] .button.primary { color:#fff; }
.button.secondary { border-color:rgba(255,130,152,.28); background:var(--surface-soft); }
.button.ghost { color:var(--muted); background:transparent; }
.button.danger { color:#fff; background:linear-gradient(135deg,#f76477,#bd233d); }
.button.yellow { color:#372706; background:linear-gradient(135deg,#ffe6a2,#ffc84d); }
.button.small { min-height:39px; padding:9px 14px; border-radius:14px; font-size:.73rem; }
.button-wide { width:100%; }
.button:disabled { opacity:.32; cursor:not-allowed; box-shadow:none; }
.questionnaire-skip { display:flex; justify-content:center; margin-top:12px; }
.questionnaire-skip-button { min-width:min(240px,100%); justify-content:center; border-color:var(--line); background:transparent; }
.questionnaire-skip-button:hover:not(:disabled) { background:var(--accent-soft); }

.field { min-width:0; margin:0; padding:0; display:grid; gap:8px; align-content:start; border:0; }
.field + .field { margin-top:18px; }
.field > span, .field legend { color:var(--muted); font-size:.73rem; font-weight:720; line-height:1.25; letter-spacing:.01em; }
.field small { color:var(--faint); font-size:.69rem; line-height:1.4; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="time"], select, textarea {
  width:100%;
  max-width:100%;
  min-height:54px;
  padding:15px 15px;
  border:1px solid var(--line);
  border-radius:17px;
  outline:0;
  color:var(--text);
  background:var(--surface-soft);
  transition:.25s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 4px var(--accent-soft); }
select { height:54px; padding-right:38px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; appearance:none; color:#fff8fb; background-color:#211b25; background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 19px) 23px,calc(100% - 14px) 23px; background-size:5px 5px; background-repeat:no-repeat; color-scheme:dark; }
select option, select optgroup { color:#fff8fb; background:#211b25; }
input[type="time"] { color:#fff8fb; background-color:#211b25; color-scheme:dark; }
input[type="time"]::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.72; }
:root[data-theme="light"] select { color:#2a2025; background-color:#fffafb; color-scheme:light; }
:root[data-theme="light"] select option, :root[data-theme="light"] select optgroup { color:#2a2025; background:#fffafb; }
:root[data-theme="light"] input[type="time"] { color:#2a2025; background-color:#fffafb; color-scheme:light; }
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter:none; }
.field-label { margin:0 0 10px; color:var(--muted); font-size:.73rem; font-weight:720; }

.choice-grid { display:grid; grid-template-columns:1fr; gap:9px; }
.choice-grid.two-up, .choice-grid.four { grid-template-columns:repeat(2,1fr); }
.comfort-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.comfort-grid .choice { min-height:62px; }
.comfort-grid .choice-copy { padding:10px 5px; text-align:center; }
.comfort-grid .choice:has(input:checked)::after { display:none; }
.choice {
  min-height: 66px;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
  cursor: pointer;
  overflow: hidden;
  transition: .25s var(--ease);
}
.choice > input { position:absolute; opacity:0; }
.choice-copy { width:100%; min-width:0; padding:14px; display:grid; gap:4px; }
.choice-copy strong { color:var(--text); font-size:.82rem; }
.choice-copy small { color:var(--faint); font-size:.67rem; line-height:1.35; }
.choice-copy .pair-internet-note { color:var(--muted); padding-top:2px; }
.choice input:not(:checked) + .choice-copy .pair-internet-note { display:none; }
.choice:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.choice:has(input:checked)::after { content:"✓"; position:absolute; right:11px; top:10px; color:var(--accent); font-weight:850; }
.mode-grid { grid-template-columns:1fr 1fr; }
.mode-grid .choice { min-height:92px; }

.theme-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theme-option { min-height:94px; position:relative; padding:12px; display:flex; align-items:flex-end; border:2px solid transparent; border-radius:20px; overflow:hidden; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.11); }
.theme-option::before { content:""; position:absolute; inset:0; background:linear-gradient(150deg,transparent 35%,rgba(0,0,0,.68)); }
.theme-option.dark-preview { color:#fff; background:radial-gradient(circle at 80% 10%,#8d3559,transparent 35%),#151118; }
.theme-option.light-preview { color:#39272f; background:radial-gradient(circle at 80% 10%,#ffc5d1,transparent 35%),#fff7f8; }
.theme-option input { position:absolute; opacity:0; }
.theme-option span { position:relative; z-index:1; display:grid; gap:2px; }
.theme-option strong { font-size:.81rem; }
.theme-option small { opacity:.72; font-size:.65rem; }
.theme-option:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.settings-theme { margin-top:14px; }
.identity-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.advanced-optins { padding-top:2px; }
.notification-core-copy { color:var(--text); font-weight:700; }
.oauth-grid { margin:12px 0; display:grid; grid-template-columns:1fr; gap:8px; }
.account-onboarding-page { gap: 12px; }
.account-onboarding-page h1 { font-size: 2.2rem; }
.account-provider-grid { margin-top: 8px; display: grid; gap: 9px; }
.account-provider-note { margin-top: 4px; }
.account-inline-form { display: grid; gap: 14px; }
.account-code-display { color: var(--success); font-weight: 760; }
.account-guest-link { margin-top: 2px; }
.install-actions { margin:14px 0; display:grid; gap:10px; }
.install-guidance { margin:0; }
.place-prompt { margin-bottom:12px; border-color:rgba(255,211,110,.25); }

.toggle-row { min-height:67px; padding:11px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); }
.toggle-row:last-child { border-bottom:0; }
.toggle-copy { min-width:0; display:grid; gap:4px; }
.toggle-copy strong { font-size:.83rem; }
.toggle-copy small { color:var(--faint); font-size:.67rem; line-height:1.35; }
.switch { flex:0 0 auto; position:relative; width:48px; height:29px; cursor:pointer; }
.switch input { position:absolute; opacity:0; }
.switch span { position:absolute; inset:0; border-radius:99px; background:var(--line-strong); transition:.25s var(--ease); }
.switch span::after { content:""; position:absolute; width:23px; height:23px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.24); transition:.25s var(--ease); }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span::after { transform:translateX(19px); }

.notice { padding:13px 14px; border:1px solid var(--line); border-radius:16px; color:var(--muted); background:var(--surface-soft); font-size:.73rem; line-height:1.5; }
.notice.safety { border-color:rgba(127,226,179,.2); color:var(--success); background:rgba(127,226,179,.07); }
.notice.danger { border-color:rgba(255,100,119,.18); color:var(--danger); background:rgba(255,100,119,.07); }
.age-card .notice { margin-top:8px; }

.section-head { margin-bottom:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.section-head h1 { margin-bottom:7px; font-size:2.25rem; }
.section-head p:last-child { margin-bottom:0; }
.step-badge { flex:0 0 auto; padding:7px 10px; border-radius:99px; color:var(--accent); background:var(--accent-soft); font-size:.68rem; font-weight:800; }
.wizard-questionnaire > .wizard-progress { margin-bottom:13px; }
.step-panel { animation:step-in .35s var(--ease); }
@keyframes step-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
.form-step h2 { font-size:1.45rem; }
.form-step > p { font-size:.82rem; }

.family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.family-button { min-height:62px; padding:12px; display:grid; align-content:center; gap:4px; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); cursor:pointer; transition:.25s var(--ease); }
.family-button strong { color:var(--text); font-size:.74rem; line-height:1.2; }
.family-button small { color:var(--faint); font-size:.61rem; line-height:1.3; }
.family-button.is-on, .family-button:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.gender-choice:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }

/* Accordion kink cards */
.kink-card-list { display:flex; flex-direction:column; gap:8px; }
.kink-card { border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); overflow:hidden; transition:.2s var(--ease); }
.kink-card.is-selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.kink-card-header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:none; border:none; cursor:pointer; text-align:left; gap:8px; }
.kink-card-name { font-size:.78rem; font-weight:600; color:var(--text); flex:1; }
.kink-card-chevron { font-size:1rem; color:var(--muted); transition:transform .2s ease; display:inline-block; }
.kink-card-header[aria-expanded="true"] .kink-card-chevron { transform:rotate(90deg); }
.kink-card-body { padding:0 16px 14px; display:flex; flex-direction:column; gap:10px; }
.kink-card-body[hidden] { display:none !important; }
.kink-desc-text { font-size:.7rem; color:var(--faint); line-height:1.4; margin:0; }
.kink-tags { display:flex; flex-wrap:wrap; gap:5px; list-style:none; margin:0; padding:0; }
.kink-tag { font-size:.62rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:3px 9px; }
.kink-select-btn { align-self:flex-start; font-size:.68rem; padding:5px 14px; }
.questionnaire-interest-actions { display:flex; justify-content:flex-start; gap:8px; margin:0 0 10px; }
.kink-what-happens { font-size:.68rem; color:var(--text); margin:0; }
.kink-what-happens strong { color:var(--accent); }
.kink-shows-in { font-size:.62rem; color:var(--faint); margin:0; }
.browse-all-expander-row { margin:14px 0 0; text-align:center; }
.browse-all-expander { font-size:.72rem; }
.browse-all-panel { margin-top:10px; }

.care-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.care-option { min-height:48px; padding:10px 11px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); color:var(--muted); font-size:.7rem; cursor:pointer; }
.care-option input { accent-color:var(--accent); }
.care-option:has(input:checked) { border-color:var(--accent); color:var(--text); background:var(--accent-soft); }

.foreplay-type-btn { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); cursor:pointer; text-align:left; transition:.25s var(--ease); }
.foreplay-type-btn strong { font-size:.9rem; color:var(--text); line-height:1.25; }
.foreplay-type-btn small { font-size:.72rem; color:var(--muted); line-height:1.35; }
.foreplay-type-btn.is-on, .foreplay-type-btn:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }

.home-hero { display:grid; gap:12px; }
.home-primary { position:relative; min-height:260px; padding:25px; overflow:hidden; background:radial-gradient(circle at 100% 0,rgba(255,118,150,.2),transparent 42%),var(--surface); }
.home-primary::after { content:""; position:absolute; width:160px; height:160px; right:-70px; bottom:-75px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 24px rgba(255,255,255,.02),0 0 0 50px rgba(255,255,255,.015); }
.home-primary h1 { position:relative; z-index:1; font-size:2.35rem; }
.home-primary p, .home-primary button { position:relative; z-index:1; }
.home-main-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.home-main-actions .button { margin-top:0; }
.home-tonight-hero { min-height:230px; display:grid; align-content:center; }
.home-tonight-hero .points-home-chip { position:absolute; top:15px; right:17px; margin:0; }
.home-tonight-hero .tonight-context { max-width:330px; margin:0 0 20px; color:var(--muted); }
.home-tonight-hero .tonight-start { width:100%; min-height:58px; font-size:.94rem; }
.home-secondary-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.home-secondary-actions .button { min-width:0; min-height:44px; border-color:var(--line); }
.period-home-chip { width:42px; height:32px; padding:0; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:transparent; cursor:pointer; opacity:.7; }
.home-more { display:grid; gap:0; }
.home-more > .eyebrow { margin:4px 2px 9px; color:var(--faint); }
.home-more .quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-more .quick-action-tile { min-height:76px; padding:10px 6px; box-shadow:none; }
.home-hero .side-stack { margin-top:18px; opacity:.78; }
.home-hero .mini-card { min-height:145px; }
.side-stack { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-card { min-width:0; min-height:180px; padding:17px; display:flex; flex-direction:column; justify-content:space-between; }
.mini-card h2 { font-size:1.05rem; }
.mini-card p { font-size:.72rem; }
.badge { width:max-content; padding:6px 9px; display:inline-flex; border-radius:99px; color:var(--muted); background:var(--surface-soft); font-size:.61rem; font-weight:800; letter-spacing:.05em; }
.badge.good { color:var(--success); background:rgba(127,226,179,.09); }
.badge.warn { color:#3a2900; background:var(--yellow); }


#reminder-form,
#weekly-form {
  min-width: 0;
  overflow: hidden;
}
#reminder-form p,
#weekly-form p { overflow-wrap: anywhere; }
#reminder-form .field,
#weekly-form .field { gap: 10px; }
#reminder-form input,
#weekly-form input,
#reminder-form .button,
#weekly-form .button {
  width: 100%;
  max-width: 100%;
}
#reminder-form .button,
#weekly-form .button { margin-top: 12px; }
#weekly-form h2 { overflow-wrap: anywhere; }
.grid { display:grid; gap:10px; }
.grid > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.grid.two, .grid.three, .grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.two { align-items:start; gap:16px; }
.grid.two > * { min-width:0; }
.grid > .field + .field { margin-top:0; }
.page > .grid.four { margin-top:12px; grid-auto-rows:minmax(112px,auto); align-items:stretch; }
.page > .grid.four > .stat-card:last-child:nth-child(odd) { grid-column:1 / -1; }
.stat-card { min-width:0; min-height:112px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; color:var(--text); text-align:left; cursor:pointer; }
.stat-card strong { color:var(--accent); font-size:1.42rem; line-height:1; }
.stat-card span { color:var(--muted); font-size:.69rem; line-height:1.3; overflow-wrap:anywhere; }

.pulse-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pulse-option { min-height:94px; position:relative; padding:14px; display:grid; align-content:center; gap:5px; border:1px solid var(--line); border-radius:18px; background:var(--surface-soft); cursor:pointer; }
.pulse-option input { position:absolute; opacity:0; }
.pulse-option strong { font-size:.84rem; }
.pulse-option small { color:var(--faint); font-size:.65rem; line-height:1.35; }
.pulse-option:has(input:checked) { border:2px solid var(--accent); color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent),0 0 0 2px rgba(255,118,150,.12); }
.pulse-option:has(input:checked)::after { content:"✓"; position:absolute; top:9px; right:10px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#2a1019; background:var(--accent); font-size:.72rem; font-weight:900; }
.style-grid .pulse-option:last-child { grid-column:1 / -1; min-height:76px; }

.notification-banner { width:calc(100% - 28px); min-height:58px; margin:8px 14px 0; padding:10px 13px; display:flex; align-items:center; gap:11px; border:1px solid rgba(255,211,110,.28); border-radius:17px; color:var(--text); background:linear-gradient(135deg,rgba(255,211,110,.12),var(--surface-solid)); text-align:left; cursor:pointer; box-shadow:var(--card-shadow); }
.notification-banner > span:last-child { min-width:0; display:grid; gap:3px; }
.notification-banner strong { font-size:.75rem; }
.notification-banner small { color:var(--muted); font-size:.62rem; line-height:1.35; }
.notification-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 5px rgba(255,211,110,.11); }
.session-context { margin:18px 0 4px; padding:16px; display:grid; gap:5px; border:1px solid var(--line); border-radius:18px; background:var(--surface-soft); }
.session-context strong { color:var(--accent); }
.session-context span, .session-context small { color:var(--muted); font-size:.72rem; }
.phase-actions { margin-top:12px; display:grid; gap:8px; }
.phase-card { height:auto; min-height:min-content; margin-top:12px; overflow:visible; }
.date-summary { margin-bottom:12px; padding:16px; display:grid; gap:13px; }
.date-summary > div { display:grid; gap:4px; }
.date-summary span { color:var(--faint); font-size:.6rem; font-weight:850; letter-spacing:.11em; }
.date-summary strong { font-size:.76rem; line-height:1.4; }
.empty-state { padding:22px; text-align:center; }
.empty-state p { margin:7px 0 0; font-size:.72rem; }
.notification-task { margin-bottom:12px; padding:20px; border-color:rgba(255,211,110,.22); background:linear-gradient(150deg,rgba(255,211,110,.08),transparent 45%),var(--surface); }
.notification-task h2 { margin-top:15px; }
.notification-task > p { font-size:.82rem; }
.no-proof { margin:12px 0 0; color:var(--faint); font-size:.65rem!important; line-height:1.45; }
.schedule-dare { margin-top:14px; }
.day-dare-consent + .day-dare-consent { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.compact-care { margin-top:10px; }
.personalization-fields .field + .field { margin-top:0; }
.personalization-fields .field:last-child:nth-child(odd) { grid-column:1 / -1; }
.form-step { min-width:0; display:grid; gap:18px; }
.form-step > * { min-width:0; max-width:100%; }
.form-step > h2,
.form-step > p { margin-bottom:0; }
.form-step > .field { margin-top:0; }

.spark-layout { display:grid; gap:12px; }
.spark-layout aside { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.alternative-card { padding:16px; }
.alternative-card h3 { color:var(--accent); font-size:.84rem; }
.alternative-card p { min-height:48px; font-size:.69rem; line-height:1.4; }

.challenge-card { height:auto; min-height:min-content; padding:20px; overflow:visible; }
.challenge-card h1 { margin:12px 0 16px; font-size:2rem; line-height:1.08; }
.challenge-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.family-label, .explicit-badge { width:max-content; padding:6px 9px; border-radius:99px; font-size:.6rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.family-label { color:var(--gold); background:rgba(230,189,131,.1); }
.explicit-badge { color:var(--accent); background:var(--accent-soft); }
.goal-block { margin:0 0 14px; padding:15px; display:grid; gap:6px; border-left:3px solid var(--accent); border-radius:5px 17px 17px 5px; background:var(--accent-soft); }
.goal-block span { color:var(--accent); font-size:.6rem; font-weight:850; letter-spacing:.12em; }
.goal-block strong { color:var(--text); font-size:.84rem; line-height:1.45; }
.what-to-do { margin:0 0 16px; padding:16px; border:1px solid var(--line-strong); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),transparent),var(--surface-soft); }
.instruction-title { margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.instruction-title > span { color:var(--text); font-size:.74rem; font-weight:900; letter-spacing:.12em; }
.instruction-title small { color:var(--faint); font-size:.63rem; }
.detail-list { height:auto; min-height:min-content; max-height:none; margin:0; padding:0; display:grid; gap:13px; overflow:visible; list-style:none; counter-reset:steps; }
.detail-list li { counter-increment:steps; min-height:32px; margin:0 0 4px; position:relative; display:grid; grid-template-columns:27px minmax(0,1fr); gap:10px; align-items:start; color:var(--text); font-size:.79rem; line-height:1.55; }
.detail-list li:last-child { margin-bottom:0; }
.detail-list li::before { content:counter(steps); width:26px; height:26px; display:grid; place-items:center; border-radius:10px; color:#2a1019; background:linear-gradient(145deg,#ffd3dc,var(--accent)); font-size:.67rem; font-weight:900; box-shadow:0 5px 14px rgba(255,104,140,.16); }
.detail-list li > span { padding-top:2px; }
.arc-partner-legend { margin:10px 0 14px; padding:9px 12px; display:flex; flex-wrap:wrap; gap:6px 14px; border:1px solid var(--line); border-radius:14px; color:var(--muted); background:var(--surface-soft); font-size:.68rem; line-height:1.4; }
.arc-partner-legend strong { color:var(--text); }
.beat-dots { max-width:100%; overflow-wrap:anywhere; letter-spacing:.04em; }
.setup { margin:0 0 16px; color:var(--muted); font-size:.74rem; line-height:1.55; overflow-wrap:anywhere; }
.setup strong { color:var(--text); }
.meta-row { width:100%; display:flex; flex-wrap:wrap; gap:6px; }
.meta-pill { padding:6px 9px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:var(--surface-soft); font-size:.61rem; line-height:1.1; }
.meta-pill.es-only { color:var(--gold); }
.safety-line { margin-top:16px; padding:13px; border:1px solid rgba(127,226,179,.15); border-radius:16px; color:var(--muted); background:rgba(127,226,179,.055); font-size:.69rem; line-height:1.55; overflow-wrap:anywhere; }
.safety-line strong { color:var(--success); }

.curtain { padding:30px 22px; text-align:center; }
.curtain-mark { width:72px; height:72px; margin:0 auto 21px; display:grid; place-items:center; border-radius:25px; color:var(--accent); background:var(--accent-soft); font-size:1.6rem; font-weight:850; }
.curtain p { font-size:.82rem; }
.curtain .button { margin-top:12px; }
.vote-buttons { display:grid; gap:8px; margin-top:20px; }
.vote-button { min-height:67px; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:4px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface-soft); text-align:left; cursor:pointer; transition:.25s var(--ease); }
.vote-button strong { font-size:.84rem; }
.vote-button small { color:var(--faint); font-size:.67rem; }
.vote-button:hover { border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }
.vote-button.yes { border-color:rgba(127,226,179,.2); }
.vote-button.no { border-color:rgba(255,100,119,.18); }

.play-shell { padding-top:14px; }
.play-status { position:sticky; top:0; z-index:5; margin-bottom:10px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:20px; background:var(--glass); box-shadow:var(--card-shadow); backdrop-filter:blur(18px); }
.play-status .eyebrow { margin-bottom:3px; }
.timer-label { color:var(--faint); font-size:.64rem; }
.timer { color:var(--accent); font-size:1.55rem; font-variant-numeric:tabular-nums; font-weight:780; letter-spacing:-.03em; }
.play-controls { position:sticky; bottom:0; z-index:5; margin-top:10px; padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:7px; border:1px solid var(--line); border-radius:22px; background:var(--glass); backdrop-filter:blur(20px); }
.play-controls .button { min-width:0; }

.care-grid + .button { width:100%; margin-top:18px; }
.footer-note { margin:26px 0 0; color:var(--faint); font-size:.62rem; line-height:1.5; text-align:center; }

.locker-toolbar { margin-bottom:15px; display:flex; gap:8px; }
.locker-list { display:grid; gap:8px; }
.locker-item { padding:14px; display:grid; gap:10px; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); }
.locker-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.locker-title strong { font-size:.77rem; }
.segmented { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.segmented button { min-height:34px; padding:6px; border-radius:11px; color:var(--faint); background:var(--surface-soft); font-size:.58rem; cursor:pointer; }
.segmented button.is-on { color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.segmented .locker-wishlist { grid-column:1 / -1; min-height:28px; width:max-content; justify-self:end; padding:4px 10px; color:var(--muted); background:transparent; font-size:.53rem; }
.segmented .locker-wishlist.is-wishlist { color:var(--gold); background:rgba(230,189,131,.1); box-shadow:inset 0 0 0 1px rgba(230,189,131,.35); }

.outfit-picker-fields > .field { min-width:0; }
.outfit-picker-trigger { width:100%; min-width:0; white-space:normal; }
.outfit-picker-modal { overflow-x:hidden; }
.outfit-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.outfit-choice-card { min-width:0; min-height:72px; padding:12px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface-soft); text-align:left; cursor:pointer; }
.outfit-choice-card strong { min-width:0; font-size:.72rem; line-height:1.35; overflow-wrap:anywhere; }

.catalog-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.product-card, .shop-offer { padding:15px; }
.product-card { min-width:0; }
.product-card p { font-size:.68rem; }
.product-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price { color:var(--gold); font-weight:800; }
.sku { color:var(--faint); font-size:.59rem; }
.shop-offer { position:relative; margin-top:15px; }
.offer-close { position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:12px; color:var(--faint); background:var(--surface-soft); cursor:pointer; }

.relay-status { display:inline-flex; padding:7px 10px; border-radius:99px; color:var(--yellow); background:rgba(255,211,110,.08); font-size:.65rem; font-weight:750; }
.relay-status.is-connected { color:var(--success); background:rgba(127,226,179,.08); }
.relay-status.is-error { color:var(--danger); background:rgba(255,100,119,.08); }
.pair-connect-head { margin-bottom: 14px; }
.pair-code-tabs { display:grid; grid-template-columns:1fr; gap:12px; }
.pair-code-card { display:grid; gap:12px; }
.pair-code-card h2 { margin:0; font-size:1rem; }
.pair-waiting-status { display:flex; align-items:center; justify-content:center; gap:8px; }
.pair-pulse-dot { width:10px; height:10px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 0 rgba(255,211,110,.35); animation:pulseDot 1.4s infinite; }
@keyframes pulseDot { 70% { box-shadow:0 0 0 8px rgba(255,211,110,0); } 100% { box-shadow:0 0 0 0 rgba(255,211,110,0); } }
@media (min-width: 720px) { .pair-code-tabs { grid-template-columns:1fr 1fr; } }
.pair-code { margin:25px 0 14px; color:var(--text); font-size:2.4rem; font-weight:850; letter-spacing:.12em; text-align:center; }
.verification { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.verification span { padding:7px 10px; border-radius:99px; color:var(--gold); background:rgba(230,189,131,.1); font-size:.67rem; }
.text-button { padding:0; color:var(--accent); background:transparent; cursor:pointer; text-decoration:underline; }

.calendar-grid { display:grid; gap:9px; }
.beat { position:relative; padding:18px 18px 18px 58px; }
.beat::before { content:attr(data-beat); position:absolute; left:16px; top:18px; width:28px; height:28px; display:grid; place-items:center; border-radius:10px; color:#2a1019; background:var(--accent); font-size:.7rem; font-weight:850; }
.beat p { margin-bottom:0; font-size:.7rem; }

.settings-list { display:grid; gap:10px; }
.settings-card { padding:18px; }
.settings-card > p { font-size:.74rem; }

.modal-backdrop {
  position:absolute;
  z-index:100;
  inset:0;
  display:flex;
  align-items:flex-end;
  background:rgba(3,2,5,.65);
  backdrop-filter:blur(7px);
  animation:fade-in .2s ease;
}
@keyframes fade-in { from { opacity:0; } }
.modal.bottom-sheet { width:100%; max-height:82%; padding:13px 22px calc(24px + env(safe-area-inset-bottom)); overflow:auto; border-radius:30px 30px 0 0; border:1px solid var(--line-strong); border-bottom:0; background:var(--surface-solid); box-shadow:0 -24px 60px rgba(0,0,0,.42); animation:sheet-up .35s var(--ease); }
@keyframes sheet-up { from { transform:translateY(100%); } }
.sheet-handle { width:43px; height:5px; margin:0 auto 20px; display:block; border-radius:99px; background:var(--line-strong); }
.modal-actions { display:grid; gap:8px; margin-top:18px; }

.privacy-cover {
  position:fixed;
  z-index:500;
  inset:0;
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#252125;
  background:#f2eff1;
  text-align:center;
}
.privacy-cover[hidden] { display:none; }
.cover-mark { width:70px; height:70px; margin-bottom:20px; display:grid; place-items:center; border-radius:24px; color:#fff; background:#29252a; font-size:1.5rem; font-weight:850; }
.privacy-cover p { color:#696168; }
.privacy-cover .button { color:#fff; background:#29252a; }

.toast-region { position:fixed; z-index:600; left:50%; bottom:24px; width:min(360px,calc(100vw - 32px)); transform:translateX(-50%); display:grid; gap:8px; pointer-events:none; }
.toast { padding:13px 16px; border:1px solid var(--line-strong); border-radius:17px; color:var(--text); background:var(--surface-solid); box-shadow:var(--shadow); font-size:.76rem; text-align:center; animation:toast-in .3s var(--ease); }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } }

.loading-shell { height:100%; display:grid; place-content:center; justify-items:center; gap:15px; background:var(--bg); }
.loading-shell .brand-seal { width:62px; height:62px; border-radius:22px; }
.loading-shell p { font-size:.78rem; }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width: 520px), (max-height: 720px) {
  body { display:block; background:var(--bg); }
  #app { width:100%; max-width:100%; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; }
  .topbar { flex-basis:calc(64px + env(safe-area-inset-top)); padding-top:max(7px,env(safe-area-inset-top)); }
  .bottom-nav { min-height:calc(76px + env(safe-area-inset-bottom)); flex-basis:calc(76px + env(safe-area-inset-bottom)); padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
  .page { padding-left:14px; padding-right:14px; }
  .onboarding-page { padding-left:19px; padding-right:19px; }
  .brand-copy small { display:none; }
  .grid.two, .grid.three, .grid.four, .side-stack, .spark-layout aside, .catalog-grid { grid-template-columns:1fr; }
  .grid.two.identity-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .mode-grid { grid-template-columns:1fr; }
  .family-grid { grid-template-columns:1fr; }
  .comfort-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

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

/* ======================================================
   GAME MODES - wheel-place / wheel-position / dare-dice / quick-play
   ====================================================== */

.game-modes-section { margin-top:24px; min-width:0; overflow:hidden; }

.game-mode-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  min-width:0;
}

.game-mode-tile {
  background:var(--surface-raised);
  border-radius:var(--radius-card);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  border:none;
  text-align:left;
  color:inherit;
  transition:transform .12s,box-shadow .12s;
}
.game-mode-tile:active { transform:scale(.97); }

.game-mode-tile .mode-icon {
  font-size:1.6rem;
  line-height:1;
  margin-bottom:2px;
}

.game-mode-tile strong { font-size:.95rem; display:block; }
.game-mode-tile small  { font-size:.78rem; opacity:.65; line-height:1.3; }

/* Wheel / position screens */
.mode-shell .section-head { margin-bottom:16px; }

.wheel-stage {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:20px 16px;
}

.wheel-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}

.wheel-chip {
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:100px;
  padding:4px 12px;
  font-size:.8rem;
  opacity:.8;
}

.spin-result {
  font-size:1.8rem;
  font-weight:800;
  color:var(--accent);
  text-align:center;
  letter-spacing:-.02em;
}

.spin-ring {
  width:80px;
  height:80px;
  border:4px solid var(--accent);
  border-top-color:transparent;
  border-radius:50%;
  animation:spin-loop .7s linear infinite;
  margin:12px auto;
}
@keyframes spin-loop { to { transform:rotate(360deg); } }

/* Position card */
.position-card {
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.position-section { display:flex; flex-direction:column; gap:4px; }
.position-label {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.55;
}
.position-section p { font-size:.92rem; line-height:1.5; margin:0; }
.tips-section { border-top:1px solid var(--border-subtle); padding-top:14px; }

/* Dare dice */
.dice-preview { padding:20px 16px; }
.dice-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.dice-face {
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  padding:12px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.dice-icon { font-size:1.4rem; }
.dice-name { font-size:.7rem; opacity:.65; text-align:center; }

.dice-result { padding:20px 16px; display:flex; flex-direction:column; gap:14px; }
.dice-result-row {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-subtle);
}
.dice-result-row:last-child { border-bottom:none; padding-bottom:0; }
.dice-result-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.55; }
.dice-result-value { font-size:1rem; font-weight:600; }

/* Safety banner for game modes */
.safety-mode-banner {
  margin-top:16px;
  padding:10px 14px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  font-size:.82rem;
  text-align:center;
  opacity:.8;
}
.safety-mode-banner strong { color:var(--accent); }

/* Mode challenge card (reuse existing .challenge-card style) */
.mode-challenge { margin-top:4px; }

/* -- Focus Fetish Chooser -------------------------------------------- */
.focus-shell { }
.focus-chips-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:18px 0;
}
.focus-chip {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  background:var(--surface-raised);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-card);
  color:var(--text-primary);
  font-size:.9rem;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease;
}
.focus-chip:hover { border-color:var(--accent); background:rgba(255,130,152,.08); }
.focus-chip.is-selected {
  border-color:var(--accent);
  background:rgba(255,130,152,.15);
  color:var(--accent);
  font-weight:700;
}
.skip-foreplay-panel { margin:4px 0 18px; }
.focus-actions { margin-top:4px; }
.tonight-picks-panel { margin:4px 0 18px; }
.tonight-picks-group { padding-top:16px; border-top:1px solid var(--line); }
.tonight-picks-group h3 { margin:0; font-size:.86rem; }
.wish-panel { margin:4px 0 18px; }
.wish-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.wish-select-card { display:grid; gap:8px; }
.wish-select-card > span { color:var(--muted); font-size:.73rem; font-weight:720; letter-spacing:.01em; }
.wish-note { margin:12px 0 0; color:var(--faint); font-size:.72rem; line-height:1.5; }
.kink-picks-panel, .extreme-mode-panel { margin:4px 0 18px; }
.kink-picks-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.kink-pick-chip { min-height:44px; display:flex; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:var(--muted); cursor:pointer; transition:.16s var(--ease); }
.kink-pick-chip span { font-size:.71rem; font-weight:700; line-height:1.25; }
.kink-pick-chip:hover { border-color:var(--accent); }
.kink-pick-chip.is-selected, .kink-pick-chip:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--text); box-shadow:inset 0 0 0 1px var(--accent); }
.extreme-mode-options { display:grid; gap:9px; margin-top:14px; }
.extreme-mode-option { display:flex; padding:12px 14px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); cursor:pointer; }
.extreme-mode-option > span { display:grid; gap:4px; }
.extreme-mode-option strong { color:var(--text); font-size:.78rem; }
.extreme-mode-option small { color:var(--faint); font-size:.68rem; line-height:1.4; }
.extreme-mode-option.is-selected, .extreme-mode-option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.extreme-mode-option.is-blocked { opacity:.45; cursor:not-allowed; }
.extreme-role-select, .extreme-mode-safety { margin-top:14px; }
.extreme-program-card { margin-bottom:16px; }
.extreme-role-line { padding:10px 12px; border-radius:12px; background:var(--surface-soft); }
.extreme-task-list { margin-top:14px; }
.fantasy-field { margin-top:18px; }
.fantasy-example { margin:10px 0; padding:12px; overflow:auto; white-space:pre-wrap; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:var(--muted); font:inherit; font-size:.68rem; line-height:1.5; }
.fantasy-field textarea { margin-top:4px; min-height:150px; }

/* -- Session Arc ---------------------------------------------------- */
.arc-shell { }
.arc-header {
  padding:14px 0 10px;
  margin-bottom:12px;
}
.arc-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.arc-focus-tag {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
}
.arc-beat-label {
  font-size:.82rem;
  opacity:.7;
  font-weight:600;
}
.arc-progress-bar {
  height:5px;
  background:var(--border-subtle);
  border-radius:99px;
  overflow:hidden;
}
.arc-progress-fill {
  height:100%;
  background:linear-gradient(90deg,var(--accent),#ff6477);
  border-radius:99px;
  transition:width .4s ease;
}
.arc-roles-card {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  margin-bottom:14px;
  font-size:.9rem;
  font-weight:600;
}
.arc-role-item { flex:1; text-align:center; }
.arc-role-sep { opacity:.4; font-size:1.2rem; }
.arc-transition {
  margin:0 0 14px;
  padding:10px 14px;
  background:var(--surface-raised);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
}
.transition-quote {
  font-style:italic;
  font-size:.88rem;
  opacity:.85;
}
.arc-beat-card { }
.arc-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

/* Intensity star colors by level */
.intensity-1 { color:var(--success); }
.intensity-2 { color:var(--success); }
.intensity-3 { color:var(--yellow); }
.intensity-4 { color:var(--accent); }
.intensity-5 { color:var(--danger); }

/* -- Roadmap / Map screen ------------------------------------------ */
.roadmap-shell { }
.roadmap-path {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:20px 0;
  padding:20px 10px;
  background:var(--surface-raised);
  border-radius:var(--radius-card);
}
.roadmap-node {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  min-width:0;
  flex:1;
  max-width:76px;
}
.node-icon {
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  background:var(--glass-bg);
  border:2px solid var(--border-subtle);
  transition:all .2s;
  flex-shrink:0;
}
.node-done .node-icon {
  background:rgba(127,226,179,.2);
  border-color:var(--success);
}
.node-current .node-icon {
  background:rgba(255,130,152,.15);
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,130,152,.15);
  animation:pulse-ring 1.8s ease infinite;
}
.node-upcoming .node-icon { opacity:.5; }
.node-label {
  font-size:.72rem;
  font-weight:600;
  text-align:center;
  opacity:.7;
  max-width:60px;
  line-height:1.2;
  word-break:break-word;
}
.node-ring-pulse {
  position:absolute;
  top:-4px;left:-4px;right:-4px;bottom:-4px;
  border-radius:50%;
  border:2px solid var(--accent);
  animation:pulse-ring 1.8s ease infinite;
  pointer-events:none;
}
.node-connector {
  width:24px;
  height:2px;
  background:var(--border-subtle);
  flex-shrink:0;
}
.connector-done { background:var(--success); }
@media (max-width:460px) {
  .roadmap-path { padding:16px 6px; }
  .roadmap-node { gap:4px; }
  .node-icon { width:38px; height:38px; font-size:1.1rem; }
  .node-label { font-size:.65rem; max-width:52px; }
  .node-connector { width:14px; }
}
@keyframes pulse-ring {
  0%   { opacity:1; transform:scale(1); }
  60%  { opacity:0; transform:scale(1.4); }
  100% { opacity:0; transform:scale(1.4); }
}

/* Week schedule */
.week-schedule { }
.week-row {
  display:flex;
  gap:4px;
  justify-content:space-between;
  margin-top:10px;
}
.week-day {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:.78rem;
  font-weight:600;
  opacity:.6;
  padding:6px 2px;
  border-radius:var(--radius-card);
}
.week-day.is-today { opacity:1; background:rgba(255,130,152,.12); color:var(--accent); }
.week-day.is-friday { color:var(--yellow); opacity:1; }
.day-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--border-subtle);
}
.day-dot.dot-done { background:var(--success); }
.friday-notice { margin-top:10px; }
.friday-badge {
  display:inline-block;
  padding:2px 8px;
  background:linear-gradient(135deg,var(--yellow),#ff8298);
  border-radius:99px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  color:#fff;
}

/* Friday Boss card */
.friday-boss-card {
  margin-top:16px;
  padding:20px;
  border:2px solid var(--yellow);
  background:rgba(255,211,110,.05);
}
.boss-label {
  color:var(--yellow) !important;
}
/* (a) prevent boss-label + intensity pill from colliding on narrow screens */
.friday-boss-card .challenge-heading {
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
/* (b) stack the Plan Boss Night button to full width */
.friday-boss-card .hero-actions {
  flex-direction:column;
  align-items:stretch;
}
.friday-boss-card .hero-actions button {
  width:100%;
}
/* (c) placeholder panel after week-schedule needs same top margin as the boss card */
.week-schedule + .panel {
  margin-top:16px;
}
/* ensure modal-actions View-calendar button has breathing room below boss/placeholder panel */
@media (max-width:460px) {
  .friday-boss-card,
  .week-schedule + .panel {
    margin-bottom:4px;
  }
  .roadmap-shell .modal-actions {
    margin-top:16px !important;
  }
}

/* Map mini preview on home screen */
.map-preview-section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 10px;
  padding:12px 16px;
  margin-top:14px;
  margin-bottom:16px;
}
.map-preview-head {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  font-weight:600;
  opacity:.8;
  white-space:nowrap;
  min-width:0;
  flex:1 1 100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.map-preview-head > span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.map-nodes-mini {
  display:flex;
  align-items:center;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-start;
}
.map-preview-section .btn {
  flex-shrink:0;
}
.map-preview-section .button {
  flex-shrink:0;
}
.map-node-mini {
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  background:var(--glass-bg);
  border:1.5px solid var(--border-subtle);
  flex-shrink:0;
}
.map-node-mini.done { border-color:var(--success); background:rgba(127,226,179,.15); }
.map-node-mini.current { border-color:var(--accent); background:rgba(255,130,152,.1); }
.node-line-mini {
  width:12px;
  height:2px;
  background:var(--border-subtle);
  flex-shrink:0;
}
@media (max-width:460px) {
  .map-node-mini { width:22px; height:22px; font-size:.75rem; }
  .node-line-mini { width:8px; }
  .map-preview-section { gap:6px; padding:10px 12px; }
}

/* Couple-owned badge in toy locker */
.couple-owns-badge {
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  background:rgba(127,226,179,.2);
  border:1px solid var(--success);
  border-radius:99px;
  font-size:.68rem;
  font-weight:700;
  color:var(--success);
  vertical-align:middle;
}
button[disabled] { opacity:.45; cursor:not-allowed; }

@media (max-width:370px) {
  .game-mode-grid { grid-template-columns:1fr; }
  .dice-grid { grid-template-columns:repeat(2,1fr); }
  .focus-chips-grid { grid-template-columns:1fr; }
  .wish-grid { grid-template-columns:1fr; }
  .roadmap-path { gap:4px; }
}

/* -- Points chip on home screen ------------------------------------------- */
.points-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--accent-soft);
  border: 1px solid rgba(255,130,152,.3);
  color: var(--accent);
  font-size: .74rem;
  font-weight: 780;
  position: relative;
  z-index: 1;
  margin-top: 10px;
}
.points-home-chip strong { font-size: .92rem; }

/* -- Rewards / Shop screen -------------------------------------------------- */
.rewards-section { margin-top: 4px; }
.coupon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.coupon-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coupon-card h3 { font-size: .92rem; margin-bottom: 2px; color: var(--text); }
.coupon-card p { font-size: .72rem; line-height: 1.45; margin-bottom: 4px; color: var(--muted); }
.coupon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.price-chip {
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(230,189,131,.12);
  border: 1px solid rgba(230,189,131,.2);
  color: var(--gold);
  font-size: .7rem;
  font-weight: 800;
}
.coupon-instance {
  padding: 18px;
  margin-top: 8px;
  border-color: rgba(127,226,179,.2);
  background: linear-gradient(145deg, rgba(127,226,179,.04), transparent 55%), var(--surface);
}
.partner-coupon {
  border-color: rgba(255,211,110,.22);
  background: linear-gradient(145deg, rgba(255,211,110,.05), transparent 55%), var(--surface);
}
.coupon-instance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.coupon-instance-head h3 { font-size: .88rem; color: var(--text); margin-bottom: 0; }
.points-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(230,189,131,.1);
  border: 1px solid rgba(230,189,131,.2);
  color: var(--gold);
}
.points-display strong { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.points-display span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; opacity: .8; }
.coupon-locked-notice { text-align: center; padding: 14px; }
.coupon-locked-notice p { font-size: .7rem; margin: 0; }

/* -- Calendar per-day completion ------------------------------------------- */
.day-completion-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 3px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--surface-soft);
  font-size: .65rem;
  text-align: center;
}
.day-cell.is-today {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.day-cell-label { font-weight: 700; font-size: .6rem; opacity: .7; }
.day-cell-main {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line-strong);
  font-size: .65rem;
  font-weight: 800;
  color: var(--faint);
}
.day-cell-main.done {
  border-color: var(--success);
  background: rgba(127,226,179,.18);
  color: var(--success);
}
.day-cell-side {
  font-size: .58rem;
  font-weight: 700;
  color: var(--faint);
  min-height: 12px;
}
.day-cell.is-today .day-cell-main { border-color: var(--accent-strong); }
.day-cell.is-today .day-cell-main.done { border-color: var(--success); }





/* Date Planner */
.date-planner-home-card {
  margin: 16px 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-color: rgba(230,189,131,.22);
  background: radial-gradient(circle at 8% 0,rgba(230,189,131,.13),transparent 42%),var(--surface);
}
.date-planner-home-card h2 { margin: 5px 0 6px; }
.date-planner-home-card p { margin: 0; max-width: 620px; font-size: .8rem; }
.date-planner-home-card .button { flex: 0 0 auto; }
.date-planner-shell {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.date-planner-shell .section-head { flex: 0 0 auto; }
.date-planner-shell .step-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 88px;
}
.date-planner-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.date-planner-shell .sticky-actions { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.planner-choice-grid { margin-top: 14px; }
.planner-choice { min-height: 58px; }
.planner-choice .choice-copy { padding-right: 36px; }
.planner-role-grid { margin-top: 16px; }
.planner-note { margin-top: 16px; }
.planner-subfield { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.planner-cuff-row { margin-top: 10px; display: grid; gap: 9px; }
.planner-cuff-row > span { color: var(--muted); font-size: .73rem; font-weight: 720; }
.planner-compact-choice { min-height: 52px; }
.planner-compact-choice .choice-copy { padding: 10px 32px 10px 12px; }
.planner-toggle-list { padding: 0 4px; }
.planner-custom-grid { margin-top: 22px; }
.planner-output { display: grid; gap: 13px; }
.planner-output > .section-head { margin-bottom: 3px; }
.planner-section { position: relative; }
.planner-section > .step-badge { float: right; margin-left: 12px; }
.planner-section h2 { margin-bottom: 10px; }
.planner-section h3 { margin: 18px 0 8px; font-size: 1rem; }
.planner-section p:last-child { margin-bottom: 0; }
.planner-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.planner-chip {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: .7rem;
  font-weight: 700;
}
.planner-chip.surprise { border-color: rgba(230,189,131,.27); color: var(--gold); background: rgba(230,189,131,.08); }
.planner-list { margin: 11px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.planner-list li { position: relative; padding-left: 21px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.planner-list li::before { content: '◆'; position: absolute; left: 0; top: .15em; color: var(--accent); font-size: .58rem; }
.planner-empty { color: var(--faint); font-style: italic; }
.planner-shared-card { border-color: rgba(127,226,179,.2); }
.planner-private-card { overflow: hidden; border-color: rgba(230,189,131,.24); }
.planner-private-card.is-locked { background: radial-gradient(circle at 50% 0,rgba(230,189,131,.12),transparent 56%),var(--surface); }
.planner-private-card.is-revealed { border-color: rgba(255,107,136,.3); }
.planner-locked { min-height: 230px; display: grid; place-items: center; align-content: center; text-align: center; }
.planner-locked > span { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 17px; color: var(--gold); background: rgba(230,189,131,.1); }
.planner-locked p { max-width: 450px; }
.planner-framing { margin-top: 15px; color: var(--text); font-weight: 720; }
.planner-checkpoints { margin: 10px 0 17px; padding-left: 28px; display: grid; gap: 11px; }
.planner-checkpoints li { padding-left: 4px; color: var(--accent); font-weight: 800; }
.planner-checkpoints li span { color: var(--muted); font-weight: 500; font-size: .8rem; line-height: 1.5; }
.planner-output-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }

@media (max-width: 620px) {
  .date-planner-home-card { align-items: stretch; flex-direction: column; }
  .date-planner-home-card .button { width: 100%; }
  .planner-choice-grid, .planner-custom-grid { grid-template-columns: 1fr; }
  .planner-output-actions { flex-direction: column-reverse; }
  .planner-output-actions .button { width: 100%; }
}

/* -- Visual polish round 2 (designer review) ------------------------------- */
.planner-required-hint { color: var(--accent); font-size:.78rem; margin:-4px 0 10px; font-weight:650; }
/* content clears the fixed 76px tab bar */
.app-scroll.has-nav { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.app-scroll.has-nav .page:has(#pulse-form) { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
.app-scroll.has-nav .feedback-shell { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
/* unselected choice cards must read as tappable, not disabled */
.choice input:not(:checked) + .choice-copy { opacity:.92; }
.choice:has(input:not(:checked)) { border-color: var(--line); background: var(--surface); }
/* actionable secondary buttons never look disabled */
.button.secondary { color: var(--accent); font-weight:700; border-width:1.5px; }
/* questionnaire footer breathing room */
.sticky-actions { padding-top: 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); gap:10px; }
.sticky-actions .button { margin:0; }
/* F1: Wizard step panels scroll above sticky bar; buttons never overlap on short viewports */
.wizard-questionnaire .step-panel,
.compact-questionnaire .step-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.sticky-actions .button { min-width: 72px; }





.connection-status-line {
  width: 100%;
  min-width: 0;
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .72rem;
}
.connection-status-line small { min-width: 0; overflow-wrap: anywhere; }
.curtain-mark.is-pulsing { animation: pulse-ring 1.8s ease infinite; }
.settings-list,
.settings-card,
.settings-card .section-head,
.settings-card .hero-actions,
.settings-card .toggle-row,
.settings-card .care-grid,
.settings-card .care-option,
.settings-card .theme-picker,
.settings-card .choice,
.settings-card .choice-copy {
  min-width: 0;
  max-width: 100%;
}
.settings-card { overflow-x: clip; }
.settings-card .section-head,
.settings-card .hero-actions,
.settings-card .toggle-row { flex-wrap: wrap; }
.settings-card .section-head > div,
.settings-card .toggle-copy { min-width: 0; flex: 1 1 180px; }
.settings-card .button { min-width: 0; max-width: 100%; white-space: normal; }
.settings-card .care-option span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 430px) {
  #app, .device-screen, main.page { max-width: 100vw; overflow-x: clip; }
  .settings-card .care-grid,
  .settings-card .theme-picker,
  .settings-card .settings-mode-grid { grid-template-columns: minmax(0, 1fr); }
}
/* v24 friendly first-run setup */
.account-guest-primary { min-height: 54px; font-size: .9rem; }
.account-secondary-options { display: grid; gap: 9px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.account-coming-soon { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.night-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.night-choice { min-height: 92px; display: grid; place-items: center; padding: 14px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); cursor: pointer; }
.night-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.onboarding-chip-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.onboarding-chip { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); cursor: pointer; }
.onboarding-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 560px) { .night-choice-grid { grid-template-columns: 1fr; } .night-choice { min-height: 64px; } }
.streak-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-color:rgba(255,118,150,.32); background:linear-gradient(120deg,rgba(255,118,150,.14),rgba(255,187,118,.06)),var(--surface); }
.streak-card h2, .streak-card p { margin:0; }
.streak-card p { margin-top:5px; color:var(--muted); font-size:.86rem; }
.streak-card small { flex:0 0 auto; color:var(--faint); }
.weekly-recap { margin-bottom:20px; }
.recap-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.streak-week { display:flex; gap:6px; padding-top:5px; }
.streak-day { width:11px; height:11px; border:1px solid var(--line); border-radius:50%; background:var(--surface-soft); }
.streak-day.is-played { border-color:var(--accent); background:var(--accent); box-shadow:0 0 10px rgba(255,118,150,.35); }
.recap-line { color:var(--text); font-weight:720; }
.next-up, .tomorrow-hook { color:var(--muted); }
.tomorrow-hook { margin:10px 0 16px; font-size:.84rem; }
.streak-saver { display:inline-flex; margin:4px 0 12px; }
@media (max-width:420px) { .streak-card, .recap-head { align-items:flex-start; flex-direction:column; } }

.kink-premium-mark { font-size:.72rem; vertical-align:middle; margin-left:4px; opacity:.85; }
.kink-card.is-premium-family .kink-card-header { color:inherit; }
.is-premium-family .kink-card-name { opacity:.92; }

.oauth-provider-button { display:flex; align-items:center; justify-content:center; gap:8px; }
.account-local-legend { text-align:center; opacity:.72; font-size:.8rem; }