/* Meant app demo. Every colour, size, radius and curve comes from ../css/tokens.css.
   Rhythm: 20px gutters, 16px under the status bar, 24px header -> content, 32px between groups,
   rows 64px+ with 14px vertical padding, cards 16px radius, photos 22px. */

/* ---------- Stage: phone frame on desktop, full screen on phones ---------- */
body.demo {
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(900px 600px at 78% 18%, var(--glow-1), transparent 70%),
    radial-gradient(700px 500px at 12% 90%, var(--glow-2), transparent 70%),
    var(--paper);
}
.stage { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 400px) auto; justify-content: center; align-items: center; gap: clamp(48px, 8vw, 120px); padding: var(--s-10) var(--gutter); }
.aside { display: flex; flex-direction: column; gap: var(--s-6); }
.aside .wordmark { width: 112px; color: var(--ink); }
.aside h1 { font: 400 clamp(2.5rem, 4vw, 3.5rem)/1.02 var(--font-serif); letter-spacing: -0.02em; margin: var(--s-4) 0 0; }
.aside p { color: var(--ink-2); font-size: var(--t-headline); line-height: 1.6; margin: 0; max-width: 36ch; }
.jump { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jump a, .jump button { height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); display: inline-flex; align-items: center; background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; font-size: var(--t-sub); font-weight: 600; transition: transform var(--dur-press) var(--ease-out), background .2s var(--ease-out); }
.jump a:hover, .jump button:hover { background: var(--surface); }
.jump a:active, .jump button:active { transform: scale(.97); }
.jump .pp-link { background: var(--champagne-soft); color: var(--champagne-ink); box-shadow: none; }
.aside .fine { font-size: var(--t-caption); color: var(--muted); }
.aside .fine a { text-decoration: underline; text-underline-offset: 3px; }

