*{box-sizing:border-box;margin:0}body{font-family:-apple-system,Inter,system-ui,sans-serif;background:#04080c;color:#e8f4f2;min-height:100vh}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 40% at 15% 0%,#0d9488aa,transparent),radial-gradient(60% 45% at 100% 30%,#1d4ed877,transparent),radial-gradient(70% 50% at 30% 110%,#05966955,transparent),#04080c}
main{max-width:480px;margin:auto;padding:28px 20px 120px}.screen{animation:in .45s cubic-bezier(.2,.8,.2,1)}@keyframes in{from{opacity:0;transform:translateY(16px)}}
.step{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5eead4}h1{font-size:30px;line-height:1.15;margin:8px 0 6px;font-weight:750}p.sub{color:#9fb8b5;margin-bottom:22px}
h2{font-size:15px;color:#b9d3cf;margin:22px 0 10px;font-weight:600}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px;border-radius:18px;background:#ffffff0d;border:1px solid #ffffff1a;backdrop-filter:blur(14px);color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:.2s}
.logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.svc.on{background:linear-gradient(135deg,#14b8a633,#3b82f633);border-color:#5eead4;box-shadow:0 0 0 1px #5eead4,0 8px 30px #14b8a633}.svc.on .ck{opacity:1}.ck{margin-left:auto;opacity:0;color:#5eead4}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff0d;color:#d6ebe8;font:inherit;font-size:15px;cursor:pointer;transition:.2s}
.chip.on{background:linear-gradient(135deg,#14b8a6,#2563eb);border-color:transparent;color:#fff;box-shadow:0 6px 20px #14b8a644}
.moods{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mood{min-height:62px;border-radius:18px;font-size:15px}.mood:last-child{grid-column:span 2}
.cta{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;width:calc(100% - 40px);max-width:440px;min-height:58px;border:0;border-radius:20px;font:inherit;font-size:17px;font-weight:700;color:#03211d;background:linear-gradient(90deg,#5eead4,#60a5fa);box-shadow:0 12px 40px #14b8a655;cursor:pointer}.cta:disabled{opacity:.4}
.top{display:flex;justify-content:space-between;align-items:center}.back{background:#ffffff12;border:1px solid #ffffff1a;color:#cfe;width:44px;height:44px;border-radius:14px;font-size:20px}
.card{display:flex;gap:14px;padding:12px;border-radius:22px;background:#ffffff0b;border:1px solid #ffffff17;backdrop-filter:blur(16px);margin-bottom:12px;animation:in .5s both}
.poster{width:84px;height:120px;border-radius:14px;flex:none;display:flex;align-items:flex-end;padding:8px;font-size:11px;font-weight:700;color:#fff9;position:relative;overflow:hidden}
.meta{flex:1;display:flex;flex-direction:column;gap:6px}.meta h3{font-size:17px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#9fb8b5;font-size:13px}
.badge{padding:3px 9px;border-radius:8px;font-size:12px;font-weight:700;color:#fff}.star{color:#fcd34d;font-weight:700}.new{background:#5eead4;color:#032;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:800}
.empty{text-align:center;color:#9fb8b5;padding:40px}.note{font-size:11px;color:#6b8784;text-align:center;margin-top:14px}

.tval{float:right;color:#5eead4;font-weight:700}
.slider{-webkit-appearance:none;width:100%;height:8px;border-radius:9px;background:linear-gradient(90deg,#14b8a6,#3b82f6 var(--p),#ffffff1a var(--p));margin:10px 0 8px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#e8fffb;box-shadow:0 0 0 6px #14b8a644,0 4px 14px #0008}
.stack{position:relative;height:470px;margin-top:6px}.scard{position:absolute;inset:0;border-radius:28px;border:1px solid #ffffff22;box-shadow:0 20px 50px #000a;display:flex;align-items:flex-end;touch-action:none;user-select:none;overflow:hidden}
.scard{will-change:transform,opacity;transform-origin:50% 100%}.scard.flying{pointer-events:none}.scard.under{pointer-events:none}.scard.flying{pointer-events:none;z-index:5}.scard.rising{z-index:4}.sinfo{padding:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:linear-gradient(transparent,#000c);width:100%}.sinfo h3{font-size:26px}
.stamp{position:absolute;top:26px;padding:6px 14px;border:3px solid;border-radius:12px;font-weight:900;font-size:24px;letter-spacing:.1em}.like{left:22px;color:#5eead4;transform:rotate(-12deg);opacity:var(--l,0)}.nope{right:22px;color:#f87171;transform:rotate(12deg);opacity:var(--n,0)}
.vbtns{display:flex;justify-content:center;gap:36px;margin-top:24px}.vb{width:72px;height:72px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff12;backdrop-filter:blur(12px);font-size:28px;color:#fff}.vb.yes{background:linear-gradient(135deg,#14b8a6,#2563eb);box-shadow:0 10px 30px #14b8a655}.vb.no{color:#f87171}
.pl{display:inline-block;font-size:14px;padding:4px 10px;border-radius:10px;vertical-align:middle}.p1{background:#14b8a6;color:#022}.p2{background:#3b82f6}
.match{text-align:left}.burst{font-size:72px;text-align:center;margin-top:30px;animation:pop .7s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{from{transform:scale(0)}}
.glow{border-color:#5eead4;box-shadow:0 0 30px #14b8a644}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;animation:fall 2.6s linear infinite}@keyframes fall{to{transform:translateY(900px) rotate(540deg)}}
.logo{padding:6px}.badge{display:inline-flex;align-items:center;gap:5px}.bg-ico{display:inline-block;width:16px;height:16px}

.vb.info{width:52px;height:52px;align-self:center;font:italic 700 22px Georgia,serif;color:#5eead4}
.fback{position:fixed;inset:0;background:#000a;backdrop-filter:blur(6px);z-index:20;animation:fade .3s}@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:480px;margin-left:-240px;height:88vh;overflow-y:auto;z-index:21;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#0a1f26f2,#050b12f7);border:1px solid #5eead433;border-bottom:0;box-shadow:0 -20px 60px #14b8a633;animation:up .4s cubic-bezier(.2,.9,.2,1);touch-action:pan-y}
@media(max-width:480px){.sheet{left:0;margin-left:0}}@keyframes up{from{transform:translateY(100%)}}
.grab{position:sticky;top:0;height:22px;display:grid;place-items:center;z-index:2}.grab i{width:44px;height:5px;border-radius:9px;background:#ffffff55}
.fx{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff22;background:#0008;color:#fff;font-size:16px}
.fhero{height:200px;margin-top:-22px;display:flex;align-items:flex-end;padding:20px;border-radius:28px 28px 0 0}.fhero h3{font-size:28px;line-height:1.1;text-shadow:0 2px 12px #000}
.fbody{padding:4px 20px 40px}.tagline{color:#5eead4;font-style:italic;margin-bottom:12px}.frow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:#9fb8b5;font-size:14px;margin-bottom:12px}
.chips.small .chip{min-height:30px;font-size:13px;padding:0 12px;display:inline-flex;align-items:center}.ov{color:#cfe3e0;line-height:1.55;font-size:15px}
.yt{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;border:1px solid #ffffff1a}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cast{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}.cm b{font-size:13px}.cm small{font-size:11px;color:#86a3a0}
.ph{width:72px;height:72px;border-radius:50%;background:#14b8a633 center/cover;border:2px solid #5eead466;display:grid;place-items:center;font-weight:800;font-size:22px}
.fload{display:flex;gap:8px;justify-content:center;padding:60px}.fload span{width:10px;height:10px;border-radius:50%;background:#5eead4;animation:bl 1s infinite alternate}.fload span:nth-child(2){animation-delay:.2s}.fload span:nth-child(3){animation-delay:.4s}@keyframes bl{to{opacity:.2;transform:translateY(-8px)}}

/* Stable bottom bar: lives outside animated screens so transforms never affect it */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:15;box-sizing:border-box;height:calc(98px + var(--sab));padding:20px 20px calc(20px + var(--sab));background:linear-gradient(transparent,#04080cee 45%);display:flex;justify-content:center;pointer-events:none}
.bar[hidden]{display:none}
.bar .cta{position:static;transform:none;left:auto;bottom:auto;width:100%;max-width:440px;height:58px;min-height:58px;flex:none;pointer-events:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
main{padding-bottom:calc(130px + var(--sab))}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc{min-width:0}.svc>:not(.logo):not(.ck){min-width:0}

/* detail view v2 */
#ov[hidden]{display:none}.noscroll{overflow:hidden}.card.tap{cursor:pointer;transition:transform .15s}.card.tap:active{transform:scale(.98)}
.fhero{position:relative;height:220px;margin-top:-22px;overflow:hidden;border-radius:28px 28px 0 0;padding:0;display:block;will-change:transform}
.fbd,.fpo,.fshade{position:absolute;inset:0}.fbd{background:center/cover;opacity:0;transition:opacity .6s}.fpo{transition:opacity .6s}.fhero.hasbd .fbd{opacity:1}.fhero.hasbd .fpo{opacity:0}
.fshade{background:linear-gradient(transparent 35%,#06121a)}.fhero h3{position:absolute;left:20px;right:60px;bottom:16px;margin:0}
.fbody.fin{animation:fade .35s}.sheet{transition:background .3s,border-color .3s}.sheet.flipping{animation:none;background:transparent;border-color:transparent;box-shadow:none}
#ov.vt .sheet,#ov.vt .fback{animation:none}
::view-transition-group(poster){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.svc{position:relative;gap:10px;font-size:15px;padding:12px 26px 12px 12px}.svc .logo{width:36px;height:36px}.svc .ck{position:absolute;top:8px;right:10px;margin:0;font-size:13px}

/* swipe glows: fixed, above .bg (z:-1), below content */
#glows{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}#glows[hidden]{display:none}
.sglow{position:absolute;top:50%;width:820px;height:1100px;margin-top:-550px;border-radius:50%;opacity:0;transform:scale(.6);will-change:opacity,transform;filter:blur(24px)}
.sglow.like{right:-410px;transform-origin:100% 50%;background:radial-gradient(closest-side,#34d399e0 0%,#14b8a6a8 40%,#0e749060 70%,transparent 100%)}
.sglow.nope{left:-410px;transform-origin:0 50%;background:radial-gradient(closest-side,#fb7185d0 0%,#e11d4898 40%,#9f123960 70%,transparent 100%)}
main{position:relative;z-index:1}


.brand{display:flex;align-items:center;gap:12px;margin:-4px 0 16px;font-weight:800;font-size:22px;letter-spacing:-.02em;color:#e8f4f2}
.logo-img{width:44px;height:44px;border-radius:11px;object-fit:cover;box-shadow:0 0 0 1px #5eead433,0 8px 24px #14b8a644}

/* watched */
.card{position:relative}.wbtn{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:14px;border:1px solid #ffffff1f;background:#0b1a22cc;backdrop-filter:blur(10px);color:#9fe9dc;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s}.wbtn:active{transform:scale(.9)}.wbtn:hover{background:#14b8a633}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:10px}.lbtns{display:flex;gap:8px}
.pillbtn{min-width:44px;height:44px;padding:0 12px;border-radius:14px;border:1px solid #ffffff22;background:#ffffff0f;color:#cfeee9;display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;cursor:pointer}
.vb.seen{width:52px;height:52px;align-self:center;color:#9fe9dc;display:grid;place-items:center}
.fwatch{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;margin:14px 0 4px;padding:0 16px;border-radius:16px;border:1px solid #5eead444;background:#14b8a61a;color:#bff5ec;font:inherit;font-weight:700;cursor:pointer;transition:background .2s}.fwatch.on{background:linear-gradient(135deg,#14b8a6,#2563eb);color:#fff;border-color:transparent}
.sheet.small{height:auto;max-height:80vh}.sheet.small .fbody{padding-top:8px}
.wrow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff14;margin-bottom:10px}.wico{width:40px;height:40px;border-radius:12px;background:#14b8a622;color:#5eead4;display:grid;place-items:center;flex:none}.wmeta{flex:1;min-width:0;display:flex;flex-direction:column}.wmeta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wmeta small{color:#86a3a0}.wn{font-size:16px;color:#5eead4;vertical-align:middle}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#14b8a622,#2563eb22);border:1px solid #5eead455;font-size:20px;font-weight:800;letter-spacing:.02em}
.joinrow{display:flex;gap:10px}.joinrow input{flex:1;min-height:48px;border-radius:14px;border:1px solid #ffffff26;background:#ffffff0d;color:#fff;font:inherit;padding:0 14px}
.svc{transition:background .2s,border-color .2s,box-shadow .2s}.sheet.small .grid{margin-bottom:6px}
.beta{font-size:11px;padding:2px 8px;border-radius:8px;background:#3b82f633;color:#93c5fd;vertical-align:middle}.authsent{text-align:center;padding:18px;border-radius:18px;background:#ffffff0a;border:1px solid #5eead433;display:flex;flex-direction:column;align-items:center;gap:6px}.authsent .mail{font-size:34px}
.phead{display:flex;align-items:center;gap:14px;margin:10px 0 16px}.phead img{width:54px;height:54px;border-radius:16px;box-shadow:0 6px 20px #14b8a633}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}.pstats div{padding:12px 6px;border-radius:16px;background:linear-gradient(135deg,#14b8a61c,#2563eb1c);border:1px solid #5eead433;text-align:center;display:flex;flex-direction:column;gap:2px}.pstats b{font-size:20px;color:#e6fffb}.pstats b i{font-style:normal;color:#fcd34d;font-size:15px;margin-left:2px}.pstats small{color:#86a3a0;font-size:11px}
.prow{display:flex;gap:12px;padding:10px;border-radius:18px;background:#ffffff0a;border:1px solid #ffffff14;margin-bottom:10px;animation:rowin .4s ease both}@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pposter{width:64px;height:96px;border-radius:12px;flex:none;display:grid;place-items:center;font-weight:900;font-size:24px;color:#ffffffaa;box-shadow:0 6px 16px #0008}
.pmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.pmeta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmeta small{color:#86a3a0}
.stars{display:flex;align-items:center;gap:2px}.stars em{font-style:normal;color:#fcd34d;font-weight:700;font-size:14px;margin-left:6px}
.st{position:relative;width:28px;height:28px;display:inline-block}.st svg{width:28px;height:28px;display:block}.st .e{fill:none;stroke:#ffffff40;stroke-width:1.5}.st .fill{position:absolute;inset:0 auto 0 0;overflow:hidden;transition:width .2s ease}.st .fill svg{fill:#fcd34d;filter:drop-shadow(0 0 6px #fcd34d66)}
.st button{position:absolute;top:0;bottom:0;width:50%;background:none;border:0;padding:0;cursor:pointer}.st button:first-of-type{left:0}.st button:last-of-type{right:0}.st button:active~.fill,.st:active{transform:scale(1.12)}.st{transition:transform .15s}
.pnote{width:100%;box-sizing:border-box;background:#ffffff08;border:1px solid #ffffff1a;border-radius:10px;color:#d6ebe8;font:inherit;font-size:13px;padding:7px 10px;transition:border-color .3s,box-shadow .3s}.pnote:focus{outline:none;border-color:#5eead488}.pnote.saved{border-color:#34d399;box-shadow:0 0 0 3px #34d39922}
.frate{margin-top:10px;padding:12px;border-radius:16px;background:#ffffff0a;border:1px solid #fcd34d33;display:flex;flex-direction:column;gap:8px}.flab{font-size:12px;color:#86a3a0;text-transform:uppercase;letter-spacing:.08em}
/* universal eye toggle */
.eyeb{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff2a;background:#06121a99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#cfe3e0;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .18s ease,background .25s,color .25s,box-shadow .25s;box-shadow:0 4px 14px #0006}
.eyeb:active{transform:scale(.9)}.eyeb svg{overflow:visible}.eyeb .eo,.eyeb .ec{transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.4,.5,1);transform-origin:12px 12px}
.eyeb .eo{opacity:0;transform:scaleY(.2)}.eyeb .ec{opacity:1}
.eyeb.on{background:linear-gradient(135deg,#14b8a6cc,#2563ebcc);color:#fff;border-color:transparent;box-shadow:0 4px 18px #14b8a655}.eyeb.on .eo{opacity:1;transform:none}.eyeb.on .ec{opacity:0;transform:scaleY(.2)}
.card .wbtn.eyeb{position:absolute;top:18px;left:18px;right:auto;width:34px;height:34px;border-radius:50%;z-index:2}.card .wbtn.eyeb svg{width:18px;height:18px}
.scard .seye{position:absolute;top:14px;right:14px;z-index:4}
.feye{position:absolute;top:14px;left:14px;z-index:3;width:40px;height:40px}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:6px;animation:rowin .4s ease both;min-width:0}
.pcard .pposter{width:auto;height:auto;aspect-ratio:2/3;border-radius:16px;position:relative;cursor:pointer;transition:transform .15s;display:flex;align-items:flex-end;padding:8px;font-size:12px}.pcard .pposter:active{transform:scale(.97)}
.pdate{position:absolute;top:8px;right:8px;font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#06121acc;color:#9fe9dc;backdrop-filter:blur(8px)}
.ptitle{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .st{width:24px;height:24px}.pcard .st svg{width:24px;height:24px}.pcard .stars em{font-size:12px;margin-left:3px}
/* hearts for personal rating */
.st .e{stroke:#ffffff45}.st .fill svg{fill:#fb7185;filter:drop-shadow(0 0 6px #fb718566)}.stars em{color:#fda4af}.pstats b i{color:#fb7185}
.frate{margin-top:12px;padding:0;background:none;border:0;gap:6px}
/* tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:16;display:flex;justify-content:space-around;max-width:480px;margin:auto;padding:8px 8px calc(8px + var(--sab));background:linear-gradient(180deg,#06121ad9,#04080cf5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid #5eead422}
.tabs[hidden]{display:none}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;background:none;border:0;color:#7f9c99;font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:color .2s,transform .15s}.tab:active{transform:scale(.92)}
.tab.on{color:#5eead4}.tab.on svg{filter:drop-shadow(0 0 8px #14b8a688)}.tab.on::after{content:'';position:absolute;top:-8px;width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,#14b8a6,#3b82f6)}
.tbadge{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#fb7185;color:#fff;font-style:normal;font-size:10px;font-weight:800;display:grid;place-items:center}
body.hastabs main{padding-bottom:calc(150px + var(--sab))}body.hastabs .bar{bottom:calc(58px + var(--sab))}
/* social UI */
.at{color:#5eead4;font-weight:800;font-size:18px;align-self:center;padding-left:4px}
.frow2{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:#ffffff0a;border:1px solid #ffffff14;margin-bottom:10px;transition:opacity .2s;animation:rowin .35s ease both}.frow2 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp{flex:1}
.av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 4px 14px #0006}
.chip.sm{min-height:34px;padding:0 12px;font-size:13px}.muted{color:#7f9c99;font-size:12px}
.idcard{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:linear-gradient(135deg,#14b8a61f,#2563eb1f);border:1px solid #5eead433;margin-top:20px}.idcard .av{width:48px;height:48px;font-size:20px}.idcard div{display:flex;flex-direction:column}.idcard small{color:#86a3a0}
.onboard input{font-size:17px}
.joinrow input{min-width:0}
/* share */
.shb svg{width:17px;height:17px}.card .cshare{position:absolute;top:12px;right:12px;width:34px;height:34px;z-index:2}
.fsh{position:absolute;top:14px;left:62px;z-index:3;width:40px;height:40px}.scard .sshb{position:absolute;top:60px;right:14px;z-index:4}
#pick[hidden]{display:none}.pback{position:fixed;inset:0;z-index:40;background:#000a;backdrop-filter:blur(4px);animation:fade .25s}
.psheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:480px;margin:auto;max-height:80vh;overflow:auto;padding:8px 20px calc(24px + var(--sab));border-radius:28px 28px 0 0;background:linear-gradient(180deg,#0a1f26f7,#050b12fa);border:1px solid #5eead433;border-bottom:0;box-shadow:0 -20px 60px #14b8a633;animation:up .35s cubic-bezier(.2,.8,.2,1)}
.pmini{display:flex;gap:12px;align-items:center;margin:10px 0 16px}.pmini div{display:flex;flex-direction:column;min-width:0}.pmp{width:46px;height:68px;border-radius:10px;flex:none}
.plist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.pfr{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff14;color:inherit;font:inherit;cursor:pointer;transition:.2s}.pfr .ck2{margin-left:auto;width:24px;height:24px;border-radius:50%;border:1px solid #ffffff33;display:grid;place-items:center;color:transparent;transition:.2s}
.pfr.on{border-color:#5eead4;background:linear-gradient(135deg,#14b8a622,#2563eb22)}.pfr.on .ck2{background:linear-gradient(135deg,#14b8a6,#2563eb);color:#fff;border-color:transparent}
.pin{width:100%;min-height:46px;border-radius:14px;border:1px solid #ffffff26;background:#ffffff0d;color:#fff;font:inherit;padding:0 14px;margin-bottom:12px}
.psheet .cta{position:static;transform:none;width:100%}.psheet .cta.sent{background:linear-gradient(135deg,#34d399,#14b8a6)}
/* chat */
.thr{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;position:relative}.tmeta{display:flex;flex-direction:column;min-width:0}.tmeta small{color:#86a3a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.thr.unread b{color:#fff}.thr.unread .tmeta small{color:#cfe3e0}.dot{width:9px;height:9px;border-radius:50%;background:#fb7185;margin-left:6px}
.chead{display:flex;align-items:center;gap:10px}.chead .av{width:34px;height:34px}
.msgs{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-bottom:70px}.mrow{display:flex;animation:rowin .3s ease both}.mrow.me{justify-content:flex-end}
.mbub{max-width:78%;padding:10px 14px;border-radius:20px 20px 20px 6px;background:#ffffff12;border:1px solid #ffffff14;line-height:1.4;word-wrap:break-word}.mrow.me .mbub{border-radius:20px 20px 6px 20px;background:linear-gradient(135deg,#14b8a6,#2563eb);border:0}.mbub.pending{opacity:.6}
.mcard{width:78%;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff1a;overflow:hidden}.mrow.me .mcard{border-color:#5eead455;background:linear-gradient(135deg,#14b8a61a,#2563eb1a)}
.mtap{display:flex;gap:12px;padding:10px;cursor:pointer}.mpo{width:62px;height:92px;border-radius:12px;flex:none;box-shadow:0 6px 16px #0008}.mmeta{display:flex;flex-direction:column;gap:3px;min-width:0}.mmeta small{color:#86a3a0}.mmeta p{font-size:14px;color:#d6ebe8;margin-top:4px}
.mreact{display:flex;gap:8px;padding:0 10px 10px;align-items:center}.rbtn{flex:1;height:40px;border-radius:14px;border:1px solid #ffffff22;background:#ffffff0d;font-size:20px;cursor:pointer;transition:transform .15s,background .2s}.rbtn:active{transform:scale(.9)}.rbtn.up:hover{background:#34d39922}.rbtn.down:hover{background:#f8717122}
.rx{font-size:13px;color:#9fb8b5}.rx.up{color:#5eead4}.rx.down{color:#fca5a5}
.msys{display:flex;justify-content:center}.msys .chip{font-size:12px}
.cbar{position:fixed;left:0;right:0;bottom:calc(64px + var(--sab));z-index:15;max-width:480px;margin:auto;display:flex;gap:8px;padding:10px 14px;background:linear-gradient(transparent,#04080cf0 30%)}
.cbar input{flex:1;min-width:0;min-height:46px;border-radius:23px;border:1px solid #ffffff26;background:#0b1a22e6;color:#fff;font:inherit;padding:0 16px}.csend{width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(135deg,#14b8a6,#2563eb);color:#fff;display:grid;place-items:center;cursor:pointer}
.swipeinv{text-align:center}
/* lists */
.lcard{width:100%;display:flex;align-items:center;gap:16px;padding:14px;border-radius:22px;background:#ffffff0b;border:1px solid #ffffff17;margin-bottom:12px;color:inherit;font:inherit;text-align:left;cursor:pointer;animation:in .5s both;transition:transform .15s}.lcard:active{transform:scale(.98)}
.lstack{position:relative;width:86px;height:78px;flex:none}.lstack i{position:absolute;left:0;top:0;width:52px;height:78px;border-radius:10px;box-shadow:0 6px 16px #000a;border:1px solid #ffffff22}.lstack .lempty{display:grid;place-items:center;font-style:normal;font-size:26px;background:#ffffff0d}
.lhead2{display:flex;gap:8px;margin:-8px 0 16px}.pcard.seen .pposter{filter:grayscale(.7) brightness(.6)}
.stars button[disabled]{pointer-events:none}
.linkbtn{background:none;border:0;color:#5eead4;font:inherit;font-weight:600;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.match .cta.sent{background:linear-gradient(135deg,#34d399,#14b8a6)}
/* ===== iOS safe areas + keyboard ===== */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--kb:0px;--vh:100dvh}
body{min-height:100dvh;overscroll-behavior-y:none}
main{padding-top:calc(20px + var(--sat));padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar))}
.sheet{height:auto;max-height:calc(var(--vh) - var(--sat) - 10px);min-height:min(88dvh,calc(var(--vh) - var(--sat) - 10px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet.small{min-height:0;max-height:calc(var(--vh) - var(--sat) - 40px)}
.psheet{max-height:calc(var(--vh) - var(--sat) - 40px);overscroll-behavior:contain}
.fbody{padding-bottom:calc(40px + var(--sab))}
body.noscroll{overflow:hidden}
/* status-bar scrim so content scrolling under the clock stays legible */
body::before{content:'';position:fixed;left:0;right:0;top:0;height:var(--sat);z-index:30;background:linear-gradient(#04080ce6,#04080c99);pointer-events:none}
/* keyboard open: hide tab bar + CTA bar, dock composer above keyboard */
body.kb .tabs,body.kb .bar{display:none!important}
body.kb .cbar{bottom:var(--kb);padding-bottom:10px}
body.kb.hastabs main{padding-bottom:calc(90px + var(--kb))}
.cbar{padding-left:calc(14px + var(--sal));padding-right:calc(14px + var(--sar));transition:bottom .12s ease-out}
.psheet{position:fixed}.psheet .fx{position:absolute}
/* detail hero controls: close top-left, eye + share top-right */
.fx.fxl{left:14px;right:auto}.feye{left:auto;right:14px}.fsh{left:auto;right:62px}
/* ambient drifting blobs */
.bg{overflow:hidden;background:#04080c}
.blob{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform;animation:drift1 26s ease-in-out infinite alternate}
.b1{width:70vmax;height:55vmax;left:-20vmax;top:-22vmax;background:radial-gradient(closest-side,#0d9488,transparent);animation-duration:28s}
.b2{width:60vmax;height:55vmax;right:-25vmax;top:10vh;background:radial-gradient(closest-side,#1d4ed8,transparent);opacity:.45;animation-name:drift2;animation-duration:36s}
.b3{width:65vmax;height:50vmax;left:-10vmax;bottom:-28vmax;background:radial-gradient(closest-side,#059669,transparent);opacity:.4;animation-name:drift3;animation-duration:22s}
.b4{width:40vmax;height:40vmax;right:-8vmax;bottom:-10vmax;background:radial-gradient(closest-side,#0ea5e9,transparent);opacity:.25;animation-name:drift2;animation-duration:40s;animation-direction:alternate-reverse}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-7vmax,5vmax,0) scale(.92)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(5vmax,-5vmax,0) scale(1.1)}}
.bg-paused .blob{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}
/* roulette */
.spinbtn{display:block;width:100%;min-height:52px;margin:6px 0 12px;border-radius:18px;border:1px solid #fcd34d55;background:linear-gradient(135deg,#fcd34d1f,#fb71851f);color:#fde68a;font:inherit;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 8px 30px #fcd34d22;transition:transform .15s}.spinbtn:active{transform:scale(.97)}
#reel[hidden]{display:none}.rback{position:fixed;inset:0;z-index:50;background:#020509e8;backdrop-filter:blur(8px);animation:fade .3s}
.rbox{position:fixed;inset:0;z-index:51;display:flex;flex-direction:column;justify-content:center;padding:calc(20px + var(--sat)) 0 calc(20px + var(--sab))}
.rfx{top:calc(14px + var(--sat))!important;left:14px;right:auto}
.rtitle{text-align:center;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#5eead4;margin-bottom:18px}
.rwin{position:relative;height:216px;overflow:hidden;border-top:1px solid #5eead433;border-bottom:1px solid #5eead433;background:#ffffff06}
.rstrip{position:absolute;top:18px;left:0;display:flex;gap:12px;will-change:transform}
.ritem{flex:none;width:120px;height:180px;border-radius:14px;box-shadow:0 8px 24px #000a;display:flex;align-items:flex-end;padding:8px;font-size:12px;font-weight:700;transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}
.ritem.rwinner{transform:scale(1.08);box-shadow:0 0 0 3px #fcd34d,0 0 40px #fcd34daa,0 0 90px #14b8a688}
.rmark{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(#fcd34d,#fb7185);box-shadow:0 0 14px #fcd34d;z-index:2}
.rmark::before,.rmark::after{content:'';position:absolute;left:50%;margin-left:-8px;border:8px solid transparent}.rmark::before{top:0;border-top-color:#fcd34d}.rmark::after{bottom:0;border-bottom-color:#fb7185}
.rmark.t{animation:tick .09s ease-out}@keyframes tick{50%{transform:scaleX(1.8)}}
.rfade{position:absolute;top:0;bottom:0;width:22%;z-index:1;pointer-events:none}.rfade.l{left:0;background:linear-gradient(90deg,#020509,transparent)}.rfade.r{right:0;background:linear-gradient(-90deg,#020509,transparent)}
.rres{min-height:150px;padding:22px 20px 0;text-align:center;position:relative}.rname{font-size:24px;color:#fff;margin:0 0 16px;animation:in .45s both}
.rbtns{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:440px;margin:auto}.rbtns .cta{position:static;transform:none;width:100%}
.rconf{position:absolute;inset:-260px 0 0;pointer-events:none}
:root{--sat:max(env(safe-area-inset-top,0px),12px)}
main{padding-top:calc(12px + var(--sat))}
html.standalone.no-env-inset{--sat:54px}
/* UX pass */
.eyeb::after{content:'';position:absolute;inset:-5px;border-radius:50%}
.card .cshare{width:40px;height:40px}
.st button{top:-8px;bottom:-8px}
.lcard .tmeta,.thr .tmeta{flex:1;min-width:0}.lcard .tmeta b,.thr .tmeta b,.thr .tmeta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.lstack{width:80px}
:focus{outline:none}:focus-visible{outline:2px solid #5eead4;outline-offset:2px;border-radius:12px}
input:focus-visible,input:focus{outline:none;border-color:#5eead4!important;box-shadow:0 0 0 3px #14b8a633}
.chead b{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pposter span{display:none}
.sheet,.psheet{scrollbar-width:none}.sheet::-webkit-scrollbar,.psheet::-webkit-scrollbar{display:none}
/* swipe-to-watch */
.swrap{position:relative;margin-bottom:12px;animation:in .5s both;touch-action:pan-y;--p:0}.swrap>.card{margin-bottom:0;animation:none;position:relative;z-index:1;will-change:transform}
.swrap.sgrid{margin-bottom:0}.swrap.sgrid>.pcard{position:relative;z-index:1;background:transparent;animation:none}
.swbg{position:absolute;inset:0 0 0 -3px;border-radius:22px;background:linear-gradient(90deg,#059669,#10b981 60%,#34d39988);display:flex;align-items:center;padding-left:22px;color:#ecfdf5;font-weight:800;overflow:hidden;opacity:calc(.35 + var(--p)*.65)}
.sgrid .swbg{border-radius:16px;bottom:auto;aspect-ratio:2/3;height:auto;width:calc(100% + 3px)}
.swin{display:flex;align-items:center;gap:8px;transform:translateX(calc(-30px + var(--p)*30px)) scale(calc(.85 + var(--p)*.15));opacity:var(--p);transition:transform .15s}
.swrap.armed .swin{transform:scale(1.08)}.swrap.armed .swbg{background:linear-gradient(90deg,#047857,#10b981)}
.swdone{position:absolute;left:22px;opacity:0;transform:translateY(8px);transition:.25s}.swrap.done .swin{opacity:0}.swrap.done .swdone{opacity:1;transform:none}.swrap.done .swbg{opacity:1}
.sgrid .swin b,.sgrid .swdone{font-size:13px}.sgrid .swbg{padding-left:12px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--sab));z-index:45;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:10px 10px 10px 16px;border-radius:16px;background:#0b1a22f2;border:1px solid #34d39955;box-shadow:0 10px 30px #000a;backdrop-filter:blur(12px);font-size:14px;animation:tin .3s cubic-bezier(.2,.8,.2,1)}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast[hidden]{display:none}.toast.out{opacity:0;transition:opacity .25s}
.tact{min-height:36px;padding:0 14px;border-radius:10px;border:0;background:#34d39922;color:#6ee7b7;font:inherit;font-weight:800;cursor:pointer}@keyframes tin{from{opacity:0;transform:translate(-50%,20px)}}
.swrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.swrap>.card{background:linear-gradient(135deg,#0d1d22,#0a1620);border-color:#ffffff1c}
.swbg{opacity:var(--p)}.swrap.done .swbg{opacity:1}
.swrap[data-sw^="r:"]::before,.swrap[data-sw^="l:"]::before{content:'';position:absolute;left:-3px;top:14px;bottom:14px;width:8px;border-radius:6px;background:linear-gradient(#34d399,#10b981);box-shadow:0 0 12px #10b98166;z-index:0}
.swrap.sgrid::before{bottom:auto!important;height:calc((100% - 40px)*.8)}
.swrap.sgrid{overflow:hidden;padding-left:3px;margin-left:-3px}.sgrid .swin b{font-size:12px}
/* v14 pull-to-dismiss */
#sheet .grab{pointer-events:none}#sheet .grab i{background:#ffffffb0;box-shadow:0 1px 6px #0007;width:40px}
.sheet.dragging{animation:none}.fhero{transform-origin:50% 0}
/* v14 deck sizing: header ~150 + buttons/note ~130 + tab bar ~70 + depth peek 28 */
.stack{height:clamp(240px,calc(var(--vh,100dvh) - var(--sat,0px) - var(--sab,0px) - var(--deckchrome,400px)),520px);margin-bottom:30px}
.stack+.vbtns{margin-top:0}.scard .sshb{top:14px}
.screen:has(> .stack){padding-bottom:calc(84px + var(--sab,0px))}
/* v14 readable toasts / confirmation pills */
.toast,.cta.sent,.psheet .cta.sent,.match .cta.sent{background:#0d1a1ff2!important;color:#fff!important;border:1px solid #34d399aa!important;box-shadow:0 10px 30px #000b,0 0 0 1px #0006,0 0 18px #34d39922!important;-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);text-shadow:none}
.toast{z-index:200}.cta.sent{position:relative;z-index:200}.toast span:first-child::before{content:'✓';display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#34d399;color:#06281d;font-size:12px;font-weight:800}
.confetti{z-index:150}
/* v15 intro */
#introov{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 70% at 20% 0%,#0f3b3a,transparent 60%),radial-gradient(100% 60% at 100% 100%,#132f5a,transparent 60%),#04080c}#introov[hidden]{display:none}
.intro{min-height:calc(var(--vh,100dvh) - 0px);display:grid;grid-template-rows:auto 1fr auto auto;box-sizing:border-box;padding:calc(var(--sat,0px) + 14px) 22px calc(var(--sab,0px) + 14px);max-width:480px;margin:0 auto}
#introov .intro{height:100%;min-height:0}
.intro.handle{grid-template-rows:auto 1fr auto}
.obtop{display:flex;justify-content:space-between;align-items:center;height:44px}.obtop .brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:20px;margin:0}
.obskip{color:#9fb8b5;font-size:15px;padding:10px 4px}
.obstage{display:grid;place-items:center;min-height:0}
.obtext{min-height:150px}.obtext h1{font-size:30px;line-height:1.1;margin:0 0 10px}.intro.handle .obtext{align-self:center}
.obfoot{display:grid;gap:16px}.obdots{display:flex;gap:8px;justify-content:center}.obdots i{width:7px;height:7px;border-radius:9px;background:#ffffff2a;transition:width .3s,background .3s}.obdots i.on{width:22px;background:linear-gradient(90deg,#34d399,#60a5fa)}.obdots i.done{background:#5eead477}
.obnext{position:static!important;transform:none!important;width:100%;margin:0!important}.obnext:disabled{opacity:.45}
.obtabs{display:flex;justify-content:space-around;padding:8px 4px;border-radius:18px;background:#ffffff08;border:1px solid #ffffff12}
.obtab{display:grid;justify-items:center;gap:2px;font-size:10px;color:#6b8784;padding:6px 8px;border-radius:12px;transition:color .3s,background .3s,box-shadow .3s}
.obtab.on{color:#fff;background:#14b8a622;box-shadow:0 0 0 1px #5eead466,0 0 22px #14b8a655;animation:obpulse 2.4s ease-in-out infinite}
@keyframes obpulse{50%{transform:scale(1.06)}}
.obv{width:min(300px,82vw);height:min(250px,32vh);position:relative;display:grid;align-content:center;gap:12px;animation:obbreathe 4s ease-in-out infinite}
@keyframes obbreathe{50%{transform:scale(1.025)}}
.obchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.obposters{display:flex;gap:10px;justify-content:center}.obposters i,.obreel i,.obrow i,.obmsg i{display:block;border-radius:12px;background:linear-gradient(160deg,#14b8a6,#1e3a8a);box-shadow:0 10px 24px #0008}
.obposters i{width:70px;height:100px}.obposters i:nth-child(2){background:linear-gradient(160deg,#60a5fa,#0f172a)}.obposters i:nth-child(3){background:linear-gradient(160deg,#34d399,#064e3b)}
.obcard{position:absolute;top:10%;left:50%;width:130px;height:180px;margin-left:-65px;border-radius:20px;background:linear-gradient(160deg,#0f766e,#1e3a8a);border:1px solid #ffffff22;box-shadow:0 20px 40px #000a;display:grid;place-items:center;font-size:30px}
.obcard.l{transform:translateX(-58px) rotate(-10deg);opacity:.7}.obcard.r{transform:translateX(58px) rotate(9deg);background:linear-gradient(160deg,#34d399,#2563eb)}
.obmatch{position:absolute;bottom:4%;left:0;right:0;text-align:center;font-weight:800;font-size:20px;background:linear-gradient(90deg,#5eead4,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.obrow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff12}.obrow i{width:34px;height:48px;border-radius:8px}.obrow span{flex:1;font-weight:600}.obrow em{color:#34d399;font-style:normal;font-weight:800}
.obreel{display:flex;gap:10px;justify-content:center;overflow:hidden}.obreel i{width:62px;height:90px;flex:none;opacity:.55}.obreel i.w{opacity:1;box-shadow:0 0 0 2px #5eead4,0 0 30px #14b8a688}
.obmark{position:absolute;left:50%;top:18%;bottom:18%;width:2px;margin-left:-1px;background:#fcd34d;box-shadow:0 0 12px #fcd34d}
.obmsg{display:flex;gap:10px;align-items:center;margin-left:auto;padding:10px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,#0f766e,#1d4ed8);max-width:230px}.obmsg i{width:44px;height:64px;border-radius:8px;background:linear-gradient(160deg,#fcd34d,#b45309)}
.obreact{display:flex;gap:10px;margin-left:auto}.obreact span{font-size:22px;padding:6px 12px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff1a}.obreact span.on{background:#34d39933;border-color:#34d39999}
.hrow{margin-top:18px}.hrow input{font-size:18px}.hmsg{text-align:left;min-height:16px;font-size:13px}.hmsg[data-s=ok]{color:#34d399}.hmsg[data-s=bad]{color:#fb7185}
.oblink summary{color:#9fb8b5;font-size:13px;text-align:center;cursor:pointer;list-style:none}.oblink[open] summary{margin-bottom:8px}
@media (prefers-reduced-motion:reduce){.obv,.obtab.on{animation:none}}
#app>.intro{position:fixed;inset:0;z-index:30;min-height:0;height:100%;margin:0 auto;overflow-y:auto}
/* v16 deck layout: viewport-filling flex column */
.deckscreen{position:fixed;inset:0;z-index:2;max-width:480px;margin:0 auto;display:flex;flex-direction:column;box-sizing:border-box;padding:calc(var(--sat,0px) + 10px) calc(18px + var(--sar,0px)) calc(var(--sab,0px) + 10px) calc(18px + var(--sal,0px));height:var(--vh,100dvh)}
body.hastabs .deckscreen{padding-bottom:calc(var(--sab,0px) + 74px)}
.deckscreen .top{flex:none}.deckscreen h1{font-size:24px;margin:8px 0 2px}.deckscreen p.sub{font-size:13px;line-height:1.35;margin:0 0 12px}.deckscreen .linkbtn{font-size:13px}
.deckscreen .stack{flex:1 1 0;min-height:200px;height:auto;margin:0;container-type:size;--cw:min(100cqw,calc((100cqh - 14px)*.72))}
.deckscreen .scard{inset:auto;top:0;bottom:14px;width:var(--cw);left:calc(50% - var(--cw)/2)}
.scard::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#13323c,#0a1a22);opacity:0;transition:opacity .38s;pointer-events:none;z-index:5}
.scard.under::after{opacity:1}.scard.under{border-color:#5eead433;box-shadow:0 8px 20px #0007}.scard.under>*{visibility:hidden}
.deckscreen .vbtns{flex:none;margin:14px 0 0;gap:30px}.deckscreen .vb{width:64px;height:64px;font-size:26px}.deckscreen .vb.info{width:52px;height:52px;align-self:center;font-size:20px}
.deckscreen .note{flex:none;margin:8px 0 0}
.screen.deckscreen:has(> .stack){padding-bottom:calc(var(--sab,0px) + 10px)}body.hastabs .screen.deckscreen:has(> .stack){padding-bottom:calc(var(--sab,0px) + 74px)}
/* v16 keyboard-safe chat shell: locked to visualViewport, only the message list scrolls */
html:has(.screen.chat),html:has(.screen.chat) body{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
.screen.chat{position:fixed;left:0;right:0;top:0;z-index:3;height:var(--vvh,100dvh);transform:translateY(var(--vvt,0px));max-width:480px;margin:0 auto;display:flex;flex-direction:column;box-sizing:border-box;padding:calc(var(--sat,0px) + 10px) calc(16px + var(--sar,0px)) calc(var(--sab,0px) + 64px) calc(16px + var(--sal,0px));animation:none;background:linear-gradient(180deg,#04080c 0,#04080c00 calc(var(--sat,0px) + 64px))}
.screen.chat>.top{flex:none;position:relative;z-index:2}
.screen.chat .msgs{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:10px -4px 0;padding:0 4px 10px}
.screen.chat .cbar{position:static;flex:none;margin:0 calc(-16px - var(--sar,0px)) 0 calc(-16px - var(--sal,0px));background:#04080c;border-top:1px solid #ffffff10;transition:none}
body.kb .screen.chat{padding-bottom:0}body.kb .screen.chat .cbar{padding-bottom:10px}
input,textarea{font-size:max(16px,1em)}
/* sticky headers on screens with inputs */
main>.screen:not(.chat):not(.deckscreen)>.top{position:sticky;top:var(--sat,0px);z-index:5;background:#04080ce6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin:0 -20px;padding:6px 20px;box-shadow:0 calc(-1 * var(--sat,0px)) 0 #04080c}
/* v16 story intro */
.intro{grid-template-rows:auto 1fr auto!important}
.obmid{display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:0}
.obstage{height:clamp(220px,40vh,360px);width:100%;display:grid;place-items:center;position:relative}
.obtext{min-height:118px}.obtext h1{font-size:27px;line-height:1.15}.obtext .sub{font-size:15px;margin:0}
.obmid .obtext,.obmid .obstage>*{animation:obin .5s cubic-bezier(.2,.8,.2,1) both}.obmid .obtext{animation-delay:.06s}
@keyframes obin{from{opacity:0;transform:translateY(10px) scale(.98)}}
.obv{width:min(320px,86vw);height:100%;position:relative;display:block;animation:none}
.obp{position:absolute;display:block;width:96px;aspect-ratio:2/3;border-radius:12px;box-shadow:0 12px 28px #000a;border:1px solid #ffffff1f;overflow:hidden}
.obp span{position:absolute;inset:auto 6px 6px;font:600 10px/1.2 system-ui;color:#fff;font-style:normal}
/* 1 mess */
.obv-mess .obp{filter:blur(1.6px) saturate(.8);opacity:.75;width:84px}
.obv-mess .m0{left:4%;top:6%;transform:rotate(-12deg)}.obv-mess .m1{left:34%;top:0;transform:rotate(6deg)}.obv-mess .m2{right:4%;top:8%;transform:rotate(14deg)}
.obv-mess .m3{left:14%;top:38%;transform:rotate(9deg)}.obv-mess .m4{left:46%;top:34%;transform:rotate(-7deg)}.obv-mess .m5{right:0;top:46%;transform:rotate(-15deg)}
.obv-mess .m6{left:0;bottom:2%;transform:rotate(-4deg)}.obv-mess .m7{left:36%;bottom:0;transform:rotate(12deg)}
.obclock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:99px;background:#0d1a1ff2;border:1px solid #fb718566;color:#fecdd3;font-weight:700;font-size:15px;box-shadow:0 10px 30px #000c;animation:obbreath 2.4s ease-in-out infinite}
@keyframes obbreath{50%{transform:translate(-50%,-50%) scale(1.06)}}
/* 2 tidy */
.obv-tidy{display:flex!important;flex-direction:column;justify-content:center;gap:18px}
.obchips{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}
.obchip{font-size:12px;font-weight:600;padding:6px 10px;border-radius:99px;background:#ffffff0d;border:1px solid color-mix(in srgb,var(--c,#5eead4) 60%,transparent);white-space:nowrap}.obchip.mood{background:linear-gradient(135deg,#14b8a633,#2563eb33);border-color:#5eead466}
.obrow3{display:flex;gap:12px;justify-content:center}.obrow3 .obp{position:relative;width:30%}.obrow3 .hl{box-shadow:0 0 0 2px #5eead4,0 14px 34px #14b8a655}
/* 3 swipe */
.obv-swipe .obp{width:46%;left:27%;top:4%}
.obv-swipe .fl{transform:translateX(-62%) rotate(-16deg);opacity:.65}.obv-swipe .fr{transform:translateX(62%) rotate(15deg);opacity:.65}.obv-swipe .fc{animation:obsway 3.2s ease-in-out infinite}
@keyframes obsway{25%{transform:rotate(-3deg) translateX(-6px)}75%{transform:rotate(3deg) translateX(6px)}}
.obtag{position:absolute;top:30%;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:0 8px 20px #0009}.obtag.no{left:0;background:#0d1a1f;color:#fb7185;border:1px solid #fb718566}.obtag.yes{right:0;background:linear-gradient(135deg,#34d399,#2563eb);color:#fff}
.obav{position:absolute;bottom:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#04201a;background:linear-gradient(135deg,#5eead4,#34d399);border:3px solid #04080c}.obav.a2{background:linear-gradient(135deg,#93c5fd,#2563eb);color:#fff}
.obv-swipe .a1{left:18%}.obv-swipe .a2{right:18%}
/* 4 match */
.obv-match .big{width:50%;left:25%;top:0;box-shadow:0 0 0 2px #34d399,0 20px 50px #34d39944}
.obpair{position:absolute;left:0;right:0;bottom:16%;display:flex;justify-content:center}.obpair .obav{position:static;margin:0 -6px}
.obmtxt{position:absolute;left:0;right:0;bottom:0;text-align:center;font-weight:800;font-size:22px;background:linear-gradient(90deg,#5eead4,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.obconf{position:absolute;inset:0;overflow:hidden;pointer-events:none}.obconf i{position:absolute;top:-10px;width:6px;height:10px;border-radius:2px;animation:obfall 2.6s ease-in infinite}
@keyframes obfall{to{transform:translateY(380px) rotate(540deg);opacity:.2}}
/* 5 spin */
.obv-spin{display:flex!important;flex-direction:column;justify-content:center;gap:18px}
.obreel{position:relative;height:150px;overflow:hidden;border-radius:18px;background:#ffffff08;border:1px solid #ffffff14;-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.obstrip{position:absolute;top:12px;left:50%;display:flex;gap:10px;animation:obreel 3.2s cubic-bezier(.08,.6,.1,1) .3s both}.obstrip .obp{position:relative;width:84px;flex:none}
@keyframes obreel{from{transform:translateX(0)}from{transform:translateX(-42px)}to{transform:translateX(-982px)}}
.obmark{position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;background:#fcd34d;box-shadow:0 0 12px #fcd34d}
.obwin{text-align:center;font-weight:700;color:#5eead4;animation:obin .4s 3.4s both}
/* 6 keep */
.obv-keep{display:flex!important;flex-direction:column;justify-content:center;gap:14px}
.oblist{padding:12px;border-radius:18px;background:#ffffff0a;border:1px solid #ffffff14;display:grid;gap:8px}.oblh{font-size:12px;color:#9fb8b5;font-weight:600}
.oblr{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.oblr span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oblr em{color:#34d399;font-style:normal;font-weight:800}
.obp.sm{position:relative;width:30px;border-radius:6px;flex:none}
.obbub{align-self:flex-end;position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,#0f766e,#1d4ed8);font-weight:600}
.obthumb{position:absolute;left:-14px;bottom:-12px;font-size:18px;background:#0d1a1f;border:1px solid #34d39999;border-radius:99px;padding:2px 7px;animation:obpop .5s .6s cubic-bezier(.2,1.6,.4,1) both}@keyframes obpop{from{transform:scale(0)}}
@media (prefers-reduced-motion:reduce){.obmid *{animation:none!important}}
/* v17 livelier ambient drift (transform-only) */
.b1{animation-duration:12s}.b2{animation-duration:16s}.b3{animation-duration:14s}.b4{animation-duration:18s}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vmax,6vmax,0) scale(1.15)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-10vmax,7vmax,0) scale(.9)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(7vmax,-7vmax,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none!important}}
/* v18 polish: sticky header blends instead of a dark band */
main>.screen:not(.chat):not(.deckscreen)>.top{background:linear-gradient(180deg,#050d12e0 0%,#050d12c0 65%,#050d1200 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent);padding-bottom:16px;margin-bottom:-10px;box-shadow:none}
/* consistent tap targets + calmer empty states */
.chip{min-height:40px}.back,.pillbtn{min-width:44px;min-height:44px}
.empty{color:#9fb8b5;line-height:1.5;padding:36px 20px;border:1px dashed #ffffff1a;border-radius:20px;background:#ffffff05}
.fload{min-height:60px}
/* v19 story tweaks */
.oblogo{position:absolute;z-index:2;font-size:12px;font-weight:800;padding:5px 10px;border-radius:8px;background:#0d1a1ff0;border:1px solid var(--c);color:#fff;box-shadow:0 6px 16px #000a}
.oblogo.l1{left:2%;top:30%}.oblogo.l2{right:4%;top:24%}.oblogo.l3{left:30%;bottom:10%}.oblogo.l4{right:10%;bottom:28%}
.obq{position:absolute;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 22px system-ui;color:#fff;background:linear-gradient(135deg,#14b8a6,#2563eb);box-shadow:0 10px 26px #000b;animation:obbq 2.6s ease-in-out infinite}
.obq.q1{left:38%;top:12%}.obq.q2{left:52%;top:52%;animation-delay:1.3s}@keyframes obbq{50%{transform:scale(1.1)}}
.obv-mess .obclock{display:none}
.obv-match .fl2,.obv-match .fr2{width:34%;top:8%;opacity:.5}.obv-match .fl2{left:-2%;transform:rotate(-14deg)}.obv-match .fr2{right:-2%;transform:rotate(14deg)}
.obv-keep .obpair{display:flex;justify-content:center;gap:40px}.obv-keep .obbub{align-self:center}
.obtext h1{font-size:26px}
/* v20 results loading skeleton */
.skel{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}.skel i{display:block;aspect-ratio:2/3;border-radius:18px;background:linear-gradient(100deg,#ffffff08 30%,#5eead414 50%,#ffffff08 70%) 0 0/300% 100%;border:1px solid #ffffff0f;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.skel i{animation:none}}
/* v21: chat never translates (height-only), button press feedback */
.screen.chat{transform:none!important}
.vb{transition:transform .12s ease-out}.vb:active{transform:scale(.9)}
/* v22: iOS Safari pill fix for onboarding chips */
.obchips{flex:0 0 auto;align-items:center;align-content:center;height:auto}
.obchip,.oblogo,.obv-keep>.obchip{display:inline-flex;align-items:center;justify-content:center;height:auto;min-height:0;max-height:34px;padding:6px 14px;line-height:1;align-self:center;flex:0 0 auto;-webkit-appearance:none;appearance:none;white-space:nowrap;box-sizing:border-box}
.obv-tidy>.obrow3,.obv-keep>*{flex:0 0 auto}
/* v23: no jiggle on chip toggles */
.screen.still,.screen.still *{animation:none!important}.intro.still .obmid *{animation:none!important}
.chip,.svc,.obchip,.vb,.cta{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.chip{border:1px solid #ffffff22;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .12s}.chip.on{border:1px solid transparent}
.chip:active,.svc:active{transform:scale(.96)}
/* v23 list-row skeleton + staggered reveal */
.skrow{animation:none}.skrow .poster{background:#ffffff0d;padding:0}.skl{flex:1;display:grid;align-content:center;gap:10px}.skl b{display:block;height:12px;border-radius:6px;background:linear-gradient(100deg,#ffffff0a 30%,#5eead41a 50%,#ffffff0a 70%) 0 0/300% 100%;animation:skel 1.4s ease-in-out infinite}.skl b:nth-child(1){width:70%;height:16px}.skl b:nth-child(2){width:45%}.skl b:nth-child(3){width:58%}
.skrow .poster{background:linear-gradient(100deg,#ffffff0a 30%,#5eead41a 50%,#ffffff0a 70%) 0 0/300% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes rowrev{from{opacity:0;transform:translateY(6px)}}
.swrap,.card.tap:not(.glow){animation:rowrev .22s ease-out both}
.swrap:nth-child(1),.card.tap:not(.glow):nth-child(1){animation-delay:0ms}.swrap:nth-child(2),.card.tap:not(.glow):nth-child(2){animation-delay:45ms}.swrap:nth-child(3),.card.tap:not(.glow):nth-child(3){animation-delay:90ms}.swrap:nth-child(4),.card.tap:not(.glow):nth-child(4){animation-delay:135ms}.swrap:nth-child(5),.card.tap:not(.glow):nth-child(5){animation-delay:180ms}.swrap:nth-child(6),.card.tap:not(.glow):nth-child(6){animation-delay:225ms}.swrap:nth-child(7),.card.tap:not(.glow):nth-child(7){animation-delay:270ms}.swrap:nth-child(8),.card.tap:not(.glow):nth-child(8){animation-delay:315ms}
.swrap:nth-child(n+9),.card.tap:not(.glow):nth-child(n+9){animation:none}
@media (prefers-reduced-motion:reduce){.swrap,.card.tap,.skl b,.skrow .poster{animation:none!important}}
/* v24: onboarding match step fits short screens; chat header layer never animates */
.obv-match .big{width:auto;height:62%;aspect-ratio:2/3;left:50%;transform:translateX(-50%)}
.obv-match .fl2,.obv-match .fr2{width:auto;height:48%;aspect-ratio:2/3}
.obv-match .obpair{bottom:15%}
.screen.chat>.top{transition:none;will-change:auto}
/* v25 detail body skeleton */
.fsk{display:grid;gap:12px;padding:6px 0 20px}.fsk b,.fskrow i{display:block;height:12px;border-radius:6px;background:linear-gradient(100deg,#ffffff0a 30%,#5eead41a 50%,#ffffff0a 70%) 0 0/300% 100%;animation:skel 1.4s ease-in-out infinite}
.fsk .w40{width:40%}.fsk .w70{width:70%}.fsk .w20{width:22%}.fsk .h{height:16px;margin-top:10px}.fsk .vid{height:auto;aspect-ratio:16/9;border-radius:16px}
.fskrow{display:flex;gap:8px}.fskrow i{width:76px;height:30px;border-radius:99px}
@media (prefers-reduced-motion:reduce){.fsk b,.fskrow i{animation:none}}