/* ==========================================================================
   Spoilr — core app styles
   Reuses the IndieTrack / Cal AI design vocabulary verbatim: ink-on-white,
   soft cards, hairline borders, pill controls, functional accents, the .btn
   family, the split auth layout, the onboarding flow and the oauth overlay.
   Consolidated for a single-page app (no cross-file selector clashes).
   ========================================================================== */

:root {
  --verified: var(--success);
  --verified-bg: #E9F9EE;
  --maxw: 1120px;
  --gutter: 24px;
  --gold: #B8862B;
  --gold-2: #946a1c;
  /* flat premium dark panel (Apple-native, no gradient) */
  --panel-dark: #1C1B1F;
}

* {
  box-sizing: border-box;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html, body {
  overflow-x: hidden;
}
html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

/* Eliminate browser spin-buttons (triangles) from all number inputs globally */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans);
  background: var(--surface-0); color: var(--fg-1);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
::selection { background: rgba(243,152,39,0.16); }
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hidden { display: none !important; }
.tab-num { font-variant-numeric: tabular-nums; }

/* ---- view transitions ---- */
#view > .view { animation: viewIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes viewIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }

@supports (view-transition-name: root) {
  #view > .view {
    animation: none !important;
  }
}

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  /* We transition the root group to avoid height/width squishing bugs.
     The viewport snapshot size is constant, ensuring flawless native-feeling transitions. */
  ::view-transition-group(root) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Prevent dual-image blending and white/gray flicker artifacts */
  ::view-transition-image-pair(root) {
    isolation: isolate;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    height: 100%;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
  }
}