.device {
  --sat: 54px; --sab: 34px;
  position: relative; width: 414px; height: 868px; padding: 12px; border-radius: 64px; background: #0C0A0E;
  box-shadow: 0 0 0 1.5px #2A262E inset, 0 2px 4px rgba(0,0,0,.08), 0 40px 100px rgba(23, 18, 30, 0.22), 0 12px 32px rgba(23, 18, 30, 0.12);
}
.screen { position: relative; width: 390px; height: 844px; overflow: hidden; border-radius: 52px; background: var(--paper); isolation: isolate; }
.island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; background: #000; border-radius: 20px; z-index: 50; }
.statusbar { position: absolute; inset: 0 0 auto; height: var(--sat); z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 40px; font: 600 16px/1 var(--font-sans); letter-spacing: -0.01em; pointer-events: none; color: var(--ink); transition: color .3s var(--ease-out); }
.statusbar svg { height: 13px; width: auto; }
.statusbar .icons { display: flex; gap: 6px; align-items: center; }
.screen.on-dark .statusbar { color: #fff; }
.homebar { position: absolute; bottom: 8px; left: 50%; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: var(--ink); opacity: .9; z-index: 60; pointer-events: none; }
.screen.on-dark .homebar { background: #fff; }
.android .island { display: none; }
.android .screen { border-radius: 0; }
.android .statusbar { padding: 4px 24px 0 28px; font-size: 15px; }
.android .homebar { width: 108px; margin-left: -54px; height: 4px; }

@media (max-width: 960px) { .stage { grid-template-columns: auto; } .aside { display: none; } }
@media (max-width: 520px), (max-height: 760px) and (max-width: 960px) {
  .stage { padding: 0; display: block; }
  .device { --sat: max(env(safe-area-inset-top), 0px); --sab: max(env(safe-area-inset-bottom), 8px); width: 100%; height: 100dvh; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .screen { width: 100%; height: 100%; border-radius: 0; }
  .island, .statusbar, .homebar { display: none; }
}

/* ---------- Views and transitions ---------- */
.view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); }
.view.enter { animation: viewIn var(--dur-enter) var(--ease-screen) both; }
.view.enter-up { animation: viewUp 520ms var(--ease-screen) both; }
.view.enter-fade { animation: fadeIn 360ms var(--ease-out) both; }
.view.leave { animation: viewOut var(--dur-exit) var(--ease-out) both; pointer-events: none; }
@keyframes viewIn { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes viewUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes viewOut { to { opacity: 0; transform: scale(.985); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.pad { padding: calc(var(--sat) + var(--s-4)) var(--s-5) var(--s-10); display: flex; flex-direction: column; }
.pad.tight-top { padding-top: var(--s-2); }
.with-tabs .scroll { padding-bottom: calc(80px + var(--sab)); }
.with-tabs::before, .profile-view::before { content: ''; position: absolute; inset: 0 0 auto; height: calc(var(--sat) + 8px); z-index: 20; pointer-events: none; background: linear-gradient(var(--paper) 72%, transparent); }
.grow { flex: 1; min-width: 0; }

/* ---------- Type ---------- */
.large-title { font: 700 var(--t-large)/1.1 var(--font-sans); letter-spacing: -0.03em; margin: 0; }
.title { font: 700 var(--t-title)/1.2 var(--font-sans); letter-spacing: -0.02em; margin: 0; }
.section-title { font: 700 var(--t-section)/1.25 var(--font-sans); letter-spacing: -0.02em; margin: 0; }
.lede { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; margin: var(--s-2) 0 0; text-wrap: pretty; }
.muted { color: var(--muted); }
.caption { font-size: var(--t-caption); font-weight: 600; color: var(--muted); }
.hint { font-size: var(--t-caption); color: var(--muted); line-height: 1.45; margin: 0; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* ---------- Buttons ---------- */
.btn {
  height: 56px; width: 100%; border-radius: var(--r-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: 600 var(--t-headline)/1 var(--font-sans); letter-spacing: -0.01em;
  background: var(--brand); color: var(--on-brand);
  transition: transform var(--dur-press) var(--ease-out), opacity .2s var(--ease-out), background .2s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn:not(:active) { transition-timing-function: var(--ease-spring); transition-duration: 380ms; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn.champagne { background: var(--champagne); color: #17121E; }
.btn.text { background: none; color: var(--ink); height: 48px; }
.btn.text.danger { color: var(--danger); }
.btn.small { height: 40px; width: auto; padding: 0 var(--s-4); font-size: var(--t-sub); }
.btn.small svg { width: 16px; height: 16px; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform var(--dur-press) var(--ease-out), background .2s var(--ease-out); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.filled { background: var(--surface); }
.icon-btn svg { width: 22px; height: 22px; }
.badge-n { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 700 11px/18px var(--font-sans); font-style: normal; box-shadow: 0 0 0 2px var(--paper); }

/* ---------- Top bar and tab bar ---------- */
.topbar { display: flex; align-items: center; gap: var(--s-2); padding: calc(var(--sat) + var(--s-2)) var(--s-3) var(--s-2); min-height: calc(var(--sat) + 60px); }
.topbar .wordmark { width: 84px; color: var(--ink); margin-left: var(--s-2); }
.progress { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin: 0 var(--s-3); }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 2px; transform-origin: left; transition: transform 500ms var(--ease-screen); }
.step-count { min-width: 44px; text-align: center; }
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(64px + var(--sab)); padding: 0 var(--s-4) var(--sab);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--hairline);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 600; position: relative; }
.tab svg { width: 24px; height: 24px; transition: transform 300ms var(--ease-spring); }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] svg { transform: scale(1.06); }
.tab .dot { position: absolute; top: 10px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > span, .field-label { font-size: var(--t-sub); font-weight: 600; color: var(--ink-2); display: flex; align-items: center; }
.field .count { margin-left: auto; font-style: normal; font-weight: 600; color: var(--muted); }
.input { height: 56px; width: 100%; padding: 0 var(--s-4); border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid transparent; outline: none; font-size: var(--t-headline); font-weight: 500; color: var(--ink); transition: border-color .2s var(--ease-out), background .2s var(--ease-out); }
.input:focus { border-color: var(--ink); background: var(--card); }
.input::placeholder { color: var(--muted); font-weight: 400; }
.input.big { height: 64px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; background: none; border: 0; border-bottom: 2px solid var(--hairline); border-radius: 0; padding: 0; }
.input.big:focus { border-bottom-color: var(--ink); }
textarea.input { height: auto; min-height: 96px; padding: var(--s-4); line-height: 1.45; resize: none; font-size: var(--t-body); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface); border-radius: var(--r-pill); }
.segmented button { height: 44px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--t-body); color: var(--ink-2); transition: background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.tabs-seg { margin-top: var(--s-6); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.choice { min-height: 52px; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; font-size: var(--t-body); color: var(--ink-2); text-align: center; line-height: 1.25; transition: background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform var(--dur-press) var(--ease-out); }
.choice:active { transform: scale(.97); }
.choice[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.reveal-field { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-1); animation: rise 360ms var(--ease-out) both; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag { height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-sub); font-weight: 600; color: var(--ink-2); transition: background .2s var(--ease-out), color .2s var(--ease-out), transform var(--dur-press) var(--ease-out); }
.tag:active { transform: scale(.95); }
.tag[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-2) 0; }
.toggle-row b { display: block; font-weight: 600; font-size: var(--t-body); }
.toggle-row small { display: block; color: var(--muted); font-size: var(--t-caption); margin-top: 4px; }
.switch { width: 51px; height: 31px; border-radius: 16px; background: var(--surface-2); position: relative; flex: none; transition: background .25s var(--ease-out); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform 320ms var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--success); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.options { display: flex; flex-direction: column; gap: var(--s-3); }
.option { min-height: 72px; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); text-align: left; display: flex; align-items: center; gap: var(--s-4); background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; transition: box-shadow .2s var(--ease-out), transform var(--dur-press) var(--ease-out); }
.option:active { transform: scale(.98); }
.option[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink) inset; }
.option b { display: block; font-size: var(--t-headline); font-weight: 600; }
.option small { display: block; margin-top: 4px; font-size: var(--t-sub); color: var(--muted); }
.radio { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2) inset; flex: none; transition: box-shadow .25s var(--ease-spring); }
.option[aria-pressed="true"] .radio { box-shadow: 0 0 0 7px var(--ink) inset; }
.suggest { margin-top: var(--s-2); border-radius: var(--r-md); background: var(--card); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); overflow: hidden; padding: var(--s-1) 0; }
.suggest button { display: flex; width: 100%; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-4); text-align: left; }
.suggest button:hover { background: var(--surface); }
.suggest svg { width: 18px; height: 18px; color: var(--muted); }
.suggest small { color: var(--muted); margin-left: auto; }

/* ---------- Onboarding ---------- */
.ob { padding: var(--s-4) var(--s-5) var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); animation: rise 500ms var(--ease-out) both; }
.ob-head { display: flex; flex-direction: column; gap: var(--s-2); }
.ob-head .lede { margin: 0; }
.footer { padding: var(--s-3) var(--s-5) calc(var(--sab) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-2); background: linear-gradient(to top, var(--paper) 70%, transparent); }
.verify-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); min-height: 80px; border-radius: var(--r-lg); background: var(--surface); }
.verify-card b { font-size: var(--t-headline); font-weight: 600; display: block; }
.verify-card small { color: var(--muted); font-size: var(--t-sub); display: block; margin-top: 4px; }
.verify-card .ok { color: var(--success); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-sub); }
.verify-card .ok svg { width: 16px; height: 16px; }
.verified.big { width: 28px; height: 28px; }
.verified.off { color: var(--muted); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--muted); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chart-preview { border-radius: var(--r-lg); background: var(--night); color: var(--on-dark); padding: var(--s-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); position: relative; overflow: hidden; }
.chart-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(300px 160px at 85% 0%, rgba(154, 91, 211, .45), transparent 70%), radial-gradient(240px 140px at 0% 100%, rgba(230, 199, 156, .25), transparent 70%); pointer-events: none; }
.placement { position: relative; display: flex; flex-direction: column; gap: 4px; }
.placement small { font-size: 12px; font-weight: 600; color: var(--on-dark-2); }
.placement b { font-size: var(--t-headline); font-weight: 700; letter-spacing: -0.01em; }
.placement b.empty { color: rgba(245, 241, 247, .35); font-weight: 600; }
.placement svg { width: 20px; height: 20px; color: var(--champagne); margin-bottom: var(--s-1); }
.chart-hint { grid-column: 1 / -1; font-size: var(--t-caption); color: var(--on-dark-2); position: relative; margin: var(--s-1) 0 0; }
.swatches { display: grid; grid-template-columns: repeat(7, 40px); justify-content: space-between; gap: var(--s-2); }
.swatch { width: 40px; height: 40px; border-radius: 50%; position: relative; transition: transform 300ms var(--ease-spring); }
.swatch::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); opacity: 0; transform: scale(.85); transition: opacity .2s var(--ease-out), transform 300ms var(--ease-spring); }
.swatch[aria-pressed="true"]::after { opacity: 1; transform: none; }
.swatch:active { transform: scale(.9); }
.fonts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.font-tile { height: 80px; border-radius: var(--r-sm); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: box-shadow .2s var(--ease-out), transform var(--dur-press) var(--ease-out); }
.font-tile span { font-size: 28px; line-height: 1; }
.font-tile small { font-size: 12px; font-weight: 600; color: var(--muted); }
.font-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink) inset; background: var(--card); }
.font-tile:active { transform: scale(.96); }
.style-preview { border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; display: flex; gap: var(--s-4); align-items: center; padding: var(--s-5); }
.style-preview > div { min-width: 0; }
.style-preview .ph { width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 700; }
.style-preview .ph img { width: 100%; height: 100%; object-fit: cover; }
.style-preview .sp-name { font-size: 28px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-preview small { display: block; color: var(--muted); font-size: var(--t-sub); margin-top: 4px; }
.photo-pick { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--t-sub); color: var(--brand-ink); height: 44px; cursor: pointer; align-self: flex-start; }
.photo-pick svg { width: 20px; height: 20px; }
.prompt-edit { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; }
.prompt-edit .mselect-btn { height: 48px; font-size: var(--t-sub); }
.prompt-edit textarea { background: none; border: 0; padding: 0 var(--s-1); min-height: 72px; font: 400 1.375rem/1.25 var(--font-serif); outline: none; resize: none; }

