:root {
  --bg: #120d1d;
  --bg-2: #1b1429;
  --surface: #241b36;
  --surface-2: #2f2445;
  --line: #3a2e54;
  --text: #f6f1ff;
  --muted: #a99cc4;
  --hot: #ff5c7a;
  --badge: #d70015;     /* unread counts: white on it is 5:1 in both themes */
  --violet: #8b5cf6;
  --gold: #ffc94d;       /* fills; text uses --gold-text */
  --gold-text: #ffc94d;
  --mint: #3ddc97;
  --danger: #ff8f5a;     /* errors and losses only, always with a ⚠ or minus sign */
  --error: #ff6b81;      /* a form field that needs fixing: its frame and the message under it */
  --field-line: #7a6a9e; /* 3.7:1 against field backgrounds */
  /* Deeper ends than --hot/--violet so white button text clears 4.5:1 (4.9 and 5.7). */
  /* The primary fill's two ends and the text on it; the friend's note, the photo shade, verified and the flame. */
  --grad-from: #d6285a; --grad-to: #7c3aed; --on-grad: #ffffff;
  --grad: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  --trust: #7dd3fc; --photo-shade: #0b0712f2; --note-paper: #fffaf2; --note-ink: #1d1530; --note-muted: #5f5478; --flame: #ff8f5a;
  --radius: 22px;
  --display: 'Bricolage Grotesque', 'Rubik', system-ui, sans-serif;
  --body: 'Inter', 'Rubik', system-ui, sans-serif;
  --tabs-h: 68px;
  /* Design-system tokens: names and values from the Wingz design system (tokens.json). The space-* names record the
     steps the stylesheet actually uses; a value that is not exactly one of these stays a literal. */
  --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px;
  --space-16: 16px; --space-18: 18px; --space-24: 24px; --tap-min: 44px; --app-max: 480px;
  --radius-sm: 12px; --radius-field: 14px; --radius-md: 16px; --radius-lg: 18px; --radius-xl: 20px;
  --radius-sheet: 26px; --radius-card: 28px; --radius-pill: 999px;
  --shadow-card: 0 30px 60px -30px #000c; --shadow-toast: 0 20px 40px -20px #000; --shadow-note: 0 10px 24px -12px #000c;
  --shadow-primary: 0 10px 30px -10px #ff5c7a99;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-card: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-press: .12s; --dur-move: .3s; --dur-arrive: .35s; --dur-reward: .6s; --dur-flicker: 1.6s; --dur-breathe: 2.4s;
  --chip-bg: #ffffff14;
  --tint: #3b1f5c55;
  --bar: #120d1de6;
  color-scheme: dark;
  --chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a99cc4%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");
}

/* Text follows the system size: 17px base (Apple's mobile default), and Dynamic Type on iOS. */
html { font-size: 106.25%; }
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Nothing may widen the page sideways (the dealing cards lean past the edge), or a phone lets it pan left and right.
   clip, not hidden, so sticky headers keep working. */
html, body { overflow-x: clip; }
body {
  /* The glow is painted once at the top; repeating it every viewport height left a seam on long pages. */
  background: radial-gradient(1200px 600px at 80% -10%, var(--tint), transparent) no-repeat, var(--bg);
  color: var(--text);
  font: 1rem/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select {
  font: inherit; font-size: 1rem; /* never under 16px: iOS Safari zooms the page on focus */
  color: var(--text); width: 100%;
  background: var(--bg-2); border: 1px solid var(--field-line); border-radius: var(--radius-field); padding: var(--space-12) var(--space-14); outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--violet); }
/* A text field shows focus once, with its own violet edge and a soft halo, not the gold outline on top of it. */
input:not([type=checkbox]):not([type=radio]):focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 35%, transparent); }
textarea { resize: vertical; min-height: 90px; }
label { display: block; font-size: 0.765rem; color: var(--muted); margin: var(--space-14) 0 var(--space-6); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: 2.353rem; line-height: 1.02; font-weight: 800; }
h2 { font-size: 1.412rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 0.765rem; }
.row { display: flex; gap: var(--space-10); align-items: center; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: var(--space-12); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

#app {
  max-width: var(--app-max); margin: 0 auto; min-height: 100%;
  padding: max(16px, env(safe-area-inset-top)) var(--space-16) calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom));
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--tap-min);
  padding: var(--space-14) 20px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
  background: var(--surface-2); transition: transform var(--dur-press) ease, opacity var(--dur-press);
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); color: var(--on-grad); box-shadow: var(--shadow-primary); }
.btn.gold { background: var(--gold); color: #2a1a00; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; }
/* Text links keep their place in the line but get a 44px-tall tap area. */
.link { display: inline-block; padding-block: 12.5px; margin-block: -12.5px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-18); }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-12); border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); font-size: 0.765rem; font-weight: 600; white-space: nowrap;
}
button.pill, a.pill { min-height: var(--tap-min); }
.chip { display: inline-block; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--chip-bg); font-size: 0.765rem; margin: 0 var(--space-6) var(--space-6) 0; }
.chip.shared { background: color-mix(in srgb, var(--mint) 15%, transparent); color: var(--mint); }
.chip.pickable { cursor: pointer; border: 1px solid var(--field-line); background: transparent; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-14); }
.chip.pickable.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.chip.add-interest { border-style: dashed; color: var(--muted); }
.interest-new { display: inline-flex; align-items: center; gap: var(--space-6); margin: 0 0 var(--space-6); flex-wrap: wrap; }
.interest-new input { width: 11em; min-height: var(--tap-min); }
.interest-new .btn { min-height: var(--tap-min); padding: 0 var(--space-14); }

/* avatar */
.avatar {
  --s: 44px; width: var(--s); height: var(--s); flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: white;
  background-size: cover; background-position: center; font-size: calc(var(--s) * .4);
}

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-14); gap: var(--space-8); }
.logo { font-family: var(--display); font-weight: 800; font-size: 1.529rem; letter-spacing: -0.03em; color: var(--text); }

/* deck */
.deck { position: relative; height: min(62vh, 560px); margin-bottom: var(--space-18); }
.swipe-card {
  position: absolute; inset: 0; border-radius: var(--radius-card); overflow: hidden; touch-action: none; user-select: none;
  background: var(--surface); box-shadow: var(--shadow-card); will-change: transform;
  /* Text sits on a dark photo shade in both appearances, so the card keeps dark-theme tokens. */
  --text: #f6f1ff; --muted: #c9bfdd; --mint: #3ddc97; --trust: #7dd3fc; --danger: #ff8f5a; --chip-bg: #ffffff1f; color: var(--text);
  transition: transform var(--dur-move) var(--ease-card), opacity var(--dur-move);
}
.swipe-card.dragging { transition: none; }
.swipe-card:not(:last-child) { transform: scale(.95) translateY(14px); --dim: .3; }
/* The card behind is dimmed by a black layer's opacity, not a filter, so pulling the top card only recomposites. */
.swipe-card::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #000; opacity: var(--dim, 0); pointer-events: none;
  transition: opacity var(--dur-move); will-change: opacity; }
.swipe-card.dragging + .swipe-card::after, .swipe-card:has(+ .swipe-card.dragging)::after { transition: none; }
/* A moving card would re-blur everything behind its glassy chips every frame; while it moves (and behind it) they go solid-tinted. */
.swipe-card:not(:last-child) *, .swipe-card.dragging *, .swipe-card.flying * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.swipe-card .photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.swipe-card .photo.initials { display: grid; place-items: start center; padding-top: 22%; font: 800 140px var(--display); color: #ffffffb0; /* decorative, does not scale */ }
.swipe-card .shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, var(--photo-shade) 78%); }
.swipe-card .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.swipe-card .name { font: 800 1.882rem/1 var(--display); }
.swipe-card .name small { font-weight: 500; font-size: 1.412rem; opacity: .85; }
.swipe-card .scroll { max-height: 46%; overflow: auto; }
.wing-banner {
  position: absolute; top: 14px; inset-inline-start: 14px; inset-inline-end: 68px; z-index: 2;
  background: #120d1dd9; color: #f6f1ff; backdrop-filter: blur(10px); border: 1px solid var(--gold);
  border-radius: var(--radius-md); padding: var(--space-10) var(--space-14); font-size: 0.824rem;
}
.wing-banner b { color: var(--gold); }
/* The stamps: the decision's own bead (the same material as its button) with a label under it, growing in with the
   lean; a wash of the decision's colour rises from the card's edge with it. --like/--nope/--super run 0..1. */