/* ============================ TYPE HELPERS ============================== */
.eyebrow { font: 600 13px/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; }
.kicker { font: 700 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

/* ============================ BUTTONS ================================== */
.btn {
  height: 48px; padding: 0 22px; border: none; border-radius: var(--r-pill);
  font: 600 15px/1 var(--font-sans); display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; cursor: pointer; white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.85,.3,1.05), background-color .2s ease, box-shadow .3s ease, color .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:not(:disabled):hover { background: var(--ink-press); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: var(--white); color: var(--fg-1); border: 1px solid var(--border-strong); }
.btn-outline:hover { background: var(--surface-1); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg-1); background: var(--surface-1); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn .ar { transition: transform .18s ease; }
.btn:hover .ar { transform: translateX(3px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font: 600 12.5px/1 var(--font-sans); background: var(--surface-1); color: var(--fg-2); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip.verified { background: var(--verified-bg); color: #128A3A; }
.chip.flame { background: var(--flame-bg); color: #B96A12; }
.chip.adult { background: #FBEEEE; color: #B23B36; }
.badge-live { display: inline-flex; align-items: center; gap: 7px; background: var(--verified-bg); color: #128A3A; letter-spacing: 0.06em; text-transform: uppercase; font: 700 11px/1 var(--font-sans); padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.badge-live .pulse, .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 0 0 rgba(52,199,89,0.5); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,0.45); } 70% { box-shadow: 0 0 0 7px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }

/* fields */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field > label { font: 600 13.5px/1.3 var(--font-sans); color: var(--fg-2); }
.field input, .field textarea, .field select {
  height: 48px; padding: 0 15px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--white);
  font: 400 15px/1 var(--font-sans); color: var(--fg-1); outline: none; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { height: auto; padding: 13px 15px; min-height: 90px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,31,0.06); }
.field .hint { font: var(--caption); color: var(--fg-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* toggle switch */
.switch { position: relative; width: 46px; height: 28px; flex: none; cursor: pointer; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--surface-2); border-radius: var(--r-pill); transition: background .2s ease; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s cubic-bezier(.2,.8,.3,1); pointer-events: none; }
.switch input:checked + .track { background: var(--success); }
.switch input:checked ~ .knob { transform: translateX(18px); }

/* generic card */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 22px; }

/* neutral image placeholder (SFW) */
.ph-img { position: relative; background: repeating-linear-gradient(45deg, var(--surface-1), var(--surface-1) 12px, var(--surface-2) 12px, var(--surface-2) 24px); display: flex; align-items: center; justify-content: center; color: var(--fg-3); }
.ph-img svg { width: 30%; max-width: 46px; height: auto; opacity: .55; }
.ph-solid { background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--fg-3); }

/* mark / wordmark */
.mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.mark svg { width: 18px; height: 18px; color: #fff; }
.wordmark { font: 800 19px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-1); }

/* ============================ TOP NAV (public/app) ===================== */
.topbar {
  position: sticky; top: 0; z-index: 80; height: 64px;
  display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter);
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.topbar .spacer { flex: 1; }
.topbar .tb-link { font: 500 14.5px/1 var(--font-sans); color: var(--fg-2); padding: 8px 12px; border-radius: var(--r-pill); cursor: pointer; transition: color .15s, background .15s; white-space: nowrap; }
.topbar .tb-link:hover { color: var(--fg-1); background: var(--surface-1); }
.tb-back { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font-sans); color: var(--fg-2); cursor: pointer; }
.tb-back:hover { color: var(--fg-1); }
.tb-back svg { width: 16px; height: 16px; }

/* notification bell */
.bell-btn { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--border-strong); color: var(--fg-1); cursor: pointer; position: relative; transition: background .14s; }
.bell-btn:hover { background: var(--surface-1); }
.bell-btn svg { width: 19px; height: 19px; }
.bell-btn .nb { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font: 700 10px/18px var(--font-num); border: 2px solid var(--white); }

/* ============================ AUTH (split) ============================= */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-left { display: flex; flex-direction: column; padding: 30px 40px; position: relative; }
.auth-top { display: flex; align-items: center; gap: 10px; }
.auth-top .back { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-sans); color: var(--fg-2); cursor: pointer; }
.auth-top .back:hover { color: var(--fg-1); }
.auth-top .back svg { width: 16px; height: 16px; }
.auth-center { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 400px; width: 100%; margin: 0 auto; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 12px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #128A3A; background: var(--verified-bg); padding: 7px 12px; border-radius: var(--r-pill); margin-bottom: 22px; }
.auth-eyebrow svg { width: 13px; height: 13px; }
.auth-center h1 { font: 800 clamp(30px, 3.4vw, 40px)/1.08 var(--font-sans); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.auth-center .lede { font: 400 17px/1.5 var(--font-sans); color: var(--fg-2); margin: 14px 0 30px; text-wrap: pretty; }
.auth-providers { display: flex; flex-direction: column; gap: 12px; }
.btn-prov { width: 100%; height: 54px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--white); color: var(--fg-1); border: 1px solid var(--border-strong); font: 600 16px/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.2,.85,.3,1.05), box-shadow .25s ease, background .15s ease; }
.btn-prov:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #fafafa; }
.btn-prov svg { width: 20px; height: 20px; flex: none; }
.btn-prov.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-prov.dark:hover { background: var(--ink-press); }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { font: 500 13px/1 var(--font-sans); color: var(--fg-3); }
.auth-legal { font: 400 12.5px/1.5 var(--font-sans); color: var(--fg-3); text-align: center; margin: 24px auto 0; }
.auth-legal a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.auth-toggle { font: 400 15px/1.4 var(--font-sans); color: var(--fg-2); text-align: center; margin-top: 8px; }
.auth-toggle button { background: none; border: none; cursor: pointer; padding: 0; font: 600 15px/1.4 var(--font-sans); color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
.auth-foot { font: var(--footnote); color: var(--fg-3); margin-top: 20px; }

.auth-right { background: var(--panel-dark); color: var(--white); padding: 56px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-right .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px circle at 82% 12%, rgba(243,152,39,0.10), transparent 60%); }
.ar-inner { position: relative; z-index: 1; max-width: 440px; }
.ar-quote { font: 700 clamp(24px, 2.4vw, 32px)/1.25 var(--font-sans); letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
.ar-sub { font: 400 16px/1.5 var(--font-sans); color: rgba(255,255,255,0.6); margin: 0 0 38px; }
.ar-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg); padding: 20px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ar-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ar-dom { display: flex; align-items: center; gap: 9px; font: 800 17px/1 var(--font-sans); letter-spacing: -0.02em; }
.ar-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ar-m .lab { font: 600 11px/1 var(--font-sans); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.04em; }
.ar-m .val { font: 800 22px/1 var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 8px; }
.ar-m .val .u { font: 600 12px/1 var(--font-sans); color: rgba(255,255,255,0.45); }
.ar-trust { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.ar-trust .t { display: flex; align-items: center; gap: 11px; font: 500 14.5px/1.3 var(--font-sans); color: rgba(255,255,255,0.82); }
.ar-trust .t svg { width: 18px; height: 18px; color: var(--verified); flex: none; }

/* handle availability + code verify */
.handle-input { display: flex; align-items: center; height: 54px; border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.handle-input.focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,31,0.06); }
.handle-input .pre { padding: 0 4px 0 15px; font: 600 16px/1 var(--font-sans); color: var(--fg-3); }
.handle-input input { flex: 1; border: none; outline: none; height: 100%; font: 600 16px/1 var(--font-sans); color: var(--fg-1); background: none; padding: 0; }
.handle-input .stat { padding: 0 15px; display: flex; align-items: center; }
.handle-input .stat svg { width: 20px; height: 20px; }
.handle-msg { font: 600 13px/1.3 var(--font-sans); margin-top: 8px; min-height: 18px; }
.handle-msg.ok { color: #128A3A; } .handle-msg.bad { color: var(--danger); } .handle-msg.checking { color: var(--fg-3); }
.spinner-sm { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface-2); border-top-color: var(--fg-2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.code-boxes { display: flex; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.code-boxes input { width: 52px; height: 62px; text-align: center; font: 800 26px/1 var(--font-num); border: 1px solid var(--border-strong); border-radius: var(--r-md); outline: none; transition: border-color .15s, box-shadow .15s; }
.code-boxes input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,31,0.06); }
.code-boxes input.filled { border-color: var(--ink); background: var(--surface-1); }
.code-hint { text-align: center; font: var(--footnote); color: var(--fg-3); margin-top: 14px; }
.code-hint b { color: var(--fg-2); }
.resend { background: none; border: none; cursor: pointer; color: var(--fg-1); font: 600 13px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 2px; }

/* ============================ AUTH WIZARD (signup flow) ================ */
body.auth-wizard-mode,
body.auth-wizard-mode #view,
body.onboarding-wizard-mode,
body.onboarding-wizard-mode #view { background: #fff !important; }
body.auth-wizard-mode,
body.onboarding-wizard-mode { --surface-0: #fff; --surface-1: #FFF0F7; --surface-2: #FFF0F7; }
.auth-wrap.auth-wizard { display: block; background: #fff; min-height: 100vh; }
.auth-wrap.auth-wizard .auth-left { max-width: 480px; margin: 0 auto; padding: 24px 28px 48px; }
.auth-wrap.auth-wizard .auth-right { display: none; }
.auth-wrap.auth-wizard .auth-center { justify-content: flex-start; padding-top: 8px; }
.auth-wrap.auth-wizard .auth-center h1 { font: 800 clamp(26px, 5vw, 34px)/1.1 var(--font-sans); }

/* progress bar */
.auth-progress { height: 3px; background: var(--surface-2); border-radius: var(--r-pill); margin: 14px 0 30px; overflow: hidden; }
.auth-progress-bar { height: 100%; background: var(--ink); border-radius: var(--r-pill); transition: width .45s cubic-bezier(.2,.8,.3,1); }

/* gender selection */
.auth-gender-opts { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.auth-gender-btn { width: 100%; height: 66px; border-radius: var(--r-lg); background: var(--surface-1); border: 2px solid transparent; font: 700 18px/1 var(--font-sans); color: var(--fg-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-align: center; }
.auth-gender-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg-1); }
.auth-gender-btn.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
/* near-subliminal micro-motion — a different cadence per button */
.auth-gender-btn[data-g="male"]:not(.sel)   { animation: awMaleNudge 4.6s ease-in-out infinite; }
.auth-gender-btn[data-g="female"]:not(.sel) { animation: awFemaleNudge 5.7s ease-in-out infinite; }
@keyframes awMaleNudge   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes awFemaleNudge { 0%,100% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.006); box-shadow: 0 1px 10px rgba(0,0,0,0.05); } }
@media (prefers-reduced-motion: reduce) { .auth-gender-btn { animation: none !important; } }

/* handle field (clean, single box — no iOS .field double-border) */
.aw-label { display: block; font: 600 13px/1 var(--font-sans); color: var(--fg-2); margin: 4px 0 8px; }
.aw-handle { display: flex; align-items: center; height: 56px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.aw-handle.focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,31,0.07); }
.aw-handle .aw-pre { padding: 0 1px 0 16px; font: 600 16px/1 var(--font-sans); color: var(--fg-3); white-space: nowrap; }
.aw-handle input { flex: 1; min-width: 0; height: 100%; border: none !important; outline: none; background: none !important; box-shadow: none !important; font: 600 16px/1 var(--font-sans); color: var(--fg-1); padding: 0 6px; }
.aw-handle .aw-stat { padding: 0 14px; display: flex; align-items: center; }
.aw-handle .aw-stat svg { width: 20px; height: 20px; }
.aw-cta { height: 58px; margin-top: 26px; }
.aw-cta:disabled { background: var(--surface-2); color: var(--fg-3); box-shadow: none; cursor: not-allowed; }

/* handle suggestions */
.handle-suggestions { margin-top: 12px; }
.handle-suggestions.hidden { display: none; }
.handle-sugg-label { font: 600 11px/1 var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 9px; display: block; }
.handle-sugg-btn { display: inline-flex; padding: 7px 14px; margin: 0 6px 6px 0; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); background: var(--white); font: 600 13px/1 var(--font-sans); color: var(--fg-1); cursor: pointer; transition: all .14s; }
.handle-sugg-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* heard source list */
.auth-heard-list { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.auth-heard-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r-lg); background: var(--surface-1); border: 2px solid transparent; cursor: pointer; text-align: left; width: 100%; transition: all .14s; }
.auth-heard-row:hover { background: var(--surface-2); }
.auth-heard-row.sel { border-color: var(--ink); background: var(--white); }
.ahr-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ahr-label { flex: 1; font: 600 16px/1 var(--font-sans); color: var(--fg-1); }
.ahr-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex: none; transition: all .15s; color: transparent; }
.auth-heard-row.sel .ahr-check { background: var(--ink); border-color: var(--ink); color: #fff; }
.ahr-check svg { width: 13px; height: 13px; }

/* ============================ OAUTH OVERLAY =========================== */
.scrim { position: fixed; inset: 0; z-index: 300; background: rgba(28,27,31,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .22s ease; overflow-y: auto; }
.scrim.show { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: 100%; max-width: 400px; background: var(--white); color: var(--fg-1); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 32px; text-align: center; transform: translateY(12px) scale(0.98); transition: transform .26s cubic-bezier(.2,.8,.3,1); margin: auto; flex-shrink: 0; }
.scrim.show .modal-card { transform: none; }
.modal-card h3 { font: 700 19px/1.3 var(--font-sans); margin: 0 0 8px; }
.modal-card p { font: 400 14.5px/1.5 var(--font-sans); color: var(--fg-2); margin: 0 0 22px; }
.modal-card p b { color: var(--fg-1); }

/* Custom pointed oval ("ovale con le punte") buttons for back & close in editor cards */
.btn-oval-back {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ink); /* Elegant black theme matching the app */
  border: none;
  cursor: pointer;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50% 0 50% 0; /* Mathematical perfect leaf/eye "ovale con le punte" */
  outline: none;
  box-shadow: 0 4px 12px rgba(28,27,31,0.22);
  transition: transform 0.16s cubic-bezier(.2,.8,.3,1), box-shadow 0.16s, background 0.16s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn-oval-back:hover {
  transform: scale(1.08);
  background: #333333;
  box-shadow: 0 6px 16px rgba(28,27,31,0.35);
}
.btn-oval-back svg {
  display: block;
}

.btn-oval-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ff3b30; /* Red close button theme matching the profile section's exit custom color */
  border: none;
  cursor: pointer;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0 50% 0 50%; /* Pointed-oval "ovale con le punte" shape - rotated/mirrored */
  outline: none;
  box-shadow: 0 4px 16px rgba(255,59,48,0.32), 0 2px 6px rgba(255,59,48,0.18);
  transition: transform 0.16s cubic-bezier(.2,.8,.3,1), box-shadow 0.16s, background 0.16s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn-oval-close:hover {
  transform: scale(1.08);
  background: #e02d22;
  box-shadow: 0 6px 22px rgba(255,59,48,0.42);
}
.btn-oval-close svg {
  display: block;
}

/* Custom styled avatar position options (ovale/rounded with compact layout and smaller input elements) */
.avpos-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  background: var(--white) !important;
  user-select: none !important;
}

.avpos-card:hover {
  background: var(--surface-1) !important;
  border-color: var(--border-strong) !important;
}

.avpos-card.style-active {
  border-color: var(--ink) !important;
  background: var(--surface-1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Elegant compact typography for description inside the options */
.avpos-card span {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fg-1) !important;
  line-height: 1.3 !important;
}

/* Beautiful custom elegant compact custom radio circles */
.avpos-card input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 50% !important;
  outline: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.avpos-card input[type="radio"]::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #007aff !important; /* Premium system blue dot matching selection circles */
  transform: scale(0) !important;
  transition: transform 0.15s ease !important;
}

.avpos-card input[type="radio"]:checked {
  border-color: #007aff !important;
}

.avpos-card input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

.oauth-acct { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; text-align: left; background: var(--white); transition: background .14s, border-color .14s; }
.oauth-acct:hover { background: var(--surface-1); border-color: var(--border-strong); }
.oauth-acct + .oauth-acct { margin-top: 10px; }
.oauth-acct .av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 14px/1 var(--font-sans); }
.oauth-acct .nm { font: 600 14.5px/1.2 var(--font-sans); }
.oauth-acct .em { font: var(--caption); color: var(--fg-2); margin-top: 3px; }
.spin-lg { width: 40px; height: 40px; margin: 8px auto 18px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--ink); animation: spin .8s linear infinite; }
.ok-ic { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--verified-bg); display: flex; align-items: center; justify-content: center; }
.ok-ic svg { width: 30px; height: 30px; color: var(--verified); }