/* ---------- Welcome ---------- */
.welcome { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
/* One soft light behind the cards. It fades to nothing well inside its own box, so it never shows an edge. */
.welcome-glow { position: absolute; left: -10%; right: -10%; top: 0; height: 78%; pointer-events: none;
  background: radial-gradient(closest-side at 55% 48%, var(--glow-1), transparent 100%), radial-gradient(closest-side at 32% 70%, var(--glow-2), transparent 100%);
  filter: blur(24px); }
.fan { position: relative; flex: 1; min-height: 360px; }
.fan .fcard { position: absolute; width: 164px; height: 216px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-2); left: 50%; top: 50%; animation: fanIn 900ms var(--ease-out) both; }
.fan .fcard img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.fan .fcard:nth-child(1) { --r: -12deg; --x: -150px; --y: -100px; animation-delay: 80ms; }
.fan .fcard:nth-child(2) { --r: 9deg; --x: -14px; --y: -128px; animation-delay: 160ms; z-index: 2; }
.fan .fcard:nth-child(3) { --r: -3deg; --x: -86px; --y: -60px; animation-delay: 240ms; z-index: 3; width: 180px; height: 236px; }
.fan .fcard { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
@keyframes fanIn { from { opacity: 0; transform: translate(calc(var(--x) * .6), calc(var(--y) + 40px)) rotate(0deg) scale(.92); } }
.fan .badge-float { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(10px, 150px); animation: rise 700ms 700ms var(--ease-out) both; }
.welcome-copy { position: relative; padding: 0 var(--s-6) var(--s-2); display: flex; flex-direction: column; gap: var(--s-4); text-align: center; align-items: center; }
.welcome-copy .wordmark { width: 104px; color: var(--ink); }
.welcome-copy h1 { font: 400 2.625rem/1.02 var(--font-serif); letter-spacing: -0.025em; margin: 0; }
.welcome-copy p { margin: 0; color: var(--ink-2); max-width: 30ch; }
.welcome .footer { position: relative; background: none; padding-top: var(--s-5); }

/* ---------- Badges and chips ---------- */
.compat { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3) 0 4px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: var(--t-caption); font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px var(--hairline) inset; }
.compat .score { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.compat.is-top .score { background: var(--brand); color: var(--on-brand); }
.compat.glass { background: rgba(23, 18, 30, .4); color: #fff; backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.compat.glass .score { background: #fff; color: #17121E; }
.compat.glass.is-top .score { background: var(--champagne); color: #17121E; }
.pp-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: linear-gradient(135deg, #F1DDBC, #E6C79C 55%, #D9B27C); color: #3A2A12; font-size: var(--t-caption); font-weight: 700; letter-spacing: .01em; box-shadow: 0 6px 20px rgba(230, 199, 156, .35); white-space: nowrap; }
.pp-tag svg { width: 15px; height: 15px; }
.real-tag { height: 28px; padding: 0 var(--s-3); border-radius: var(--r-pill); display: inline-flex; align-items: center; background: rgba(255,255,255,.9); color: #17121E; font-size: 12px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-caption); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.chip svg { width: 16px; height: 16px; flex: none; }
.chip.shared { background: var(--brand-soft); color: var(--brand-ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.verified { display: inline-flex; width: 20px; height: 20px; color: #2F7BF0; flex: none; }
.verified svg { width: 100%; height: 100%; }
.mono { display: grid; place-items: center; color: #fff; font-weight: 700; border-radius: 50%; flex: none; }

/* ---------- Discover ---------- */
.deck-wrap { flex: 1; position: relative; margin: 0 var(--s-3); }
.with-tabs .deck-wrap { margin-bottom: calc(64px + var(--sab)); }
.deck { position: absolute; inset: 0 0 104px; }
.card { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-2); box-shadow: 0 2px 6px rgba(23, 18, 30, .06), 0 16px 40px rgba(23, 18, 30, .14); touch-action: none; user-select: none; cursor: grab; will-change: transform; transform-origin: 50% 110%; }
.card:active { cursor: grabbing; }
.card.behind { transform: scale(.94) translateY(14px); filter: brightness(.96); transition: transform 400ms var(--ease-screen); }
.card .photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s var(--ease-out); pointer-events: none; }
.card .photos img.on { opacity: 1; }
.card .shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 18%, transparent 46%, rgba(10, 8, 12, .84)); pointer-events: none; }
.card .pager { position: absolute; top: var(--s-3); left: var(--s-4); right: var(--s-4); display: flex; gap: 4px; }
.card .pager i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }
.card .pager i.on { background: #fff; }
.card .top { position: absolute; top: calc(var(--s-3) + 15px); left: var(--s-4); right: var(--s-4); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.card .info { position: absolute; left: var(--s-5); right: 72px; bottom: var(--s-5); color: #fff; display: flex; flex-direction: column; gap: var(--s-2); }
.card .name { display: flex; align-items: center; gap: var(--s-2); font-size: 2rem; line-height: 1.05; }
.card .name .age { font-family: var(--font-sans); font-weight: 400; font-size: 1.625rem; opacity: .9; letter-spacing: -0.02em; }
.card .role { display: flex; align-items: center; gap: 6px; font-size: var(--t-body); font-weight: 500; color: rgba(255,255,255,.9); }
.card .role svg { width: 16px; height: 16px; flex: none; }
.card .info .chips { margin-top: var(--s-1); }
.card .info .chip { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card .more { position: absolute; right: var(--s-4); bottom: var(--s-5); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card .more svg { width: 20px; height: 20px; }
.card.perfect { box-shadow: 0 0 0 2px #E6C79C, 0 0 0 6px rgba(230, 199, 156, .22), 0 24px 60px rgba(230, 199, 156, .28); }
.card.pp-hidden { opacity: 0; transform: scale(.9); pointer-events: none; }
.card.pp-in { animation: ppIn 900ms var(--ease-spring) both; }
@keyframes ppIn { from { opacity: 0; transform: scale(.88) rotate(-2deg); } to { opacity: 1; transform: none; } }
.pp-why { align-self: flex-start; margin-top: var(--s-1); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: rgba(230, 199, 156, .22); color: #F6E6CC; font-size: var(--t-caption); font-weight: 700; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(230, 199, 156, .45); }
.pp-why svg { width: 16px; height: 16px; }
.pp-intro { position: absolute; inset: 0 0 104px; z-index: 10; border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-4); padding: var(--s-8) var(--s-6); color: var(--on-dark); background: radial-gradient(70% 55% at 50% 38%, rgba(230, 199, 156, .32), transparent 70%), radial-gradient(60% 50% at 50% 100%, rgba(154, 91, 211, .35), transparent 70%), var(--night); animation: ppIntro 700ms var(--ease-out) both; }
.pp-intro.out { animation: ppOut 320ms var(--ease-out) both; }
@keyframes ppIntro { from { opacity: 0; transform: scale(.96); } }
@keyframes ppOut { to { opacity: 0; transform: scale(1.02); } }
.pp-intro .night-title { font-size: 2.5rem; }
.pp-intro p { margin: 0; color: var(--on-dark-2); max-width: 30ch; line-height: 1.5; }
.pp-intro .btn { width: auto; padding: 0 var(--s-8); margin-top: var(--s-2); }
.pp-intro .pp-tag { animation: rise 600ms 150ms var(--ease-out) both; }
.stamp { position: absolute; top: 64px; padding: 6px 14px; border-radius: var(--r-pill); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; border: 3px solid; opacity: 0; pointer-events: none; }
.stamp.like { left: 24px; color: #17121E; background: var(--champagne); border-color: var(--champagne); transform: rotate(-10deg); }
.stamp.nope { right: 24px; color: #17121E; background: #fff; border-color: #fff; transform: rotate(10deg); }
.actions { position: absolute; left: 0; right: 0; bottom: var(--s-3); display: flex; justify-content: center; align-items: center; gap: var(--s-5); }
.act { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: 0 2px 4px rgba(23,18,30,.05), 0 10px 28px rgba(23,18,30,.12); transition: transform var(--dur-press) var(--ease-out); }
.act:not(:active) { transition: transform 420ms var(--ease-spring); }
.act:active { transform: scale(.9); }
.act svg { width: 26px; height: 26px; }
.act.pass { color: var(--ink); }
.act.note { width: 48px; height: 48px; color: var(--accent); }
.act.note svg { width: 22px; height: 22px; }
.act.like { width: 68px; height: 68px; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.act.like svg { width: 30px; height: 30px; }
.empty-state { position: absolute; inset: 0 0 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-4); padding: 0 var(--s-6); }
.empty-state .lede { margin: 0; }
.empty-state .ring { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent); }
.empty-state .ring svg { width: 36px; height: 36px; }

/* ---------- Full profile ---------- */
.profile-view .close { position: absolute; top: calc(var(--sat) + var(--s-2)); right: var(--s-4); z-index: 25; background: rgba(255,255,255,.92); color: #17121E; box-shadow: var(--shadow-1); }
.profile { --accent: var(--brand); --pfont: var(--font-serif); --pweight: 400; --ptrack: -0.01em; padding: calc(var(--sat) + var(--s-4)) var(--s-4) calc(120px + var(--sab)); display: flex; flex-direction: column; gap: var(--s-4); }
.profile .head { padding: 0 64px 0 var(--s-1); display: flex; flex-direction: column; gap: var(--s-2); }
.pname { font-family: var(--pfont); font-weight: var(--pweight); letter-spacing: var(--ptrack); font-size: 2.5rem; line-height: 1.04; margin: 0; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pname .age { color: var(--accent-text, var(--accent)); }
.acc-text { color: var(--acc); }
.prole { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-body); color: var(--ink-2); }
.prole svg { width: 16px; height: 16px; flex: none; }
.ask-friend { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s-4); margin-top: var(--s-1); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-caption); font-weight: 700; color: var(--ink); }
.ask-friend svg { width: 16px; height: 16px; }
.pphoto { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); }
.pphoto img { width: 100%; height: 100%; object-fit: cover; }
.pphoto .compat { position: absolute; left: var(--s-4); top: var(--s-4); }
.pphoto figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4); color: #fff; font-weight: 600; font-size: var(--t-sub); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.pcard { position: relative; border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.pcard.center { align-items: center; padding: var(--s-10); }
.pcard .q { font-size: var(--t-sub); font-weight: 600; color: var(--ink-2); padding-right: 48px; }
.pcard .a { font-family: var(--pfont); font-weight: var(--pweight); letter-spacing: var(--ptrack); font-size: 1.625rem; line-height: 1.22; margin: 0; }
.pcard .like-prompt { position: absolute; right: var(--s-3); top: var(--s-3); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--surface); transition: transform var(--dur-press) var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out); }
.pcard .like-prompt svg { width: 20px; height: 20px; }
.pcard .like-prompt:active { transform: scale(.9); }
.pcard .like-prompt[aria-pressed="true"] { background: var(--accent); color: #fff; animation: pop 420ms var(--ease-spring); }
@keyframes pop { 40% { transform: scale(1.18); } }
.facts-card { padding: var(--s-2) var(--s-5) var(--s-5); gap: var(--s-4); }
.facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
.fact { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-sub); font-weight: 500; line-height: 1.3; }
.fact span { min-width: 0; overflow-wrap: anywhere; }
.fact svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.interest-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.why { gap: var(--s-4); }
.why-title { font: 400 1.75rem/1.1 var(--font-serif); letter-spacing: -0.02em; margin: 0; }
.reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.reasons li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-body); line-height: 1.4; }
.reasons li > span:last-child { padding-top: 6px; }
.reasons .ri { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.reasons .ri svg { width: 16px; height: 16px; }
.perfect-why { background: linear-gradient(160deg, var(--champagne-soft), var(--card) 60%); box-shadow: 0 0 0 1.5px rgba(230, 199, 156, .7) inset; }
.perfect-why .pp-tag { align-self: flex-start; }
.perfect-why .ri { background: rgba(230, 199, 156, .3); color: var(--champagne-ink); }
.compat-card { background: var(--night); color: var(--on-dark); box-shadow: none; overflow: hidden; }
.compat-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px 180px at 100% 0%, rgba(154, 91, 211, .42), transparent 70%), radial-gradient(220px 160px at 0% 100%, rgba(230, 199, 156, .22), transparent 70%); pointer-events: none; }
.compat-card > * { position: relative; }
.compat-head { display: flex; align-items: center; gap: var(--s-4); }
.ring-score { --p: 0; width: 72px; height: 72px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--champagne) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); position: relative; }
.ring-score::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--night); }
.ring-score b { position: relative; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--on-dark); }
.compat-head .t { display: flex; flex-direction: column; gap: 4px; }
.compat-head .t small { color: var(--on-dark-2); font-size: var(--t-caption); font-weight: 600; }
.compat-head .t b { font-size: var(--t-section); font-weight: 700; letter-spacing: -0.02em; }
.compat-note { color: var(--on-dark-2); margin: 0; font-size: var(--t-body); line-height: 1.5; }
.pairs { display: flex; flex-direction: column; }
.pair { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--s-3); min-height: 52px; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--t-sub); }
.pair small { color: var(--on-dark-2); font-weight: 600; font-size: 12px; }
.pair .signs { display: flex; align-items: center; gap: 6px; font-weight: 600; flex-wrap: wrap; }
.pair .signs svg { width: 14px; height: 14px; color: var(--champagne); }
.pair .plus { opacity: .5; }
.pair .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.on-dark-caption { color: var(--on-dark-2); }
.windows-card .chips .chip { background: var(--surface); }
.windows-card .chip.match { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.sheet-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 22; padding: var(--s-6) var(--s-5) calc(var(--sab) + var(--s-3)); display: flex; justify-content: center; align-items: center; gap: var(--s-5); background: linear-gradient(to top, var(--paper) 60%, transparent); }

