/* Replicadate: one committed night-mode world. The phone IS the viewport.
   Spacing 4/8/12/16/24/32/48 · type 12/13/15/17/22/30/44 · mono only for numbers · holo only where the replica is. */
:root{
  color-scheme: dark;
  --ink:#120A0F; --surface:#1D1218; --surface2:#2A1A22;
  --line:rgba(255,226,236,.10);
  --text:#F7EEF1; --muted:#A8919B;
  --coral:#FF5E5B; --peach:#FFB199; --lilac:#D9CCFF; --mint:#9EF0E1;
  --holo:linear-gradient(120deg,#C8B6FF 0%,#9EF0E1 40%,#FFD3A8 75%,#FF9EC4 100%);
  --human:radial-gradient(circle at 40% 35%,#FFB199,#FF5E5B 60%,#8A1F2E);
  --display:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --tabs:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:15px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:inherit}
input,textarea,select{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--peach);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
img{display:block}

/* ---------- shell ---------- */
#view{position:relative;width:100%;max-width:440px;height:100%;height:100dvh;margin:0 auto;overflow:hidden;background:var(--ink)}
@media (min-width:520px){
  body{background:#0B0609}
  #view{border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 0 120px rgba(0,0,0,.5)}
}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(var(--s5) + var(--st)) calc(var(--s5) + var(--sr)) calc(var(--s5) + var(--sb)) calc(var(--s5) + var(--sl));
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;animation:scrIn .45s cubic-bezier(.2,.8,.2,1) both}
.scr::-webkit-scrollbar{display:none}
#view.has-tabs .scr{bottom:calc(var(--tabs) + var(--sb));padding-bottom:var(--s4)}
@keyframes scrIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.boot{position:absolute;inset:0;display:grid;place-items:center}

.tabs{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;height:calc(var(--tabs) + var(--sb));padding:0 var(--sr) var(--sb) var(--sl);background:rgba(18,10,15,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600;position:relative;min-height:44px}
.tabs a svg{width:24px;height:24px}
.tabs a.on{color:var(--text)}
.tabs a.on svg{color:var(--coral)}
.tabs .badge{position:absolute;top:10px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--coral);border:2px solid var(--ink)}

/* ---------- type ---------- */
.eyebrow{font-size:13px;font-weight:500;color:var(--muted)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
h1{font-size:44px;line-height:.95;font-weight:800}
h2{font-size:30px;line-height:1.05;font-weight:800}
h3{font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:15px;line-height:1.5;margin:var(--s3) 0 0;text-wrap:pretty}
.holo{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.grow{flex:1}
.fine{text-align:center;font-size:13px;color:var(--muted);margin:0 0 var(--s3);text-wrap:balance}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.brand i{font-style:normal;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- controls ---------- */
.cta{width:100%;min-height:56px;border-radius:18px;background:var(--coral);color:#fff;font-weight:600;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 16px;transition:transform .15s,opacity .3s,background .3s;text-align:center;flex:none;text-decoration:none}
.cta:active{transform:scale(.97)}
.cta[disabled]{opacity:.35;pointer-events:none}
.cta.ghost{background:var(--surface2)}
.cta.line{background:transparent;border:1.5px solid rgba(255,226,236,.22)}
.cta small{font-weight:400;font-size:12px;opacity:.85}
.cta.tall{min-height:64px}
.cta.busy{pointer-events:none}
.cta.busy span::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
.link{display:block;margin:var(--s3) auto 0;color:var(--muted);font-size:14px;min-height:44px;padding:0 var(--s3);text-align:center}
.link.inline{display:inline;margin:0;min-height:0;padding:0;color:var(--peach);font-weight:600}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border-radius:999px;background:var(--surface2);font-size:13px;font-weight:600;white-space:nowrap;position:relative;text-decoration:none}
.pill::after{content:"";position:absolute;inset:-5px 0}
.pill.go{background:var(--coral);color:#fff}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dock{flex:none;position:sticky;bottom:calc(-1 * (var(--s5) + var(--sb)));margin:0 calc(-1 * var(--s5)) calc(-1 * (var(--s5) + var(--sb)));padding:var(--s3) var(--s5) calc(var(--s5) + var(--sb));background:linear-gradient(transparent,var(--ink) 24px);z-index:3}
#view.has-tabs .dock{bottom:calc(-1 * var(--s4));margin-bottom:calc(-1 * var(--s4));padding-bottom:var(--s4)}

.field{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.field > span,.qlabel{font-size:13px;font-weight:600;color:var(--muted)}
.qlabel span{font-weight:400;margin-left:6px}
.input{width:100%;height:52px;padding:0 var(--s4);border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:16px;outline:none;transition:border-color .2s}
.input:focus{border-color:var(--peach)}
.input::placeholder,textarea::placeholder{color:#6F5B65}
input[type=date].input{appearance:none;-webkit-appearance:none;display:flex;align-items:center}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8)}
textarea.input{height:auto;min-height:110px;padding:14px var(--s4);resize:none;line-height:1.45;font-size:16px}
.err{color:#FF8A80;font-size:13px;margin:var(--s2) 0 0;min-height:18px}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{min-height:38px;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;transition:background .2s,border-color .2s,transform .15s;position:relative;text-align:left}
.chip::after{content:"";position:absolute;inset:-4px 0}
.chip:active{transform:scale(.96)}
.chip.sel{background:rgba(255,94,91,.16);border-color:var(--coral)}
.chip.addchip{border-style:dashed;color:var(--muted);background:transparent}
.chip.custom{border-color:rgba(200,182,255,.45)}
.chipinput{width:160px;min-height:38px;padding:8px 13px;border-radius:999px;border:1px solid var(--peach);background:var(--surface);color:var(--text);font-size:16px;outline:none}

.range{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2);position:relative}
.range input{width:100%;height:28px;accent-color:var(--coral);margin:0}
.range .ends{display:flex;justify-content:space-between;gap:var(--s3);color:var(--muted);font-size:13px}
.range .ends span:last-child{text-align:right}
.range.untouched input{opacity:.35}
.range.untouched::after{content:"Drag to answer";position:absolute;right:0;top:-18px;font-size:11px;color:var(--peach);pointer-events:none}
.dual{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:var(--s2);align-items:center}
.dual > span{font-size:13px;color:var(--muted)}
.dual input{accent-color:var(--coral);width:100%;height:28px}
.dualval{font-family:var(--mono);font-size:13px;margin-left:auto}

/* orbs */
.orb{width:var(--s,180px);height:var(--s,180px);border-radius:50%;position:relative;background:var(--holo);filter:saturate(1.1);animation:orb 8s linear infinite;flex:none}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),transparent 40%),radial-gradient(circle at 70% 75%,rgba(18,10,15,.55),transparent 55%)}
.orb.human{background:var(--human)}
@keyframes orb{0%{border-radius:50% 46% 54% 48%;transform:rotate(0)}50%{border-radius:44% 56% 46% 54%}100%{border-radius:50% 46% 54% 48%;transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes blink{50%{opacity:.25}}
@keyframes nudge{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}

/* toasts */
#toasts{position:fixed;left:50%;top:calc(var(--s3) + var(--st));transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:var(--s2);width:min(408px,calc(100% - 32px));pointer-events:none}
.toast{padding:var(--s3) var(--s4);border-radius:16px;background:rgba(42,26,34,.97);border:1px solid var(--line);font-size:14px;line-height:1.4;animation:pop .35s both;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.err{border-color:rgba(255,94,91,.5)}
.toast.ok{border-color:rgba(158,240,225,.4)}
.toast.out{opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s}

/* sheets */
.sheet{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(10,5,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .25s both}
.sheet.out{opacity:0;transition:opacity .25s}
@keyframes fade{from{opacity:0}}
.sheet-card{position:relative;width:100%;max-height:90%;overflow-y:auto;padding:var(--s5) var(--s5) calc(var(--s5) + var(--sb));border-radius:28px 28px 0 0;background:var(--surface);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s3);animation:up .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{from{transform:translateY(100%)}}
.sheet-x{position:absolute;top:var(--s2);right:var(--s2);width:44px;height:44px;font-size:26px;color:var(--muted);display:grid;place-items:center}
.sheet-card h3{padding-right:40px}
.sheet .row-btn{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:0 var(--s4);border-radius:14px;background:var(--surface2);font-weight:600;text-align:left}
.sheet .row-btn.danger{color:var(--coral)}

/* ---------- welcome ---------- */
.welcome{justify-content:space-between}
.welcome .hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s5);margin-top:var(--s5)}
.pairorbs{position:relative;width:240px;height:200px;flex:none}
.pairorbs .orb{position:absolute;top:10px;left:0;--s:170px}
.pairorbs .orb.human{left:auto;right:0;top:20px;--s:150px;mix-blend-mode:screen;animation:float 5s ease-in-out infinite}
.welcome h1{font-size:46px}
.code{display:flex;gap:var(--s2);margin-top:var(--s5)}
.code input{width:100%;height:60px;text-align:center;font-family:var(--mono);font-size:26px;letter-spacing:.5em;padding-left:.5em;border-radius:16px;border:1px solid var(--line);background:var(--surface);outline:none}
.code input:focus{border-color:var(--peach)}
.devcode{margin-top:var(--s3);align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--lilac);padding:6px 10px;border-radius:999px;border:1px dashed rgba(200,182,255,.45);min-height:32px}

/* ---------- import ---------- */
.picks{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4);padding-bottom:var(--s4)}
.pick{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:left;transition:border-color .2s,background .2s;flex:none;min-height:60px}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:800;font-size:14px;color:#fff}
.pick .t{flex:1;min-width:0}
.pick .t b{display:block;font-size:15px;font-weight:600}
.pick .t small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.pick .box{width:24px;height:24px;border-radius:8px;border:1.5px solid rgba(255,226,236,.3);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s}
.pick .box svg{width:15px;height:15px;opacity:0;transition:opacity .2s}
.pick.on{border-color:rgba(255,94,91,.6);background:rgba(255,94,91,.08)}
.pick.on .box{background:var(--coral);border-color:var(--coral)}
.pick.on .box svg{opacity:1}
.importhead{display:flex;align-items:center;gap:var(--s4);margin:var(--s4) 0 var(--s3)}
.importhead .orb{--s:64px;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bignum{font-family:var(--mono);font-weight:600;font-size:26px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.bignum span{font-size:30px}
.impwarn{margin:0 0 var(--s3);font-size:13px;color:var(--peach)}
.impwarn.ok{color:var(--mint)}
.tasks{display:flex;flex-direction:column;gap:var(--s2)}
.task{padding:var(--s3) var(--s4);border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:border-color .3s;animation:pop .35s both}
.task-h{display:flex;align-items:center;gap:var(--s3)}
.task-h b{flex:1;font-size:15px;font-weight:600}
.task .st{font-size:12px;font-weight:600;color:var(--peach);text-align:right}
.task.done{border-color:rgba(158,240,225,.4)}
.task.done .st{color:var(--mint)}
.task.busy .st{animation:blink 1s infinite;color:var(--lilac)}
.task ol{margin:var(--s3) 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45;color:var(--muted)}
.task ol b{color:var(--text);font-weight:600}
.task p{margin:var(--s2) 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.task-a{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.task-a .files{flex-basis:100%;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.task-a .files span{padding:3px 8px;border-radius:8px;background:var(--surface2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task .more{font-size:13px;color:var(--peach);font-weight:600;min-height:36px}
.fprint{flex:none;margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border-radius:16px;background:var(--surface);border:1px solid rgba(200,182,255,.35);animation:pop .4s both}
.fprint .k{font-size:12px;color:var(--lilac);font-weight:500}
.fp-type{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin:2px 0 var(--s2)}
.fp-rows{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:13px;color:var(--muted)}
.fp-rows b{color:var(--text);font-weight:600}
.fp-pairs{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.fp-pairs .k{margin-bottom:2px}
.fp-pairs .bub{font-size:14px;padding:8px 12px;max-width:85%}
.fp-pairs .bub + .bub.them{margin-top:var(--s2)}
.fp-count{margin-top:var(--s3);font-size:12px;color:var(--muted)}

/* ---------- bubbles ---------- */
.bub{max-width:78%;padding:11px 15px;border-radius:20px;font-size:15px;line-height:1.35;overflow-wrap:anywhere;white-space:pre-wrap;animation:pop .35s cubic-bezier(.2,.8,.2,1.2) both}
.bub.them{background:var(--surface2);align-self:flex-start;border-bottom-left-radius:6px}
.bub.me{background:var(--coral);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.bub .who{display:block;margin-top:4px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;white-space:normal}
.bubs{display:flex;flex-direction:column;gap:6px}

/* ---------- setup (vault) ---------- */
.setup{padding-bottom:0}
.dots{display:flex;gap:6px;margin:var(--s2) 0 var(--s5);flex:none}
.dots i{height:4px;flex:1;border-radius:4px;background:var(--surface2);transition:background .3s}
.dots i.on{background:var(--text)}
.q{display:flex;flex-direction:column;gap:var(--s3);animation:pop .4s both}
.qtag{font-size:13px;font-weight:500;color:var(--lilac)}
.q > .sub{margin:0}
.nn{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--line)}
.q > h3 + .nn,.q > .sub + .nn,.nngroup + .nn,.nnhint + .nn{border-top:0}
.nn > b{font-size:13px;font-weight:600;color:var(--muted)}
.nngroup{margin-top:var(--s4);padding:var(--s1) var(--s3);align-self:flex-start;border-radius:999px;font-size:12px;font-weight:600;background:rgba(200,182,255,.14);color:var(--lilac)}
.nngroup + .nn{padding-top:var(--s2)}
.nnhint{margin:var(--s2) 0 0;font-size:14px;color:var(--muted)}
.why-ask{margin:var(--s3) 0 var(--s4);padding-top:var(--s3);border-top:1px dashed var(--line);font-size:12px;line-height:1.5;color:var(--muted)}
.why-ask b{display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--lilac)}
.saymore{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line);animation:pop .35s both}
.saymore + .saymore{border-top:0;padding-top:var(--s2)}
.sm-q{margin:0;font-size:15px;line-height:1.4}
.sm-q b{color:var(--peach);font-weight:600}
.opt{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-right:6px;vertical-align:1px}
.saymore textarea{min-height:96px}
.vintro .vpromise{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.vpromise div{display:flex;gap:var(--s3);align-items:flex-start}
.vpromise i{flex:none;width:20px;height:20px;margin-top:1px;color:var(--lilac)}
.vpromise svg{width:20px;height:20px}
.vpromise p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.vpromise b{color:var(--text);font-weight:600}
.overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;padding:calc(var(--s7) + var(--st)) var(--s5) calc(var(--s5) + var(--sb));background:var(--ink);animation:pop .4s both}
.sb-k{font-size:13px;font-weight:600;color:var(--lilac)}
.sb-meter{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.sb-track{flex:1;height:10px;border-radius:9px;background:var(--surface2);overflow:hidden}
.sb-track i{display:block;height:100%;width:0;background:var(--holo);border-radius:9px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.sb-meter span{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums}
.sb-line{margin-top:var(--s6);font-family:var(--display);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.01em}
.sb-tag{display:block;margin-bottom:var(--s2);font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted)}
.sb-btns{display:flex;gap:var(--s2)}
.sealed{align-items:center;justify-content:center;text-align:center;gap:var(--s3)}
.lock{width:80px;height:80px;border-radius:26px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;animation:pop .5s both}
.seal-btns{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);margin-top:var(--s6);width:100%}
.extras{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.xitem{border-radius:16px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:border-color .2s}
.xitem.open{border-color:rgba(255,94,91,.45)}
.xcard{width:100%;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);text-align:left;min-height:56px}
.xi{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surface2);color:var(--lilac);font-size:15px}
.xt{flex:1;min-width:0}
.xt b{display:block;font-size:15px;font-weight:600}
.xt small{font-size:12px;color:var(--muted)}
.xplus{font-size:20px;color:var(--muted);transition:transform .25s}
.xitem.open .xplus{transform:rotate(45deg);color:var(--peach)}
.xitem.auto .xt small::after{content:" · picked for you";color:var(--peach)}
.xbody{padding:0 var(--s4) var(--s3)}
.xbody .nn:first-child{border-top:1px solid var(--line);padding-top:var(--s3)}

/* ---------- photos ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);margin-top:var(--s5)}
.slot{aspect-ratio:3/4;border-radius:16px;border:1.5px dashed rgba(255,226,236,.22);display:grid;place-items:center;color:var(--muted);font-size:26px;position:relative;overflow:hidden;transition:border-color .2s;background:none;min-height:44px}
.slot:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.slot.filled{border:0;background:var(--surface)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:reveal .6s cubic-bezier(.2,.8,.2,1) both}
.slot .n{position:absolute;left:8px;top:8px;font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.55)}
.slot.busy::after{content:"";position:absolute;inset:0;background:rgba(18,10,15,.6) center/28px no-repeat;animation:blink 1s infinite}
@keyframes reveal{from{clip-path:inset(100% 0 0 0);transform:scale(1.15)}to{clip-path:inset(0 0 0 0);transform:none}}
.nobio{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.45}
.nobio s{color:var(--text)}

/* ---------- discover ---------- */
.discover{padding-bottom:var(--s4)}
.swipehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3);flex:none}
.deck{position:relative;flex:1;min-height:340px}
.card{position:absolute;inset:0;border-radius:28px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;box-shadow:0 20px 50px rgba(0,0,0,.45);background:var(--surface)}
.card.drag{transition:none;cursor:grabbing}
.card .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.card .phbars{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:4px;z-index:2}
.card .phbars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3)}
.card .phbars i.on{background:#fff}
.card .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,5,8,.92) 0%,rgba(10,5,8,.1) 40%,transparent 55%);pointer-events:none}
.card .info{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.card .name{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.card .name span{font-weight:400}
.card .meta{display:flex;gap:var(--s2);flex-wrap:wrap}
.card .nophoto{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:120px;font-weight:800;color:rgba(255,255,255,.15);background:linear-gradient(160deg,#B04A7A,#2B1530)}
.stamp{position:absolute;top:34px;z-index:3;font-family:var(--display);font-weight:800;font-size:34px;padding:4px 14px;border:4px solid;border-radius:14px;opacity:0;letter-spacing:-.02em;pointer-events:none}
.stamp.yes{left:22px;color:var(--mint);transform:rotate(-14deg)}
.stamp.no{right:22px;color:var(--coral);transform:rotate(14deg)}
.actions{display:flex;justify-content:center;gap:var(--s5);margin-top:var(--s4);flex:none}
.round{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);transition:transform .15s}
.round:active{transform:scale(.9)}
.round.like{background:var(--coral);border:0}
.round svg{width:26px;height:26px}
.round[disabled]{opacity:.35;pointer-events:none}
.deckend,.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s5) 0}
.deckend .orb{--s:96px;margin-bottom:var(--s5)}

/* match moment */
.matchsheet{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;padding:calc(var(--s6) + var(--st)) var(--s5) calc(var(--s5) + var(--sb));background:rgba(18,10,15,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:fade .4s both;overflow-y:auto}
.duo{display:flex;justify-content:center;margin:var(--s5) 0 var(--s5);position:relative;flex:none}
.face{width:130px;height:130px;border-radius:50%;overflow:hidden;position:relative;border:3px solid var(--ink);background:var(--surface2);flex:none}
.face img{width:100%;height:100%;object-fit:cover}
.face.ph{display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:48px;color:rgba(255,255,255,.4)}
.face + .face{margin-left:-26px}
.matchsheet .face.l{animation:inL .7s cubic-bezier(.2,.8,.2,1.2) both}
.matchsheet .face.r{animation:inR .7s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes inL{from{transform:translateX(-120px) rotate(-20deg);opacity:0}}
@keyframes inR{from{transform:translateX(120px) rotate(20deg);opacity:0}}
.matchsheet h1{text-align:center;font-size:52px}
.matchsheet .sub{text-align:center}
.treat{margin-top:auto;padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.price{text-align:center;font-size:13px;color:var(--muted);margin-bottom:var(--s1)}
.price b{color:var(--text);font-weight:600}

/* ---------- matches list ---------- */
.mlist{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.mrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;min-height:72px;position:relative;overflow:hidden;animation:pop .35s both}
.mrow .av{width:52px;height:52px}
.mrow .t{flex:1;min-width:0}
.mrow .t b{display:block;font-size:16px;font-weight:600}
.mrow .t small{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mrow .t small.hot{color:var(--peach)}
.mrow .t small.rep{color:var(--lilac)}
.mrow time{font-size:12px;color:var(--muted);align-self:flex-start;margin-top:4px}
.mrow .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--holo);transition:width .8s}
.mrow.ready{border-color:rgba(200,182,255,.45)}
.mrow .dot{width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none}
.av{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;flex:none;background:var(--surface2)}
.av img{width:100%;height:100%;object-fit:cover}
.av.ph{display:grid;place-items:center;font-family:var(--display);font-weight:800;color:rgba(255,255,255,.6)}
.tokens{font-size:12px;padding:6px 10px;border-radius:999px;background:var(--surface2);color:var(--peach);font-weight:600}

/* ---------- sim / wait / unlock ---------- */
.center{align-items:center;text-align:center}
.sim{justify-content:center;gap:var(--s2)}
.orbit{width:220px;height:220px;position:relative;margin-bottom:var(--s5);flex:none}
.orbit .orb{position:absolute;--s:84px;left:68px;top:68px}
.orbit .o1{animation:orb 8s linear infinite,spin1 2.4s linear infinite}
.orbit .o2{animation:orb 8s linear infinite,spin2 2.4s linear infinite}
.orbit.slow .o1,.orbit.slow .o2{animation-duration:8s,6s}
@keyframes spin1{from{transform:rotate(0) translateX(62px) rotate(0)}to{transform:rotate(360deg) translateX(62px) rotate(-360deg)}}
@keyframes spin2{from{transform:rotate(180deg) translateX(62px)}to{transform:rotate(540deg) translateX(62px)}}
.sim .eyebrow{font-size:15px;color:var(--text)}
.simnum{font-family:var(--mono);font-weight:600;font-size:64px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.simnum small{font-size:22px;color:var(--muted);font-weight:400;letter-spacing:0}
.simbar{width:100%;max-width:280px;height:6px;border-radius:6px;background:var(--surface2);overflow:hidden;margin-top:var(--s4)}
.simbar i{display:block;height:100%;width:0;background:var(--holo);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.phases{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap;justify-content:center}
.phases span{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.phases span.on{color:var(--text);border-color:rgba(200,182,255,.5)}
.phases span.done{color:var(--mint)}
.ticker{min-height:110px;width:100%;margin-top:var(--s4)}
.ticker div{font-size:13px;color:var(--muted);line-height:1.4;padding:4px 0;animation:pop .3s both}
.ticker div:last-child{color:var(--text)}
.duo2{display:flex;justify-content:center}
.duo2 .face{width:120px;height:120px}
.duo2 .face + .face{margin-left:-22px}
.face.wait{filter:grayscale(1) brightness(.5);opacity:.6;transition:filter .6s,opacity .6s}
.ustatus{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s5);font-size:13px;color:var(--muted)}
.ustatus i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.ustatus.in{color:var(--mint)}
.ustatus.in i{background:var(--mint);animation:none}
.guess{margin-top:var(--s5);padding:var(--s3) var(--s4);border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:center}
.guess p{margin:0 0 var(--s2);font-size:13px;color:var(--muted)}
.guess input{width:100%;accent-color:#C8B6FF;height:28px}
.guess.untouched input{opacity:.4}
.gval{font-size:13px;color:var(--muted)}
.guess.untouched .gval{color:var(--peach)}
.gnum{font-family:var(--mono);font-size:18px;color:var(--text);font-weight:600}

/* ---------- reveal ---------- */
.reveal{padding:calc(var(--s3) + var(--st)) var(--s3) calc(var(--s3) + var(--sb));overflow:hidden}
.rtop{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s1) var(--s3);flex:none}
.bars{display:flex;gap:4px;flex:1}
.bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.bars i::after{content:"";position:absolute;inset:0;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.bars i.done::after{transform:scaleX(1)}
.xbtn{width:44px;height:44px;display:grid;place-items:center;font-size:26px;color:var(--muted);flex:none;margin:-10px -6px -10px 0;text-decoration:none}
.stack{position:relative;flex:1;perspective:1200px;min-height:0}
.rc{position:absolute;inset:0;border-radius:28px;padding:var(--s6) var(--s5);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;opacity:0;transform:rotateY(-70deg) scale(.9);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .35s;pointer-events:none}
.rc::-webkit-scrollbar{display:none}
.rc.on{opacity:1;transform:none;pointer-events:auto}
.rc.gone{opacity:0;transform:translateX(-30%) rotateY(30deg) scale(.9)}
.rc .k{font-size:13px;font-weight:500;opacity:.75}
.rc .huge{font-family:var(--display);font-weight:800;font-size:132px;line-height:.85;letter-spacing:-.06em;margin-top:auto}
.rc h2{font-size:34px;margin-top:10px;hyphens:manual}
.rc p{font-size:15px;line-height:1.45;margin:12px 0 0;opacity:.85;text-wrap:pretty}
.rc p.lite{opacity:.6;font-size:13px}
.rc.c1{background:linear-gradient(160deg,#FF5E5B,#8A1F2E)}
.rc.c2{background:var(--surface);border:1px solid var(--line)}
.rc.c3{background:var(--holo);color:#1A0F18}
.rc.c4{background:linear-gradient(170deg,#2A1A22,#120A0F);border:1px solid var(--line)}
.rc.c5{background:var(--surface)}
.rc.c6{background:linear-gradient(160deg,#1D1218,#2A1A22);justify-content:center}
.rc.c7{background:var(--surface);border:1px solid var(--line)}
.rc.c7 h2,.rc.c5 h2,.rc.c8 h2{font-size:26px}
.rc.c8{background:var(--surface);border:1px solid var(--line)}
.bars2{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.br{display:grid;grid-template-columns:136px 1fr 44px;align-items:center;gap:var(--s3);font-size:14px}
.br .t{height:12px;border-radius:6px;background:var(--surface2);overflow:hidden}
.br .t i{display:block;height:100%;width:0;background:var(--holo);border-radius:6px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.br span:last-child{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.rc.on .br .t i{width:var(--w)}
.br.mystery .t i{background:repeating-linear-gradient(90deg,rgba(255,226,236,.18) 0 6px,transparent 6px 12px)}
.exits .br .t i{background:var(--coral)}
.quote{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.quote .bub{animation:none;max-width:88%}
.replica-tag{font-size:13px;font-weight:500;color:var(--muted)}
.why{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.why div{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);align-items:baseline}
.why b{font-family:var(--mono);font-weight:600;font-size:22px;font-variant-numeric:tabular-nums;color:var(--lilac)}
.why span{font-size:15px;line-height:1.4;opacity:.9}
.jokes{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.jokes span{padding:6px 10px;border-radius:999px;background:var(--surface2);font-size:13px}
.shared{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3);padding:0;list-style:none}
.shared li{font-size:14px;line-height:1.4;padding-left:18px;position:relative;opacity:.9}
.shared li::before{content:"✦";position:absolute;left:0;color:#C8B6FF;font-size:11px;top:2px}
.dotgrid{display:grid;grid-template-columns:repeat(40,1fr);gap:2px;margin-top:var(--s4)}
.dotgrid i{aspect-ratio:1;border-radius:50%;background:rgba(255,226,236,.14)}
.dotgrid i.y{background:#C8B6FF}
.dotgrid i.m{background:#FFD3A8;box-shadow:0 0 6px rgba(255,211,168,.8)}
.dotgrid i.b{background:var(--coral)}
.dotgrid i.d{background:rgba(255,177,153,.55)}
.dotgrid.play i{animation:dotin .3s both}
@keyframes dotin{from{transform:scale(0);opacity:0}}
.dg-key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s3);font-size:13px;color:var(--muted)}
.dg-key span{display:flex;align-items:center;gap:6px}
.dg-key i{width:8px;height:8px;border-radius:50%;background:rgba(255,226,236,.14)}
.dg-key i.y{background:#C8B6FF}.dg-key i.m{background:#FFD3A8}.dg-key i.b{background:var(--coral)}.dg-key i.d{background:rgba(255,177,153,.55)}
.share{margin-top:var(--s5);border-radius:24px;padding:22px;background:var(--holo);color:#1A0F18;position:relative;overflow:hidden}
.share .big{font-family:var(--display);font-weight:800;font-size:40px;line-height:.95;letter-spacing:-.04em;margin-top:10px}
.share small{font-size:12px;font-weight:600;display:block}
.minigrid{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin-top:var(--s3)}
.minigrid i{aspect-ratio:1;border-radius:50%;background:rgba(26,15,24,.18)}
.minigrid i.y{background:rgba(26,15,24,.75)}
.minigrid i.m{background:#8A5A20}
.minigrid i.b{background:#B04A4A}
.minigrid i.d{background:#C77F5E}
.rcbtns{display:flex;gap:10px;margin-top:var(--s4);flex:none}
.rcbtns .cta{min-height:52px;font-size:15px}
.tapnote{text-align:center;font-size:12px;color:var(--muted);padding-top:var(--s3);flex:none}
.reelteaser{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2)}
.reelthumbs{display:flex;gap:6px;margin-top:var(--s4)}
.reelthumbs i{flex:1;height:64px;border-radius:12px}
.reelthumbs i.hl{background:linear-gradient(160deg,#FFB199,#FF5E5B 60%,#8A1F2E)}
.reelthumbs i.ll{background:linear-gradient(160deg,#4A5A70,#1B2230)}
.reelthumbs i.ch{background:var(--holo);opacity:.85}

/* report cards */
.rc.report{background:linear-gradient(170deg,#211521,#120A0F);border:1px solid rgba(200,182,255,.25)}
.rchead{display:flex;align-items:flex-start;gap:var(--s4)}
.rchead > div:first-child{flex:1;min-width:0}
.grade{flex:none;width:76px;height:84px;border-radius:18px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:60px;line-height:1;letter-spacing:-.04em;background:var(--holo);color:#1A0F18;transform:rotate(4deg);box-shadow:0 10px 30px -10px rgba(200,182,255,.6)}
.grade.g-C{background:linear-gradient(160deg,#FFE29A,#C98B3F)}
.grade.g-D,.grade.g-F{background:linear-gradient(160deg,#FF8A80,#8A1F2E);color:#fff}
.rc .brief{font-size:14px;line-height:1.45;opacity:.75;margin-top:var(--s3)}
.verdict{margin-top:var(--s4);font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.rmeta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.rmeta span{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.rmeta b{color:var(--text);font-weight:600}
.plan{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:16px;background:rgba(255,255,255,.04);border:1px dashed rgba(200,182,255,.35)}
.plan .k{font-size:12px;color:var(--lilac);opacity:1;font-weight:600}
.plan p{margin:var(--s1) 0 0;font-size:14px;opacity:.95;white-space:pre-wrap}

/* ---------- highlight reel ---------- */
.reel{padding:0;background:#000;overflow:hidden}
.reel .rtop{position:absolute;left:0;right:0;top:0;z-index:5;padding:calc(var(--s3) + var(--st)) var(--s3) 0}
.reelcards{position:absolute;inset:0}
.hc{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(56px + var(--st)) var(--s5) calc(var(--s5) + var(--sb));overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;transform:scale(.96)}
.hc.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.hc.left{transform:translateX(-12%) scale(.96)}
.hc .body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;position:relative;z-index:2}
.hc .body::-webkit-scrollbar{display:none}
.hc .kind{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.02em}
.hc .stage{font-size:13px;opacity:.75;margin-top:var(--s3)}
.hc h2{font-size:32px;margin-top:var(--s1)}
.hc .bubs{margin-top:var(--s5);gap:var(--s2)}
.hc .bub{max-width:84%}
.hc .caption{margin:var(--s5) 0 0;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em;font-style:italic}
.hc .stat{margin-top:var(--s3);font-family:var(--mono);font-size:12px;opacity:.75;line-height:1.5}
.hc .votes{flex:none;position:relative;z-index:2;padding-top:var(--s4)}
.vbtns{display:flex;gap:var(--s3)}
.vbtn{flex:1;min-height:60px;border-radius:18px;font-size:26px;display:flex;align-items:center;justify-content:center;gap:var(--s2);background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);transition:transform .15s,background .25s,border-color .25s,opacity .25s}
.vbtn small{font-size:14px;font-weight:600}
.vbtn:active{transform:scale(.95)}
.vbtn.sel{background:rgba(255,255,255,.2);border-color:#fff}
.vbtn.dim{opacity:.35}
.vres{min-height:22px;margin:var(--s3) 0 0;text-align:center;font-size:14px;font-weight:600}
.vres.pop{animation:pop .4s both}
/* highlight: warm glow */
.hc.hl{background:radial-gradient(120% 70% at 50% 0%,rgba(255,177,153,.55),transparent 60%),radial-gradient(90% 60% at 80% 100%,rgba(255,94,91,.45),transparent 70%),linear-gradient(170deg,#5A1E2C,#2A0F18 70%)}
.hc.hl::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 20%,rgba(255,211,168,.35),transparent 40%);animation:glow 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes glow{to{transform:translate(10%,8%) scale(1.1)}}
.hc.hl .kind{background:rgba(255,211,168,.22);color:#FFD3A8}
.hc.hl .bub.them{background:rgba(255,255,255,.14)}
.hc.hl .bub.me{background:#fff;color:#2A0F18}
.hc.hl .caption{color:#FFE7D6}
/* lowlight: cool and cracked */
.hc.ll{background:linear-gradient(170deg,#25303F,#10151E 70%);filter:saturate(.85)}
.hc.ll::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23C9D6E8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M260 0 L238 70 L270 120 L228 205 L250 260 L205 340 L222 395'/%3E%3Cpath d='M238 70 L300 95 L345 80'/%3E%3Cpath d='M228 205 L170 230 L120 222 L80 260'/%3E%3Cpath d='M250 260 L320 300 L400 292'/%3E%3Cpath d='M205 340 L150 380 L160 440'/%3E%3Cpath d='M0 610 L60 590 L95 620 L150 600 L190 640'/%3E%3Cpath d='M95 620 L110 690 L80 760 L96 800'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.hc.ll::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% 0%,rgba(158,200,240,.18),transparent 70%)}
.hc.ll .kind{background:rgba(158,200,240,.16);color:#BFD6F0}
.hc.ll .bub.them{background:rgba(255,255,255,.1)}
.hc.ll .bub.me{background:#4A5A70;color:#E9F1FA}
.hc.ll h2{color:#DDE7F3}
.hc.ll .caption{color:#BFD6F0}
/* challenge: holo */
.hc.ch{background:radial-gradient(100% 60% at 50% 0%,rgba(200,182,255,.35),transparent 65%),linear-gradient(170deg,#241A33,#120A0F 75%)}
.hc.ch .kind{background:rgba(200,182,255,.2);color:var(--lilac)}
.reelnav{position:absolute;top:calc(56px + var(--st));bottom:180px;width:28%;z-index:1}
.reelnav.prev{left:0}.reelnav.next{right:0}
.reelend{align-items:center;justify-content:center;text-align:center;background:linear-gradient(170deg,#1D1218,#120A0F)}
.tally{display:flex;gap:var(--s5);justify-content:center;margin-top:var(--s5)}
.tally div{display:flex;flex-direction:column;align-items:center;gap:4px}
.tally b{font-family:var(--mono);font-size:36px;font-weight:600}
.tally span{font-size:13px;color:var(--muted)}

/* ---------- chat ---------- */
.chat{padding:0;overflow:hidden}
.chead{display:flex;align-items:center;gap:var(--s3);padding:calc(var(--s2) + var(--st)) var(--s3) var(--s2) var(--s2);border-bottom:1px solid var(--line);flex:none}
.back{width:44px;height:44px;display:grid;place-items:center;flex:none;text-decoration:none}
.back svg{width:24px;height:24px}
.chead .who{flex:1;min-width:0}
.chead .who b{display:block;font-size:16px}
.chead .who small{display:block;font-size:12px;color:var(--mint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff{font-size:12px;font-weight:600;padding:var(--s2) var(--s3);border-radius:999px;background:var(--surface2);color:var(--peach);min-height:36px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;position:relative}
.ff::after{content:"";position:absolute;inset:-4px -2px}
.more{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);flex:none}
.cbody{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);overscroll-behavior:contain}
.pin{align-self:center;font-size:12px;color:var(--muted);text-align:center;padding:var(--s1) var(--s4) var(--s2);max-width:300px}
.day{align-self:center;font-size:11px;color:var(--muted);font-weight:600;padding:var(--s2) 0}
.drop{align-self:stretch;border-radius:16px;padding:var(--s3) var(--s4);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:1px solid transparent;animation:pop .5s cubic-bezier(.2,.8,.2,1.2) both;text-align:left;width:100%;flex:none}
.drop .k{font-size:12px;font-weight:500;color:var(--lilac);display:flex;justify-content:space-between;gap:var(--s2)}
.drop h4{margin:var(--s1) 0 0;font-family:var(--display);font-size:17px;letter-spacing:-.01em;font-weight:800}
.drop .bubs{margin-top:var(--s3)}
.drop .bub{font-size:14px;padding:8px 12px;animation:none}
.drop .locked{margin-top:var(--s2);display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted)}
.drop .locked b{font-family:var(--mono);color:var(--text);font-weight:600}
.drop.ready{cursor:pointer}
.drop.ready .locked span:last-child{font-size:13px;font-weight:600;color:var(--peach)}
.drop.sealed-drop{opacity:.8}
.drop.sealed-drop h4{filter:blur(5px);user-select:none}
.cfoot{padding:var(--s2) var(--s3) calc(var(--s3) + var(--sb));border-top:1px solid var(--line);flex:none}
.composer{display:flex;gap:var(--s2);align-items:flex-end}
.composer textarea{flex:1;min-height:48px;max-height:120px;border-radius:24px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:13px 18px;font-size:16px;line-height:1.35;resize:none;min-width:0;outline:none}
.composer textarea:focus{border-color:rgba(255,226,236,.25)}
.send{width:48px;height:48px;border-radius:50%;background:var(--coral);display:grid;place-items:center;flex:none;transition:opacity .2s}
.send[disabled]{opacity:.35}
.send svg{width:20px;height:20px}
.bub.pending{opacity:.6}
.bub.failed{background:transparent;border:1px solid var(--coral);color:var(--coral)}

/* ---------- you / settings ---------- */
.profile{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4)}
.profile .av{width:72px;height:72px}
.profile b{display:block;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em}
.profile small{color:var(--muted);font-size:14px}
.menu{display:flex;flex-direction:column;margin-top:var(--s5);border-radius:18px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.menu a,.menu button{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:0 var(--s4);text-decoration:none;text-align:left;border-top:1px solid var(--line);font-size:15px}
.menu > :first-child{border-top:0}
.menu .mi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface2);color:var(--lilac);flex:none;font-size:15px}
.menu span.t{flex:1}
.menu small{color:var(--muted);font-size:13px}
.menu .chev{color:var(--muted)}
.menu .danger{color:var(--coral)}
.back-row{display:flex;align-items:center;gap:var(--s2);margin:calc(-1 * var(--s2)) 0 var(--s2) calc(-1 * var(--s3))}

@media (max-height:700px){
  h1{font-size:38px}
  .welcome h1{font-size:40px}
  .pairorbs{transform:scale(.8);margin:-20px 0}
  .rc{padding:var(--s5) var(--s4)}
  .rc .huge{font-size:104px}
  .rc h2{font-size:28px}
  .orbit{transform:scale(.8);margin:-22px 0 var(--s2)}
  .matchsheet h1{font-size:44px}
  .face{width:110px;height:110px}
  .hc h2{font-size:26px}
}
@media (max-width:360px){ .br{grid-template-columns:110px 1fr 40px;font-size:13px} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;left:16px;bottom:16px;width:auto;height:auto;clip:auto;z-index:9;padding:8px 12px;border-radius:12px;background:var(--surface2)}
.deck > .deckend{position:absolute;inset:0}
.dotgrid,.rc .share,.rc .quote,.rc .why,.rc .bars2,.rc .plan,.rc .jokes,.rc .shared,.rc .dg-key{flex:none}
.rcbtns .cta{flex:1;width:auto}
.drop .k span:last-child{color:var(--muted)}
.drop .bub{font-size:14px;max-width:85%}
.drop .bub.me{background:rgba(255,94,91,.2);color:var(--text)}
.drop .bub.them{background:var(--surface2)}
.more-lines{margin-top:var(--s2);min-height:36px;font-size:13px;font-weight:600;color:var(--peach)}
.simnum{font-size:clamp(44px,15vw,64px);white-space:nowrap}
.simnum small{font-family:var(--body);font-size:17px;font-weight:500}
.phases{gap:6px;flex-wrap:nowrap}
.phases span{font-size:11px;padding:5px 8px;white-space:nowrap}

/* ---------- replica refresh, notes, deletion ---------- */
.banner{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:18px;background:rgba(255,177,153,.08);border:1px solid rgba(255,177,153,.45);text-decoration:none;flex:none;margin-bottom:var(--s3);animation:pop .35s both}
.banner .bi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface2);color:var(--peach);flex:none;font-size:16px}
.banner .t{flex:1;min-width:0}
.banner b{display:block;font-size:15px;font-weight:600}
.banner small{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.banner .chev{color:var(--peach)}
.note{padding:var(--s3) var(--s4);border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--muted);margin-top:var(--s3);text-align:left}
.note b{color:var(--text);font-weight:600}
.note a{color:var(--peach);font-weight:600}
.note.warn{border-color:rgba(255,177,153,.45)}
.mrow .t small.warn,.menu small.warn{color:var(--peach)}
.slot .chk{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:var(--lilac);z-index:1;animation:blink 1.4s infinite}
.slot.busy .chk{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);animation:none}
.slot.pending img{opacity:.55}
.gone{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45}

/* ---------- admin ---------- */
.muted{color:var(--muted)}
.seg{display:flex;gap:4px;padding:4px;margin-top:var(--s4);border-radius:14px;background:var(--surface);border:1px solid var(--line);flex:none}
.seg a{flex:1;min-height:40px;display:grid;place-items:center;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.seg a.on{background:var(--surface2);color:var(--text)}
.alist{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3);padding-bottom:var(--s4)}
.acard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4);border-radius:18px;background:var(--surface);border:1px solid var(--line);font-size:14px;min-width:0}
.ahead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:12px}
.atags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.atag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--surface2);color:var(--text)}
.atag.hot{background:rgba(255,94,91,.16);color:var(--peach)}
.atag.bad{background:rgba(255,94,91,.22);color:#FF8A80}
.aperson{display:flex;align-items:center;gap:var(--s3)}
.aperson .av{width:44px;height:44px}
.aperson .t{flex:1;min-width:0}
.aperson b{display:block;font-size:15px;font-weight:600}
.aperson small{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin-top:2px}
.adetails{margin:0;color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.aby{font-size:13px;overflow-wrap:anywhere}
.aby .k,.asec .k{font-size:12px;color:var(--lilac);font-weight:500}
.amsgs summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--peach);min-height:36px;display:flex;align-items:center}
.amsgs .bubs{margin-top:var(--s2)}
.amsgs .bub{font-size:13px;padding:8px 12px}
.anote{height:44px;font-size:15px}
.aacts{display:flex;gap:var(--s2);flex-wrap:wrap}
.aacts .pill{flex:1}
.ares{margin:0;font-size:13px;color:var(--muted)}
.urow .pill{flex:none}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.tile{padding:var(--s3);border-radius:16px;background:var(--surface);border:1px solid var(--line);min-width:0}
.tile b{display:block;font-size:22px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tile small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.tile.warn{border-color:rgba(255,177,153,.45)}
.tile.warn b{color:var(--peach)}
.asec{margin-top:var(--s5);display:flex;flex-direction:column;gap:4px}
.asec > small{font-size:12px;line-height:1.4}
.aerr{font-family:var(--mono);font-size:12px;color:#FF8A80;white-space:pre-wrap;overflow-wrap:anywhere}