.swipe-card { --like: 0; --nope: 0; --super: 0; }
.swipe-card .tint { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s ease-out; will-change: opacity; }
.tint.like { opacity: var(--like); background: linear-gradient(110deg, #ff3d6ed9, #b02fd866 42%, transparent 72%); }
.tint.nope { opacity: var(--nope); background: linear-gradient(250deg, #0b0712e6, #0b071280 45%, transparent 75%); }
.tint.super { opacity: var(--super); background: linear-gradient(0deg, #ffb02099, #ffc94d40 45%, transparent 75%); }
.stamp {
  --s: 0; --r: 0deg; position: absolute; top: 15%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--space-10);
  pointer-events: none; opacity: var(--s); transform: rotate(var(--r)) scale(calc(.5 + var(--s) * .5));
  transition: opacity .2s ease-out, transform .2s ease-out; will-change: opacity, transform;
}
.swipe-card.dragging .stamp, .swipe-card.dragging .tint { transition: none; }
.stamp i { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.stamp i .ico { width: 46px; height: 46px; }
.stamp b { font: 800 1rem/1 var(--display); letter-spacing: .1em; padding: var(--space-8) var(--space-16); border-radius: 99px; color: #fff;
  background: #0b0712d9; }
.stamp.like { left: 22px; --s: var(--like); --r: -12deg; }
.stamp.like i { color: #fff;
  background: radial-gradient(110% 70% at 32% 14%, #ffffff5e, transparent 46%), linear-gradient(150deg, #ff6b8a, #d6285a 48%, #8b2fd8);
  box-shadow: inset 0 -8px 16px #4a0a3a59, inset 0 2px 0 #ffffff4d, 0 0 0 4px #ffffff40, 0 16px 40px -8px #ff3d6ecc; }
.stamp.like i .ico { filter: drop-shadow(0 2px 3px #6b0a3a66); }
.stamp.nope { right: 22px; --s: var(--nope); --r: 12deg; }
.stamp.nope i { color: #1c1530; background: radial-gradient(110% 70% at 32% 14%, #fff, #e6e0f0 70%);
  box-shadow: inset 0 -6px 12px #1c153026, 0 0 0 4px #ffffff33, 0 16px 40px -10px #000c; }
.stamp.nope i .ico { width: 40px; height: 40px; stroke-width: 3; }
.stamp.super { left: 0; right: 0; top: 18%; margin: auto; width: max-content; --s: var(--super); --r: -6deg; }
.stamp.super i { color: #3d2400;
  background: radial-gradient(110% 70% at 32% 14%, #ffffff8c, transparent 46%), linear-gradient(150deg, #ffe38f, #ffbe2e 52%, #f08c00);
  box-shadow: inset 0 -8px 16px #9a520040, inset 0 2px 0 #ffffff80, 0 0 0 4px #ffffff40, 0 16px 44px -6px #ffb020cc; }
.stamp.super b { color: #ffd76a; }
.stamp.pitch { left: 24px; color: var(--gold); }

.actions { display: flex; justify-content: center; align-items: center; gap: var(--space-18); }
.round {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.529rem;
  background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur-press);
}
.round:active { transform: scale(.9); }
.round.big { width: 74px; height: 74px; font-size: 1.882rem; background: var(--grad); color: var(--on-grad); border: 0; }
.round.super { color: var(--gold-text); }

.empty { text-align: center; padding: 50px var(--space-10); }
.empty .emoji { font-size: 3.176rem; }

/* invite & progress */
.invite-hero { background: var(--grad); border: 0; color: var(--on-grad); position: relative; overflow: hidden; }
.invite-hero::after {
  content: ''; position: absolute; inset-inline-end: -12px; top: -18px; width: 130px; height: 130px; opacity: .18; transform: rotate(-15deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M22 3.5c-6.8.2-12 2.4-15.2 6.6C4.6 13 3.6 16.6 3.5 20.5c1.9-1.6 4.4-2.6 7.6-3 3-.4 5.5-1.7 7.1-3.9-1.8.4-3.6.3-5.1-.2 2.7-.5 4.9-1.8 6.3-4-1.6.4-3.2.4-4.7 0 3.1-1 5.5-3 7.3-5.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.progress { height: 10px; background: #ffffff33; border-radius: 99px; overflow: hidden; margin: var(--space-12) 0 var(--space-6); }
.progress > i { display: block; height: 100%; background: white; border-radius: 99px; transition: width var(--dur-reward); }
.milestones { display: flex; justify-content: space-between; font-size: 0.706rem; }
.milestones .done { font-weight: 700; }

.list-item { display: flex; gap: var(--space-12); align-items: center; padding: var(--space-12) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.seg { display: flex; background: var(--bg-2); border-radius: var(--radius-pill); padding: var(--space-4); margin-bottom: var(--space-12); }
.seg button { flex: 1; min-height: var(--tap-min); padding: var(--space-8); border-radius: var(--radius-pill); font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px #0000002e; } /* surface-2 vanished on bg-2 in light mode */

/* "Likes you" deck: one card at a time, new ones under a foil to scratch */
/* On Matches: one row that leads to the deck */
.likes-entry { display: flex; align-items: center; gap: var(--space-12); color: inherit; text-decoration: none; min-height: 56px; }
.likes-entry .grow { display: grid; gap: var(--space-2); min-width: 0; }
.le-faces { display: flex; flex: none; }
.le-faces > * { margin-inline-start: -10px; border: 2px solid var(--surface); box-sizing: content-box; }
.le-faces > :first-child { margin-inline-start: 0; }
.le-foil { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem var(--display); font-style: normal; color: #f6f1ff;
  background: linear-gradient(135deg, #3b2a63, #8a6ad6 50%, #3b2a63); }
.le-locked { margin: var(--space-12) 0 var(--space-8); }
.le-locked .le-foil { width: 46px; height: 46px; font-size: 1.1rem; }
.le-foil.super { background: linear-gradient(135deg, #b8860b, #fff1b8 50%, #b8860b); color: #3a2600; }
.le-go { color: var(--muted); display: grid; }
.le-go .ico { rotate: -90deg; }
[dir="rtl"] .le-go .ico { rotate: 90deg; }
.likes-deck { margin-top: var(--space-8); display: grid; gap: var(--space-16); }
.ld-stack { position: relative; width: min(100%, 360px); aspect-ratio: 3 / 4; margin: 0 auto; }
.ld-under { position: absolute; inset: 0; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--line); }
.ld-under.u0 { transform: rotate(4deg) translateY(4px); }
.ld-under.u1 { transform: rotate(-5deg) translateY(8px); opacity: .7; }
.ld-card { position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-2) center / cover; box-shadow: 0 14px 34px -14px #000c; touch-action: pan-y; transition: transform .25s ease; }
.ld-card.super { box-shadow: 0 0 0 3px var(--gold), 0 14px 34px -14px #000c; }
.ld-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-12); background: linear-gradient(to top, #000b, transparent 45%); }
.ld-sure { align-self: flex-start; background: #000a; color: #fff; border-radius: 99px; padding: 5px 11px; font-size: .8rem; font-weight: 600; }
.ld-card.super .ld-sure { background: var(--gold); color: #2a1a00; }
.ld-card.super .ld-sure .emo { color: inherit; } /* a gold star on the gold chip would vanish */
.ld-info { display: grid; color: #fff; }
.ld-info b { font-size: 1.3rem; }
.ld-info small { opacity: .85; }
.ld-card.hidden .ld-face { visibility: hidden; }
.ld-foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ld-reveal { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); min-height: var(--tap-min); padding: 0 var(--space-18); border-radius: 99px; border: 0; background: #0009; color: #fff; font: 600 .9rem var(--body); white-space: nowrap; }
.ld-reveal:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ld-actions { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ld-actions .round { width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; }
.ld-actions .round.pass { background: var(--surface-2); color: var(--muted); }
.ld-actions .round.like { background: var(--grad); color: var(--on-grad); width: 64px; height: 64px; }
.ld-actions .round:disabled { opacity: .35; }
.ld-actions .round.undo { width: var(--tap-min); height: var(--tap-min); background: var(--surface); color: var(--muted); }
.ld-actions .round.undo[hidden] { display: none; }
.ld-card.to-like { box-shadow: 0 0 0 4px #3ddc97, 0 14px 34px -14px #000c; }
.ld-card.to-pass { box-shadow: 0 0 0 4px #ff8f5a, 0 14px 34px -14px #000c; }
.ld-done { text-align: center; display: grid; gap: var(--space-14); justify-items: center; }
/* Almost there: the card glows and breathes while it's being scratched past a quarter. */
.ld-card.warm { animation: ld-warm 0.9s ease-in-out infinite alternate; }
.ld-card.super.warm { animation-name: ld-warm-gold; }
@keyframes ld-warm { from { box-shadow: 0 0 0 0 #ff5c7a00, 0 14px 34px -14px #000c; } to { box-shadow: 0 0 0 4px #ff5c7a99, 0 0 40px 6px #8b5cf699; } }
@keyframes ld-warm-gold { from { box-shadow: 0 0 0 3px var(--gold), 0 14px 34px -14px #000c; } to { box-shadow: 0 0 0 5px #ffe08a, 0 0 50px 10px #ffc94daa; } }
.ld-card.revealing .ld-face { visibility: visible; animation: ld-in .5s .15s both var(--ease-out); }
@keyframes ld-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-card.warm, .ld-card.revealing .ld-face { animation: none; } }
.blurred { filter: blur(7px); }

/* chat: see the Chat section at the end */

/* tabs */
#tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center;
  background: var(--bar); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
}
#tabs[hidden] { display: none; }
#tabs a {
  flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  text-decoration: none; font-size: 0.706rem; color: var(--muted); font-weight: 600; position: relative;
}
#tabs a span { display: grid; }
.tab-ico { width: 22px; height: 22px; }
#tabs a.on { color: var(--text); }
#tabs a span { position: relative; }
/* The unread count, messenger style: a red pill on the icon's shoulder, ringed in the bar's colour so it reads as cut out. */
#tabs .tab-badge {
  position: absolute; top: -6px; inset-inline-end: -11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; background: var(--badge); color: #fff; box-shadow: 0 0 0 2px var(--bg);
  font: 700 12px/1 var(--body); font-style: normal; font-variant-numeric: tabular-nums;
}

/* toasts & modal */
#toasts { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 50; display: grid; justify-items: center; gap: var(--space-8); pointer-events: none; }
.toast {
  pointer-events: auto;
  max-width: 440px; margin: 0 var(--space-16); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); background: var(--surface-2);
  border: 1px solid var(--line); box-shadow: var(--shadow-toast); animation: drop var(--dur-arrive) var(--ease-out);
}
@keyframes drop { from { transform: translateY(-20px); opacity: 0; } }
#modal { position: fixed; inset: 0; z-index: 40; background: #07040dcc; backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--space-16); }
#modal[hidden] { display: none; }
#modal .sheet { width: 100%; max-width: 420px; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: var(--space-24); animation: pop var(--dur-move) var(--ease-out); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.match-sheet { text-align: center; }
.match-sheet h1 { font-size: 2.706rem; }
.match-avatars { position: relative; display: flex; justify-content: center; margin: 22px 0; }
.match-avatars .avatar { --s: 110px; border: 4px solid var(--bg); position: relative; }
.match-glow { position: absolute; inset: -30px 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hot) 55%, transparent), transparent);
  filter: blur(14px); pointer-events: none; animation: breathe var(--dur-breathe) ease-in-out 1.1s infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
.match-heart { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad); color: var(--on-grad); box-shadow: 0 6px 20px -4px var(--hot); }
.match-heart .ico { width: 24px; height: 24px; }
/* While dragging, the stamp grows with the pull; past the threshold the card's edge lights up in the stamp's colour. */
.swipe-card.armed-like { box-shadow: 0 0 0 3px #ff5c7a, 0 30px 60px -30px #000c; }
.swipe-card.armed-nope { box-shadow: 0 0 0 3px #f6f1ffcc, 0 30px 60px -30px #000c; }
.swipe-card.armed-super { box-shadow: 0 0 0 3px var(--gold), 0 30px 60px -30px #000c; }
.match-avatars .avatar + .avatar { margin-inline-start: -24px; }

/* landing */
.landing { min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; }
.landing .how { display: grid; gap: var(--space-10); margin: 26px 0; }
.landing .how div { display: flex; gap: var(--space-12); align-items: flex-start; }
.landing .how > div > b { font-size: 1.294rem; }
.invite-ribbon { background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid var(--gold); color: var(--gold-text); padding: var(--space-10) var(--space-14); border-radius: var(--radius-field); margin-bottom: var(--space-18); }
/* Discover's not-live notice: one strip with the next step, so the deck keeps the screen. */
.wait-banner { display: grid; gap: var(--space-10); padding: var(--space-12); margin-bottom: var(--space-12); color: var(--text); }
.wait-banner .row { gap: var(--space-12); }
.wait-banner .small { color: var(--muted); margin-top: var(--space-2); }
.wait-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); font-size: .8rem; color: var(--muted); }
.wait-steps li { display: flex; align-items: center; gap: 5px; }
.wait-steps b { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .7rem; }
.wait-steps .done b { background: color-mix(in srgb, var(--gold) 30%, transparent); border-color: transparent; color: var(--gold-text); }
.wait-steps .now { color: var(--text); font-weight: 600; }
.wait-steps .now b { background: var(--gold); border-color: var(--gold); color: #2a1a00; }
.pending-strip { display: flex; align-items: center; gap: var(--space-12); padding-block: var(--space-8); padding-inline: var(--space-14) var(--space-8); margin-bottom: var(--space-12); }
.pending-strip .grow { flex: 1; min-width: 0; }
.pending-strip .small { margin-top: var(--space-2); }
.btn.sm { min-height: var(--tap-min); padding: 0 var(--space-16); flex: none; font-size: .9rem; }
/* Me → Settings row */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.error { color: var(--error); font-size: 0.824rem; min-height: 20px; margin-top: var(--space-8); }
.error:not(:empty)::before { content: '⚠ '; }
.stat { text-align: center; }
.stat b { display: block; font: 800 1.529rem var(--display); }

/* Hebrew: Rubik covers Hebrew glyphs; headings get a touch less negative tracking. */
:root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3, :root[dir="rtl"] .swipe-card .name { letter-spacing: 0; }
:root[dir="rtl"] .logo { direction: ltr; }

.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.stats-hint { margin: -6px 0 var(--space-12); }

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

@media (prefers-contrast: more) {
  :root { --line: #8a7aae; --field-line: #b3a5d6; --muted: #d9cff0; }
  .card, .pill, .round { border-color: var(--line); }
}

/* Light appearance: from the device setting by default, or chosen in Me → Settings, which sets data-theme on <html>.
   The two blocks below carry the same values; change them together. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5478%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");
    --bg: #f8f5fd; --bg-2: #f1ecfa; --surface: #ffffff; --surface-2: #efe9f8; --line: #ddd3ee;
    --text: #1d1530; --muted: #5f5478; --hot: #c8204f; --gold-text: #8a5a00; --mint: #0b7a4f;
    --danger: #a8360b; --error: #c41230; --field-line: #8a7aae; --chip-bg: #1d15300f; --tint: #e4d4ff; --bar: #f8f5fde6;
    --trust: #0369a1;
    --shadow-card: 0 30px 60px -30px #1d153066; --shadow-toast: 0 20px 40px -20px #1d153055;
    --shadow-note: 0 8px 20px -10px #1d153059, 0 0 0 1px #1d15301f;
    color-scheme: light;
  }
  :root:not([data-theme="dark"]) .swipe-card { box-shadow: var(--shadow-card); }
  :root:not([data-theme="dark"]) .toast { box-shadow: var(--shadow-toast); }
  :root:not([data-theme="dark"]) .friend-note { box-shadow: var(--shadow-note); }
}
:root[data-theme="light"] {
  --chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5478%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");
  --bg: #f8f5fd; --bg-2: #f1ecfa; --surface: #ffffff; --surface-2: #efe9f8; --line: #ddd3ee;
  --text: #1d1530; --muted: #5f5478; --hot: #c8204f; --gold-text: #8a5a00; --mint: #0b7a4f;
  --danger: #a8360b; --error: #c41230; --field-line: #8a7aae; --chip-bg: #1d15300f; --tint: #e4d4ff; --bar: #f8f5fde6;
  --trust: #0369a1;
  --shadow-card: 0 30px 60px -30px #1d153066; --shadow-toast: 0 20px 40px -20px #1d153055;
  --shadow-note: 0 8px 20px -10px #1d153059, 0 0 0 1px #1d15301f;
  color-scheme: light;
}
:root[data-theme="light"] .swipe-card { box-shadow: var(--shadow-card); }
:root[data-theme="light"] .toast { box-shadow: var(--shadow-toast); }
:root[data-theme="light"] .friend-note { box-shadow: var(--shadow-note); }
@media (prefers-color-scheme: light) and (prefers-contrast: more) {
  :root:not([data-theme="dark"]) { --line: #8a7aae; --field-line: #5f5478; --muted: #3f3557; }
}
@media (prefers-contrast: more) {
  :root[data-theme="light"] { --line: #8a7aae; --field-line: #5f5478; --muted: #3f3557; }
}

/* "Who fits better?" */
.game-card { display: flex; align-items: center; gap: var(--space-14); text-decoration: none; border-color: var(--gold); }
.game-card .grow { flex: 1; min-width: 0; }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.option {
  display: flex; flex-direction: column; text-align: start; padding: 0; overflow: hidden;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-xl); transition: transform .15s, opacity .15s, border-color .15s;
}
.option:active { transform: scale(.97); }
.option.chosen { border-color: var(--gold); transform: scale(1.03); }
.option[disabled]:not(.chosen) { opacity: .45; }
.option-photo { aspect-ratio: 3 / 4; background-size: cover; background-position: center; display: grid; place-items: center; font: 800 72px var(--display); color: #ffffffb0; }
.option-body { padding: var(--space-10) var(--space-12) var(--space-12); }

/* Share card */
.share-preview { display: block; width: auto; max-width: 100%; max-height: 50vh; margin: var(--space-12) auto 0; border-radius: var(--radius-lg); box-shadow: 0 20px 40px -20px #000a; }
.toast-action { margin-inline-start: var(--space-10); padding: var(--space-8) var(--space-14); }

/* Safety & consent */
.swipe-card:not(:last-child) .card-menu { visibility: hidden; }
.card-menu {
  position: absolute; top: 14px; inset-inline-end: 14px; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; z-index: 4;
  background: #120d1d99; color: #fff; font-size: 22px; line-height: 1; backdrop-filter: blur(8px);
}
.reason { display: flex; align-items: center; gap: var(--space-10); min-height: var(--tap-min); padding: 0 var(--space-14); margin: 0; border: 1px solid var(--field-line); border-radius: var(--radius-field); color: var(--text); font-size: 1rem; }
.reason input { width: auto; accent-color: #7c3aed; }
.consent { display: flex; gap: var(--space-10); align-items: flex-start; color: var(--text); font-size: .9rem; margin: var(--space-16) 0 var(--space-6); }
.consent input { width: 22px; height: 22px; flex: none; margin-top: var(--space-2); accent-color: #7c3aed; }
.checklist { margin: var(--space-4) 0; padding-inline-start: 20px; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.legal-links { text-align: center; margin-top: var(--space-18); }

/* Interaction polish (ui-ux-pro-max checklist) */
html { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 16px); }
button, a, label, .chip.pickable { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.reason, .consent, .chip.pickable { cursor: pointer; }
.pill, .chip.pickable, .list-item, .option, .reason, .card-menu, #tabs a { transition: opacity var(--dur-press) ease, background-color .15s ease, border-color .15s ease; }
button.pill:active, a.pill:active, .chip.pickable:active, a.list-item:active, .card-menu:active, #tabs a:active, .reason:active { opacity: .65; }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.08); }
  button.pill:hover, a.pill:hover, .chip.pickable:hover, .reason:hover, .option:hover { border-color: var(--violet); }
  a.list-item:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
  #tabs a:hover { color: var(--text); }
}
.error:focus { outline: none; }
.round .ico { width: 28px; height: 28px; vertical-align: 0; }
.round.big .ico { width: 34px; height: 34px; }
.stat b .ico { width: .9em; height: .9em; vertical-align: -.08em; }

/* Short landscape screens: deck and actions side by side so the buttons never sit under the tab bar. */
@media (orientation: landscape) and (max-height: 520px) {
  #app { max-width: 760px; }
  .deck-wrap { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
  .deck-wrap .deck { height: calc(100dvh - var(--tabs-h) - 96px); min-height: 180px; margin-bottom: 0; }
  .deck-wrap .actions { flex-direction: column; gap: var(--space-12); }
  .swipe-card .photo.initials { padding-top: 4%; font-size: 90px; }
  .swipe-card .scroll { max-height: 34%; }
}

/* ---------- Landing hero video ---------- */
.hero-video { position: relative; margin: var(--space-18) 0 var(--space-16); border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 5; background: #120d1d;
  box-shadow: 0 40px 80px -40px #000c, 0 0 0 1px var(--line); }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-toggle { position: absolute; bottom: 12px; inset-inline-end: 12px; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; display: grid; place-items: center;
  background: #120d1dcc; color: #fff; backdrop-filter: blur(8px); border: 1px solid #ffffff33; }
.video-toggle .ico { width: 20px; height: 20px; vertical-align: 0; }
.cta-dock { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; margin-bottom: var(--space-8); }
.cta-dock .btn { box-shadow: 0 16px 40px -14px #d6285acc; }
.landing .how > div > b.how-ico { font-size: 0; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--gold-text); }
.how-ico .ico { width: 22px; height: 22px; vertical-align: 0; }

/* ---------- Landing: the typed note, the drop clock, the wings ---------- */
.hero-note { margin: 22px 0 0; margin-inline-start: var(--space-14); }
.hero-note blockquote { display: grid; }
.hero-note blockquote > span { grid-area: 1 / 1; }
.hero-note .ghost { visibility: hidden; }
.hero-note { animation: note-in var(--dur-arrive) ease both; }
.hero-note.leaving { opacity: 0; transition: opacity var(--dur-move); }
@keyframes note-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-note .typed.typing::after { animation: none; } }
.hero-note .typed.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-inline-start: 1px; vertical-align: -2px;
  background: var(--grad-from); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.drop-clock { display: flex; align-items: center; gap: var(--space-12); margin: 0 0 var(--space-12); padding: var(--space-12) var(--space-14); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); line-height: 1.4; }
.drop-digits { display: inline-flex; font: 800 1.059rem var(--display); font-variant-numeric: tabular-nums; color: var(--text); }
.drop-digits span { display: inline-block; min-width: .62em; text-align: center; }
.drop-digits i { font-style: normal; color: var(--muted); padding: 0 1px; }
.drop-digits span.flip { animation: digit-flip var(--dur-arrive) ease; }
@keyframes digit-flip { from { transform: translateY(-40%); opacity: 0; } }
.drop-blurs { display: flex; flex: none; }
.drop-blurs i { width: 22px; height: 30px; border-radius: 7px; filter: blur(2.5px); opacity: .85; margin-inline-start: -8px; border: 1px solid var(--bg); }
.drop-blurs i:first-child { margin-inline-start: 0; background: linear-gradient(#e85d75, #7c3aed); }
.drop-blurs i:nth-child(2) { background: linear-gradient(#f59e0b, #d6285a); }
.drop-blurs i:nth-child(3) { background: linear-gradient(#8b5cf6, #3ddc97); }

.wings-fly { position: relative; width: 100%; max-width: 320px; aspect-ratio: 2 / 1; margin: 26px auto 0; }
.wings-fly svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wings-fly .wing { fill: none; stroke: url(#wingGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s 1s ease; }
.wings-fly .wf { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 800 .9rem var(--display);
  width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: transform .9s var(--ease-card), opacity .4s; }
.wings-fly .f1 { left: 11%; top: 25%; background: #e85d75; }
.wings-fly .f2 { left: 89%; top: 25%; background: #8b5cf6; transition-delay: .2s; }
.wings-fly .f3 { left: 50%; top: 18%; background: #f59e0b; transition-delay: .4s; }
.wings-fly .you { left: 50%; top: 66%; width: 22%; font-size: .941rem; background: var(--grad); box-shadow: 0 0 36px -4px #d6285a99;
  transition: background .5s 2s, box-shadow .5s 2s; }
.wings-fly figcaption { position: absolute; top: 100%; inset-inline: 0; text-align: center; margin-top: var(--space-10); line-height: 1.45; }
.wings-fly figcaption b { display: block; font: 800 1.294rem var(--display); }
.wings-fly + .how { margin-top: 92px; }
.wings-fly.pre .wing { stroke-dashoffset: 260; }
.wings-fly.pre .f1 { transform: translate(-200%, -120%); opacity: 0; }
.wings-fly.pre .f2 { transform: translate(100%, -120%); opacity: 0; }
.wings-fly.pre .f3 { transform: translate(-50%, -260%); opacity: 0; }
.wings-fly.pre .you { background: var(--surface-2); box-shadow: none; }

/* ---------- Confetti (decorative; never rendered with reduced motion) ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
#modal .sheet { position: relative; }
.sheet .confetti { position: absolute; overflow: visible; }
.confetti i { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 15px; border-radius: 3px; }
.confetti i.round { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Loading skeleton ---------- */
.swipe-card.skeleton { background: linear-gradient(110deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite; box-shadow: none; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- Game progress ---------- */
.round-dots { display: flex; gap: var(--space-6); margin: var(--space-2) 0 var(--space-14); }
.round-dots i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); transition: background-color var(--dur-move) ease; }
.round-dots i.on { background: var(--gold); }
.round-dots i.now { background: color-mix(in srgb, var(--gold) 45%, var(--surface-2)); }
.game-done-icon { color: var(--gold-text); }
.game-done-icon .ico { width: 64px; height: 64px; }

/* ---------- Card glow-up: photo carousel, badges, voice, prompts ---------- */
.swipe-card .photo { transition: opacity .18s ease; }
.swipe-card .photo.off { opacity: 0; }
.photo-bars { position: absolute; top: 8px; left: 12px; right: 12px; z-index: 3; display: flex; gap: var(--space-4); }
.photo-bars i { flex: 1; height: 3px; border-radius: 9px; background: #ffffff59; }
.photo-bars i.on { background: #fff; }
.photo-bars ~ .wing-banner { top: 22px; }
.vouched-badge { display: inline-flex; align-items: center; gap: var(--space-4); vertical-align: middle; padding: 3px var(--space-10) 3px var(--space-8); border-radius: var(--radius-pill);
  background: #3ddc9733; color: var(--mint); font: 700 .8rem var(--body); letter-spacing: 0; }
.vouched-badge .ico { width: 1.05em; height: 1.05em; vertical-align: 0; }
.drop-badge { display: inline-flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--grad-to), var(--grad-from)); color: var(--on-grad); font-weight: 700; font-size: .8rem; }
.drop-badge .ico { width: 1em; height: 1em; vertical-align: 0; }
.voice-btn { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); margin-top: var(--space-10); padding: 0 var(--space-16) 0 var(--space-10); border-radius: var(--radius-pill);
  background: #ffffff1f; color: #fff; font-weight: 600; font-size: .9rem; backdrop-filter: blur(6px); border: 1px solid #ffffff33; }
.voice-btn .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #fff; color: #120d1d; vertical-align: 0; }
.voice-btn.playing { border-color: var(--gold); }
.voice-btn.solid { background: var(--surface-2); color: var(--text); border-color: var(--line); margin-top: 0; }
.prompt-card { margin: var(--space-10) 0; padding: var(--space-12) var(--space-14); border-radius: var(--radius-md); background: #ffffff14; }
.prompt-card .q { font-size: .8rem; color: var(--muted); }
.prompt-card .a { font: 700 1.05rem/1.3 var(--display); margin-top: var(--space-4); }

/* ---------- Tonight's Drop ---------- */
.drop-banner { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-14); margin-bottom: var(--space-14); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); }
.drop-banner.live { background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 28%, var(--surface)), color-mix(in srgb, #d6285a 22%, var(--surface))); border-color: #7c3aed80; }
.drop-banner .grow { flex: 1; min-width: 0; }
.drop-banner .small { color: var(--muted); }
.drop-ico { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: #7c3aed; color: #fff; }
.drop-ico .ico { width: 22px; height: 22px; vertical-align: 0; }
.drop-pips { display: flex; gap: var(--space-4); }
.drop-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.drop-pips i.used { background: var(--line); }
.countdown { font-variant-numeric: tabular-nums; color: var(--gold-text); }
.teaser { display: flex; }
.teaser i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); background: var(--surface-2) center / cover; filter: blur(4px); }
.teaser i + i { margin-inline-start: -12px; }
.drop-link { display: block; text-decoration: none; margin-top: var(--space-14); }

/* ---------- Streak sheet ---------- */
.streak-sheet { text-align: center; }
.streak-flame { width: 72px; height: 72px; margin: 0 auto var(--space-8); border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--flame) 20%, transparent); color: var(--flame); }
.streak-flame .ico { width: 40px; height: 40px; }
.week { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-14); }
.week i { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.week i.on { background: linear-gradient(135deg, var(--flame), var(--grad-from)); border-color: transparent; }
.progress.dark { background: var(--surface-2); }
.progress.dark > i { background: linear-gradient(90deg, var(--flame), var(--grad-from)); }
.milestones-list { list-style: none; padding: 0; margin: var(--space-14) 0; text-align: start; }
.milestones-list li { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-10) 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.milestones-list li.done { color: var(--text); }
.milestones-list li.done span:first-child::before { content: '✓ '; color: var(--mint); }

/* ---------- Me: photos, prompts, voice ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.photo-slot { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-field); background: var(--surface-2) center / cover; overflow: hidden; }
.photo-slot.empty { display: grid; place-items: center; border: 2px dashed var(--field-line); color: var(--muted); min-height: var(--tap-min); }
.photo-slot.empty .ico { width: 26px; height: 26px; }
.slot-btn { position: absolute; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #120d1dcc; color: #fff; }
.slot-btn::after { content: ''; position: absolute; inset: -6px; } /* 44px tap area */
.slot-btn .ico { width: 16px; height: 16px; vertical-align: 0; }
.slot-btn.remove { top: 6px; inset-inline-end: 6px; }
.slot-open { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; border-radius: inherit; cursor: pointer; }
.slot-open:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.photo-preview { position: relative; width: min(220px, 60%); aspect-ratio: 3 / 4; margin: var(--space-4) auto var(--space-14); border-radius: var(--radius-lg); background: var(--surface-2) center / cover; }
.main-tag { position: absolute; bottom: 6px; inset-inline-start: 6px; padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill); background: var(--gold); color: #2a1a00; font-size: .75rem; font-weight: 700; }
.prompt-edit { padding: var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-md); }
.prompt-edit select { flex: 1; }
.prompt-edit textarea { min-height: 64px; margin-top: var(--space-8); }
.btn.icon-btn { padding: 0; width: var(--tap-min); flex: none; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: rec 1s ease-in-out infinite alternate; }
@keyframes rec { to { opacity: .3; } }

/* The card text never covers more than the lower part of the photo: its details scroll inside a capped area
   (a percentage max-height can't resolve inside the auto-height info block, so it's capped in viewport units). */
.swipe-card .scroll { max-height: min(20vh, 170px); overflow: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); padding-bottom: var(--space-14); }
.swipe-card .shade { background: linear-gradient(transparent 30%, var(--photo-shade) 72%); }
@media (orientation: landscape) and (max-height: 520px) { .swipe-card .scroll { max-height: 22vh; } }

.second-badge { display: inline-flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); margin-inline-end: var(--space-6); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill);
  background: #ffffff26; color: #fff; font-weight: 600; font-size: .8rem; border: 1px solid #ffffff40; }
.second-badge .ico { width: 1em; height: 1em; vertical-align: 0; }

/* Notifications: the soft ask, the Me switch, the iPhone install guide */
.push-ask { display: flex; gap: var(--space-12); align-items: flex-start; margin-bottom: var(--space-14); padding: var(--space-14); }
.push-ask .grow { flex: 1; min-width: 0; }
.switch { flex: none; position: relative; width: 60px; height: var(--tap-min); padding: 0; border: 0; background: none; cursor: pointer; }
.switch::before { content: ''; position: absolute; inset: 6px 4px; border-radius: 99px; background: var(--line); transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 9px; inset-inline-start: 7px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px #0005; transition: transform .2s var(--ease-out); }
.switch[aria-checked="true"]::before { background: #7c3aed; } /* solid, like a system switch: the gradient is kept for the main action */
.switch[aria-checked="true"]::after { transform: translateX(20px); }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-20px); }
.switch:disabled { opacity: .6; }
.switch:focus-visible { outline: none; }
.switch:focus-visible::before { outline: 2px solid var(--violet); outline-offset: 2px; }
.install-steps { list-style: none; padding: 0; margin: var(--space-14) 0; display: grid; gap: var(--space-12); counter-reset: step; }
.install-steps li { display: flex; align-items: center; gap: var(--space-12); }
.install-steps .step-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--hot); }
@media (prefers-reduced-motion: reduce) { .switch::before, .switch::after { transition: none; } }

/* Wings page */
button.link { background: none; border: 0; font: inherit; cursor: pointer; }
button.link[data-unvouch] { color: var(--muted); font-weight: 500; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.vouch-first { border-color: var(--hot); }
.code-entry { margin-top: var(--space-10); }
.code-entry summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; min-height: var(--tap-min); display: flex; align-items: center; gap: var(--space-6); color: white; }
.code-entry form { margin-top: var(--space-4); }
.code-entry input { background: #ffffff1f; border-color: #ffffff55; color: white; }
.code-entry input::placeholder { color: #ffffffb3; }

/* Invite rewards: what each number of friends unlocks, and how far away it is */
/* One surface, hairline rows: the gradient already says "special"; boxes inside it only crowded the copy. */
.rewards { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; }
.rewards li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid #ffffff38; }
.rewards li:first-child { border-top: 0; }
.rewards li.done .need { background: #fff; color: #7c1d4f; }
.rewards .need { flex: none; min-width: 64px; text-align: center; font-size: 0.75rem; font-weight: 700; padding: var(--space-4) var(--space-8); border-radius: 99px; background: #00000033; }
.rewards .grow { flex: 1; min-width: 0; }
.rewards .small { opacity: .9; }
.rewards .state { flex: none; font-size: 0.75rem; font-weight: 700; opacity: .9; }
.rewards li.done .state { opacity: 1; }

/* Invites that carry a vouch */
.rewards li.per-friend b { font-size: 1.06rem; }
.note-card { margin-bottom: var(--space-16); border-color: var(--hot); }
.boost-pill { color: var(--gold-text); border-color: var(--gold); }
.rewards .earned { margin-top: var(--space-6); font-size: 0.8125rem; font-weight: 700; }

/* Reward motion: bursts, the flying likes chip, the Premium gift, the dealt drop, the streak flame, the boost ring */
.burst { position: fixed; width: 0; height: 0; z-index: 60; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; line-height: 0; }
.burst .ico { width: 1em; height: 1em; }
.burst i.dot { width: 1em; height: 1em; border-radius: 50%; }
.fly-chip { position: fixed; z-index: 61; pointer-events: none; padding: var(--space-8) var(--space-14); border-radius: 99px; background: var(--grad);
  color: var(--on-grad); font: 800 1.25rem var(--display); box-shadow: 0 8px 30px #d6285a66; white-space: nowrap; }

.gift-sheet { text-align: center; }
.gift { position: relative; width: 150px; height: 140px; margin: var(--space-6) auto var(--space-4); }
.gift i { position: absolute; display: block; }
.gift-box { left: 25px; bottom: 6px; width: 100px; height: 78px; border-radius: 10px;
  background: linear-gradient(90deg, transparent 42%, #ffc94d 42% 58%, transparent 58%), var(--grad); box-shadow: 0 10px 30px #7c3aed55; }
.gift-lid { left: 17px; bottom: 80px; width: 116px; height: 28px; border-radius: 8px;
  background: linear-gradient(90deg, transparent 43%, #ffc94d 43% 57%, transparent 57%), linear-gradient(135deg, #e0386a, #8b46f0);
  transition: transform .55s var(--ease-spring), opacity .4s .15s; }
.gift-lid::before, .gift-lid::after { content: ''; position: absolute; bottom: 24px; width: 26px; height: 22px; border: 6px solid #ffc94d; border-radius: 50% 50% 0 50%; }
.gift-lid::before { left: 30px; transform: rotate(-20deg); }
.gift-lid::after { right: 30px; transform: scaleX(-1) rotate(-20deg); }
.gift-rays { left: 50%; top: 50%; width: 230px; height: 230px; margin: -125px 0 0 -115px; border-radius: 50%; opacity: 0; transform: scale(.2);
  background: repeating-conic-gradient(#ffc94d55 0 10deg, transparent 10deg 30deg); mask: radial-gradient(circle, #000 20%, transparent 70%);
  transition: transform .7s var(--ease-out), opacity .4s; }
.gift-sheet.open .gift-lid { transform: translate(34px, -70px) rotate(28deg); opacity: 0; }
.gift-sheet.open .gift-rays { opacity: 1; transform: scale(1); animation: rays-spin 12s linear infinite; }
@keyframes rays-spin { to { rotate: 360deg; } }

.deal { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.deal-card { grid-area: 1 / 1; width: min(100%, 360px); height: 100%; border-radius: var(--radius); display: grid; place-items: center;
  background: linear-gradient(160deg, #3b1f6e, #1b1029); border: 1px solid #7c3aed80; box-shadow: 0 14px 40px #0008; color: #c4a8ff; }
.deal-card .ico { width: 64px; height: 64px; }

.streak-pill .flame { display: inline-flex; transform-origin: 50% 85%; }
.streak-pill.tier-1 .flame { color: var(--flame); }
.streak-pill.tier-2 .flame { color: #ff6a3d; filter: drop-shadow(0 0 3px #ff6a3d99); }
.streak-pill.tier-3 .flame { color: #ffb020; filter: drop-shadow(0 0 5px #ffb020aa); }
.streak-pill.tier-4 .flame { color: #7dd3fc; filter: drop-shadow(0 0 7px #38bdf8cc); }
.streak-pill.tier-1 .flame .ico { scale: 1.08; }
.streak-pill.tier-2 .flame .ico { scale: 1.16; }
.streak-pill.tier-3 .flame .ico { scale: 1.24; }
.streak-pill.tier-4 .flame .ico { scale: 1.32; }
.streak-pill:not(.tier-0) .flame .ico { animation: flicker var(--dur-flicker) ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes flicker { 0%, 100% { transform: rotate(-3deg) scaleY(1); } 50% { transform: rotate(3deg) scaleY(1.07); } }

.boost-chip { color: var(--gold-text); border-color: var(--gold); position: relative; }
.boost-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 14px 2px #ffc94d55; opacity: 0;
  pointer-events: none; animation: boost-glow 2.2s ease-in-out infinite; }
@keyframes boost-glow { 50% { opacity: 1; } }
.boost-ring { display: inline-block; border-radius: 50%; isolation: isolate; }
.boost-ring::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
  background: conic-gradient(#ffc94d, #ff5c7a, #7c3aed, transparent 75%, #ffc94d); animation: ring-spin 2.6s linear infinite;
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.boost-orbit { position: absolute; inset: -16px; border-radius: 50%; animation: ring-spin 2.6s linear infinite; pointer-events: none; z-index: 1; }
.boost-orbit::after { content: '🚀'; position: absolute; top: -4px; left: 50%; font-size: 18px; transform: translateX(-50%) rotate(45deg); }
@keyframes ring-spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .streak-pill .flame .ico, .boost-chip::after, .boost-ring::before, .boost-orbit, .gift-sheet.open .gift-rays { animation: none !important; }
  .gift-lid, .gift-rays { transition: none; }
}

/* ---------- Discover: one screen, the friend's note as the signature ---------- */
/* The page is exactly the viewport: the deck flexes, and the buttons overlap the card's lower edge above the tab bar. */
#app.discover-mode { display: flex; flex-direction: column; height: 100dvh; min-height: 0;
  padding-bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); }
.discover-mode .deck-wrap { flex: 1; min-height: 360px; display: flex; flex-direction: column; }
.discover-mode .deck { flex: 1; height: auto; max-height: 660px; margin-bottom: 0; }
.discover-mode .actions { position: relative; z-index: 5; margin-top: -36px; gap: var(--space-16); }
.discover-mode .round { width: 58px; height: 58px; background: var(--surface); box-shadow: 0 12px 26px -10px #0009; }
.discover-mode .round.super { width: 50px; height: 50px; }
.discover-mode .round.big { width: 70px; height: 70px; background: var(--grad); box-shadow: 0 14px 30px -10px #d6285a99; }
.discover-mode .round .ico { width: 26px; height: 26px; }
.discover-mode .round.big .ico { width: 32px; height: 32px; }
.discover-mode .swipe-card .info { padding: var(--space-18) var(--space-18) 50px; }
.discover-top { margin-bottom: var(--space-12); }

.drop-chip { display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--tap-min); border-color: #7c3aed80; }
.drop-chip > .ico { color: #a78bfa; }
.drop-chip.live { background: linear-gradient(135deg, var(--grad-to), var(--grad-from)); color: var(--on-grad); border-color: transparent; }
.drop-chip.live > .ico { color: #fff; }
.drop-count { font-weight: 700; }
.drop-info { display: inline-flex; opacity: .8; }
.drop-info .ico { width: 17px; height: 17px; vertical-align: 0; }
.drop-badge { flex-wrap: wrap; }
.drop-why { font-weight: 600; opacity: .92; }

/* The drop explainer: a tap on one of tonight's rings, a ripple, the ring turns grey and that person's card rises right
   under it, an arrow joining the two. The resting styles are the last frame, so without motion it still reads
   "this ring, this card". */
.drop-demo { position: relative; height: 164px; margin-bottom: var(--space-14); border-radius: var(--radius-lg); overflow: hidden; direction: ltr;
  background: linear-gradient(160deg, color-mix(in srgb, #7c3aed 32%, var(--surface)), color-mix(in srgb, #d6285a 18%, var(--surface))); }
.dd-row { position: absolute; top: 14px; left: 50%; translate: -50% 0; display: flex; gap: var(--space-10); }
.dd-ring { --g: linear-gradient(160deg, #f5a7b8, #a855f7); display: block; width: var(--tap-min); height: var(--tap-min); flex: none; border-radius: 50%; border: 3px solid transparent;
  background: var(--g) padding-box, conic-gradient(from 210deg, #7c3aed, #d6285a, #f59e0b, #7c3aed) border-box; box-shadow: inset 0 0 0 2px var(--surface); }
.dd-ring.g2 { --g: linear-gradient(160deg, #7dd3c7, #3b6fd1); }
.dd-ring.g3 { --g: linear-gradient(160deg, #fcd38d, #e36d4c); }
.dd-ring.g4 { --g: linear-gradient(160deg, #b9a7ff, #4b2fa8); }
.dd-ring.seen, .dd-tgt { filter: grayscale(1); opacity: .6; }
.dd-tgt { animation: dd-seen 5s infinite both; }
/* The touch: a hand whose fingertip lands on the second ring (centre 76px into the row), presses, and leaves a violet
   ripple; the ring dips under the finger, then greys. The fingertip is at (8, 2) of the 24-unit icon. */
.dd-hand { position: absolute; left: 63px; top: 25px; width: 40px; height: 40px; overflow: visible; opacity: 0; pointer-events: none;
  transform-origin: 13px 3px; fill: #fff; stroke: #1d1530; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 4px 6px #0006);
  animation: dd-hand 5s infinite both; }
.dd-ripple { position: absolute; left: 76px; top: 22px; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; translate: -50% -50%; opacity: 0; pointer-events: none;
  border: 3px solid #a78bfa; box-shadow: 0 0 12px #a78bfa; animation: dd-ripple 5s infinite both; }
.dd-arrow { position: absolute; top: 64px; left: calc(50% - 27px); width: 2px; height: 20px; translate: -50% 0; border-radius: 2px; background: var(--text); opacity: .7;
  animation: dd-arrow 5s infinite both; }
.dd-arrow::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 8px; height: 8px; translate: -50% 0; rotate: 45deg;
  border: solid var(--text); border-width: 0 2px 2px 0; }
.dd-deck { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; width: 250px; height: 62px; }
.dd-back, .dd-front { position: absolute; border-radius: var(--radius-field); background: var(--surface-2); border: 1px solid var(--line); }
.dd-back { inset: 7px 12px -7px; opacity: .55; }
/* The card's photo sits right under the tapped ring: 125 - 27 - 19 = 79px from the card's left edge. */
.dd-front { inset: 0; display: flex; align-items: center; gap: var(--space-10); padding-left: 79px; box-shadow: 0 8px 20px #0005;
  animation: dd-rise 5s var(--ease-out) infinite both; }
.dd-front .dd-ring { width: 38px; height: 38px; margin-left: -19px; filter: none; opacity: 1; animation: none; border: 0; }
.dd-front b { padding: 3px 9px; border-radius: var(--radius-pill); background: #7c3aed; color: #fff; font-size: .74rem; white-space: nowrap; direction: rtl; }
:root[dir="ltr"] .dd-front b { direction: ltr; }
@keyframes dd-hand { 0% { translate: 40px 70px; opacity: 0; scale: 1; } 6% { opacity: 1; } 20% { translate: 0 0; scale: 1; opacity: 1; }
  24% { scale: .86; } 29% { scale: 1; opacity: 1; } 38%, 100% { translate: 8px 22px; opacity: 0; } }
@keyframes dd-ripple { 0%, 22% { opacity: 0; scale: 1; } 25% { opacity: 1; scale: 1; } 44%, 100% { opacity: 0; scale: 1.7; } }
@keyframes dd-seen { 0%, 21% { filter: none; opacity: 1; scale: 1; } 25% { filter: none; opacity: 1; scale: .9; } 29% { scale: 1; }
  33%, 92% { filter: grayscale(1); opacity: .6; scale: 1; } 100% { filter: none; opacity: 1; } }
@keyframes dd-grey-still { 0%, 28% { filter: none; opacity: 1; } 34%, 92% { filter: grayscale(1); opacity: .6; } 100% { filter: none; opacity: 1; } }
@keyframes dd-arrow { 0%, 32% { opacity: 0; translate: -50% -8px; } 40%, 92% { opacity: .7; translate: -50% 0; } 100% { opacity: 0; } }
@keyframes dd-rise { 0%, 34% { translate: 0 90px; opacity: 0; } 46%, 92% { translate: 0 0; opacity: 1; } 100% { translate: 0 0; opacity: 0; } }
/* With Reduce Motion the app stops every animation (the rule near the top). This picture is the whole explanation, so
   here it still plays, with fades only and nothing moving: the hand and a halo show on the ring, the ring greys, the arrow and
   the card fade in under it. */
@keyframes dd-touch-still { 0%, 10% { opacity: 0; } 16%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes dd-show-still { 0%, 34% { opacity: 0; } 44%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drop-demo .dd-tgt { animation: dd-grey-still 5s infinite both !important; }
  .drop-demo .dd-hand { animation: dd-touch-still 5s infinite both !important; }
  .drop-demo .dd-ripple { animation: dd-touch-still 5s infinite both !important; }
  .drop-demo .dd-arrow, .drop-demo .dd-front { animation: dd-show-still 5s infinite both !important; }
}
.drop-how { margin: var(--space-6) 0 0; padding-inline-start: 20px; display: grid; gap: var(--space-8); line-height: 1.5; }
.drop-status { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-14) 0 0; padding: var(--space-10) var(--space-12); border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; }
.drop-status .ico { width: 18px; height: 18px; vertical-align: 0; color: #a78bfa; }

.friend-note { position: relative; margin: var(--space-14) 0 var(--space-6); margin-inline-start: var(--space-12); max-width: 92%; width: fit-content;
  padding: 11px var(--space-14) 9px; padding-inline-start: var(--space-24); background: var(--note-paper); color: var(--note-ink);
  border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); rotate: -1.4deg; box-shadow: var(--shadow-note); }
[dir="rtl"] .friend-note { border-radius: var(--radius-lg) 4px var(--radius-lg) var(--radius-lg); rotate: 1.4deg; }
.friend-note .note-avatar { position: absolute; top: -11px; inset-inline-start: -12px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 800 .8rem var(--display); color: #fff; border: 2px solid var(--note-paper); }
.friend-note blockquote { margin: 0; font: 600 .938rem/1.35 var(--body); }
.friend-note figcaption { margin-top: var(--space-4); font-size: .75rem; font-weight: 600; color: var(--note-muted); }

/* On a short phone the details give the photo room: they scroll in a smaller box. */
.discover-mode .swipe-card .scroll { max-height: min(14vh, 140px); }
.discover-mode .vouched-badge { background: #0b0712b3; color: #5ef0b0; backdrop-filter: blur(6px); }

/* ---------- App-wide review ---------- */
/* Vouches read as friends' notes everywhere; on Me they stack with alternating tilt. */
.notes { display: grid; gap: var(--space-18); margin: var(--space-18) var(--space-4) var(--space-4); }
.notes .friend-note { margin: 0; margin-inline-start: var(--space-12); }
.notes .friend-note:nth-child(even) { rotate: 1.2deg; margin-inline-start: 22px; }
[dir="rtl"] .notes .friend-note:nth-child(even) { rotate: -1.2deg; }
.friend-note.placeholder blockquote { color: #8a7f9f; font-style: italic; }
#notePreview { margin: var(--space-14) var(--space-4) var(--space-10); }

/* Editors fold away: the summary row says what's inside, so the page reads as a profile, not a form. */
.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); cursor: pointer; min-height: var(--tap-min); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary > span { display: grid; gap: var(--space-2); min-width: 0; }
.fold > summary > .ico { flex: none; transition: transform .2s; color: var(--muted); }
.fold[open] > summary > .ico { transform: rotate(180deg); }
.fold > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 10px; }

/* One settings card: rows with a control at the end, separated by hairlines. */
.settings h3 { margin-bottom: var(--space-4); }
.setting { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting .grow { flex: 1; min-width: 0; }
.setting p { margin: var(--space-2) 0 0; }
@media (prefers-reduced-motion: reduce) { .fold > summary > .ico { transition: none; } }

/* ---------- The card shows the essentials; the full profile is a sheet ---------- */
.card-row { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-10); }
.card-row .voice-btn { margin-top: 0; }
.more-btn { display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--tap-min); padding: 0 var(--space-14) 0 var(--space-16); border-radius: var(--radius-pill);
  background: #ffffff1f; color: #fff; font-weight: 600; font-size: .9rem; border: 1px solid #ffffff33; backdrop-filter: blur(6px); }
.more-btn .ico { width: 18px; height: 18px; vertical-align: 0; }
.swipe-card .info { cursor: pointer; }

#modal:has(.profile-sheet) { place-items: end center; padding: var(--space-10) 0 0; }
#modal .sheet:has(.profile-sheet) { max-width: var(--app-max); max-height: calc(100dvh - 10px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; border-bottom: 0; }
.profile-sheet { padding: 0 var(--space-16); }
.ps-top { position: sticky; top: 0; height: 0; z-index: 3; display: flex; justify-content: flex-end; }
.ps-close { margin-top: var(--space-12); margin-inline-end: -4px; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; display: grid; place-items: center;
  background: #120d1db3; color: #fff; backdrop-filter: blur(8px); }
.ps-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); background: center / cover no-repeat; margin: var(--space-16) 0; }
.ps-head h2 { font-size: 1.9rem; line-height: 1.05; }
.ps-head h2 small { font-weight: 500; font-size: 1.4rem; color: var(--muted); }
.ps-head .muted { margin-top: var(--space-6); }
.ps-head .voice-btn { margin-top: var(--space-12); }
.ps-votes { margin: var(--space-10) 0 0; padding: var(--space-10) var(--space-14); border-radius: var(--radius-field); border: 1px solid var(--gold); font-size: .9rem; }
.ps-votes b { color: var(--gold-text); }
.ps-title { margin: 22px 0 0; }
.profile-sheet .vouched-badge { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.profile-sheet .prompt-card { background: var(--surface-2); margin: var(--space-16) 0; padding: var(--space-16); }
.profile-sheet .prompt-card .a { font-size: 1.25rem; }
.ps-bio { margin: var(--space-16) 0; font-size: 1.05rem; }
.ps-chips { margin: var(--space-12) 0; }
.ps-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; align-items: center; gap: var(--space-16);
  margin: var(--space-8) -16px 0; padding: 22px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--surface) 40%); }
.ps-actions[hidden] { display: none; } /* from the chat header the sheet only shows the person */
.ps-actions .round { box-shadow: 0 12px 26px -10px #0009; }
.ps-actions .round.big { background: var(--grad); }
.more-btn .ico { rotate: 180deg; } /* the sheet rises from below */
.ps-photo { box-shadow: inset 0 0 0 1px #ffffff14, 0 0 0 1px var(--line); } /* a bright photo still has an edge on a light sheet */

/* Appearance: the label on one line, the three choices full width under it. */
.setting.wrap { flex-wrap: wrap; }
.theme-seg { flex-basis: 100%; margin: var(--space-4) 0 0; }
.theme-seg button[aria-checked="true"] { color: var(--text); }

/* Emoji that act as icons are drawn (see EMOJI_ICONS in app.js): one colour per meaning. */
.emo { display: inline-flex; vertical-align: -0.18em; }
.emo .ico { width: 1.05em; height: 1.05em; vertical-align: 0; }
.emo.vouch { color: var(--mint); }
.emo.like { color: var(--hot); }
.emo.ok { color: var(--mint); }
.emo.gold { color: var(--gold-text); }
.emo.flame { color: #ff6a3d; }
.emo.night { color: #a78bfa; }
.swipe-card .emo.vouch { color: #5ef0b0; }

/* Browser surfaces carry the palette too. */
::selection { background: color-mix(in srgb, var(--violet) 45%, transparent); color: inherit; }
input, textarea { caret-color: var(--hot); }
::placeholder { color: var(--muted); opacity: 1; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pill, .stat b, .drop-chip, .rewards .need, .rewards .state { font-variant-numeric: tabular-nums; }
.btn .emo, .pill .emo { color: inherit; }

/* Screen states: a progress bar for a slow screen, and a way back from a failed one. */
#app.route-loading::before { content: ''; position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; background: var(--grad);
  transform-origin: 0 50%; animation: route-load 1.1s var(--ease-in-out) infinite; }
[dir="rtl"] #app.route-loading::before { transform-origin: 100% 50%; }
@keyframes route-load { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #app.route-loading::before { animation: none; opacity: .7; } }
.state-error .state-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-xl); margin-bottom: var(--space-14);
  background: var(--surface-2); color: var(--muted); }
.state-error .state-ico .ico { width: 30px; height: 30px; }
.state-error .btn { margin-top: var(--space-8); }
.note-card .notes { margin: var(--space-14) 0 var(--space-12); }
.pill .emo.ok { color: var(--mint); } /* "Live" is a status: its check keeps the status colour */

/* Selects: the native control drew a small arrow jammed against the edge (on the left in Hebrew) and a different
   grey box on every platform. Ours: the same field as the inputs, a chevron from the icon set at the inline end
   with room before it, coloured per theme, mirrored for RTL. The option list stays native. */
select {
  appearance: none; -webkit-appearance: none;
  min-height: 48px; padding-inline: var(--space-14) 42px; text-overflow: ellipsis; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat; background-size: 16px; background-position: right 16px center;
}
[dir="rtl"] select { background-position: left 16px center; }
select:disabled { opacity: .55; cursor: default; }
select option { background: var(--bg-2); color: var(--text); }

/* Demo AI faces (scripts/ai-photos.ts) are square headshots with the generator's watermark along an edge:
   a slightly larger crop keeps it out of frame. Real uploads are untouched. */
[style*="this-person-does-not-exist.com"] { background-size: auto 120% !important; background-position: center 45% !important; }
/* On the tall card a square headshot fills the width from the top and fades into the dark text area below,
   instead of being blown up to the card's height (which left only the eyes). */
.swipe-card .photo[style*="this-person-does-not-exist.com"] { background-size: 114% auto !important; background-position: center -24px !important;
  background-repeat: no-repeat !important; background-color: #0b0712;
  -webkit-mask-image: linear-gradient(#000 46%, transparent 59%); mask-image: linear-gradient(#000 46%, transparent 59%); }

/* ---------- Chat: a full screen of its own ---------- */
#app.chat-mode { display: flex; flex-direction: column; height: 100dvh; padding-top: 0; padding-bottom: env(safe-area-inset-bottom); }
/* With the keyboard up the chat is exactly the part of the screen still showing (iOS would otherwise push the header
   off the top and leave the composer floating), and the safe-area padding at the bottom is the keyboard's now. */
html.kb-open #app.chat-mode { position: fixed; inset: 0 0 auto; margin-inline: auto; width: 100%;
  top: var(--vvt, 0px); height: var(--vvh, 100dvh); min-height: 0; padding-bottom: var(--space-6); }
html.kb-open #tabs { display: none; }
html.kb-open #app { padding-bottom: var(--space-16); }
html.kb-open #modal { inset: auto 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); }
html.kb-open #modal .sheet { max-height: calc(var(--vvh, 100dvh) - 10px); }
body:has(#app.chat-mode) #tabs { display: none; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: var(--space-4); padding: max(8px, env(safe-area-inset-top)) 0 var(--space-8); border-bottom: 1px solid var(--line); }
.icon-btn { flex: none; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; display: grid; place-items: center; color: var(--text); }
.icon-btn:hover { background: var(--surface); }
.back .ico { rotate: 90deg; }
[dir="rtl"] .back .ico { rotate: -90deg; }
.chat-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-10); padding: var(--space-4) var(--space-6); border-radius: var(--radius-field); text-align: start; }
.chat-who:hover { background: var(--surface); }
.chat-who > span { display: grid; min-width: 0; }
.chat-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-who .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-status:empty { display: none; }
.online-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--space-6); border-radius: 50%; background: #3ddc97; vertical-align: 1px; }

.messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0 var(--space-12); }
.bubble { max-width: 78%; padding: 9px var(--space-14); border-radius: var(--radius-xl); background: var(--surface-2); align-self: flex-start;
  overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.35; unicode-bidi: plaintext; text-align: start; }
.bubble.mine { align-self: flex-end; background: #7c3aed; color: #fff; }
/* Consecutive messages read as one group: the corners between them tighten on the sender's side. */
.bubble.theirs:not(.last) { border-end-start-radius: 6px; }
.bubble.theirs:not(.first) { border-start-start-radius: 6px; }
.bubble.mine:not(.last) { border-end-end-radius: 6px; }
.bubble.mine:not(.first) { border-start-end-radius: 6px; }
.bubble.sending { opacity: .6; }
.bubble.failed { opacity: .6; }
.msg-meta { align-self: flex-start; margin: 3px var(--space-8) var(--space-10); font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.msg-meta.mine { align-self: flex-end; }
.msg-meta.failed { color: var(--danger); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.day-sep { align-self: center; margin: var(--space-12) 0 var(--space-8); padding: var(--space-4) var(--space-12); border-radius: 99px; background: var(--surface); font-size: .75rem; color: var(--muted); }
.typing-bubble { align-self: flex-start; display: flex; gap: var(--space-4); padding: 13px var(--space-14); border-radius: var(--radius-xl); background: var(--surface-2); margin-top: var(--space-4); }
.typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing-dot 1.2s ease-in-out infinite; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }
.typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-open { text-align: center; padding: var(--space-18) var(--space-4) var(--space-6); }
.chat-open .pair { display: flex; justify-content: center; }
.chat-open .pair .avatar + .avatar { margin-inline-start: -14px; box-shadow: 0 0 0 3px var(--bg); }
.chat-open h3 { margin-top: var(--space-10); }
.chat-open .notes { text-align: start; margin: var(--space-16) var(--space-6) var(--space-6); }
.openers { display: grid; gap: var(--space-8); margin-top: var(--space-14); text-align: start; }
.openers p { margin: 0 0 var(--space-2); }
.opener { display: block; width: 100%; padding: var(--space-12) var(--space-14); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: start; }
.opener:hover { border-color: var(--violet); }
.opener .q { display: block; font-size: .78rem; color: var(--muted); }
.opener b { display: block; margin-top: var(--space-2); }
.opener .reply { display: block; margin-top: var(--space-6); font-size: .8rem; font-weight: 700; color: var(--hot); }

.composer { position: relative; display: flex; align-items: flex-end; gap: var(--space-8); padding: var(--space-8) 0 var(--space-10); border-top: 1px solid var(--line); }
.composer textarea { min-height: var(--tap-min); max-height: 132px; resize: none; border-radius: var(--radius); padding: 11px var(--space-16); line-height: 1.35; overflow-y: auto; }
.send-btn { flex: none; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); transition: opacity .15s, transform .15s; }
.send-btn:disabled { opacity: .35; cursor: default; }
.send-btn:not(:disabled):active { transform: scale(.92); }
[dir="rtl"] .send-btn .ico { scale: -1 1; }

.unread-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center;
  background: var(--badge); color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.list-item .unread { color: var(--text); font-weight: 600; }
.ps-end { height: 24px; }
@media (prefers-reduced-motion: reduce) { .typing-bubble i { animation: none; opacity: .7; } }

/* Read state on my messages: ✓ sent, ✓✓ in the read colour, a clock while sending. */
.msg-meta { display: inline-flex; align-items: center; gap: var(--space-4); }
.tick { display: inline-flex; color: var(--muted); }
.tick .ico { width: 15px; height: 15px; }
.tick.read { color: var(--mint); }
.seen-word { color: var(--mint); font-weight: 600; }

/* ---------- Welcome: three steps after sign-up ---------- */
#app.welcome-mode { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.welcome h1 { font-size: 2rem; margin: 22px 0 var(--space-8); }
.welcome > .muted { margin: 0 0 var(--space-18); }
.wl-top { display: flex; align-items: center; gap: var(--space-12); }
.wl-steps { display: flex; gap: var(--space-6); flex: 1; }
.wl-steps i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-2); }
.wl-steps i.done { background: var(--violet); }
.wl-steps i.now { background: var(--grad); }
.wl-photo { display: grid; place-items: center; align-content: center; gap: var(--space-10); width: min(100%, 300px); aspect-ratio: 4 / 5; margin: 0 auto;
  border-radius: 24px; border: 2px dashed var(--field-line); background: var(--surface) center / cover no-repeat; color: var(--muted); }
.wl-photo.has { border: 0; align-content: end; padding: var(--space-14); box-shadow: 0 20px 40px -24px #000c; }
.wl-photo .wl-plus { width: 64px; height: 64px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--surface-2); color: var(--hot); }
.wl-photo .wl-plus .ico { width: 30px; height: 30px; }
.wl-photo b { color: var(--text); }
.wl-photo .pill { background: #120d1db3; color: #fff; border-color: #ffffff33; backdrop-filter: blur(6px); }
.wl-actions { display: grid; gap: var(--space-10); margin-top: 22px; }
.wl-note { text-align: center; margin: 0; }
.wl-preview { margin-top: var(--space-4); }
.wl-count { display: inline-flex; gap: var(--space-6); align-items: baseline; padding: var(--space-8) var(--space-14); border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.wl-count b { font: 800 1.4rem var(--display); color: var(--mint); font-variant-numeric: tabular-nums; }
.welcome .notes { margin-top: var(--space-14); }
.wl-done { justify-self: center; min-height: var(--tap-min); }

/* ---------- Trust and local fit: verified, single confirmations, religion and intent, your turn ---------- */
.verified-badge { display: inline-flex; align-items: center; gap: var(--space-4); vertical-align: middle; margin-inline-end: var(--space-6); padding: 3px var(--space-10) 3px var(--space-8);
  border-radius: var(--radius-pill); background: #38bdf833; color: var(--trust); font: 700 .8rem var(--body); letter-spacing: 0; }
.verified-badge .ico { width: 1.05em; height: 1.05em; vertical-align: 0; }
.discover-mode .verified-badge { background: #0b0712b3; color: var(--trust); backdrop-filter: blur(6px); }
.profile-sheet .verified-badge { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: var(--trust); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .profile-sheet .verified-badge { color: var(--trust); } }
:root[data-theme="dark"] .profile-sheet .verified-badge { color: var(--trust); }
.about-line { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); margin-top: var(--space-6); color: var(--muted); }
.about-line > span + span::before { content: "·"; margin-inline-end: var(--space-10); opacity: .6; }
.single-pill { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--mint); font-weight: 600; }
.single-pill .ico { width: 1em; height: 1em; }
.verify-card { border-color: #38bdf880; }
.verify-ico { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: #0ea5e9; color: #fff; }
.verify-ico .ico { width: 22px; height: 22px; }
.pose { display: grid; gap: var(--space-4); margin: var(--space-14) 0 var(--space-8); padding: var(--space-14) var(--space-16); border-radius: var(--radius-md); background: var(--surface-2); text-align: center; }
.pose b { font: 800 1.5rem var(--display); }
.pose-label { font-size: .8rem; color: var(--muted); }
.verify-steps { margin: var(--space-8) 0 0; padding-inline-start: 1.2em; display: grid; gap: var(--space-4); }
.your-turn { display: flex; gap: var(--space-10); align-items: flex-start; text-decoration: none; border-color: var(--hot); }
.your-turn .ico { flex: none; margin-top: var(--space-2); color: var(--hot); }
.chat-closed { margin: 0; padding: var(--space-14) 0 var(--space-16); border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: .9rem; }
.closed-pill { font-size: .72rem; padding: var(--space-2) var(--space-8); min-height: 0; color: var(--muted); }

.composer[hidden] { display: none; } /* its display:flex would otherwise win over [hidden] */

/* Wings: the play button keeps its size instead of squeezing the description. */
.game-card .btn { flex: none; padding-inline: var(--space-18); }

/* Card meta: place and vouches on one line; enough vouches turns the count green. */
.meta-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-12); }
.meta-line .vouched-count { color: var(--mint); font-weight: 600; }
.discover-mode .meta-line .vouched-count { color: #5ef0b0; }

/* Hebrew has no capitals and its letters are drawn wider: negative tracking only crowds it. */
html[lang="he"] :is(h1, h2, h3, .logo) { letter-spacing: 0; }

/* dir="auto" picks the direction of what is typed, but an empty field has nothing to pick from: the placeholder
   follows the interface instead, so "הודעה ל־Sivan…" doesn't render back to front. */
html[dir="rtl"] textarea[dir="auto"]:placeholder-shown { direction: rtl; }

/* Phone sheets (sheets.md): they rise from the bottom edge with a grabber and swipe down to close. The match
   celebration stays a centered moment. */
@media (max-width: 600px) {
  #modal:not(:has(.match-sheet)) { place-items: end center; padding: var(--space-10) 0 0; }
  #modal .sheet:not(:has(.match-sheet)) { max-width: none; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; border-bottom: 0; touch-action: pan-y;
    max-height: calc(100dvh - 10px); overflow-y: auto; overscroll-behavior: contain;
    padding-top: 28px; padding-bottom: max(24px, env(safe-area-inset-bottom)); animation: rise .32s var(--ease-card); }
  #modal .sheet:not(:has(.match-sheet))::before { content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0;
    width: 38px; height: 5px; border-radius: 3px; background: var(--line); }
  #modal .sheet:has(.profile-sheet) { padding-top: 0; }
  .profile-sheet > .ps-lead { margin-top: 22px; } /* clear of the grabber */
}
@keyframes rise { from { transform: translateY(40%); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { #modal .sheet { animation: none !important; } }

/* Reduce Transparency (accessibility.md): every frosted layer becomes a solid one. */
@media (prefers-reduced-transparency: reduce) {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #modal { background: #07040d; }
  #tabs, .topbar { background: var(--bg); }
  .card-menu, .discover-mode .vouched-badge, .wl-photo .pill { background: #120d1d; }
}
.card-menu { display: grid; place-items: center; }
.card-menu .ico { width: 22px; height: 22px; }

/* Discover on a phone turned sideways: the one-screen layout has no room for a card, so the page scrolls instead
   and the card keeps a usable size, centered. */
@media (orientation: landscape) and (max-height: 520px) {
  #app.discover-mode { height: auto; min-height: 100dvh; }
  .discover-mode .deck-wrap { flex: none; min-height: 0; width: min(100%, 420px); margin-inline: auto; }
  .discover-mode .deck { flex: none; height: 540px; width: 100%; align-self: stretch; }
  .discover-mode .actions { align-self: center; flex-direction: row; }
}

/* Undo the last pass: a small, quiet button beside ✕, shown only while the pass can still be taken back. */
.actions .round.undo { width: var(--tap-min); height: var(--tap-min); background: var(--surface); color: var(--muted); box-shadow: 0 8px 18px -10px #0008; }
.actions .round.undo .ico { width: 20px; height: 20px; }
.actions .round.undo[hidden] { display: none; }
.actions.no-cards [data-dir] { display: none; }

/* Headings take focus on a screen change for screen readers. They aren't controls, so no ring, ever: Safari counts
   that scripted focus as "visible" and drew a box around the title on every tab change. */
[tabindex="-1"]:focus { outline: none; }

/* Read by screen readers, not shown: the chat's name as a heading for focus on arrival. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Password with a show/hide button inside the field's trailing edge. */
.pw-field { position: relative; }
.pw-field input { padding-inline-end: 52px; }
.pw-toggle { position: absolute; inset-block: 0; inset-inline-end: 2px; width: 48px; display: grid; place-items: center; color: var(--muted); border-radius: var(--radius-sm); }
.pw-toggle[aria-pressed="true"] { color: var(--text); }
.pw-toggle .ico { width: 20px; height: 20px; }

/* ---------- Chat media: encrypted photos, videos and voice notes ---------- */
.bubble.media { flex: none; padding: 0; overflow: hidden; background: transparent; } /* flex: none, or the list's column squeezes it to zero */
.bubble.media.mine, .bubble.media.theirs { background: transparent; }
.media-item { display: block; position: relative; padding: 0; border-radius: inherit; overflow: hidden; line-height: 0; }
/* Holding a photo or video opens the message's options (reply, react), not the phone's own save-image menu. */
.media-item, .media-item img, .media-item video { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* A fixed width: the bubble sizes itself from its content, so a percentage here would collapse both to zero. */
.media-item img, .media-item video { display: block; width: min(240px, 62vw); height: auto; max-height: 320px; object-fit: cover; background: var(--surface-2); }
.media-item.veiled img, .media-item.veiled video { aspect-ratio: 4 / 5; }
/* Their photos and videos arrive blurred: the first tap is a choice, not a surprise. */
.media-item.veiled img, .media-item.veiled video { filter: blur(26px) saturate(.7); transform: scale(1.1); }
.media-item .veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-6); padding: var(--space-12);
  color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.3; text-align: center; background: #120d1d59; }
.media-item .veil .ico { width: 26px; height: 26px; }
.media-wait { display: flex; align-items: center; gap: var(--space-8); min-height: 52px; padding: var(--space-12) var(--space-16); border-radius: inherit;
  background: var(--surface-2); color: var(--muted); font-size: .85rem; }
.media-wait .ico { width: 20px; height: 20px; flex: none; }
.media-wait[aria-busy="true"] .ico { animation: breathe 1.4s ease-in-out infinite; }
.media-viewer img { display: block; width: 100%; max-height: 72dvh; object-fit: contain; border-radius: var(--radius-md); }
.attach-pick { cursor: pointer; }
.rec-row { display: flex; align-items: center; justify-content: center; gap: var(--space-10); font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .media-wait[aria-busy="true"] .ico { animation: none; } }

/* Composer, Instagram-style: microphone and photo sit inside the field; typing swaps them for Send. */
.composer-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end; }
.composer-field textarea { padding-inline-end: 96px; }
.composer.typing .composer-field textarea { padding-inline-end: var(--space-16); }
.composer-tools { position: absolute; inset-inline-end: 4px; bottom: 0; display: flex; }
.tool-btn { width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; border-radius: 50%; color: var(--text); }
.tool-btn .ico { width: 23px; height: 23px; }
.tool-btn:active { opacity: .6; }
.composer.typing .composer-tools { display: none; }
.composer:not(.typing) > .send-btn { display: none; }
/* Recording replaces the whole bar. */
.composer.recording > .composer-field, .composer.recording > .send-btn { display: none; }
.rec-bar { flex: 1; display: flex; align-items: center; gap: var(--space-10); min-height: var(--tap-min); }
.rec-bar[hidden] { display: none; }
.rec-bar .rec-time { font-size: 1.05rem; }
.rec-bar .rec-label { flex: 1; color: var(--muted); font-size: .9rem; }
.rec-bar .rec-cancel { color: var(--danger); }

/* Voice message: play button, waveform of the recording, time. The bars fill as it plays. */
.voice-msg { display: flex; align-items: center; gap: var(--space-10); width: min(250px, 66vw); padding: var(--space-8) var(--space-14) var(--space-8) var(--space-8); border-radius: inherit;
  background: var(--surface-2); color: var(--text); }
[dir="rtl"] .voice-msg { padding: var(--space-8) var(--space-8) var(--space-8) var(--space-14); }
.bubble.mine .voice-msg { background: #7c3aed; color: #fff; }
.voice-play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--surface-2); }
.bubble.mine .voice-play { background: #fff; color: #7c3aed; }
.voice-play .ico { width: 18px; height: 18px; }
.wave { flex: 1; min-width: 0; height: 32px; touch-action: pan-y; user-select: none; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; border-radius: 6px; }
.wave i { flex: 1; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 2px; background: currentColor; opacity: .35; transition: opacity var(--dur-press); }
.wave i.on { opacity: 1; }
.voice-time { flex: none; min-width: 2.6em; font-size: .8rem; opacity: .85; }

/* A report can carry the photo it's about: shown small, attached by default, easy to leave out. */
.evidence { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-10); border: 1px solid var(--field-line); border-radius: var(--radius-field); color: var(--text); }
.evidence input { width: auto; flex: none; accent-color: #7c3aed; }
.evidence img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; }
.evidence > span { display: grid; gap: var(--space-2); }

/* The recipient's one-time consent for photos and videos, at the end of the chat. */
.consent-card { align-self: stretch; margin: var(--space-10) var(--space-4) var(--space-4); padding: var(--space-14) var(--space-16); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--space-8); }
.consent-head { display: flex; align-items: center; gap: var(--space-8); }
.consent-head .ico { width: 20px; height: 20px; flex: none; color: var(--violet); }
.consent-card p { margin: 0; }
.consent-card .row { gap: var(--space-8); }
.consent-card .btn { flex: 1; }

/* ---------- Touch feedback and small moments ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Buttons give under the finger and spring back. */
  .btn, .round, .send-btn, .tool-btn, .voice-play, .more-btn, .opener { transition: transform .18s var(--ease-out), opacity .15s; }
  .btn:active, .send-btn:active, .tool-btn:active, .voice-play:active, .more-btn:active, .opener:active { transform: scale(.95); }
  .actions .round:active { transform: scale(.88); }
  /* A new match that hasn't been opened yet: a soft ring breathes around the face, twice. */
  .list-item.fresh .avatar { animation: fresh-ring 1.8s ease-out .4s 2; }
  @keyframes fresh-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
}

/* A stat that opens something looks like the others, plus a hint of a button. */
.stat-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-sm); }
.stat-btn b { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 6px; }

/* The explainer on the landing page: waits for a tap, with one big play button over its first frame. */
.explainer-title { margin: 28px 0 0; font-size: 1.25rem; }
.hero-video.explainer { margin-top: var(--space-12); }
.play-big { position: absolute; left: 50%; top: 58%; translate: -50% -50%; display: flex; align-items: center; gap: var(--space-10); padding: 0 22px 0 var(--space-16);
  height: 64px; border-radius: var(--radius-pill); background: #fff; color: #1d1530; font: 700 1rem var(--body); box-shadow: 0 16px 36px -14px #000; }
.play-big .ico { width: 26px; height: 26px; color: #7c3aed; }
.play-big[hidden] { display: none; }

/* ---------- Swipe buttons: each decision has its own material ---------- */
/* Like is a glossy rose-to-violet bead, super like is gold, pass stays quiet. --pull (0..1) comes from the card's drag:
   the button for the way the card is going swells and glows, so the thumb feels where it is heading. */
.actions .round, .ps-actions .round { --pull: 0; position: relative; isolation: isolate; scale: calc(1 + var(--pull) * .2); }
.actions .round.big, .ps-actions .round.big {
  background: radial-gradient(110% 70% at 32% 14%, #ffffff5e, transparent 46%), linear-gradient(150deg, #ff6b8a, #d6285a 48%, #8b2fd8);
  box-shadow: inset 0 -7px 14px #4a0a3a59, inset 0 2px 0 #ffffff4d, 0 14px 30px -10px #d6285aa6; --glow: #ff5c7ab3;
}
.actions .round.big .ico, .ps-actions .round.big .ico { filter: drop-shadow(0 2px 3px #6b0a3a66); }
.actions .round.super, .ps-actions .round.super {
  overflow: visible; border: 0; color: #3d2400;
  background: radial-gradient(110% 70% at 32% 14%, #ffffff8c, transparent 46%), linear-gradient(150deg, #ffe38f, #ffbe2e 52%, #f08c00);
  box-shadow: inset 0 -6px 12px #9a520040, inset 0 2px 0 #ffffff80, 0 12px 26px -10px #f08c00b3; --glow: #ffc94dbf;
}
.actions .round.big::after, .actions .round.super::after, .ps-actions .round.big::after, .ps-actions .round.super::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent); opacity: var(--pull); will-change: opacity;
}
.actions .round.super.spent { filter: saturate(.25) brightness(.8); }
.actions .round[data-dir="left"] { color: color-mix(in srgb, var(--danger) calc(var(--pull) * 100%), var(--muted)); }
/* How many super likes are left today, on the star's shoulder. */
.round.super .count {
  position: absolute; top: -4px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding: 0 var(--space-6); border-radius: 99px;
  display: grid; place-items: center; font: 700 12px/1 var(--body); font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--gold-text); border: 2px solid #f0a020; pointer-events: none;
}
.round.super .count:empty { display: none; }
.round .shock { position: absolute; inset: -2px; border-radius: 50%; border: 3px solid #ff5c7a; pointer-events: none; z-index: -1; }
.round .shock.gold { border-color: #ffc94d; }
.swipe-card.flying.armed-super { box-shadow: 0 0 0 3px var(--gold), 0 0 70px #ffc94d80; }
@media (prefers-reduced-motion: no-preference) {
  .actions .round, .ps-actions .round { transition: transform .18s var(--ease-out), scale .14s ease-out, color .2s; }
  /* Now and then the gold glints, an invitation rather than a nag (every 6 s, short; opacity only, so it never repaints). */
  .actions .round.super:not(.spent)::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0;
    background: radial-gradient(60% 45% at 30% 22%, #ffffffd9, transparent 70%);
    animation: gold-sheen 6s ease-in-out 2s infinite;
  }
  @keyframes gold-sheen { 0%, 80%, 100% { opacity: 0; } 90% { opacity: 1; } }
}

/* The super like's moment (superMoment in app.js): a full-screen layer, centred on the card's star stamp. */
.super-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.super-fx i { position: absolute; font-style: normal; }
.sfx-flash { inset: 0; opacity: 0; background: radial-gradient(60vmax 60vmax at var(--x) var(--y), #ffd76a8c, #ffb02033 35%, transparent 65%); }
.sfx-rays { left: var(--x); top: var(--y); width: 140vmax; height: 140vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, #ffe38f59 0deg 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 70%); mask: radial-gradient(closest-side, #000 8%, transparent 70%); }
.sfx-star { left: var(--x); top: var(--y); width: 64px; height: 64px; margin: -32px 0 0 -32px; color: #ffc94d;
  filter: drop-shadow(0 0 12px #ffc94d) drop-shadow(0 0 28px #ff9f1caa); }
.sfx-star .ico { width: 64px; height: 64px; }

/* ---------- Chat: replies, reactions, unsent, date invites, nudges ---------- */
.bubble[data-id] { touch-action: pan-y; transition: transform .18s ease-out; }
.bubble[data-id]:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.bubble.reply-armed { box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 60%, transparent); }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.deleted { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-style: italic; font-size: .9rem; }
.bubble.mine.deleted { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .bubble.flash { animation: bubble-flash 1.2s ease-out; }
  @keyframes bubble-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 70%, transparent); } 100% { box-shadow: none; } }
}
/* The message being answered, inside the reply: who wrote it and its first line. */
/* A quote reads as a recessed block inside the bubble: tinted, with the author's name, no side rule. */
.reply-quote { display: grid; gap: 1px; width: 100%; margin: -2px 0 var(--space-6); padding: var(--space-6) var(--space-10); border-radius: var(--radius-sm); border: 0; text-align: start;
  background: #00000029; color: inherit; font: inherit; font-size: .82rem; cursor: pointer; }
.bubble.theirs .reply-quote { background: color-mix(in srgb, var(--text) 9%, transparent); }
.reply-quote b { font-size: .75rem; }
.bubble.theirs .reply-quote b { color: var(--violet); }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
/* The composer's "Replying to" bar. */
.reply-bar { display: flex; align-items: center; gap: var(--space-10); margin: 0 0 -2px; padding: var(--space-8) var(--space-6) var(--space-8) var(--space-12); border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0; font-size: .85rem; }
.reply-bar[hidden] { display: none; }
.reply-bar > .ico { width: 18px; height: 18px; color: var(--violet); flex: none; }
.reply-bar .grow { min-width: 0; display: grid; }
.reply-bar .reply-snip { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reactions under a bubble, and the picker in the message sheet. */
.reacts { display: flex; gap: var(--space-4); margin: -10px var(--space-12) var(--space-4); position: relative; z-index: 1; align-self: flex-start; }
.reacts.mine { align-self: flex-end; }
.react-chip { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: var(--space-2) 9px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: .85rem; box-shadow: 0 2px 8px -4px #0006; }
/* A 44px hit area around the small chip and the speed button, without making them look bigger. */
.react-chip::after, .voice-rate::after { content: ""; position: absolute; inset: -8px -4px; }
.react-chip.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 18%, var(--surface)); }
.react-row { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border-radius: 99px; background: var(--surface-2); }
.react-pick { flex: 1; aspect-ratio: 1; max-width: 52px; border: 0; border-radius: 50%; background: transparent; font-size: 1.6rem; line-height: 1; }
.react-pick.on { background: color-mix(in srgb, var(--violet) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .react-pick { transition: transform .16s var(--ease-out); }
  .react-pick:hover, .react-pick:focus-visible { transform: scale(1.18); }
  .react-chip { animation: react-pop .32s var(--ease-out); }
  @keyframes react-pop { from { transform: scale(.4); opacity: 0; } }
}
/* A date invite: a card in the chat with the times to pick from. */
.bubble.date-card { max-width: 86%; padding: var(--space-14) var(--space-16); display: grid; gap: var(--space-4); background: var(--surface); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); }
.bubble.date-card.mine { background: var(--surface); color: var(--text); }
.date-card .date-title { display: flex; align-items: center; gap: var(--space-6); font: 700 1.02rem var(--display); }
.date-card .date-title .ico { width: 18px; height: 18px; color: var(--gold-text); }
.date-card .date-list { display: grid; gap: var(--space-4); margin: var(--space-8) 0 var(--space-4); padding: 0; list-style: none; }
.date-card .date-list li, .date-card .date-slots .btn { display: flex; align-items: center; gap: var(--space-8); font-variant-numeric: tabular-nums; }
.date-card .date-list .ico, .date-card .date-slots .ico { width: 16px; height: 16px; flex: none; opacity: .7; }
.date-card .date-slots { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.date-card .date-slots .btn { justify-content: flex-start; text-align: start; }
.date-card .date-result { display: grid; gap: var(--space-2); margin-top: var(--space-6); padding: var(--space-10) var(--space-12); border-radius: var(--radius-sm); background: var(--surface-2); }
.date-card .date-result.ok { background: color-mix(in srgb, var(--mint) 16%, var(--surface-2)); }
.date-card .link { justify-self: start; min-height: 36px; }
/* Nudges at the end of the chat reuse the consent card's shape. */
.chat-nudge .openers { margin-top: var(--space-2); }
.chat-nudge .link { justify-self: start; }
.date-nudge { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
/* A careful note under a link or phone number from someone new. */
.msg-warn { align-self: flex-start; display: flex; gap: var(--space-6); align-items: flex-start; max-width: 82%; margin: -4px var(--space-4) var(--space-10); padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--text); font-size: .78rem; line-height: 1.35; }
.msg-warn .ico { width: 16px; height: 16px; flex: none; color: var(--danger); margin-top: 1px; }
/* Voice playback speed. */
.voice-rate { position: relative; flex: none; min-width: 38px; height: 28px; padding: 0 var(--space-6); border-radius: 99px; border: 1px solid currentColor; background: transparent;
  color: inherit; font: 700 .72rem var(--body); opacity: .85; font-variant-numeric: tabular-nums; }
.voice-msg { width: min(290px, 74vw); }
/* The hover toolbar beside a message (mouse and keyboard), and the one-time tip about double tap and hold. */
.msg-tools { position: fixed; z-index: 30; display: flex; gap: var(--space-2); padding: 3px; border-radius: 99px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 8px 20px -10px #0008; }
.msg-tools[hidden] { display: none; }
.msg-tools button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.msg-tools button[hidden] { display: none; }
.msg-tools button:hover, .msg-tools button:focus-visible { background: var(--surface-2); color: var(--text); }
.msg-tools button .ico { width: 18px; height: 18px; }
.msg-tools [data-tool=heart].on, .msg-tools [data-tool=heart]:hover { color: var(--hot); }
.react-hint { align-self: flex-start; display: flex; align-items: center; gap: var(--space-8); max-width: 86%; margin: 0 var(--space-4) var(--space-10); padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-field); background: color-mix(in srgb, var(--violet) 14%, var(--surface)); color: var(--text); font-size: .8rem; line-height: 1.35; }
.react-hint .link { flex: none; min-height: 32px; }
.react-hint > .ico { width: 16px; height: 16px; flex: none; color: var(--hot); }
@media (prefers-reduced-motion: no-preference) {
  .react-hint { animation: hint-in .4s var(--ease-out) .6s backwards; }
  @keyframes hint-in { from { opacity: 0; transform: translateY(6px); } }
}

/* Activity: the bell carries the same red count as the tab bar; rows without a face get a round icon, new ones a dot. */
.bell-btn { position: relative; }
.discover-top .bell-btn { background: var(--surface); border: 1px solid var(--line); }
.bell-btn .tab-badge {
  position: absolute; top: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; background: var(--badge); color: #fff; box-shadow: 0 0 0 2px var(--bg);
  font: 700 12px/1 var(--body); font-style: normal; font-variant-numeric: tabular-nums;
}
.activity-ico { flex: none; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 20px; }
.bell-btn .bell-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 2px var(--bg); }
.activity-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); }
.empty .state-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-xl); margin-bottom: var(--space-14); background: var(--surface-2); color: var(--muted); }
.empty .state-ico .ico { width: 30px; height: 30px; }

/* Pull to refresh: a round arrow that follows the finger down from the top, turns gold once a release will refresh,
   and spins while it does. */
.ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) - 34px); left: 50%; z-index: 30; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  box-shadow: 0 6px 18px #0004; opacity: 0; transform: translate(-50%, 0); pointer-events: none; transition: color .15s; }
.ptr .ico { width: 20px; height: 20px; }
.ptr.armed, .ptr.spinning { color: var(--gold); }
.ptr.spinning .ico { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.spinning .ico { animation: none; } }

/* The in-app selfie camera: a mirror while framing (as people expect a front camera to look), the true image after. */
.selfie-cam { margin-top: var(--space-14); }
.cam { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-2); }
.cam video, .cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam video { transform: scaleX(-1); }
.cam-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); margin-top: var(--space-10); }

/* Date invite: a strip of days, the usual hours, and the picked times as removable chips. */
.dp-label { font-weight: 700; font-size: .9rem; margin-bottom: -4px; }
.dp-days { display: flex; gap: var(--space-8); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin-inline: -24px; padding: var(--space-2) var(--space-24) var(--space-6); scrollbar-width: none; }
.dp-days::-webkit-scrollbar { display: none; }
.dp-day { position: relative; flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; min-width: 58px; padding: var(--space-8) var(--space-6) var(--space-10);
  border-radius: var(--radius-md); border: 1px solid var(--field-line); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.dp-day small { font-size: .72rem; color: var(--muted); line-height: 1.2; }
.dp-day b { font: 800 1.3rem/1.15 var(--display); font-variant-numeric: tabular-nums; }
.dp-day[aria-checked="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.dp-day[aria-checked="true"] small { color: #fff; opacity: .85; }
.dp-day:disabled { opacity: .35; cursor: default; }
.dp-dot { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-text, #f5b544); opacity: 0; }
.dp-day.has .dp-dot { opacity: 1; }
.dp-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.dp-time { min-height: var(--tap-min); border-radius: var(--radius-sm); border: 1px solid var(--field-line); background: transparent; color: inherit; font: 600 .95rem var(--body, inherit);
  font-variant-numeric: tabular-nums; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--space-6); }
.dp-time[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.dp-time:disabled { opacity: .35; cursor: default; }
.dp-other { grid-column: 1 / -1; position: relative; overflow: hidden; }
.dp-other .ico { width: 16px; height: 16px; }
/* The real time field covers the whole button, so a tap opens the phone's own clock. */
.dp-other input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dp-other.off { opacity: .35; pointer-events: none; }
.dp-picked { display: grid; gap: var(--space-6); min-height: 22px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.dp-chip { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 36px; padding: 0 var(--space-8) 0 var(--space-12); border-radius: var(--radius-pill); border: 0;
  background: color-mix(in srgb, var(--violet) 18%, transparent); color: inherit; font: 600 .85rem inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-chip .ico { width: 14px; height: 14px; opacity: .7; }

/* New messages arrived below while reading higher up. */
.new-below { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 3; display: inline-flex; align-items: center; gap: var(--space-6);
  min-height: 36px; padding: 0 var(--space-14); border: 0; border-radius: var(--radius-pill); background: var(--violet); color: #fff; font: 700 .85rem inherit;
  box-shadow: 0 6px 20px -6px #0006; cursor: pointer; animation: rise .25s ease-out; }
.new-below .ico { width: 16px; height: 16px; }

/* Profile strength: the bar fills from where it was, the steps go where each is done. */
.strength { margin-top: var(--space-14); display: grid; gap: var(--space-10); }
.strength-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.strength-pct { font: 800 1.25rem var(--display); font-variant-numeric: tabular-nums; }
.strength-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.strength-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform: scaleX(var(--p)); transform-origin: 0 50%;
  transition: transform .9s var(--ease-out); }
[dir=rtl] .strength-bar i { transform-origin: 100% 50%; }
.strength-steps { display: grid; }
.strength-step:last-child { border-bottom: 0; }
.strength-step { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: start; cursor: pointer; min-height: 48px; }
.strength-step b { font-weight: 600; }
.strength-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--violet); }
.strength-ico .ico { width: 18px; height: 18px; }
.strength-gain { flex: none; font-weight: 700; font-size: .85rem; color: var(--mint); font-variant-numeric: tabular-nums; }
.strength-full { margin: 0; display: flex; align-items: center; gap: var(--space-8); font-weight: 600; }
.strength-full .ico { color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .strength-bar i { transition: none; } }

/* Since the last visit: one toast, each piece of news a way in. */
.away-toast { display: grid; gap: var(--space-6); }
.away-list { display: grid; gap: var(--space-2); }
.away-item { display: flex; align-items: center; gap: var(--space-8); min-height: 36px; color: inherit; text-decoration: none; font-weight: 600; }
.away-item .ico { width: 18px; height: 18px; flex: none; color: var(--hot); }
.away-item .grow { flex: 1; }
.away-item .ico:last-child { width: 14px; height: 14px; color: var(--muted); rotate: -90deg; }
[dir="rtl"] .away-item .ico:last-child { rotate: 90deg; }

/* Tabs: every icon drawn the same way; the current one filled, the rest outlined. */
#tabs .tab-ico .shape { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: fill .15s ease; }
#tabs a.on .tab-ico .shape { fill: currentColor; }

/* A vouch on Me: the note, and beside it a quiet way to take it off. */
.vouch-own { display: flex; align-items: center; gap: var(--space-4); }
.vouch-own .friend-note { flex: 1; min-width: 0; }
.unvouch { flex: none; width: var(--tap-min); height: var(--tap-min); color: var(--muted); }
.unvouch .ico { width: 18px; height: 18px; }

/* The link to copy by hand, when sharing and the clipboard are both refused. */
.copy-field { width: 100%; margin-top: var(--space-8); font-variant-numeric: tabular-nums; }

/* The full profile reads top to bottom in one rhythm: the person and their own words, then what friends say, then
   photos and answers in turn, then interests. Friends' notes keep their paper look but line up: one indent, a slight
   alternating tilt, the full width. */
.profile-sheet .ps-bio { margin: var(--space-14) 0 0; font-size: 1.05rem; line-height: 1.5; text-wrap: pretty; }
.ps-section { margin: 28px 0 0; }
.ps-section .ps-title { margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-6); font-size: 1rem; }
.ps-section .ps-title .ico { width: 18px; height: 18px; color: var(--mint); }
.profile-sheet .notes { gap: var(--space-16); margin: var(--space-18) 0 0; }
.profile-sheet .notes .friend-note, .profile-sheet .notes .friend-note:nth-child(even) {
  width: auto; max-width: none; margin: 0; margin-inline-start: var(--space-12); rotate: -.6deg; }
.profile-sheet .notes .friend-note:nth-child(even) { rotate: .6deg; }
[dir="rtl"] .profile-sheet .notes .friend-note { rotate: .6deg; }
[dir="rtl"] .profile-sheet .notes .friend-note:nth-child(even) { rotate: -.6deg; }
.profile-sheet > .ps-photo, .profile-sheet > .prompt-card { margin: 20px 0 0; }
/* The first photo carries the first friend's note, as on the card, over a shade so the paper stands off a bright photo. */
.ps-lead { position: relative; margin: var(--space-12) 0 0; border-radius: var(--radius); overflow: hidden; }
.ps-lead .ps-photo { margin: 0; border-radius: 0; }
.ps-lead:has(.ps-lead-note)::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, #0d081899, transparent); }
.ps-lead + .ps-head { margin-top: var(--space-16); }
.ps-lead-note { position: absolute; inset: auto 14px 16px; z-index: 1; }
.ps-lead-note .friend-note { margin: 0; margin-inline-start: var(--space-12); max-width: calc(100% - 12px); }
/* The other photos together: a strip that scrolls sideways, each one snapping into place, the next one peeking in. */
.ps-strip { display: flex; gap: var(--space-10); margin: 20px -16px 0; padding: 0 var(--space-16); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ps-strip::-webkit-scrollbar { display: none; }
.ps-strip .ps-photo { flex: 0 0 72%; margin: 0; scroll-snap-align: start; border-radius: var(--radius-lg); }
.ps-section .ps-chips { margin: var(--space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ps-section .ps-chips .chip { margin: 0; }

/* Starting up: the wing where the app will be, fading in only if it takes a moment, so a quick start shows nothing. */
.boot { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; }
.boot svg { width: 72px; height: 72px; color: var(--violet); animation: boot-in .4s ease-out .35s backwards, boot-breathe var(--dur-flicker) ease-in-out .75s infinite; }
@keyframes boot-in { from { opacity: 0; } }
@keyframes boot-breathe { 50% { transform: scale(1.08); opacity: .7; } }

/* The streak pill as the way to its next gift; a gift waiting to be opened stands out. */
.gift-pill .flame .ico { color: var(--gold-text); }
.gift-pill.ready { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.gift-pill.ready .flame .ico { color: #fff; }
@media (prefers-reduced-motion: no-preference) { .gift-pill.ready .flame { animation: gift-nudge var(--dur-breathe) ease-in-out 1s infinite; } }
@keyframes gift-nudge { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -12deg; } 82% { rotate: 10deg; } 88% { rotate: -6deg; } 94% { rotate: 3deg; } }

/* The streak explained: the road to the gift, what's inside, the rules, the gifts after it. */
.gift-explain { text-align: center; display: grid; gap: var(--space-14); }
.gift-explain h2 { margin: 0; font: 800 1.6rem/1.15 var(--display); text-wrap: balance; }
.gift-explain .sub { margin: -6px 0 0; }
.road { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: start; margin: var(--space-18) var(--space-4) var(--space-4); }
/* The path: a thick track, lit in the brand gradient as far as today. */
.road::before, .road::after { content: ''; position: absolute; top: 19px; height: 8px; border-radius: 99px; inset-inline-start: calc(50% / var(--n)); }
.road::before { inset-inline-end: calc(50% / var(--n)); background: var(--surface-2); }
.road::after { width: calc((100% - 100% / var(--n)) * var(--done)); background: var(--grad); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--hot) 55%, transparent); }
.stop { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-8); font-size: .85rem; color: var(--muted); }
.stop .dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--surface-2);
  color: var(--muted); font: 800 1rem var(--display); }
.stop .dot .ico { width: 22px; height: 22px; }
/* Today, done: lit, with a soft halo. */
.stop.done { color: var(--text); font-weight: 700; }
.stop.done .dot { background: var(--grad); border-color: color-mix(in srgb, #fff 25%, transparent); color: var(--on-grad);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--hot) 18%, transparent); }
/* The gift: the same golden box that opens on the day, tilted and glowing. */
.stop.goal { color: var(--gold-text); font-weight: 800; }
.stop.goal::before { content: ''; position: absolute; top: -20px; width: 110px; height: 110px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 28%, transparent), transparent 65%); }
.stop.goal .dot { width: 70px; height: 70px; margin: -12px 0 -4px; border-radius: var(--radius); rotate: -6deg; border: 0; color: #2a1a00;
  background: linear-gradient(160deg, #ffe08a, #ffb31a); box-shadow: 0 10px 28px -8px #ffb31acc, 0 0 0 6px color-mix(in srgb, var(--gold) 14%, transparent); }
.stop.goal .dot .ico { width: 34px; height: 34px; }
.stop.middle .dot { font-size: 1.2rem; }
.gift-explain .box { text-align: start; background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-14) var(--space-16); display: grid; gap: var(--space-4); }
.gift-explain .rule { display: flex; gap: var(--space-10); align-items: flex-start; text-align: start; font-size: .92rem; }
.gift-explain .rule i { flex: none; font-style: normal; font-weight: 700; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: .8rem; }
.gift-explain .rule i .ico { width: 14px; height: 14px; }
.gift-explain .ahead { display: flex; gap: var(--space-8); justify-content: center; flex-wrap: wrap; }
.gift-explain .ahead span { display: inline-flex; align-items: center; gap: var(--space-6); font-size: .82rem; padding: var(--space-6) var(--space-10); border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.gift-explain .ahead .ico { width: 14px; height: 14px; color: var(--gold-text); }
.gift-bonus { display: inline-flex; align-items: center; gap: var(--space-8); margin: var(--space-4) auto 0; padding: var(--space-8) var(--space-14); border-radius: 99px; font-weight: 700;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-text); }
.gift-bonus .ico { width: 16px; height: 16px; }

/* Discover's top bar: the way to the gift, tonight's people, the bell. If a very narrow phone still can't fit them,
   the gift scrolls sideways and the bell stays put. */
.discover-top > .row:first-child { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.discover-top > .row:first-child::-webkit-scrollbar { display: none; }
.discover-top > .row:last-child { flex: none; }
/* Likes left today, on the heart's shoulder, the way super likes sit on the star's. */
.round.big .count {
  position: absolute; top: -4px; inset-inline-end: -6px; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 99px;
  display: grid; place-items: center; font: 700 12px/1 var(--body); font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--text); border: 2px solid color-mix(in srgb, var(--hot) 70%, transparent); pointer-events: none;
}
.round.big .count:empty { display: none; }
/* A boosted profile: a gold ring on the Me tab. */
#tabs a span.boosted::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px 2px color-mix(in srgb, var(--gold) 55%, transparent); }

/* The streak as a flame that fills toward its gift: in the pill, and big in its sheet with the gift at the tip. */
:root { --flame-empty: #3a2e54; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --flame-empty: #e4dcf2; } }
:root[data-theme="light"] { --flame-empty: #e4dcf2; }
.gift-pill .flame-meter { display: block; }
.flame-big { position: relative; width: 170px; height: 170px; margin: 0 auto -10px; }
.flame-big .flame-meter { display: block; filter: drop-shadow(0 10px 24px rgba(255, 138, 61, .35)); }
.flame-tip { position: absolute; top: 2px; left: 50%; margin-left: -23px; width: 46px; height: 46px; border-radius: 15px; rotate: -6deg;
  display: grid; place-items: center; color: #2a1a00; background: linear-gradient(160deg, #ffe08a, #ffb31a); box-shadow: 0 8px 22px -6px rgba(255, 179, 26, .8); }
.flame-tip .ico { width: 24px; height: 24px; }
.flame-count { margin: -4px 0 0; color: var(--muted); font-size: .9rem; }
.flame-count b { color: var(--gold-text); }

/* Tonight's people as stories: a row of rings above the deck while any is still to be seen. A coloured ring is someone
   not seen yet, a grey one someone seen; a small heart says you're in their picks too. */
.drop-stories { margin: 0 0 var(--space-10); }
.ds-title { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 32px; padding: 0 var(--space-4); border: 0; background: none;
  color: var(--muted); font: 600 .82rem var(--body); cursor: pointer; }
.ds-title .ico { width: 15px; height: 15px; }
.ds-title > .ico:first-child { color: #a78bfa; }
.ds-row { display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; padding: var(--space-4) var(--space-4) 0; }
.ds-row::-webkit-scrollbar { display: none; }
.ds-person { flex: none; display: grid; justify-items: center; gap: var(--space-4); width: 68px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.ds-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-sizing: border-box;
  background: var(--line); }
.ds-person.open:not(.looked) .ds-ring { background: none; }
.ds-person.open:not(.looked) .ds-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #7c3aed, #d6285a, #f59e0b, #7c3aed); }
.ds-ring .avatar { position: relative; }
.ds-ring .avatar { margin: 0; border: 3px solid var(--bg); box-sizing: content-box; flex: none; }
.ds-person:not(.open) .avatar, .ds-person.looked .avatar { filter: grayscale(.7); opacity: .7; }
.ds-name { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.ds-person.open:not(.looked) .ds-name { color: var(--text); font-weight: 600; }
.ds-mutual { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-from); color: var(--on-grad); border: 2px solid var(--bg); }
.ds-mutual .ico { width: 12px; height: 12px; }
.ds-person:focus-visible .ds-ring { outline: 2px solid var(--brand, #7c3aed); outline-offset: 2px; }
/* On the card: "you're in their picks tonight too", under the moon. */
.drop-mutual { display: inline-flex; align-items: center; gap: var(--space-6); margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill);
  background: var(--grad-from); color: var(--on-grad); font-size: .82rem; font-weight: 700; }
.drop-mutual .ico { width: 1em; height: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .ds-person.open:not(.looked) .ds-ring::before { animation: ds-spin 6s linear infinite; }
}
@keyframes ds-spin { to { rotate: 1turn; } }

/* Friends page as the circle. */
.needs-card h3, .sent-card h3, .impact-card h3, .invite-card h3 { margin: 0; }
.needs-card .list-item .btn, .sent-card .list-item .btn { flex: none; }
.sent-status { flex: none; font-size: .78rem; font-weight: 700; padding: 3px var(--space-10); border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--muted); }
.sent-status.seen { color: var(--text); }
.sent-status.match { background: linear-gradient(135deg, var(--grad-to), var(--grad-from)); color: var(--on-grad); }
.impact-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin: var(--space-12) 0 0; text-align: center; }
.impact-nums div { display: grid; gap: var(--space-2); padding: var(--space-10) var(--space-4); border-radius: var(--radius-field); background: var(--chip-bg); }
.impact-nums .num { font: 800 1.7rem/1 var(--display, inherit); font-variant-numeric: tabular-nums; }
.impact-nums .num.hot { color: #ff6b8f; }
.impact-nums .num.gold { color: var(--gold-text, #f2c14e); }
.impact-nums span { font-size: .78rem; color: var(--muted); }
.impact-leader { margin: var(--space-10) 0 0; }
.rewards-fold summary, .invite-card .code-entry summary { cursor: pointer; color: var(--muted); font-size: .9rem; min-height: 32px; display: flex; align-items: center; }
.rewards-fold .rewards { margin-top: var(--space-8); }
/* Discover: send this person to a friend. */
.send-btn-card { display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--tap-min); padding: 0 var(--space-14); border-radius: var(--radius-pill); border: 1px solid #ffffff40;
  background: #120d1d8c; color: #fff; font: 600 .9rem var(--body, inherit); cursor: pointer; backdrop-filter: blur(6px); }
.send-btn-card svg { width: 18px; height: 18px; }
.wing-banner.sent { display: grid; gap: var(--space-2); }
.wing-note { font-weight: 600; font-size: .92rem; }
.send-friends { display: flex; gap: var(--space-10); overflow-x: auto; padding: var(--space-4) var(--space-2); scrollbar-width: none; }
.send-friend { flex: none; display: grid; justify-items: center; gap: var(--space-4); width: 72px; cursor: pointer; font-size: .8rem; text-align: center; }
.send-friend input { position: absolute; opacity: 0; pointer-events: none; }
.send-friend .avatar { outline: 3px solid transparent; outline-offset: 2px; }
.send-friend:has(input:checked) .avatar { outline-color: var(--grad-from); }
.send-friend:has(input:focus-visible) .avatar { outline-color: #7c3aed; }
.send-sheet input#sendNote { width: 100%; }
.send-sheet .btn svg { width: 18px; height: 18px; vertical-align: -3px; }

/* Me: whether people can see you, and the steps left until they can (statusCard in app.js). */
.status-card { margin-top: var(--space-18); display: grid; gap: var(--space-6); }
.status-card h3 { font-size: 1.2rem; }
.status-card p { margin: 0; }
.status-card.off { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, var(--surface)); }
.status-card.live { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, var(--surface)); }
.status-card.live h3 { color: var(--mint); }
.status-sub { color: var(--muted); }
.status-steps { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; }
.status-step { display: flex; gap: var(--space-12); position: relative; padding-bottom: var(--space-14); }
.status-step:last-child { padding-bottom: 0; }
/* The line joining each step to the next. */
.status-step:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.status-step .grow { flex: 1; min-width: 0; }
.status-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; box-sizing: border-box; }
.status-dot.ok { background: var(--mint); color: #120d1d; }
.status-dot.ok .ico { width: 16px; height: 16px; }
.status-dot.todo { border: 2px solid var(--hot); color: var(--hot); }
.status-dot.goal { border: 2px dashed var(--field-line); color: var(--muted); }
.status-step > .grow.status-sub { padding-top: var(--space-4); font-size: 0.9rem; }
.status-row { display: flex; align-items: center; gap: var(--space-10); }
.status-row .btn { flex: none; padding: var(--space-10) var(--space-18); min-height: var(--tap-min); }
.status-bar { display: flex; gap: var(--space-4); margin-top: var(--space-8); }
.status-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.status-bar i.on { background: var(--hot); }
.me-section { font-size: 1.1rem; margin: 26px 0 0; }
.me-section + .card, .me-section + details.card { margin-top: var(--space-10) !important; }
.me-settings { flex: none; }

/* Matches: rings of who liked you and who's new, a first line for the newest, then your turn, a date, and the rest. */
.mt-waiting { color: var(--gold-text, #f2c14e); margin-inline-start: auto; margin-inline-end: var(--space-8); }
.mt-rings { display: flex; gap: var(--space-12); overflow-x: auto; scrollbar-width: none; padding: var(--space-2) var(--space-2) var(--space-14); }
.mt-rings::-webkit-scrollbar { display: none; }
.mt-ring { flex: none; display: grid; justify-items: center; gap: var(--space-6); width: 72px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.mt-ring .ring { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--grad-to), var(--grad-from)); }
.mt-ring .ring .avatar { border: 3px solid var(--bg); box-sizing: content-box; margin: 0; }
.mt-ring.likes .ring { background: conic-gradient(#f2c14e, #d6285a, #7c3aed, #f2c14e); }
.mt-blur { filter: blur(3px) saturate(1.2); }
.mt-count { position: absolute; bottom: -4px; inset-inline-start: 50%; translate: -50% 0; background: var(--grad-from); color: var(--on-grad); font-size: .72rem; font-weight: 700;
  padding: 1px var(--space-8); border-radius: var(--radius-pill); border: 2px solid var(--bg); }
[dir="rtl"] .mt-count { translate: 50% 0; }
.mt-name { font-size: .78rem; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ring.likes .mt-name { color: var(--gold-text, #f2c14e); font-weight: 700; }
.mt-opener { display: flex; gap: var(--space-12); align-items: flex-start; margin-bottom: var(--space-14); }
.mt-opener .grow { min-width: 0; }
.mt-lines { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.mt-line { text-align: start; min-height: 40px; padding: var(--space-8) var(--space-12); border-radius: var(--radius-field); border: 1px solid var(--line); background: var(--chip-bg); color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.mt-own { align-self: center; padding: var(--space-8) var(--space-6); font-size: .88rem; color: var(--brand, #a78bfa); }
.mt-h { margin: var(--space-4) 0 var(--space-2); font-size: .9rem; color: var(--muted); }
.mt-h.turn { color: var(--gold-text, #f2c14e); }
.mt-list .mt-h:not(:first-child) { margin-top: var(--space-14); }
.mt-row.is-unread .avatar { box-shadow: 0 0 0 2px var(--gold-text, #f2c14e); }
.mt-date { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-10) 0 var(--space-4); padding: var(--space-10) var(--space-12); border-radius: var(--radius-lg); color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #3b1f6b, #5a1736); }
.mt-date .grow { display: grid; gap: var(--space-2); min-width: 0; }
.mt-date .ico { flex: none; }

/* A form field that needs fixing (fieldChecks in app.js): a red frame, and under it what to fix. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error); box-shadow: 0 0 0 1px var(--error);
}
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus { border-color: var(--error); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.field-error { color: var(--error); font-size: 0.824rem; margin: var(--space-6) 0 0; line-height: 1.4; }
.field-error::before { content: '⚠ '; }
.field-error .link { color: inherit; text-decoration: underline; font-weight: 700; }

/* Installing: the guide's numbered steps, the in-app browser screen, the match card, the Android banner, the first open. */
.install-guide { list-style: none; padding: 0; margin: var(--space-18) 0 var(--space-14); display: grid; gap: var(--space-10); }
.install-guide li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-14); border-radius: var(--radius-lg); background: var(--surface-2); line-height: 1.4; }
.install-guide li.now { box-shadow: 0 0 0 2px var(--gold, #f2c14e); }
.install-guide .grow { min-width: 0; }
.ig-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--line); font-weight: 700; }
.install-guide li.now .ig-n, .in-app .ig-n { background: var(--gold, #f2c14e); color: #120d1d; }
.ig-ico { flex: none; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-sm); background: var(--bg); color: var(--hot); }
.ig-w { display: inline-grid; place-items: center; width: 100%; height: 100%; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--grad-to), var(--grad-from)); color: var(--on-grad); font-weight: 800; }
.ig-w.lg { flex: none; width: var(--tap-min); height: var(--tap-min); font-size: 1.3rem; }
.ig-w.xl { width: 88px; height: 88px; border-radius: 24px; font-size: 2.6rem; box-shadow: 0 18px 50px rgba(214, 40, 90, .35); }
.in-app { position: relative; min-height: calc(100dvh - 40px); display: flex; flex-direction: column; gap: var(--space-14); padding-top: 64px; }
.in-app h1 { margin: 0; font-size: 2rem; line-height: 1.1; }
.in-app-sub { margin: 0; line-height: 1.55; }
.in-app .install-guide { margin: var(--space-4) 0 0; }
.in-app-arrow { position: absolute; top: 0; right: 4px; color: var(--gold, #f2c14e); }
.in-app-foot { margin-top: auto; display: grid; gap: var(--space-10); padding-bottom: var(--space-12); }
.in-app-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); }
.in-app-foot .link { justify-self: center; min-height: var(--tap-min); }
.match-install { display: grid; grid-template-columns: auto 1fr; gap: var(--space-10) var(--space-12); text-align: start; margin-top: var(--space-6); padding: var(--space-14); border-radius: var(--radius-lg); background: var(--surface-2); }
.match-install p { margin: var(--space-4) 0; line-height: 1.5; }
.match-install .btn { grid-column: 1 / -1; }
.match-install .small .ico { width: 14px; height: 14px; vertical-align: -2px; }
.mi-ico { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-field); background: linear-gradient(135deg, var(--grad-to), var(--grad-from)); color: var(--on-grad); }
.install-banner { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-14); padding: var(--space-12) var(--space-14); }
.install-banner .grow { min-width: 0; }
.install-banner b { white-space: nowrap; }
.installed-welcome { display: grid; justify-items: center; gap: var(--space-12); text-align: center; padding-top: var(--space-8); }
.installed-welcome h2 { margin: var(--space-6) 0 0; }
.installed-welcome p { margin: 0; }
.iw-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-8); width: 100%; }
.iw-list li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-14); border-radius: var(--radius-md); background: var(--surface-2); text-align: start; color: var(--text); }
.iw-list .ico { color: var(--gold-text, #f2c14e); }