/* ---------- Sheets and toasts ---------- */
.scrim { position: absolute; inset: 0; z-index: 70; background: rgba(15, 11, 20, .42); animation: fadeIn 250ms var(--ease-out) both; }
.scrim.closing { animation: fadeOut 220ms var(--ease-out) both; }
.mini-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 86%; overflow-y: auto; background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s-3) var(--s-5) calc(var(--sab) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-4); animation: viewUp 480ms var(--ease-screen) both; }
.mini-sheet.closing { animation: sheetDown 240ms var(--ease-out) both; }
@keyframes sheetDown { to { transform: translateY(100%); } }
.mini-sheet .lede { margin: 0; }
.mini-sheet .list-card { background: var(--surface); box-shadow: none; }
.mini-sheet .list-row .lead { background: var(--card); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--surface-2); margin: 0 auto var(--s-2); flex: none; }
.quote { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); }
.quote small { display: block; color: var(--muted); font-weight: 600; font-size: var(--t-caption); }
.quote p { margin: 4px 0 0; font: 400 1.25rem/1.25 var(--font-serif); }
.toast { position: absolute; left: var(--s-4); right: var(--s-4); top: calc(var(--sat) + var(--s-2)); z-index: 90; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 22px; background: rgba(28, 22, 34, .86); color: #fff; backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--shadow-2); animation: toastIn 520ms var(--ease-spring) both; font-size: var(--t-sub); line-height: 1.35; }
.toast.out { animation: toastOut 220ms var(--ease-out) both; }
.toast img, .toast-icon { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.toast-icon { display: grid; place-items: center; background: var(--champagne); color: #17121E; }
.toast-icon svg { width: 18px; height: 18px; }
.toast b { display: block; font-size: var(--t-sub); }
@keyframes toastIn { from { transform: translateY(-140%); } }
@keyframes toastOut { to { transform: translateY(-140%); opacity: 0; } }

/* ---------- Night views (reveal, match) ---------- */
.night-view { position: absolute; inset: 0; display: flex; background: var(--night); color: var(--on-dark); overflow: hidden; text-align: center; }
.night-view::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 380px at 50% 34%, rgba(154, 91, 211, .42), transparent 70%), radial-gradient(320px 280px at 20% 92%, rgba(230, 199, 156, .2), transparent 70%); }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; animation: twinkle 3.2s var(--ease-out) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .8; transform: scale(1); } }
.night-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-6); padding: calc(var(--sat) + var(--s-10)) var(--s-6) calc(var(--sab) + var(--s-4)); width: 100%; height: 100%; }
.night-title { font: 400 3.25rem/1 var(--font-serif); letter-spacing: -0.025em; margin: 0; animation: rise 700ms 150ms var(--ease-out) both; text-wrap: balance; }
.night-title em { font-style: italic; color: var(--champagne); }
.night-inner .grow { flex: 1; }
.night-inner .ctas { width: 100%; display: flex; flex-direction: column; gap: var(--s-2); animation: rise 600ms 900ms var(--ease-out) both; }
.night-inner .btn.text { color: var(--on-dark); }
.reveal .kicker { font-size: var(--t-sub); font-weight: 600; color: var(--on-dark-2); animation: rise 600ms 100ms var(--ease-out) both; }
.reveal .night-title { font-size: 2.75rem; }
.trio { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.trio .pl { display: flex; align-items: center; gap: var(--s-4); min-height: 80px; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-align: left; animation: rise 700ms var(--ease-out) both; }
.trio .pl:nth-child(1) { animation-delay: 400ms; } .trio .pl:nth-child(2) { animation-delay: 600ms; } .trio .pl:nth-child(3) { animation-delay: 800ms; }
.trio .glyph { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(230, 199, 156, .14); color: var(--champagne); flex: none; }
.trio .glyph svg { width: 22px; height: 22px; }
.trio small { display: block; font-size: var(--t-caption); font-weight: 600; color: var(--on-dark-2); }
.trio b { display: block; font: 400 1.75rem/1.1 var(--font-serif); margin-top: 2px; }
.trio .el { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--on-dark-2); text-transform: capitalize; }
.trio .el svg { width: 14px; height: 14px; color: var(--champagne); }
.reveal .best { margin: 0; font-size: var(--t-body); color: var(--on-dark-2); max-width: 32ch; line-height: 1.5; animation: rise 600ms 1100ms var(--ease-out) both; }
.reveal .best b { color: var(--on-dark); }
.duo { position: relative; width: 268px; height: 176px; }
.duo .av { position: absolute; top: 8px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--night), 0 20px 50px rgba(0,0,0,.5); }
.duo .av img, .duo .av .mono { width: 100% !important; height: 100% !important; object-fit: cover; }
.duo .av:first-child { left: 0; animation: duoL 900ms var(--ease-spring) both; }
.duo .av:nth-child(2) { right: 0; animation: duoR 900ms var(--ease-spring) both; }
@keyframes duoL { from { transform: translateX(-80px) rotate(-12deg); opacity: 0; } }
@keyframes duoR { from { transform: translateX(80px) rotate(12deg); opacity: 0; } }
.duo .ring-score { position: absolute; left: 50%; bottom: -8px; margin-left: -40px; width: 80px; height: 80px; z-index: 2; box-shadow: 0 0 0 4px var(--night); animation: rise 600ms 600ms var(--ease-out) both; }
.match .lbl { display: flex; flex-direction: column; gap: var(--s-2); animation: rise 600ms 700ms var(--ease-out) both; }
.match .lbl b { font-size: var(--t-title); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.match .lbl p { margin: 0; color: var(--on-dark-2); max-width: 32ch; line-height: 1.5; }
.free { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: rgba(255,255,255,.08); font-size: var(--t-sub); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); animation: rise 600ms 800ms var(--ease-out) both; }
.free svg { width: 18px; height: 18px; color: var(--champagne); }