/* ============================ TOASTS ================================== */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 400; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast { display: flex; align-items: flex-start; gap: 12px; background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-lg); transform: translateX(120%); transition: transform .4s cubic-bezier(.2,.9,.3,1.1); }
.toast.in { transform: none; }
.toast .ti { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); color: var(--flame); }
.toast .ti svg { width: 17px; height: 17px; }
.toast .tb b { font: 700 14px/1.3 var(--font-sans); display: block; }
.toast .tb span { font: 500 12.5px/1.4 var(--font-sans); color: rgba(255,255,255,0.7); display: block; margin-top: 2px; }

/* ============================ 18+ INTERSTITIAL ======================== */
.adult-card { text-align: center; }
.adult-card .ai { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 18px; background: #FBEEEE; color: #B23B36; display: flex; align-items: center; justify-content: center; }
.adult-card .ai svg { width: 30px; height: 30px; }
.adult-card .dom { font: 700 14px/1 var(--font-num); color: var(--fg-2); background: var(--surface-1); display: inline-block; padding: 7px 12px; border-radius: var(--r-pill); margin: 4px 0 18px; }
.adult-card .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ============================ NOTIF PANEL ============================= */
.notif-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: var(--white); box-shadow: var(--shadow-lg); z-index: 320; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.3,1); display: flex; flex-direction: column; }
.notif-panel.open { transform: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.notif-head h3 { font: 700 18px/1 var(--font-sans); margin: 0; }
.notif-head .close { background: none; border: none; cursor: pointer; color: var(--fg-3); padding: 6px; display: inline-flex; }
.notif-head .close svg { width: 20px; height: 20px; }
.notif-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.notif-row.unread { background: color-mix(in srgb, var(--success) 4%, var(--white)); }
.notif-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--fg-1); }
.notif-ic svg { width: 17px; height: 17px; }
.notif-row .nb-body b { font: 700 14px/1.3 var(--font-sans); display: block; }
.notif-row .nb-body span { font: 500 13px/1.4 var(--font-sans); color: var(--fg-2); display: block; margin-top: 2px; }
.notif-row .nb-body .t { font: var(--caption); color: var(--fg-3); margin-top: 5px; }