/* ---------- Groups, lists, rows ---------- */
.group { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; }
.me-card { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.list-card { border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; padding: var(--s-1) var(--s-5); }
.list-row { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; padding: 14px 0; width: 100%; text-align: left; border-bottom: 1px solid var(--hairline); }
.list-row:last-child { border-bottom: 0; }
.list-row .lead { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; color: var(--ink); }
.list-row .lead svg { width: 20px; height: 20px; }
.list-row .lead-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.list-row .grow { display: flex; flex-direction: column; gap: 4px; }
.list-row b { font-size: var(--t-headline); font-weight: 600; line-height: 1.3; }
.list-row small { color: var(--muted); font-size: var(--t-sub); line-height: 1.4; }
.list-row .chev { color: var(--muted); display: grid; }
.list-row .chev svg { width: 18px; height: 18px; }
.row-actions { display: flex; gap: var(--s-2); }
.invite-card { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); }
.invite-card small { display: block; color: var(--muted); font-size: var(--t-caption); font-weight: 600; }
.invite-card b { display: block; font-size: var(--t-headline); font-weight: 700; margin-top: 4px; }
.empty-inline { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-2) 0; }
.empty-inline p { margin: 0; color: var(--ink-2); line-height: 1.5; }

/* ---------- Chats ---------- */
.new-matches { display: flex; gap: var(--s-4); overflow-x: auto; padding: 0 var(--s-5) var(--s-2); margin: 0 calc(var(--s-5) * -1); scrollbar-width: none; }
.new-matches::-webkit-scrollbar { display: none; }
.nm { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); flex: none; width: 76px; }
.nm .av { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0); }
.nm .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); }
.nm > span:last-child { font-size: var(--t-caption); font-weight: 600; }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--s-4); min-height: 76px; text-align: left; width: 100%; }
.row .av, .row .mono { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); }
.row:last-child .body { border-bottom: 0; }
.row .line1 { display: flex; align-items: center; gap: 6px; font-size: var(--t-headline); font-weight: 600; }
.row .line1 time { margin-left: auto; font-size: var(--t-caption); font-weight: 500; color: var(--muted); }
.row .line2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sub); color: var(--muted); }
.row .line2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.row.unread .line2 { color: var(--ink); font-weight: 600; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-head { display: flex; align-items: center; gap: var(--s-2); padding: calc(var(--sat) + var(--s-2)) var(--s-3) var(--s-3); border-bottom: 1px solid var(--hairline); }
.chat-head .who { flex: 1; min-width: 0; text-align: left; display: flex; align-items: center; gap: var(--s-3); }
.chat-head .who .av, .chat-head .who .mono { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.chat-head .who b { display: flex; align-items: center; gap: 4px; font-size: var(--t-headline); font-weight: 600; }
.chat-head .who small { display: block; font-size: var(--t-caption); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who > span { min-width: 0; }
.thread { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); scrollbar-width: none; }
.thread::-webkit-scrollbar { display: none; }
.sys { align-self: center; text-align: center; font-size: var(--t-caption); color: var(--muted); margin: var(--s-2) 0 var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 20px; font-size: var(--t-body); line-height: 1.4; animation: bubbleIn 360ms var(--ease-spring) both; overflow-wrap: anywhere; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.bubble.me { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 6px; }
.bubble.them { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; }
.bubble.has-card { display: flex; flex-direction: column; gap: var(--s-2); padding: 6px 6px 10px; }
.bubble.has-card > span { padding: 0 8px; }
.mini-card { display: flex; align-items: center; gap: var(--s-3); padding: 6px var(--s-4) 6px 6px; border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; min-width: 200px; }
.mini-card img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.mini-card b { display: block; font-size: var(--t-sub); }
.mini-card small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.receipt { align-self: flex-end; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: -2px; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--surface); animation: bubbleIn 300ms var(--ease-spring) both; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s var(--ease-out) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.icebreakers { display: flex; gap: var(--s-2); overflow-x: auto; padding: 0 var(--s-4) var(--s-3); scrollbar-width: none; }
.icebreakers::-webkit-scrollbar { display: none; }
.icebreakers button { flex: none; height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 1px var(--hairline) inset; font-size: var(--t-sub); font-weight: 600; }
.composer { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3) calc(var(--sab) + var(--s-2)); border-top: 1px solid var(--hairline); }
.composer .input { height: 48px; border-radius: var(--r-pill); font-size: var(--t-body); }
.send { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; flex: none; transition: transform var(--dur-press) var(--ease-out); }
.send:active { transform: scale(.9); }
.send svg { width: 20px; height: 20px; }

/* ---------- Picks ---------- */
.picks-intro { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--champagne-soft); margin-top: var(--s-6); }
.picks-intro svg { width: 24px; height: 24px; color: var(--champagne-ink); flex: none; }
.picks-intro p { margin: 0; font-size: var(--t-sub); color: var(--ink-2); line-height: 1.45; }
.picks-intro b { color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.tile { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface-2); text-align: left; animation: rise 600ms var(--ease-out) both; transition: transform var(--dur-press) var(--ease-out); }
.tile:active { transform: scale(.97); }
.tile:nth-child(2) { animation-delay: 70ms; } .tile:nth-child(3) { animation-delay: 140ms; } .tile:nth-child(4) { animation-delay: 210ms; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(10,8,12,.82)); }
.tile .compat { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 1; height: 28px; background: rgba(255,255,255,.92); color: #17121E; box-shadow: none; }
.tile .compat .score { height: 20px; min-width: 20px; font-size: 11px; background: #17121E; color: #fff; }
.tile .compat.is-top .score { background: var(--champagne); color: #17121E; }
.tile .meta { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); color: #fff; z-index: 1; }
.tile .meta b { display: flex; align-items: center; gap: 4px; font-size: var(--t-headline); font-weight: 700; }
.tile .meta small { font-size: 12px; opacity: .88; margin-top: 4px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .verified { width: 16px; height: 16px; color: #fff; }

.deck-wrap:has(.pp-intro) .card { visibility: hidden; }

/* Dark mode: profile accents used as text get lighter so every preset stays readable */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .profile { --accent-text: color-mix(in srgb, var(--accent) 45%, #fff); }
  :root:not([data-theme="light"]) .acc-text { color: color-mix(in srgb, var(--acc) 45%, #fff); }
  :root:not([data-theme="light"]) .windows-card .chip.match { color: color-mix(in srgb, var(--accent) 45%, #fff); }
}
:root[data-theme="dark"] .profile { --accent-text: color-mix(in srgb, var(--accent) 45%, #fff); }
:root[data-theme="dark"] .acc-text { color: color-mix(in srgb, var(--acc) 45%, #fff); }

/* Meant for everyone */
.every-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); background: var(--brand-soft); }
.every-card .ob-head { gap: var(--s-1); }
.kicker-s { font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.every-title { font-size: var(--t-headline); font-weight: 700; }
.every-card .tag { background: var(--card); }
.every-card .tag[aria-pressed="true"] { background: var(--ink); }
.every-card .toggle-row { padding: 0; }
.know { background: var(--brand-soft); box-shadow: none; }
.know-chip { background: var(--card); color: var(--brand-ink); }