/* ============================ RESET DEMO ============================== */
.reset-fab { position: fixed; left: 16px; bottom: 16px; z-index: 200; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font: 600 12.5px/1 var(--font-sans); color: var(--fg-2); cursor: pointer; transition: background .14s, color .14s; }
.reset-fab:hover { background: var(--surface-1); color: var(--fg-1); }
.reset-fab svg { width: 15px; height: 15px; }

/* ============================ LANDING (clean, mobile-first) ============ */
.land-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; max-width: 720px; margin: 0 auto; padding: 46px 0 18px; }
.lh-copy { max-width: 600px; }
.lh-copy h1 { font: 800 clamp(34px, 7vw, 58px)/1.04 var(--font-sans); letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.lh-copy h1 .hl { color: var(--flame); }
.lh-copy .lede { font: 400 17.5px/1.6 var(--font-sans); color: var(--fg-2); margin: 18px auto 28px; max-width: 540px; text-wrap: pretty; }
.lh-copy .lede b { color: var(--fg-1); }
.lh-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lh-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; justify-content: center; }
.lh-trust .t { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-sans); color: var(--fg-2); }
.lh-trust .t svg { width: 17px; height: 17px; color: var(--verified); }
.lh-visual { position: relative; width: 100%; max-width: 350px; }
.lh-visual::before { content: ""; position: absolute; inset: -14% -10%; background: radial-gradient(closest-side, rgba(243,152,39,0.08), transparent 70%); z-index: 0; }
.lh-visual .pv-card { position: relative; z-index: 1; }

.lp-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 18px 0 8px; }
.lp-stat { background: var(--surface-1); border-radius: var(--r-lg); padding: 16px 22px; min-width: 120px; text-align: center; }
.lp-stat .n { font: 800 24px/1 var(--font-num); letter-spacing: -0.02em; }
.lp-stat .l { font: 500 12.5px/1.3 var(--font-sans); color: var(--fg-2); margin-top: 6px; }

.lp-h2 { font: 800 clamp(26px, 5vw, 34px)/1.15 var(--font-sans); letter-spacing: -0.02em; text-align: center; margin: 0 0 26px; }
.lp-how { padding: 44px 0 8px; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-step { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px; text-align: left; box-shadow: var(--shadow-sm); }
.lp-step .num { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--font-num); margin-bottom: 14px; }
.lp-step b { font: 800 16px/1.25 var(--font-sans); display: block; }
.lp-step p { font: 400 14px/1.55 var(--font-sans); color: var(--fg-2); margin: 8px 0 0; }

.land-strip { padding: 48px 0 24px; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.strip-item { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease; }
.strip-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.strip-item .si { width: 44px; height: 44px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.strip-item .si svg { width: 22px; height: 22px; }
.strip-item b { font: 800 15.5px/1.2 var(--font-sans); display: block; }
.strip-item p { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg-2); margin: 8px 0 0; }

.lp-final { padding: 16px 0 80px; }
.lp-final-card { background: var(--panel-dark); color: #fff; border-radius: var(--r-xl); padding: 50px 32px; text-align: center; }
.lp-final-card h2 { font: 800 clamp(26px, 5vw, 36px)/1.1 var(--font-sans); letter-spacing: -0.02em; margin: 0 0 12px; color: #fff; }
.lp-final-card p { font: 400 16px/1.6 var(--font-sans); color: rgba(255,255,255,0.72); margin: 0 auto 26px; max-width: 460px; }
@media (max-width: 720px) { .lp-steps { grid-template-columns: 1fr; } }

/* ============================ RESPONSIVE ============================== */
@media (max-width: 960px) {
  .land-hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .lh-visual { max-width: 400px; margin: 0 auto; }
  .strip-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-right { display: none; }
  .auth-left { min-height: 100vh; }
  .reset-fab { display: none; }   /* redundant on mobile — Reset lives in the More tab */
}
@media (max-width: 560px) {
  .strip-grid { grid-template-columns: 1fr; }
  .topbar .tb-link { display: none; }
}

/* ==========================================================================
   iOS 26 polish — AUTH (scoped to body.ios). Phone-first single column on all
   sizes (the marketing right-panel is hidden); Apple sign-in look.
   ========================================================================== */
body.ios .auth-wrap { display: block; min-height: 100vh; background: var(--ios-bg-grouped); }
body.ios .auth-wrap.auth-wizard { background: #fff !important; }
body.ios .auth-right { display: none; }
body.ios .auth-left {
  min-height: 100vh; padding: 22px 20px calc(32px + env(safe-area-inset-bottom));
}
body.ios .auth-center {
  max-width: var(--ios-phone-max); margin: 0 auto; padding-top: 8px;
}
body.ios .auth-center h1 { font: 700 clamp(28px, 8vw, 34px)/1.08 var(--font-sans); letter-spacing: -0.022em; }
body.ios .auth-center .lede { font-size: 16px; color: var(--ios-label-2); margin: 12px 0 26px; }

/* provider buttons → iOS */
body.ios .btn-prov {
  height: 50px; border-radius: var(--ios-r-btn);
  border: 1px solid var(--ios-separator); box-shadow: none;
  font: 600 17px/1 var(--font-sans);
}
body.ios .btn-prov:hover { transform: none; box-shadow: none; background: var(--surface-1); }
body.ios .btn-prov.dark { background: var(--ios-label); border-color: var(--ios-label); }

/* email / handle / code fields → iOS filled inputs */
body.ios .handle-input {
  height: 50px; border-radius: var(--ios-r-field);
  border: 1px solid transparent; background: var(--ios-bg-secondary-grouped);
  box-shadow: var(--ios-shadow-card);
}
body.ios .handle-input.focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-bg); }
body.ios .code-boxes input {
  border: 1px solid transparent; background: var(--ios-bg-secondary-grouped);
  box-shadow: var(--ios-shadow-card); border-radius: var(--ios-r-field);
}
body.ios .code-boxes input:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-bg); }
body.ios .code-boxes input.filled { border-color: var(--tint); background: var(--tint-bg); }

/* demo account rows → iOS list rows */
body.ios .oauth-acct {
  border: 1px solid var(--ios-separator); border-radius: var(--ios-r-field);
  background: var(--ios-bg-secondary-grouped);
}
body.ios .oauth-acct:hover { background: var(--surface-1); border-color: var(--ios-separator); }
body.ios .auth-divider span { color: var(--ios-label-3); }

/* demo account avatars inside the iOS inset list */
body.ios .demo-list { margin-top: 4px; }
body.ios .demo-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 14px/1 var(--font-sans); }

/* entrance animation for the auth column */
body.ios .auth-center:not(.hidden) { animation: iosReveal .5s cubic-bezier(.22,1,.36,1) both; }