/* FlixPicker v2 — one stylesheet. Sections: tokens · base · layout · top bar · controls ·
   dialogs · footer · pages (one block per page) · responsive steps (see docs/website-v2). */

:root{color-scheme:dark}
/* ───────────────────────────── tokens */
/* Figtree: all the text that is not Anton. One variable file per script range (Latin; Latin-extended for Turkish and the rest), weights 300 to 900. */
@font-face{font-family:Figtree;src:url(figtree-latin.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;src:url(figtree-latin-ext.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Anton;src:url(anton.woff2) format("woff2");font-weight:400;font-display:swap}
/* Story cards: Inter stands in for the apps' SF Pro so the exported image looks the same on every device (Latin subset, fetched only when a story opens). */
@font-face{font-family:Inter;src:url(inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(inter-600.woff2) format("woff2");font-weight:600 900;font-display:swap}
:root{
  --bg:#111217;--card:#1E1F26;--card-2:#17181D;--bar:#0B0C10;--red:#E50914;--red-soft:rgba(229,9,20,.14);
  --text:#fff;--text-2:#C8C8CE;--text-3:#A1A1A8;--muted:#8E8E93;--line:rgba(255,255,255,.08);--hover:rgba(255,255,255,.06);
  --green:#4CAF50;--yellow:#FFD700;--gold:#FFC53D;
  --r-s:8px;--r-m:12px;--r-l:16px;--r-xl:22px;
  --font:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:Anton,Impact,"Arial Narrow",sans-serif;
  --gutter:32px;
}

/* ───────────────────────────── base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;min-width:320px}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}dialog:focus-visible{outline:none}
[hidden]{display:none !important}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--red);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.ic{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.grow{flex:1}
.muted{color:var(--muted)}
.anton{font-family:var(--display);font-weight:400;text-transform:uppercase}

/* ───────────────────────────── layout */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter);width:100%}
main{min-height:60vh}
.page{padding-top:16px;padding-bottom:80px}
.page-title{font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.015em;margin:8px 0 20px}
.cols{display:flex;gap:32px;align-items:flex-start}
.cols>.main{flex:1;min-width:0}
.cols>.side{flex:0 0 340px;width:340px;display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.stack{display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border-radius:var(--r-l)}
.sec{margin-top:48px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-head h2,.sec-head h3{font-size:22px;font-weight:700}
.sec-head a{font-size:14px;font-weight:600;color:#FF4D57}
.sec-head a:hover{text-decoration:underline}

/* ───────────────────────────── controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:22px;font-size:15px;font-weight:700;white-space:nowrap;transition:background .15s,transform .05s}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red)}.btn-red:hover{background:#f01a25}
.btn-ghost{background:rgba(255,255,255,.12)}.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-white{background:#fff;color:var(--bg)}.btn-white:hover{background:#e9e9ee}
.btn-lg{height:52px;padding:0 24px 0 18px;font-size:16px;border-radius:26px}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}
.link-btn{color:#FF4D57;font-size:13px;font-weight:600}
.link-btn:hover{text-decoration:underline}
.icon-btn{width:44px;height:44px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.icon-btn:hover{background:var(--hover)}
.pill-split{display:inline-flex;border-radius:26px;overflow:hidden;background:rgba(255,255,255,.14)}
.pill-split button{height:52px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.pill-split .story-btn{background:linear-gradient(135deg,#833AB4,#FD1D1D 55%,#FCB045)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 16px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;transition:background .15s}
.chip:hover{background:#2A2B33}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.label{font-size:13px;font-weight:600;color:var(--text-3)}
.input,.field input,.field textarea,.field select{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:16px}
.field textarea{padding:12px 14px;min-height:96px;resize:vertical}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--red)}
.field-note{font-size:13px;color:var(--muted)}
.form-err{color:#FF6B73;font-size:14px;min-height:20px;margin:4px 0 10px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;cursor:pointer}
.toggle-text{display:flex;flex-direction:column}.toggle-text b{font-size:15px;font-weight:600}.toggle-text small{font-size:13px;color:var(--muted)}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .knob{width:51px;height:31px;border-radius:16px;background:#3A3B44;position:relative;flex-shrink:0;transition:background .2s}
.toggle .knob::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle input:checked+.knob{background:var(--red)}
.toggle input:checked+.knob::after{transform:translateX(20px)}
.toggle input:focus-visible+.knob{outline:2px solid #fff;outline-offset:2px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:32px}
.pg{min-width:40px;height:40px;padding:0 10px;border-radius:20px;background:var(--card);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--text-2)}
a.pg:hover{background:#2A2B33}.pg.on{background:var(--red);color:#fff}.pg.gap{background:none}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px;color:var(--muted)}
.empty h3{font-size:18px;color:var(--text)}.empty .btn{margin-top:8px}
.crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,.7);min-width:0}
.crumbs li{display:flex;align-items:center;height:36px;min-width:0}
.crumbs a:hover{color:#fff}.crumbs [aria-current]{color:#fff}
.crumbs [aria-current] span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.crumbs .ic{stroke:rgba(255,255,255,.5)}
.crumbs.on-image{position:relative;z-index:2;padding-top:16px}
.avatar{border-radius:50%;aspect-ratio:1;object-fit:cover;flex-shrink:0;background:#2A2B33}
.avatar-ph{display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-3)}
.fp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid currentColor;border-radius:10px;background:rgba(0,0,0,.8);flex-shrink:0;line-height:1}
.fp b{font-weight:700;color:inherit}.fp i{font-style:normal;color:#9E9E9E}
.fp-hi{color:var(--green)}.fp-mid{color:var(--yellow)}.fp-lo{color:var(--red)}
.fp-sm{width:36px;height:36px;border-radius:8px}.fp-sm b{font-size:13px}.fp-sm i{font-size:8px;margin-top:1px}
.fp-md{width:44px;height:44px;border-radius:9px}.fp-md b{font-size:15px}.fp-md i{font-size:9px;margin-top:2px}
.fp-lg{width:56px;height:56px}.fp-lg b{font-size:17px}.fp-lg i{font-size:11px;margin-top:2px}
.poster{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-m);background:var(--card)}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:420px}
.toasts[popover]{top:auto;right:auto;height:auto;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible}   /* a popover lives in the top layer: toasts show above open dialogs and their blur */
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}   /* no scrolling the page behind a dialog */
.rail,.cast{--fade:56px}
.rail.fade-r,.cast.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent)}
.rail.fade-l,.cast.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade));mask-image:linear-gradient(90deg,transparent,#000 var(--fade))}
.rail.fade-l.fade-r,.cast.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
/* achievement unlocked (design: design-canvas/project/MAchievement.dc.html) */
dialog.modal.ach-pop[open]{position:relative;width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:30px 32px 28px;background:#1E1F26;color:#fff;border-radius:20px;overflow:hidden;border:0;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 32px 90px rgba(0,0,0,.7);animation:ach-card .5s cubic-bezier(.2,.8,.2,1) both}
.ach-spot{position:absolute;left:0;right:0;top:0;height:330px;background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(255,197,61,.20),rgba(255,197,61,0) 70%);pointer-events:none;animation:ach-fade .9s .1s ease-out both}
.ach-rays{position:absolute;left:50%;top:150px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,197,61,.075) 0 5deg,rgba(255,197,61,0) 5deg 24deg);
  -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0,rgba(0,0,0,.45) 30%,transparent 56%);mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0,rgba(0,0,0,.45) 30%,transparent 56%);
  animation:ach-fade 1.2s .25s ease-out both,ach-spin 60s linear infinite}
.ach-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:18px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ach-count{position:absolute;top:22px;left:20px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#A1A1A8}
.ach-kicker{position:relative;display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFC53D;animation:ach-up .6s .15s cubic-bezier(.2,.8,.2,1) both}
.ach-kicker:before,.ach-kicker:after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,197,61,.7))}.ach-kicker:after{transform:scaleX(-1)}
.ach-medal{position:relative;width:156px;height:156px;margin:26px 0 22px;animation:ach-pop .9s .25s cubic-bezier(.2,1.25,.4,1) both}
.ach-medal:before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,61,.42),rgba(255,197,61,0) 68%);animation:ach-glow 3.2s 1.2s ease-in-out infinite}
.ach-medal img{position:relative;width:156px;height:156px;object-fit:contain;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.ach-shine{position:absolute;inset:6px;border-radius:50%;overflow:hidden;pointer-events:none}
.ach-shine:after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:ach-sweep 1.1s 1.05s ease-in-out both}
.ach-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#FFD97A;box-shadow:0 0 8px 1px rgba(255,197,61,.8);opacity:0;animation:ach-rise 1.8s var(--t,.9s) ease-out both}
.ach-title{position:relative;margin:0;font-family:var(--display);font-weight:400;font-size:40px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;animation:ach-up .6s .6s cubic-bezier(.2,.8,.2,1) both}
.ach-desc{position:relative;margin:10px 0 0;max-width:310px;font-size:15px;line-height:1.55;color:#A1A1A8;animation:ach-up .6s .7s cubic-bezier(.2,.8,.2,1) both}
.ach-prog{position:relative;width:100%;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);animation:ach-up .6s .8s cubic-bezier(.2,.8,.2,1) both}
.ach-prog-row{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:#8E8E93}.ach-prog-row b{color:#fff;font-weight:700}
.ach-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:9px;overflow:hidden}
.ach-bar i{display:block;height:100%;width:var(--w);border-radius:3px;background:linear-gradient(90deg,#E5A91A,#FFC53D);transform-origin:left;animation:ach-fill .9s 1.1s cubic-bezier(.2,.8,.2,1) both}
.ach-cta{position:relative;width:100%;margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:ach-up .6s .9s cubic-bezier(.2,.8,.2,1) both}
.ach-btn{width:100%;height:52px;border:0;border-radius:26px;background:#fff;color:#111217;font-size:16px;font-weight:700;cursor:pointer}
.ach-btn:hover{background:#E9E9EE}
.ach-link{height:40px;padding:0 14px;border:0;background:none;color:#A1A1A8;font-size:14px;font-weight:600;cursor:pointer}.ach-link:hover{color:#fff}
@keyframes ach-card{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes ach-fade{from{opacity:0}}
@keyframes ach-spin{to{transform:rotate(360deg)}}
@keyframes ach-up{from{opacity:0;transform:translateY(10px)}}
@keyframes ach-pop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes ach-glow{50%{opacity:.55}}
@keyframes ach-sweep{from{left:-60%}to{left:130%}}
@keyframes ach-rise{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
@keyframes ach-fill{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){dialog.modal.ach-pop,dialog.modal.ach-pop *{animation:none!important}}
.toast{background:#2A2B33;border:1px solid var(--line);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:toast-in .2s ease-out}
.toast.err{background:#3a1419;border-color:rgba(229,9,20,.5)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:250;max-width:720px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 12px 40px rgba(0,0,0,.6);font-size:14px;color:var(--text-2)}
.cookie a{text-decoration:underline}.cookie div{display:flex;gap:8px;flex-shrink:0}.cookie .btn{height:40px}

/* ───────────────────────────── top bar */
.topbar{position:relative;z-index:20;background:var(--bar);border-bottom:1px solid var(--line)}
.bar{height:76px;display:flex;align-items:center;gap:24px}
.logo{display:flex;flex-shrink:0}.logo img{height:54px;width:auto}
.nav-links{display:flex;gap:26px;font-size:15px;font-weight:600}
.nav-link{white-space:nowrap;color:var(--text-2);padding:8px 0}.nav-link:hover{color:#fff}
.searchbox{display:flex;align-items:center;gap:10px;width:300px;height:44px;padding:0 14px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:15px;text-align:left}
.searchbox span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.bar-link{height:44px;padding:0 6px;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;white-space:nowrap}
.bar-link.hdr-login{padding:0 18px;border-radius:22px;background:rgba(255,255,255,.12)}
.bar-link.hdr-login:hover{background:rgba(255,255,255,.18)}
.hdr-search,.hdr-menu{display:none}
.menu-wrap,.bell-wrap{position:relative}
.user-pill{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 6px;border-radius:22px;background:var(--card);border:1px solid var(--line);font-size:14px;font-weight:600}
.user-pill:hover{background:#2A2B33}
.badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.dd{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 16px 48px rgba(0,0,0,.6);padding:8px;z-index:30}
.dd a,.dd button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:500;text-align:left}
.dd a:hover,.dd button:hover{background:var(--hover)}
.dd hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.dd .dd-me{padding:10px 12px;min-height:60px}.dd-me span{display:flex;flex-direction:column;min-width:0}.dd-me small{color:var(--muted);font-size:13px}
.notif-dd{width:380px;padding:0}
.dd-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.notif-list{max-height:420px;overflow:auto}
.notif-list a{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;min-height:0;border-radius:0;font-size:14px;line-height:1.4}
.notif-list a.unread{background:var(--red-soft)}.notif-list time{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dd-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px}
dialog.sheet-full .modal-body{display:flex;flex-direction:column;gap:4px}
.sheet-me{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-l);background:var(--card-2)}
.sheet-me span{display:flex;flex-direction:column;flex:1;min-width:0}.sheet-me small{color:var(--muted)}
.sheet-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin:16px 0 4px}
.sheet-links{display:flex;flex-direction:column}
.sheet-links a,.sheet-links button{display:flex;align-items:center;gap:14px;min-height:52px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.sheet-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sheet-out{margin-top:24px}

/* ───────────────────────────── dialogs */
dialog.modal{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-xl);padding:0;width:min(460px,calc(100vw - 32px));max-height:min(90vh,860px);overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.7)}
dialog.modal.wide{width:min(720px,calc(100vw - 32px))}
dialog.modal[open]{display:flex;flex-direction:column;overflow:hidden}   /* the card clips; only the body scrolls, so the scrollbar stays inside the rounded corners */
.modal-body{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#3A3B44 transparent}
dialog.modal::backdrop{background:rgba(0,0,0,.66);backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 12px 8px 22px;flex-shrink:0;background:var(--card);z-index:1}
.modal-head h2{font-size:20px;font-weight:700}
.modal-body{padding:8px 22px 22px}
.modal-sub{color:var(--text-3);font-size:14px;margin-bottom:16px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
/* Apple and Google sign-in buttons share Google's measurements (its button cannot be resized):
   40px tall, at most 400px wide, pill-shaped, white with a thin grey outline. */
.social-btn,.social-btn-g .g-ph{display:flex;align-items:center;justify-content:center;gap:10px;height:40px;border-radius:20px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-size:14px;font-weight:500;width:100%;max-width:400px;margin:0 auto 10px}
.social-btn:hover{background:#f7f8f8}
.ts-box{min-height:65px}   /* Cloudflare's human check in the sign-up form */
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.modal-foot .btn{height:46px}
.switch-line{text-align:center;font-size:14px;color:var(--text-3);margin-top:16px}
.switch-line a,.switch-line button{color:#fff;font-weight:700;text-decoration:underline}

/* ───────────────────────────── footer */
.foot{margin-top:80px;border-top:1px solid var(--line)}
.foot-top{display:flex;flex-wrap:wrap;gap:48px;padding-top:48px;padding-bottom:32px}
.foot-brand{flex:1 1 260px;display:flex;flex-direction:column;gap:12px}
.foot-brand img{height:44px;width:auto;align-self:flex-start}
.foot-brand p{font-size:14px;color:var(--muted);max-width:300px}.foot-attr{font-size:12px !important}
.foot-col{flex:0 1 180px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-col span{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.foot-col a{color:var(--text-3)}.foot-col a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:28px;font-size:13px;color:var(--muted);border-top:1px solid rgba(255,255,255,.05)}
.foot-social{display:flex;gap:16px}.foot-social a{color:var(--text-3)}.foot-social a:hover{color:#fff}

/* ───────────────────────────── pages */
/* shared: story cards, playlist rows, rails, tags */
.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;color:#FF4D57}
.eyebrow.light{color:rgba(255,255,255,.85)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.14)}
.tag-red{background:var(--red)}
.center{text-align:center;margin-top:24px}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,.2)}.btn.outline:hover{background:var(--hover)}
.story{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;min-height:260px;isolation:isolate;background:var(--card)}
.story-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.story:hover .story-bg{transform:scale(1.03)}
.story-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,12,16,.94),rgba(11,12,16,.6) 60%,rgba(11,12,16,.2))}
.story-body{display:flex;flex-direction:column;gap:6px;justify-content:flex-end;align-items:flex-start;min-height:inherit;padding:26px;max-width:58%}
.story-body small{font-size:11px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.75)}
.story-body b{font-size:clamp(24px,2.4vw,34px);line-height:1.02}
.story-body em{font-style:normal;font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.story-fan{position:absolute;right:4%;top:50%;width:40%;height:78%;transform:translateY(-50%)}
.story-fan img{position:absolute;width:42%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.9)}
.story-fan .fan-0{left:0;top:14%;transform:rotate(-9deg)}.story-fan .fan-1{left:29%;top:0;z-index:1}.story-fan .fan-2{right:0;top:14%;transform:rotate(9deg)}
.story-big{min-height:380px}.story-big .story-body b{font-size:clamp(34px,4vw,56px)}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.plc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plc{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);transition:background .15s}
.plc:hover{background:#262731}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;width:72px;height:72px;border-radius:var(--r-s);overflow:hidden;flex-shrink:0;background:var(--bg)}
.mosaic img,.mosaic span{width:100%;height:100%;object-fit:cover;background:#2A2B33}
.plc-text{flex:1;min-width:0;display:flex;flex-direction:column}
.plc-text b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-text small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc>.ic{color:var(--muted)}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail li{flex:0 0 clamp(140px,14vw,200px);scroll-snap-align:start}
.rail a{display:flex;flex-direction:column;gap:2px}
.rail .poster{margin-bottom:8px}
.rail b{font-size:15px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rail small{font-size:13px;color:var(--muted)}
.rail-nav{display:flex;gap:8px}.rail-nav .icon-btn{background:var(--card);width:40px;height:40px}

/* home */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 30%,rgba(17,18,23,.8) 50%,rgba(17,18,23,.4) 72%,rgba(17,18,23,.3)),linear-gradient(180deg,rgba(17,18,23,.6),rgba(17,18,23,0) 80px,rgba(17,18,23,0) calc(100% - 200px),var(--bg))}
.hero-wall{position:absolute;inset:-60px -40px;z-index:-2;display:flex;gap:14px;justify-content:flex-end;transform:rotate(-8deg);opacity:.6}
.wall-col{display:flex;flex-direction:column;gap:14px;flex:0 0 150px}
.wall-col img{width:150px;height:225px;border-radius:10px;object-fit:cover}
.wall-col.c1,.wall-col.c3{margin-top:-90px}
.hero-in{display:flex;align-items:center;gap:48px;padding-top:32px;padding-bottom:40px}   /* the next section adds its own 48px */
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero-title{font-size:clamp(52px,7.6vw,112px);line-height:.9;letter-spacing:-.005em}
.hero-copy p{max-width:520px;font-size:19px;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.hero-link{height:52px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.just-added{flex:0 1 400px;min-width:0;padding:18px 16px 10px;border-radius:var(--r-xl);background:rgba(30,31,38,.88);border:1px solid var(--line);backdrop-filter:blur(16px)}
.just-added .sec-head{margin-bottom:8px}.just-added .sec-head h2{font-size:17px}
.just-added a.row,.just-added li a{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px}
.just-added li a:hover{background:var(--hover)}
.just-added img{width:44px;height:66px;border-radius:6px;object-fit:cover;flex-shrink:0}
.ja-text{flex:1;min-width:0;display:flex;flex-direction:column}
.ja-text b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ja-text small{font-size:12px;color:var(--muted)}
.app-band{position:relative;overflow:hidden;display:flex;align-items:center;gap:32px;padding:48px;border-radius:28px;background:var(--red);isolation:isolate}
.app-band::after{content:"";position:absolute;right:-8%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.14);z-index:-1}
.app-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px}
.app-copy h2{font-size:clamp(34px,4.4vw,60px);line-height:.98}
.app-feats{display:flex;flex-direction:column;gap:14px;max-width:460px}
.app-feats li{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.4;color:rgba(255,255,255,.88)}
.app-feats li>.ic{width:40px;height:40px;padding:9px;border-radius:12px;background:#0B0C10;color:#fff}
.app-feats b{display:block;font-size:16px;color:#fff}
.store-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.store{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-radius:12px;background:#000;border:1px solid rgba(255,255,255,.25);font-size:17px;font-weight:700;line-height:1.1}
.store span{display:flex;flex-direction:column}.store small{font-size:10px;font-weight:500;opacity:.8}
.app-phones{position:relative;flex:0 0 360px;height:430px}
.phone{position:absolute;width:210px;height:420px;border-radius:34px;background:#0B0C10;border:6px solid #1c1d23;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.phone.back{left:0;top:30px;transform:rotate(-7deg);padding:22px 14px;display:flex;flex-direction:column;gap:10px;color:#fff}
.phone.back b{font-size:30px;line-height:.95}.phone.back span{font-size:11px;color:var(--text-3)}
.phone.back i{font-style:normal;font-size:13px;font-weight:700;padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.phone.front{right:0;top:0;transform:rotate(5deg)}
.phone.front img{width:100%;height:100%;object-fit:cover}
.phone.front b{position:absolute;left:14px;right:14px;bottom:70px;font-size:16px;text-shadow:0 2px 8px #000}
.phone .swipe{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:28px}
.swipe i{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);border:2px solid}
.swipe .x{color:var(--red)}.swipe .ok{color:var(--green)}

/* title page (movie, show, random pick, external) */
.narrow{max-width:760px}
.notice{display:flex;gap:10px;align-items:center;margin-top:16px;padding:12px 16px;border-radius:var(--r-m);background:rgba(255,197,61,.1);border:1px solid rgba(255,197,61,.3);font-size:14px;color:var(--text-2)}
.t-hero{position:relative;isolation:isolate;overflow:hidden}
.t-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top;z-index:-2}
.t-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 18%,rgba(17,18,23,.78) 44%,rgba(17,18,23,.15) 80%),linear-gradient(180deg,rgba(17,18,23,.35),transparent 30%,transparent 62%,var(--bg))}
.t-hero-in{display:flex;gap:40px;align-items:flex-end;padding-top:64px;padding-bottom:48px}
.t-poster{flex:0 0 264px;width:264px;height:396px;object-fit:cover;border-radius:var(--r-l);box-shadow:0 24px 60px rgba(0,0,0,.6);background:var(--card)}
.t-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.t-head{display:flex;flex-direction:column;gap:14px}
.t-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px;color:var(--text-2)}
.t-meta i{font-style:normal;opacity:.7}
.cert{padding:1px 7px;border:1.5px solid var(--muted);border-radius:5px;font-size:13px;font-weight:700;color:#fff}
.t-title{font-size:clamp(44px,6.6vw,96px);line-height:.92;overflow-wrap:anywhere}
.t-scores{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.score{height:56px;padding:0 16px;border-radius:10px;background:rgba(30,31,38,.9);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:1px}
.score b{font-size:18px;font-weight:700;line-height:20px}.score small{font-size:12px;color:var(--text-3)}
.t-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.t-actions .btn-lg{padding:0 22px 0 16px}
.btn-story{background:linear-gradient(135deg,#833AB4,#FD1D1D 55%,#FCB045);color:#fff}
.icon-only{width:52px;padding:0 !important}
.ext-notice{max-width:640px;box-sizing:border-box;padding:16px 18px;border-radius:16px;background:rgba(30,31,38,.9);border:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.ext-ic{width:40px;height:40px;border-radius:20px;background:rgba(108,180,255,.14);color:#8CC4FF;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ext-t{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}.ext-t b{font-size:15px;font-weight:700}.ext-t small{font-size:14px;line-height:1.45;color:#C8C8CE}
.ext-btn{height:44px;padding:0 18px 0 14px;border-radius:22px;background:#fff;color:#111217;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.ext-auth{display:flex;gap:8px}.ext-login,.ext-reg{height:44px;padding:0 18px;border-radius:22px;display:flex;align-items:center;font-size:15px;font-weight:600}.ext-login{background:rgba(255,255,255,.12)}.ext-reg{background:#E50914;font-weight:700}
.t-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-top:32px}
.t-main{display:flex;flex-direction:column;gap:36px;min-width:0}
.t-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.t-main h2,.t-side h2{font-size:20px;font-weight:700}
.t-over-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.t-phone-pill{display:none}
.overview{font-size:17px;line-height:1.7;color:var(--text-2);max-width:70ch}
.orig{margin-top:10px;font-size:14px;color:var(--muted)}
.crew{display:flex;gap:32px;flex-wrap:wrap}.crew b{display:block;font-size:15px}.crew small{color:var(--muted);font-size:13px}
.cast{display:flex;gap:18px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none}
.cast::-webkit-scrollbar{display:none}
.cast li{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.cast img,.cast-ph{width:86px;height:86px;border-radius:50%;object-fit:cover;margin-bottom:8px;font-size:28px}
.cast b{font-size:13px;font-weight:700}.cast small{font-size:12px;color:var(--muted)}
.trailer{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#000;margin-top:12px}
.trailer img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.trailer .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-44px 0 0 -34px;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center}
.trailer .play .ic{fill:currentColor;stroke:none}
.trailer b{position:absolute;left:0;right:0;top:50%;margin-top:42px;text-align:center;font-size:15px}
.trailer iframe{width:100%;height:100%;border:0;display:block}
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.review{background:var(--card);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:10px}
.review header{display:flex;align-items:center;gap:12px}.review header>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.review small{color:var(--muted);font-size:13px}.stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.review p{color:var(--text-2);font-size:15px;line-height:1.55}
.review p.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.review .link-btn{align-self:flex-start}
.pad{padding:20px}
.label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin:14px 0 8px}.label.gold{color:var(--gold);margin-top:0}
.providers{display:flex;flex-wrap:wrap;gap:10px}.providers img{width:auto;height:46px;max-width:140px;border-radius:10px;object-fit:contain;background:#2A2B33}
.sug-who{display:flex;align-items:center;gap:12px;margin-bottom:10px}.sug-who span{display:flex;flex-direction:column}.sug-who small{color:var(--muted)}
blockquote{margin:0 0 10px;color:var(--text-2);font-size:15px;line-height:1.55}
.outline-card{background:none;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.card .sec-head{margin-bottom:12px}.card .sec-head h2{font-size:18px}

/* text pages + 404 */
.tx-head{display:flex;flex-direction:column;gap:10px;max-width:760px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tx-title{font-size:clamp(40px,5vw,72px);line-height:.95}
.tx-cols{margin-top:8px}
.tx{max-width:760px;display:flex;flex-direction:column;gap:14px}
.tx section{display:flex;flex-direction:column;gap:14px}
.tx h2{margin-top:28px;font-size:22px;font-weight:700;scroll-margin-top:80px}
.tx h3{margin-top:12px;font-size:17px;font-weight:700}
.tx p,.tx li{font-size:17px;line-height:1.7;color:#D1D1D6}
.tx .lead{font-size:20px;color:#fff}
.tx ul{padding-left:22px;list-style:disc;display:flex;flex-direction:column;gap:8px}
.tx a{color:#fff;text-decoration:underline}
.tx strong{color:#fff}
.toc{padding:16px 10px 10px}
.toc h2{margin:0 10px 8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.toc a,.toc-m a{display:flex;align-items:center;min-height:36px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--text-3)}
.toc a:hover,.toc a.on{color:#fff;background:var(--red-soft)}
.others{display:flex;flex-direction:column;padding:6px 10px}
.others a{min-height:36px;display:flex;align-items:center;font-size:14px;color:var(--text-3)}.others a:hover{color:#fff}
.toc-m{display:none;margin-top:16px;background:var(--card);border-radius:var(--r-l)}
.toc-m summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;cursor:pointer;font-weight:700}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m[open] summary .ic{transform:rotate(180deg)}
.toc-m ol{padding:0 6px 8px}
.e404{max-width:520px;margin:12vh auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text-3)}
.e404 h1{font-size:28px;color:#fff}.e404-actions{display:flex;gap:10px;margin-top:8px}

/* browse + poster grids */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:20px 0 24px}
.sort{display:flex;align-items:center;gap:10px}
.sort select,.select{height:40px;padding:0 34px 0 14px;border-radius:var(--r-m);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A8' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:600;appearance:none;-webkit-appearance:none}
.grid-titles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px 16px}
.tcard{display:flex;flex-direction:column;gap:2px;min-width:0}
.tcard-img{position:relative;display:block;margin-bottom:8px}
.tcard-fp{position:absolute;right:8px;bottom:8px}
.tcard b{font-size:15px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard small{font-size:13px;color:var(--muted)}

/* advanced */
.hero-sm .hero-in{padding-top:48px;padding-bottom:56px}
.hero-sm .hero-copy{gap:14px}
.adv-title{font-size:clamp(46px,6.1vw,88px);line-height:.92}
.hero-sm .hero-copy p{font-size:17px}
.adv{display:flex;flex-direction:column;gap:16px;padding-bottom:40px}
.adv h2{font-size:20px;font-weight:700;margin-bottom:14px}
.adv-genre-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;margin-bottom:6px}
.adv-genre-head h2{margin:0}.adv-genre-head .toggle{min-height:44px;gap:12px}
.chip[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.segmented{display:flex;padding:4px;border-radius:14px;background:var(--bg);gap:4px}
.segmented button{flex:1;height:48px;border-radius:10px;font-weight:700;font-size:15px;color:var(--text-3)}
.segmented button[aria-pressed=true]{background:#3A3B44;color:#fff}
.adv-bar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-xl);background:rgba(30,31,38,.96);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.6);backdrop-filter:blur(12px)}
.adv-sum{flex:1;min-width:0;display:flex;flex-direction:column}
.adv-sum small{font-size:11px;letter-spacing:.08em;color:var(--muted);font-weight:700}
.adv-sum b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* curated lists index */
.lists-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-top:8px}
.lists-title{font-size:clamp(46px,6.1vw,88px);line-height:.92}
.search-form{display:flex;gap:10px;align-items:center;flex:0 1 460px;min-width:260px}
.input-icon{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line);color:var(--muted)}
.input-icon input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--text)}
.input-icon:focus-within{border-color:var(--red)}
.sub{font-size:14px;margin-top:2px}
.lcard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lcard-grid.after{margin-top:16px}
.lcard{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-xl);overflow:hidden;transition:transform .15s}
.lcard:hover{transform:translateY(-2px)}
.strip{display:flex;aspect-ratio:92*5/138;overflow:hidden;background:var(--bg)}
.strip img{flex:1 1 0;min-width:0;height:100%;object-fit:cover}
.lcard-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.lcard-body b{font-size:18px;font-weight:700;line-height:1.2}
.lcard-desc{font-size:14px;line-height:1.45;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard-body small{font-size:12px;color:var(--muted)}

/* curated list page */
.cl-hero{position:relative;isolation:isolate;overflow:hidden}
.cl-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cl-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,18,23,.55),rgba(17,18,23,.75) 60%,var(--bg))}
.cl-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:40px 0 40px;max-width:820px}
.cl-tags{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--text-2)}
.cl-title{font-size:clamp(42px,5.8vw,84px);line-height:.95;overflow-wrap:anywhere}
.cl-desc{font-size:18px;line-height:1.55;color:var(--text-2);max-width:64ch}
.cl-by{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2)}.cl-by b{color:#fff}.cl-by .dot{opacity:.6}
.cl-cols{padding-top:16px;padding-bottom:40px}
.cl-items{display:flex;flex-direction:column}
.cl-item{display:flex;gap:20px;align-items:flex-start;padding:28px 0;border-bottom:1px solid var(--line)}
.cl-item:first-child{padding-top:8px}
.cl-num{flex:0 0 64px;font-size:72px;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--red);text-align:right}
.cl-poster{flex:0 0 130px}
.cl-poster .poster{border-radius:var(--r-m)}
.cl-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.cl-item-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.cl-item-title{font-size:clamp(24px,2.4vw,34px);line-height:1.05}
.cl-item-title a:hover{color:#FF6B73}
.cl-meta{font-size:14px;color:var(--muted);margin-top:6px}
.cl-item-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.add-btn{background:var(--card);border:1px solid var(--line);width:44px;height:44px;border-radius:12px}
.cl-plot{font-size:16px;line-height:1.65;color:var(--text-2);max-width:70ch}
.cl-note{font-size:15px;color:var(--text-3);border-left:3px solid var(--red);padding-left:12px}
.side-h{font-size:18px;font-weight:700;margin-bottom:12px}
.stack.tight{gap:10px}
.pcard{padding:22px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.pcard-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);align-self:stretch;text-align:left}
.pcard-who{display:flex;flex-direction:column;align-items:center;gap:4px}
.pcard-who b{font-size:20px;margin-top:6px}.pcard-who small{color:var(--muted);font-size:14px}
.pcard-bio{font-size:14px;line-height:1.5;color:var(--text-2)}
.pcard-counts{display:flex;gap:28px;margin:6px 0}
.pcard-counts button{display:flex;flex-direction:column;align-items:center}
.pcard-counts b{font-size:20px}.pcard-counts small{font-size:13px;color:var(--muted)}
.pcard-actions{display:flex;gap:10px;align-self:stretch}.pcard-actions .btn{flex:1}

/* dialogs: auth, search, confirm */
.tabs{margin-bottom:16px}
.tabs button,.tabs a{height:40px;flex:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;font-size:15px;color:var(--text-3)}
.tabs [aria-selected=true]{background:#3A3B44;color:#fff}
.links-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-bottom:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-3);margin:6px 0 12px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--red);flex-shrink:0}
.check a{color:#fff;text-decoration:underline}
.field-note{min-height:0;margin:-8px 0 10px}.btn+.field-note{margin:12px 0 0}.field-note.ok{color:var(--green)}.field-note.bad{color:#FF6B73}
/* Google's own button (with "Continue as <name>" for people signed in to Google) is drawn by Google in a
   frame that arrives late. A look-alike (.g-ph) holds its place until the frame has loaded, then the real one shows. */
.social-btn-g{position:relative;width:100%;max-width:400px;height:40px;margin:0 auto 10px;border-radius:20px;overflow:hidden}
/* The page is dark (color-scheme: dark) and Google's frame is light: with different schemes Chrome paints the
   frame's background solid white (the white box around "Continue as ..."). Same scheme = see-through. */
.social-btn-g .g-real,.social-btn-g iframe{color-scheme:light}
.social-btn-g .g-ph{position:absolute;inset:0;margin:0;transition:opacity .15s}
.social-btn-g .g-real{position:relative;display:flex;justify-content:center;opacity:0;transition:opacity .15s}
.social-btn-g.ready .g-real{opacity:1}.social-btn-g.ready .g-ph{opacity:0;pointer-events:none}
.social-btn.is-busy,.btn.is-busy{opacity:.6;pointer-events:none}
dialog.narrow-modal{width:min(420px,calc(100vw - 32px))}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
dialog.search-modal{width:min(640px,calc(100vw - 32px));align-self:flex-start;margin-top:8vh;min-height:200px}
.search-top{margin-bottom:4px}
.search-results ul{display:flex;flex-direction:column}
.search-results li{display:flex;align-items:center;gap:10px;border-radius:12px}
.search-results li:hover{background:var(--hover)}
.srow{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px}
.srow img:not(.avatar),.srow .ph{width:40px;height:60px;border-radius:6px;object-fit:cover;background:#2A2B33;flex-shrink:0}
.srow-t{display:flex;flex-direction:column;min-width:0}.srow-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srow-t small{font-size:13px;color:var(--muted)}

/* dialogs: log, add to playlist, share, story */
dialog.log-modal{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
.log-modal .modal-head{position:absolute;top:24px;right:24px;padding:0;background:transparent;z-index:2}.log-modal .modal-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.log-modal .modal-head .icon-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08)}
.log-modal .modal-body{padding:24px;display:flex;flex-direction:column;gap:16px}.log-modal .modal-body>*{margin:0}
.log-head{display:flex;align-items:center;gap:14px;padding-right:52px}.log-head img{width:52px;height:78px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#2A2B33}
.log-head>span{display:flex;flex-direction:column;gap:3px;min-width:0}.log-head b{font-size:20px;font-weight:700;line-height:1.2}.log-head small{color:var(--muted);font-size:13px}
#log-err:empty{display:none}
.log-head .log-kicker{font-size:13px;font-weight:700;letter-spacing:.06em;color:#FF4D57}
.log-row{display:flex;justify-content:space-between;align-items:baseline}.log-row .label{font-size:13px;font-weight:600;color:var(--text-3)}
#log-eps{display:flex;flex-direction:column;gap:10px}.label{display:block}
.log-modal .label{font-size:13px;font-weight:600;color:var(--text-3)}
#log-season-sel{width:100%;height:46px;border-radius:12px;font-size:15px}
/* every drop-down: our own chevron with room around it, dark menu */
.field select,#log-season-sel,.select,.sort select{appearance:none;-webkit-appearance:none;padding-right:42px;color-scheme:dark;cursor:pointer;
  background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
.field select,#log-season-sel{border:1px solid var(--line);color:var(--text)}
select option{background:#1E1F26;color:#fff}
@supports (appearance:base-select){
  .field select,#log-season-sel,.select,.sort select,::picker(select){appearance:base-select}
  .field select,#log-season-sel,.select,.sort select{display:flex;align-items:center}
  select::picker-icon{display:none}
  ::picker(select){background:#1E1F26;border:1px solid var(--line);border-radius:12px;padding:6px;margin-top:6px;max-height:min(320px,50vh);scrollbar-width:thin;scrollbar-color:#3A3B44 transparent;box-shadow:0 16px 48px rgba(0,0,0,.6)}
  select option{padding:10px 12px;border-radius:8px;font-size:15px}
  select option:hover,select option:checked{background:#3A3B44}
  select option::checkmark{display:none}
}
.segmented.seasons{display:flex;gap:2px;padding:3px;border-radius:12px;overflow-x:auto;scrollbar-width:none}.segmented.seasons button{flex:1 0 auto;min-width:96px;height:36px;border-radius:9px;font-size:14px;font-weight:600;color:var(--text-3)}.segmented.seasons button.on{background:#3A3B44;color:#fff}
.ep-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ep{height:44px;border-radius:10px;background:#2A2B33;font-size:14px;font-weight:700;color:#fff}
.ep.on{background:var(--red)}
.stars-in{display:flex;gap:4px}
.star{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#3A3B44}
.star .ic{fill:currentColor;stroke:none}.star.on{color:var(--gold)}
.center-chips{justify-content:center;margin-bottom:8px}
#log-vibes .chip{height:38px;padding:0 12px;border-radius:19px;font-size:13px;font-weight:600;background:rgba(255,255,255,.06)}
#log-vibes .chip.on{background:rgba(229,9,20,.85);border-color:#E50914;color:#fff}
.add-new{display:flex;align-items:center;gap:14px;width:100%;padding:12px;border-radius:var(--r-m);background:var(--bg);border:1px dashed rgba(255,255,255,.2);text-align:left;margin-bottom:12px}
.add-new small{display:block;color:var(--muted);font-size:13px}.add-new-ic{width:44px;height:44px;border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:center}
.add-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.add-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;text-align:left;width:100%}
.add-row:hover:not(:disabled){background:var(--hover)}.add-row:disabled{opacity:.7;cursor:default}
.add-row img,.add-row .ph{width:40px;height:60px;border-radius:6px;object-fit:cover;background:#2A2B33;flex-shrink:0}
.added{margin-left:auto;font-size:13px;font-weight:700;color:var(--green)}
.copy-row{display:flex;gap:8px;margin-bottom:12px}.copy-row .input{flex:1;min-width:0}
.story-preview{display:flex;justify-content:center;margin-bottom:12px}
#story-canvas{width:min(240px,60vw);height:auto;aspect-ratio:9/16;border-radius:var(--r-l);background:#0B0C10;border:1px solid var(--line)}

/* playlist page */
.pl-title{font-size:clamp(30px,3.9vw,56px);font-weight:700;line-height:1.08;letter-spacing:-.02em;overflow-wrap:anywhere;outline:0;min-width:0}
.pl-title-edit{display:flex;align-items:center;gap:12px;max-width:100%}.pl-title-edit .ic{color:var(--text-3);flex-shrink:0}
.pl-title[contenteditable]:focus,.cl-desc[contenteditable]:focus{background:rgba(255,255,255,.06);border-radius:8px;box-shadow:0 0 0 2px var(--red)}
.cl-desc[contenteditable]:empty::before{content:attr(data-placeholder);color:var(--muted)}
.pl-desc-edit{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:64ch}
.cl-by a:hover{text-decoration:underline}
.pl-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pl-bar .btn.lg{height:52px;border-radius:26px;padding:0 22px}
[data-pl-act][aria-pressed=true]{background:var(--red-soft);box-shadow:inset 0 0 0 1.5px var(--red)}
.pl-cols{padding-top:16px;padding-bottom:40px}
.pl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 6px;font-size:14px}
.pl-items{display:flex;flex-direction:column;margin-top:8px}
.pl-row{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);margin-bottom:10px}
.pl-row.dragging{opacity:.6;outline:2px solid var(--red)}
.pl-poster{flex:0 0 56px}.pl-poster .poster{border-radius:8px}
.pl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-body b{font-size:16px;font-weight:700}.pl-body small{font-size:13px;color:var(--muted)}
.pl-body a:hover b{color:#FF6B73}
.pl-plot{font-size:14px;line-height:1.45;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
.pl-act{display:flex;align-items:center;gap:8px;flex-shrink:0}
.grip{display:none;color:var(--muted);cursor:grab;touch-action:none;padding:6px 0}
.pl-items.editing .grip{display:block}
.pl-items.editing .add-btn,.pl-items.editing .fp{display:none}
.rm-btn{background:var(--red-soft);color:#FF6B73}
.pl-empty{list-style:none}
.owner-card{padding:6px 20px}
.owner-card .toggle+.toggle,.owner-card [data-community-row]{border-top:1px solid var(--line)}
.owner-card .toggle-text small{color:var(--muted)}
.owner-card [data-switch=status]:checked~* {}
.row-link{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;font-size:15px;font-weight:600;border-top:1px solid var(--line)}
.row-link .ic:last-child{margin-left:auto;color:var(--muted)}
.danger-link{display:flex;align-items:center;gap:10px;color:#FF6B73;font-weight:600;padding:10px 6px}
.mates li a{display:flex;align-items:center;gap:10px;padding:6px 0}.mates span{display:flex;flex-direction:column}.mates small{color:var(--muted);font-size:12px}
.ts h2{font-size:20px;font-weight:700;margin-bottom:12px}
.ts .chips{margin:12px 0 4px}.ts .chip{height:36px;font-size:13px}
.ts-trend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ts-results{margin-top:6px}.ts-results:empty{display:none}
.ts-results>ul:not(.tgrid){display:flex;flex-direction:column}.ts-results>ul:not(.tgrid)>li{display:flex;align-items:center;gap:10px;border-radius:12px}.ts-results>ul:not(.tgrid)>li:hover{background:var(--hover)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin-top:8px}
.side .tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.side .tinfo b{font-size:12px}.side .tinfo small{font-size:11px}
.side .tp-btn{height:28px;padding:0 12px;font-size:12px;bottom:6px}
.tscard{display:flex;flex-direction:column;gap:8px;min-width:0}
.tposter{position:relative;border-radius:10px;overflow:hidden;background:#2A2B33}.tposter>a{display:block}
.tposter img,.tposter .ph{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:#2A2B33}
.tp-btn{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:34px;padding:0 16px;border-radius:17px;background:var(--red);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .15s;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.tposter:hover .tp-btn,.tp-btn:focus-visible{opacity:1}.tposter:hover img{filter:brightness(.6)}
@media (hover:none){.tp-btn{opacity:1}}
.tinfo{display:flex;flex-direction:column;gap:2px;min-width:0}.tinfo b{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tinfo small{font-size:12px;color:var(--muted)}
.info-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;font-size:14px;color:var(--text-2);margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.info-box ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.mate-list{display:flex;flex-direction:column;gap:4px;margin-top:12px}.mate-list li{display:flex;align-items:center;gap:12px;padding:8px 0}
.mate-list .srow-t{flex:1}.mate-found{margin-top:6px}.mate-hit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}

.cl-desc.clamp-desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}

/* my playlists */
.mp-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.mp-top .input-icon{flex:1 1 280px}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.mp-card{display:block;position:relative;background:var(--card);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line)}
.mp-strip{aspect-ratio:92*4/138}.mp-strip span{flex:1 1 0;background:#2A2B33}
.mp-num{position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--red);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mp-tools{position:absolute;right:8px;top:8px;display:flex;gap:6px}
.mp-tools .icon-btn{width:40px;height:40px;background:rgba(11,12,16,.75);backdrop-filter:blur(6px)}
.mp-tools .icon-btn.on{background:var(--red)}
.mp-body{display:flex;flex-direction:column;gap:2px;padding:12px 16px 16px}.mp-body b{font-size:17px;font-weight:700}.mp-body small{font-size:13px;color:var(--muted)}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.1);margin-left:4px}
.pill.pub{background:rgba(76,175,80,.18);color:var(--green)}.by{color:#FF6B73;font-weight:600}

/* dashboard, rows, trophies */
.welcome{margin:-12px 0 20px;font-size:17px}
.pad{padding:20px}.card .center{margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-radius:var(--r-l);padding:16px 8px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;border-left:1px solid var(--line)}.stat:first-child{border:0}
a.stat{color:inherit;border-radius:12px;transition:background .15s}a.stat:hover{background:var(--hover)}
.stat b{font-size:24px;font-weight:700;display:flex;align-items:center;gap:4px}.stat small{font-size:12px;color:var(--muted);text-align:center}.flame{color:#FF9500}
.feed-mini,.diary-list,.people{display:flex;flex-direction:column}
.feed-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.feed-row:first-child{border:0;padding-top:0}
.feed-row p{font-size:14px}.feed-row small{font-size:12px;color:var(--muted)}.feed-row b{font-weight:700}
.stars{color:var(--gold);letter-spacing:1px}
.diary{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.diary:first-child{border:0;padding-top:0}
.diary img{width:44px;height:66px;border-radius:6px;object-fit:cover;background:#2A2B33}
.diary-body{display:flex;flex-direction:column;gap:2px;min-width:0}.diary-body b{font-size:15px}.diary-body small{font-size:13px;color:var(--muted)}
.vibes{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.vibe{font-size:12px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--text-2)}
.badges{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.badge-i{flex:0 0 72px}.badge-i img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.badge-i.lock img{filter:grayscale(1);opacity:.35}.badge-i.got img{box-shadow:0 0 0 2px var(--gold)}
.trophies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.trophies li{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--bg)}.trophies img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.trophies .lock img{filter:grayscale(1);opacity:.4}.trophies span{display:flex;flex-direction:column;min-width:0}.trophies b{font-size:14px}.trophies small{font-size:12px;color:var(--muted)}
.sugg-list{display:flex;flex-direction:column}.sugg-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.sugg-list li:first-child{border:0;padding-top:0}
.sugg-list b{font-size:15px}.sugg-list small{display:block;font-size:13px;color:var(--muted)}.sugg-list em{display:block;font-size:13px;color:var(--text-3);margin-top:2px}.ok{color:var(--green)}
.status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:10px;height:fit-content;white-space:nowrap}
.status.approved{background:rgba(34,197,94,.12);color:#22c55e}.status.denied{background:rgba(239,68,68,.12);color:#ef4444}.status.pending{background:rgba(245,197,24,.12);color:#f5c518}
.people li{display:flex;align-items:center;gap:10px;border-radius:12px}
.side.first-on-phone .pcard{align-self:stretch}

/* friends activity */
.day{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin:24px 0 10px}
.feed-cards{display:flex;flex-direction:column;gap:10px}
.feed-card{display:flex;gap:14px;padding:16px;background:var(--card);border-radius:var(--r-l);border:1px solid var(--line)}
.fc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.fc-body p{font-size:14px;color:var(--text-2)}.fc-body p b{color:#fff}.fc-body time{float:right;color:var(--muted);font-size:12px}
.fc-title{display:flex;gap:12px;align-items:flex-start}.fc-title img{width:56px;height:84px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#2A2B33}
.fc-title>span{display:flex;flex-direction:column;gap:4px}.fc-title b{font-size:16px}
#wtf-found{margin:6px 0}

/* profile */
.right-link{text-align:right;margin:-8px 0 0;font-size:14px;font-weight:600}.right-link a{color:#FF4D57;display:inline-flex;align-items:center;gap:4px}
.pcard-avatar{width:88px;height:88px}
.pcard-soc{display:flex;gap:14px;color:var(--text-3)}.pcard-soc a:hover{color:#fff}
.pcard-actions .icon-btn.btn-ghost{background:rgba(255,255,255,.12);width:44px;height:44px;flex:0 0 44px}
.pcard-actions .menu-wrap{display:inline-flex}.menu-wrap .dd{right:0;width:220px}
.dd .danger{color:#FF6B73}
.pin-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:160px;border:1.5px dashed rgba(255,255,255,.2);border-radius:var(--r-xl);color:var(--text-3)}
.pin-slot:hover{border-color:var(--red);color:#fff}.pin-slot small{font-size:12px;color:var(--muted)}
.pinned-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.bars{display:flex;flex-direction:column;gap:10px}.bars li{display:grid;grid-template-columns:120px 1fr 44px;gap:12px;align-items:center;font-size:14px}
.bars i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--red) var(--w),rgba(255,255,255,.08) var(--w))}.bars b{text-align:right}
.decades{margin-top:14px}.decades b{margin-left:4px;color:var(--text-3)}
.pcard-edit{margin-top:0}.edit-photo{display:flex;gap:14px;align-items:center;margin-bottom:14px}.edit-photo>div{display:flex;gap:14px;align-items:center}.edit-avatar{width:72px;height:72px}
.crop-stage{display:flex;justify-content:center;margin-bottom:12px}#crop-canvas{width:min(320px,70vw);aspect-ratio:1;border-radius:50%;background:#111217;touch-action:none;cursor:grab;border:1px solid var(--line)}
.check.radio{margin:0;padding:10px 0;border-bottom:1px solid var(--line);color:var(--text)}.check.radio input{border-radius:50%}

/* history */
.hist-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.datepick{position:relative}.datepick summary{list-style:none;background:var(--card);border:1px solid var(--line);width:40px;height:40px;cursor:pointer}
.datepick summary::-webkit-details-marker{display:none}.datepick[open] summary{background:var(--red);border-color:var(--red)}
.datepick-panel{left:0;right:auto;top:calc(100% + 6px);width:240px;max-height:340px;overflow:auto;display:flex;flex-direction:column}
.datepick-panel a{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;font-size:14px}
.datepick-panel a:hover,.datepick-panel a.on{background:var(--hover);color:#fff}.datepick-panel .year{font-weight:700;margin-top:6px}.datepick-panel .month{padding-left:24px;color:var(--text-2)}.datepick-panel small{color:var(--muted)}
.wh-rating{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.75);color:var(--gold);font-size:12px;font-weight:700;padding:3px 7px;border-radius:6px}
.wh-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px}

/* recap */
.period{margin:0;background:#1E1F26;padding:3px;border-radius:12px;gap:2px}.period a{height:36px;border-radius:9px;font-size:15px;font-weight:600}
.period-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;text-align:center}.period-nav>div{display:flex;flex-direction:column;gap:2px}.period-nav b{font-size:16px;font-weight:600}.period-nav small{font-size:13px;color:#8E8E93}
.period-nav .icon-btn{width:44px;height:44px;background:transparent}.period-nav .icon-btn.disabled{opacity:.3}
.rc-hero{position:relative;height:216px;border-radius:22px;overflow:hidden;background:#1E1F26;isolation:isolate}
.rc-posters{position:absolute;right:-10px;top:18px;display:flex;gap:8px;transform:rotate(-6deg);z-index:-2}.rc-posters img{width:92px;height:136px;border-radius:10px;object-fit:cover}.rc-posters img:nth-child(2){margin-top:22px}
.rc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1E1F26 38%,rgba(30,31,38,.55) 70%,rgba(30,31,38,.2));z-index:-1}
.rc-hero-in{height:100%;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.rc-hero-t{display:flex;flex-direction:column;gap:6px;max-width:220px}.rc-kick{font-size:12px;font-weight:700;letter-spacing:.08em;color:#FF4D57}.rc-hero-t b{font-size:24px;line-height:1.15;font-weight:700}.rc-hero-t small{font-size:14px;color:#A1A1A8}
.rc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rc-play{height:44px;padding:0 20px 0 14px;border-radius:22px;background:#fff;color:#111217;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.rc-save{height:44px;padding:0 16px;border-radius:22px;background:rgba(255,255,255,.12);color:#fff;font-size:15px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{background:#1E1F26;border-radius:18px;padding:14px;min-height:104px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;min-width:0;border:1px solid transparent}
.tile small{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600}.tile b{font-size:26px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile b.vibe-v{font-size:22px}.tile span{font-size:13px;color:#8E8E93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .red{color:#FF4D57}.tile .blue{color:#6CB4FF}.tile .purple{color:#C084FC}.tile.streak small{color:#FFA94D;font-weight:700}
.tile.streak.bronze{background:linear-gradient(135deg,#7E5D45,#A47F62 55%,#86654C);border-color:#B58E70;color:#1A0F07}
.tile.streak.silver{background:linear-gradient(135deg,#8F969E,#B8BEC5 55%,#9AA1A8);border-color:#C9CED4;color:#14171B}
.tile.streak.gold{background:linear-gradient(135deg,#9C8148,#C4AA6E 55%,#A68B52);border-color:#CDB781;color:#1C1507}
.tile.streak.bronze small,.tile.streak.silver small,.tile.streak.gold small{color:inherit}.tile.streak.bronze span,.tile.streak.silver span,.tile.streak.gold span{color:rgba(0,0,0,.6)}
.chartc{background:#1E1F26;border-radius:18px;padding:16px}.chart-h{display:flex;justify-content:space-between;align-items:baseline}.chart-h b{font-size:17px;font-weight:700}.chart-h span{font-size:13px;color:#8E8E93}
.chart-v{display:block;font-size:24px;font-weight:700;margin-top:2px}
.chart{position:relative;display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:14px;border-bottom:1px solid #2C2C2E}.chart .avgline{position:absolute;left:0;right:0;border-top:1px dashed #6B6C74}
.cb{flex:1;border-radius:5px 5px 2px 2px;background:#4A4B53}.cb.now{background:#E50914}
.chart-l{display:flex;gap:10px;margin-top:8px}.chart-l span{flex:1;text-align:center;font-size:12px;color:#8E8E93}.chart-l span.now{color:#fff}
.tlist{background:#1E1F26;border-radius:18px;padding:18px 16px 10px;display:flex;flex-direction:column}.tlist h2{font-size:17px;font-weight:700;margin-bottom:8px}
.tlist li+li a{border-top:1px solid rgba(255,255,255,.06)}.tlist li a{display:flex;align-items:center;gap:12px;padding:8px 0}
.tlist li i{width:18px;font-style:normal;font-size:15px;font-weight:700;color:#8E8E93;text-align:center}.tlist li img{width:40px;height:60px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#2A2B33}
.tlist li b{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tlist li em{font-style:normal;font-size:13px;font-weight:700;color:#FFC53D;flex-shrink:0}
.tlist.quick{padding-bottom:18px;gap:12px}.tlist.quick h2{margin:0}.tlist.quick>div{display:flex;flex-wrap:wrap;gap:8px}.tlist.quick a{height:36px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.08);display:flex;align-items:center;font-size:13px;font-weight:600}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.diary-act{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted)}
.diary{align-items:center}

/* settings */
.st{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
.st-list{display:flex;flex-direction:column}.st-list .sheet-label{margin:20px 0 8px}
.st-me{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-l);background:var(--red-soft);border:1px solid rgba(229,9,20,.25)}
.st-me>span:not(.avatar){display:flex;flex-direction:column;flex:1;min-width:0}.st-me small{color:var(--muted)}.st-me em{font-style:normal;color:#FF6B73;font-size:13px;font-weight:600}
.st-group{background:var(--card);border-radius:var(--r-l);overflow:hidden}
.st-group>a,.st-group>.st-row{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 16px;border-top:1px solid var(--line);width:100%;font-size:15px}
.st-group>a:first-child,.st-group>.st-row:first-child{border-top:0}
.st-group>a>span,.st-row>span{flex:1;text-align:left}.st-group small{color:var(--muted);font-size:13px}.st-group a .ic:last-child{color:var(--muted)}
.st-group>a.on,.st-me.on{background:var(--hover)}
.st-switches{padding:0 16px}.st-switches .toggle{border-top:1px solid var(--line)}.st-switches .toggle:first-child{border-top:0}
.danger-row{color:#FF6B73}
.st-pane{min-width:0}.pane{display:none}.pane.on{display:block}.pane h2{font-size:20px;font-weight:700;margin-bottom:6px}.pane .sub{margin-bottom:14px}
.st-back{display:none;align-items:center;gap:6px;margin-bottom:14px;font-weight:600;color:#FF6B73}
.ul{text-decoration:underline}

.auth-card{max-width:480px;margin:6vh auto}.ok-note{background:rgba(76,175,80,.12);border-color:rgba(76,175,80,.4)}

/* story / Play Recap overlay: cards are fixed 475x844 artboards scaled to the screen (copy of css/recap-story.css) */


.rs-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10500;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rs-overlay.d-none { display: none !important; }

.rs-stage {
    position: relative;
    flex: 0 0 auto;
    width: 475px;
    height: 844px;
    transform-origin: center center;
    --rs-tint: #fff;
    user-select: none;
    -webkit-user-select: none;
}
.rs-cards { position: absolute; left: 0; top: 0; width: 475px; height: 844px; }

.rs-slide { display: none; position: absolute; left: 0; top: 0; width: 475px; height: 844px; }
.rs-slide.active { display: block; }

.rs-card {
    position: relative;
    width: 475px;
    height: 844px;
    overflow: hidden;
    color: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    box-sizing: border-box;
}
.rs-card * { box-sizing: border-box; }
.rs-inner {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    padding: 14px 16px 24px;
    display: flex;
    flex-direction: column;
}
.rs-top { height: 53px; flex-shrink: 0; }
.rs-body { flex: 1; min-height: 0; position: relative; }
.rs-foot {
    height: 46px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.rs-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;                               /* measured on the app's exported image: its logo is about 5/6 of the 120 in the code */
    height: auto;
    opacity: .6;
    transform: translate(-50%, calc(-50% - 10px));
    pointer-events: none;
}
.rs-share, .rs-done {
    cursor: pointer;
    font-family: inherit;
}
.rs-share {
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 23px;
    font-size: 16px;
    font-weight: 800;
    position: relative;
    z-index: 3;
}

/* Progress bars + close, on the same artboard */
.rs-chrome { position: absolute; left: 0; top: 0; right: 0; height: 70px; pointer-events: none; z-index: 5; }
.rs-progress { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; gap: 4px; }
.rs-progress span {
    flex: 1; height: 3px; border-radius: 2px; overflow: hidden;
    background: var(--rs-tint); position: relative;
}
.rs-progress span::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: var(--rs-tint); opacity: 0;
}
.rs-progress span { background: color-mix(in srgb, var(--rs-tint) 35%, transparent); }
.rs-progress span i { display: block; height: 100%; width: 0; background: var(--rs-tint); }
.rs-close {
    position: absolute; right: 16px; top: 23px;
    width: 44px; height: 44px; border: 0; background: none;
    color: var(--rs-tint); font-size: 22px; cursor: pointer; pointer-events: auto;
}

/* Tap zones: left goes back, right goes forward; the bottom stays free for the buttons */
.rs-zone { position: absolute; top: 67px; bottom: 130px; width: 30%; z-index: 4; cursor: pointer; }
.rs-zone-prev { left: 0; }
.rs-zone-next { right: 0; }

/* Share choice sheet */
.rs-sheet-wrap {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 8;
    background: rgba(0, 0, 0, .55);
    display: flex; align-items: flex-end;
}
.rs-sheet-wrap.d-none { display: none !important; }
.rs-sheet {
    width: 100%; padding: 18px 16px 24px;
    background: #1E1F26; border-radius: 28px 28px 0 0;
    display: flex; flex-direction: column; gap: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.rs-sheet-title { color: #fff; font-size: 17px; font-weight: 700; padding: 0 4px 4px; }
.rs-sheet-row {
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 10px 14px; min-height: 64px; border: 0; border-radius: 14px;
    background: #2A2B33; color: #fff; cursor: pointer;
}
.rs-sheet-row b { display: block; font-size: 16px; font-weight: 600; }
.rs-sheet-row small { display: block; font-size: 13px; color: #8E8E93; }
.rs-sheet-icon {
    width: 40px; height: 40px; border-radius: 10px; background: #3A3B44; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.rs-sheet-ig { background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045); }
.rs-sheet-cancel { height: 52px; border: 0; background: none; color: #A1A1A8; font-size: 16px; font-weight: 600; cursor: pointer; }

.rs-toast {
    position: absolute; left: 24px; right: 24px; bottom: 92px; z-index: 9;
    padding: 12px 16px; border-radius: 14px; text-align: center;
    background: #2A2B33; color: #fff; font-size: 14px; font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.rs-toast.d-none { display: none !important; }

/* Single-card stories (movie / show / playlist): no progress bars or tap zones */
.rs-single .rs-progress, .rs-single .rs-zone { display: none; }
.rs-close .ic,.rs-sheet-icon .ic{stroke:currentColor}


/* dashboard (matches the canvas) */
.ts-top{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.ts-top .input-icon{flex:1 1 260px;min-width:0}.ts-top .segmented{flex:0 1 240px;height:48px;padding:3px;gap:2px;background:var(--bg)}.ts-top .segmented button{height:auto;border-radius:9px;font-size:14px;font-weight:600}
.ts-trend .btn{border-radius:20px;height:40px;padding:0 14px;font-size:14px;border:1px solid rgba(255,255,255,.1);background:transparent}
.dsec{display:flex;flex-direction:column;gap:10px}.dsec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 0}
.dsec-head h2{font-size:20px;font-weight:700}.dsec-head h2 small{font-size:15px;font-weight:600;color:var(--muted)}.dsec-head>a,.dsec-head>.link-btn{font-size:14px;font-weight:600;color:#FF4D57}
.dsec-head .btn{height:40px;padding:0 14px 0 10px;border-radius:20px;font-size:14px;gap:6px}
.dcard{background:var(--card);border-radius:16px;overflow:hidden}
.lrows li+li .lrow{border-top:1px solid var(--line)}.lrow{display:flex;align-items:center;gap:12px;padding:10px 14px}
.lrow img{width:44px;height:64px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#2A2B33}
.lrow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.lrow-h{display:flex;align-items:center;gap:8px;min-width:0}.lrow-h b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow time{font-size:13px;color:var(--muted);flex-shrink:0}
.tag{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0;background:rgba(255,255,255,.1)}.tag.tv{background:rgba(59,130,246,.18);color:#6aa8ff}.tag.movie{background:rgba(229,9,20,.18);color:#FF6B73}
.tag.pub,.tag.priv{border-radius:6px;padding:3px 8px;letter-spacing:.05em;font-weight:700}.tag.pub{background:rgba(76,175,80,.18);color:var(--green)}.tag.priv{background:rgba(255,255,255,.1);color:var(--muted)}
.dbadges{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:16px 10px}
.dbadge{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;line-height:1.25}.dbadge.lock{color:var(--muted)}
.dbadge-img{position:relative;width:72px;height:72px}.dbadge-img img{width:72px;height:72px;border-radius:50%;object-fit:cover}.dbadge.lock img{filter:grayscale(1);opacity:.35}.dbadge.got img{box-shadow:0 0 0 2px var(--gold)}
.dbadge-img .ic{position:absolute;inset:0;margin:auto;color:#fff}
.dpl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}
.dpl-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--card)}.dpl-card .strip{aspect-ratio:auto;height:150px;gap:2px;background:var(--bg)}.dpl-card .strip span{flex:1 1 0;background:#2A2B33}
.dpl-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 14px}.dpl-body>span{display:flex;flex-direction:column;gap:3px;min-width:0}.dpl-body b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dpl-body small{font-size:13px;color:var(--muted)}
.dsec .sugg-list li{padding:14px 16px}.dsec .sugg-list li:first-child{padding-top:14px}.dsec .status{border-radius:999px}
.dcard .empty{padding:24px 16px}
.side-more{display:block;padding:10px 0 4px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:#FF4D57}
@media (max-width:900px){.dbadges{grid-template-columns:repeat(4,minmax(0,1fr))}.dbadge:nth-child(n+5){display:none}}
.av-dot{position:relative;display:inline-flex}.av-dot::after{content:'';position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#4CAF50;border:3px solid var(--card)}
/* My Recap diary (matches the canvas) */
.dhead{padding:26px 4px 2px}.dhead h2{font-size:22px;font-weight:700}
.dday{display:flex;flex-direction:column}.dlabel{margin:12px 4px 8px;font-size:13px;font-weight:600;letter-spacing:.06em;color:#8E8E93}
.drow{display:flex;align-items:center;gap:12px;padding:10px 14px}.drow+.drow{border-top:.5px solid #2C2C2E}
.drow-img{flex-shrink:0}.drow-img img{width:44px;height:64px;border-radius:6px;object-fit:cover;display:block;background:#2A2B33}
.drow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.drow-t b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drow-t small{font-size:13px;color:#8E8E93}
.drow-v{display:flex;gap:6px;align-items:center;min-width:0}.drow-v .stars{font-size:12px;letter-spacing:1px;color:#FFC53D}
.vpill{font-size:12px;color:#FF8A90;background:#2A1416;padding:2px 8px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dacts{display:flex;gap:8px;flex-shrink:0}.dbtn{width:36px;height:36px;border-radius:9px;background:#2A2B33;color:#C8C8CE;display:flex;align-items:center;justify-content:center}
.dbtn.dstory{background:linear-gradient(135deg,#833AB4,#FD1D1D 55%,#FCB045);color:#fff}.dbtn.is-busy{opacity:.6}
/* My Playlists (matches the canvas) */
.my-playlists .wrap.page{display:flex;flex-direction:column;gap:28px}
.mp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}.mp-head h1{font-size:32px;font-weight:700;letter-spacing:-.01em}
.mp-bar{display:flex;gap:10px;flex:0 1 440px;min-width:0}
.mp-bar .input-icon{flex:1;min-width:0;height:44px;background:#1E1F26;border:1px solid rgba(255,255,255,.08);border-radius:12px}.mp-bar .input-icon input{font-size:15px}
.mp-new{height:44px;padding:0 16px 0 12px;border-radius:22px;background:var(--red);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px;flex-shrink:0}
.mp-sec{display:flex;flex-direction:column;gap:12px}.mp-sec-h{display:flex;flex-direction:column;gap:4px}.mp-sec-h h2{font-size:20px;font-weight:700}.mp-sec-h h2 span{font-size:15px;font-weight:600;color:#8E8E93}.mp-sec-h p{font-size:14px;color:#A1A1A8}
.my-playlists .mp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.my-playlists .mp-card{position:relative;display:flex;flex-direction:column;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0;overflow:visible}
.my-playlists .mp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;height:170px;aspect-ratio:auto;border-radius:14px;overflow:hidden;background:#111217}
.my-playlists .mp-strip img{width:100%;height:170px;object-fit:cover;display:block}.my-playlists .mp-strip span{background:#2A2B33}
.my-playlists .mp-num{position:absolute;left:20px;top:20px;width:26px;height:26px;border-radius:13px;background:#E50914;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.mp-tools-b{position:absolute;right:20px;top:20px;display:flex;gap:6px}
.mp-btn{width:36px;height:36px;border-radius:8px;background:rgba(17,18,23,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff}.mp-btn.on{background:rgba(229,9,20,.9)}.mp-btn.del{color:#FF6B73}
.my-playlists .mp-body{padding:10px 2px 2px;display:flex;flex-direction:column;gap:3px;min-width:0}.my-playlists .mp-body b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.5)}.mp-meta .tag{border-radius:6px;padding:2px 7px;font-weight:700}.mp-meta .tag.pub{background:rgba(76,175,80,.16);color:#6FCF73}.mp-meta .tag.priv{background:rgba(255,255,255,.1);color:#C8C8CE}
.mp-by{font-size:12px;font-weight:500;color:#E50914}
.mp-slot{min-height:250px;border-radius:16px;border:1.5px dashed #4A4B53;background:transparent;color:#A1A1A8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600}
.mp-slot span{width:44px;height:44px;border-radius:22px;background:rgba(229,9,20,.14);display:flex;align-items:center;justify-content:center;color:#FF4D57}
@media (max-width:1000px){.my-playlists .mp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.my-playlists .mp-grid{grid-template-columns:minmax(0,1fr)}.mp-bar{flex-basis:100%}}
/* New playlist dialog (matches the canvas) */
dialog.create-modal{width:min(480px,calc(100vw - 32px))}
.create-modal .modal-head{padding:24px 24px 0}.create-modal .modal-head h2{font-size:22px;font-weight:700}.create-modal .modal-head .icon-btn{width:40px;height:40px;background:rgba(255,255,255,.08)}
.create-modal .modal-body{padding:16px 24px 24px}.create-modal form{display:flex;flex-direction:column;gap:16px}
.create-modal .field{margin:0;gap:6px}.create-modal .field label{font-size:13px;font-weight:600;color:#A1A1A8}
.create-modal .field input,.create-modal .field textarea{width:100%;height:46px;min-height:0;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#111217;font-size:15px}
.create-modal .field textarea{height:auto;padding:10px 12px;resize:none}
.create-modal .toggle{padding:14px;border-radius:14px;background:rgba(0,0,0,.4);border:1px solid rgba(229,9,20,.35);min-height:0;gap:12px}
.create-modal .toggle-text b{font-size:15px;font-weight:700}.create-modal .toggle-text small{font-size:12px;color:rgba(255,255,255,.55)}
.create-modal .toggle .knob::after{top:3px;left:3px;width:25px;height:25px}.create-modal .toggle input:checked+.knob::after{transform:translateX(20px)}
.create-modal .btn-lg{height:50px;border-radius:14px;font-size:16px;font-weight:600}.create-modal .form-err{margin:0}.create-modal .form-err:empty{display:none}
/* Add to playlist / pin picker dialogs (match the canvas) */
.modal-head .modal-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.modal-hsub{font-size:14px;color:#A1A1A8;line-height:1.35}
.modal-lead{width:44px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0;margin-right:14px;background:#2A2B33}
dialog.add-modal{width:min(480px,calc(100vw - 32px))}dialog.pin-modal{width:min(440px,calc(100vw - 32px))}
.add-modal .modal-head,.pin-modal .modal-head{padding:24px 24px 0;align-items:flex-start;gap:12px}.add-modal .modal-head{align-items:center;gap:0}
.add-modal .modal-head h2{font-size:20px;font-weight:700}.pin-modal .modal-head h2{font-size:22px;font-weight:700}
.add-modal .modal-head .icon-btn,.pin-modal .modal-head .icon-btn{width:40px;height:40px;background:rgba(255,255,255,.08)}
.add-modal .modal-body,.pin-modal .modal-body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:10px}
.add-modal .add-new{display:flex;align-items:center;gap:12px;height:72px;margin:0;padding:8px 12px 8px 8px;border-radius:16px;background:transparent;border:1.5px dashed #4A4B53;width:100%;text-align:left}
.add-modal .add-new-ic{width:56px;height:56px;border-radius:12px;background:rgba(229,9,20,.14);color:#FF4D57;display:flex;align-items:center;justify-content:center}
.add-modal .add-new b{font-size:16px;font-weight:700}.add-modal .add-new small{font-size:13px;color:#8E8E93}
.add-modal .add-list,.pin-modal .add-list{display:flex;flex-direction:column;gap:10px;max-height:none;overflow:visible}
.add-modal .add-row{display:flex;align-items:center;gap:12px;height:72px;padding:8px 12px 8px 8px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);width:100%;text-align:left}
.add-modal .add-row:hover:not(:disabled){background:rgba(255,255,255,.07)}.add-modal .add-row:disabled{opacity:1;cursor:default}
.add-cover{width:56px;height:56px;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,27px);gap:2px;background:#111217;flex-shrink:0}
.add-cover img,.add-cover i{width:100%;height:27px;object-fit:cover;display:block;background:#2A2B33}
.add-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.add-t b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-t small{font-size:13px;color:#8E8E93}
.add-plus{width:36px;height:36px;border-radius:8px;background:#17181D;border:1px solid #5C5D66;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.add-plus.done{background:rgba(76,175,80,.16);border-color:transparent;color:#6FCF73}
.pin-modal .pin-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:rgba(255,255,255,.04);width:100%;text-align:left}.pin-modal .pin-row:hover{background:rgba(255,255,255,.07)}
.pin-row img,.pin-ph{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#2A2B33}
.pin-modal .add-t b{font-size:15px;font-weight:600}.pin-modal .add-t small{font-size:12px}.pin-ic{color:#FF4D57;flex-shrink:0}
/* ===== Dialogs: one look for all of them (the canvas "M" artboards) ===== */
dialog.modal{width:min(440px,calc(100vw - 32px));border-radius:20px;background:#1E1F26}
dialog.w420{width:min(420px,calc(100vw - 32px))}dialog.w460{width:min(460px,calc(100vw - 32px))}dialog.w480{width:min(480px,calc(100vw - 32px))}dialog.w520{width:min(520px,calc(100vw - 32px))}dialog.w720{width:min(720px,calc(100vw - 32px))}
dialog.modal .modal-head{padding:24px 24px 0;align-items:flex-start;gap:12px}
dialog.modal .modal-head h2{font-size:22px;font-weight:700}
dialog.modal .modal-head .icon-btn{width:40px;height:40px;border-radius:20px;background:rgba(255,255,255,.08)}
dialog.modal .modal-body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px}
dialog.modal .modal-body>*{margin-top:0;margin-bottom:0}
dialog.modal form{display:flex;flex-direction:column;gap:16px}
dialog.modal .modal-text{font-size:15px;line-height:1.55;color:#C8C8CE}
dialog.no-x .modal-head .icon-btn{display:none}
dialog.modal .field{margin:0;gap:6px}dialog.modal .field label{font-size:13px;font-weight:600;color:#A1A1A8}
dialog.modal .field input,dialog.modal .field textarea,dialog.modal .field select,dialog.modal .input{width:100%;height:46px;min-height:0;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#111217;font-size:15px;color:#fff}
dialog.modal .field textarea{height:auto;padding:10px 12px;resize:none}
dialog.modal .field input:focus,dialog.modal .field textarea:focus{border-color:var(--red)}
dialog.modal .btn-lg{height:50px;padding:0 24px;border-radius:14px;font-size:16px;font-weight:600}
dialog.modal .btn-block{width:100%}
dialog.modal .modal-foot{display:flex;gap:10px;justify-content:stretch;margin:0}
dialog.modal .modal-foot .btn{flex:1;height:50px;padding:0;border-radius:14px;font-size:16px;font-weight:600}
dialog.modal .modal-foot .btn-ghost{background:rgba(255,255,255,.1)}dialog.modal .modal-foot .btn-ghost:hover{background:rgba(255,255,255,.16)}
dialog.modal .btn.danger{background:#B3261E}
dialog.modal .form-err{margin:0}dialog.modal .form-err:empty{display:none}
dialog.modal .field-note{margin:-8px 0 0}dialog.modal .field-note:empty{display:none}
dialog.modal .check{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;line-height:1.4;color:#C8C8CE}dialog.modal .check a{color:#FF4D57;text-decoration:none}
dialog.modal .check.radio{min-height:48px;padding:0 14px;border-radius:12px;background:#262730;border:1.5px solid transparent;align-items:center;gap:12px;font-size:15px;color:#fff}
dialog.modal .check.radio:has(input:checked){border-color:#E50914}dialog.modal .check.radio input{width:18px;height:18px;margin:0}
dialog.modal #m-report .check.radio{margin:0}
dialog.modal .segmented,dialog.modal .tabs{background:#111217;padding:3px;gap:2px;border-radius:12px;margin:0}
dialog.modal .segmented button,dialog.modal .tabs button{height:38px;border-radius:9px;font-size:15px;font-weight:600;color:#A1A1A8}
dialog.modal .segmented button[aria-pressed=true],dialog.modal .tabs [aria-selected=true]{background:#3A3B44;color:#fff}
dialog.modal .segmented button.on{background:#3A3B44;color:#fff}
dialog.modal .or{margin:0;font-size:13px;color:#6B6C74}dialog.modal .or::before,dialog.modal .or::after{border-top:1px solid rgba(255,255,255,.1)}
dialog.modal .social-btn,dialog.modal .social-btn-g{margin:0 auto}
dialog.modal .links-row{margin:0;font-size:14px}dialog.modal .links-row .link-btn{font-size:14px}dialog.modal .links-row .link-btn:first-child{color:#FF4D57;font-weight:600}dialog.modal .links-row .link-btn+.link-btn{color:#A1A1A8;font-weight:400}
dialog.modal .switch-line{margin:0;font-size:14px;color:#A1A1A8}dialog.modal .switch-line button,dialog.modal .switch-line a{color:#FF4D57;font-weight:600;text-decoration:none}
dialog.modal form+.switch-line,dialog.modal .switch-line:only-child{margin-top:0}
dialog.modal .info-box{background:#111217;border:0;border-radius:14px;padding:16px;gap:10px;font-size:14px;color:#C8C8CE;margin:0}dialog.modal .info-box>b{font-size:15px;font-weight:700;color:#fff}dialog.modal .info-box ul{gap:6px;line-height:1.45}
.note-box{padding:14px 16px;border-radius:14px;background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.3);font-size:14px;line-height:1.5;color:#E8D9A8}.note-box strong{color:#FFC53D}
dialog.modal .copy-row{margin:0;gap:8px}dialog.modal .copy-row .input{flex:1}
dialog.modal .copy-row .btn{height:46px;padding:0 16px;border-radius:12px;background:#fff;color:#111217;font-size:15px;font-weight:700}
dialog.modal .btn-story{height:50px;border-radius:14px;font-size:16px;font-weight:700}
dialog.modal .crop-stage{margin:0;height:300px;border-radius:14px;background:#000;align-items:center}
dialog.modal #crop-canvas{width:240px;border-radius:50%;border:0;box-shadow:0 0 0 2px #fff}
dialog.modal #crop-zoom{accent-color:#E50914;width:100%}
/* followers / suggestions rows */
dialog.modal .people{gap:12px}dialog.modal .people li{display:flex;align-items:center;gap:12px}dialog.modal .people .srow{padding:0}
dialog.modal .people .srow-t b{font-size:15px;font-weight:600}dialog.modal .people .srow-t small{font-size:13px;color:#8E8E93}
dialog.modal .people .btn.sm{height:36px;padding:0 14px;border-radius:18px;font-size:13px;font-weight:700}
dialog.modal .people .btn-ghost{background:rgba(255,255,255,.15)}
#m-suggest .ts-results li{display:flex;align-items:center;gap:12px;padding:0}#m-suggest .ts-results li:hover{background:transparent}
#m-suggest [data-sg]{height:36px;padding:0 14px;border-radius:18px;font-size:13px;font-weight:700;background:#E50914;color:#fff}
#m-suggest [data-sg]:disabled{background:rgba(76,175,80,.16);color:#6FCF73;opacity:1}
/* search */
dialog.search-modal .modal-head{display:none}dialog.search-modal .modal-body{padding:24px}
.search-top{display:flex;align-items:center;gap:10px}.search-top .input-icon{height:52px;padding:0 16px;border-radius:14px;background:#111217;border:1px solid rgba(255,255,255,.12);color:#A1A1A8}.search-top .input-icon:focus-within{border-color:#E50914}.search-top .input-icon input{font-size:17px}
.search-cancel{height:52px;padding:0 8px;color:#A1A1A8;font-size:15px;font-weight:600}
/* trophy room */
dialog.trophy-modal{width:min(760px,calc(100vw - 32px))}
#m-trophy-t{font-family:var(--display);font-weight:400;font-size:34px;text-transform:uppercase;line-height:1.1}
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tcell{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px 8px;border-radius:14px;background:#111217}
.tcell-img{position:relative;width:76px;height:76px}.tcell-img img{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block}.tcell.lock img{filter:grayscale(1);opacity:.35}.tcell-img .ic{position:absolute;inset:0;margin:auto;color:#fff}
.tcell b{font-size:14px;font-weight:700}.tcell small{font-size:12px;line-height:1.35;color:#8E8E93}.tcell.lock b{color:#8E8E93}
@media (max-width:640px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* notifications dropdown */
.notif-dd{width:400px;background:#1E1F26;border-radius:16px;overflow:hidden;padding:0}
.notif-dd .dd-head{padding:16px 16px 10px;border:0}.notif-dd .dd-head b{font-size:18px;font-weight:700}.notif-dd .dd-head .link-btn{height:36px;font-size:14px;font-weight:600;color:#FF4D57}
.notif-list a{padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);align-items:flex-start;color:#E6E6EA;position:relative}.notif-list a:first-child{border-top:0}
.notif-list a.unread{background:rgba(229,9,20,.06)}.notif-list a.unread::after{content:"";width:8px;height:8px;border-radius:4px;background:#E50914;margin-top:6px;flex-shrink:0}
.notif-list a>span:not(.avatar){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.4}.notif-list strong,.notif-list b{color:#fff}.notif-list time{margin:0;font-size:12px;color:#8E8E93}
/* cookie bar */
.cookie{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.08);background:#0B0C10;padding:18px 24px;box-shadow:none;flex-wrap:wrap;gap:18px}
.cookie p{flex:1 1 520px;font-size:14px;line-height:1.5;color:#C8C8CE}.cookie a{color:#FF4D57;text-decoration:none;font-weight:600}
.cookie .btn{height:44px;border-radius:22px;font-size:15px;font-weight:600;padding:0 20px}.cookie .btn-ghost{background:rgba(255,255,255,.1)}.cookie .btn-red{font-weight:700;padding:0 22px}
/* the dialogs that already had their own size keep it */
dialog.create-modal,dialog.add-modal{width:min(480px,calc(100vw - 32px))}dialog.pin-modal{width:min(440px,calc(100vw - 32px))}dialog.log-modal{width:min(520px,calc(100vw - 32px))}
dialog.log-modal .modal-head{padding:0;top:24px;right:24px}dialog.log-modal .modal-body{padding:24px}
dialog.add-modal .modal-head{align-items:center;gap:0}dialog.add-modal .modal-body,dialog.pin-modal .modal-body{gap:10px}
/* invite + reset pages: the canvas card */
.inv-card{max-width:440px;margin:24px auto 0;padding:24px;border-radius:20px;background:#1E1F26;display:flex;flex-direction:column;gap:16px}
.inv-card h1{font-size:26px;font-weight:700;text-align:center}.inv-card h2{font-size:22px;font-weight:700}
.inv-logo{align-self:center;display:flex}.inv-logo img{height:40px;width:auto}
.inv-cover{align-self:center;width:96px;height:96px;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:#111217}.inv-cover img,.inv-cover i{width:100%;height:47px;object-fit:cover;display:block;background:#2A2B33}
.inv-p{text-align:center;font-size:16px;line-height:1.5;color:#C8C8CE}.inv-p b{color:#fff}.inv-s{text-align:center;font-size:14px;color:#8E8E93}
.inv-btns{display:flex;gap:10px}.inv-btns .btn{flex:1;height:50px;border-radius:14px;font-size:16px;font-weight:600}.inv-btns .btn-ghost{background:rgba(255,255,255,.1)}
.inv-card .field{margin:0;gap:6px}.inv-card .field label{font-size:13px;font-weight:600;color:#A1A1A8}
.inv-card .field input{width:100%;height:46px;min-height:0;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#111217;font-size:15px}
.inv-card form{display:flex;flex-direction:column;gap:16px}.inv-card .btn-lg{height:50px;border-radius:14px;font-size:16px;font-weight:600;padding:0 24px}.inv-card .field-note{margin:0}
dialog.modal form.search-top{flex-direction:row;align-items:center;gap:10px}
dialog.modal .switch-line.back button{color:#A1A1A8;font-weight:400}
#m-search .btn[data-open=m-log]{height:36px;padding:0 12px;border-radius:18px;background:rgba(229,9,20,.16);color:#FF6B73;font-size:13px;font-weight:700}
#m-search .search-results li{padding:8px 10px;gap:12px}
.notif-dd .dd-head .link-btn{width:auto;min-height:0;padding:0;display:inline;background:none}
/* My playlist page: owner / editor view (matches the canvas PlaylistOwner) */
.cl-hero.pl-hero::before{background:linear-gradient(180deg,rgba(17,18,23,.45) 0%,rgba(17,18,23,.35) 30%,rgba(17,18,23,.7) 65%,#111217 100%)}
.pl-hero{min-height:280px;display:flex;flex-direction:column}.pl-hero>.wrap{flex:1;display:flex;flex-direction:column}
.pl-hero .cl-hero-in{margin-top:auto;padding:0 0 24px;gap:10px;max-width:none;width:100%}
.pl-hero .cl-tags .tag{padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.16);font-size:12px;font-weight:700;letter-spacing:.06em}
.pl-hero .cl-by{font-size:15px;color:rgba(255,255,255,.6)}.pl-hero .cl-by b{color:rgba(255,255,255,.9)}
@media (max-width:700px){.pl-hero{min-height:240px}}
.pl-descbox{display:flex;flex-direction:column;gap:6px}
.pl-descbox textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#C8C8CE;font-size:15px;line-height:1.5;resize:vertical}
.pl-descbox textarea:focus{outline:0;border-color:var(--red)}
.pl-ai{align-self:flex-end;height:32px;padding:0 6px;display:flex;align-items:center;gap:5px;color:#A855F7;font-size:13px;font-weight:600}.pl-ai.is-busy{opacity:.6;pointer-events:none}
.pl-lock{font-size:13px}
.pl-toolbar{margin:0;padding-top:6px;flex-wrap:wrap}.pl-count2{font-size:12px;font-weight:600;color:#8E8E93}
.pl-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-edit{height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.14);border-radius:22px;font-size:14px;font-weight:700}.pl-edit[aria-pressed=true]{background:rgba(255,255,255,.12)}
.pl-tools .pill-split{height:44px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#1B1C22}.pl-tools .pill-split button{height:42px;padding:0 16px 0 14px;font-size:15px;gap:7px}.pl-tools .pill-split button+button{border-left:1px solid rgba(255,255,255,.2)}
.pl-tools .pill-split .story-btn{background:linear-gradient(90deg,#833AB4,#FD1D1D,#FCB045)}
.pl-items{margin-top:0;gap:12px}
.pl-row{align-items:flex-start;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:0}
.pl-body{gap:4px}.pl-body b{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pl-body small{font-size:12px;color:rgba(255,255,255,.45)}.pl-plot{font-size:13px;line-height:1.45;color:rgba(255,255,255,.62);margin:0}
.pl-row .fp-sm b{font-size:14px;font-weight:700}.pl-row .fp-sm i{font-size:9px;font-weight:600}
.grip{width:28px;height:84px;align-items:center;justify-content:center;padding:0;color:#6B6C74}.pl-items.editing .grip{display:flex}
.rm-btn{width:36px;height:36px;border-radius:8px;background:#333;display:flex;align-items:center;justify-content:center;color:#fff}.rm-btn[hidden]{display:none}
.po-card{background:#1E1F26;border-radius:14px;overflow:hidden}
.po-card .toggle{padding:14px;min-height:0;gap:12px}.po-card .toggle+*,.po-card [data-community-row]{border-top:1px solid rgba(255,255,255,.06)}
.po-card [data-community-row] .toggle{border-top:0}.po-card .toggle+[data-community-row]{border-top:1px solid rgba(255,255,255,.06)}
.toggle-ic{display:flex;color:rgba(255,255,255,.55);flex-shrink:0}
.po-card .toggle-text{flex:1;min-width:0;gap:2px}.po-card .toggle-text b{font-size:15px;font-weight:600}.po-card .toggle-text small{font-size:12px;color:#8E8E93}
.po-card .toggle .knob::after{top:3px;left:3px;width:25px;height:25px}.po-card .toggle input:checked+.knob::after{transform:translateX(20px)}
.po-mate{background:rgba(0,0,0,.6);border:1px solid rgba(229,9,20,.35)}.po-mate .toggle-ic{color:#E50914}.po-mate .toggle-text small{color:rgba(255,255,255,.55)}
.po-mate .row-link{min-height:0;margin:0;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;font-weight:400;color:rgba(255,255,255,.85);gap:10px;width:100%}.po-mate .row-link .ic:first-child{color:rgba(255,255,255,.55)}
.danger-link{align-self:flex-start;height:44px;padding:0 6px;font-size:14px;gap:8px}.danger-link[hidden]{display:none}
.owner-card.po-card{padding:0}
.pl-cols>.main{display:flex;flex-direction:column;gap:16px}
.pl-items.editing .fp{display:inline-flex}
.o-cast .sec-head{margin-bottom:0}.rail-nav[hidden]{display:none}
@media (hover:none){.o-cast .rail-nav{display:none}}
.o-also h2{margin-bottom:12px}.t-side.unpinned{position:static}
.st-list .st-group+.st-group{margin-top:20px}
/* curated list masthead: byline on the left, Story | Share on the right of the same row (canvas) */
.cl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;width:100%}
.cl-row .pill-split{height:44px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#1B1C22;flex-shrink:0}
.cl-row .pill-split button{height:42px;padding:0 16px 0 14px;font-size:15px;gap:7px}.cl-row .pill-split button+button{border-left:1px solid rgba(255,255,255,.2)}
.cl-row .pill-split .story-btn{background:linear-gradient(90deg,#833AB4,#FD1D1D,#FCB045)}
.list-page .cl-hero-in{max-width:none;width:100%}.list-page .cl-title{max-width:1000px}.list-page .cl-desc{max-width:760px}
/* More curated lists (canvas) */
.mcl{display:flex;flex-direction:column;gap:10px;padding-top:8px}.mcl h2{margin:0 4px;font-size:18px;font-weight:700}
.mcl-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#1E1F26}.mcl-card:hover{background:#262731}
.mcl-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:#111217}.mcl-strip img,.mcl-strip i{width:100%;height:110px;object-fit:cover;display:block;background:#2A2B33}
.mcl-t{padding:12px 14px 14px;font-size:15px;font-weight:700;line-height:1.3}
/* PAGES-INSERT-ABOVE */

/* ───────────────────────────── responsive steps (same steps on every page) */
@media (max-width:1240px){.just-added{display:none}.searchbox{display:none}.hdr-search{display:inline-flex}.cols>.side{flex-basis:300px;width:300px}}
@media (max-width:1060px){.hdr-app{display:none}}
@media (max-width:900px){
  .nav-links{display:none}.hdr-menu{display:inline-flex}.hdr-nick{display:none}.bar{gap:12px}
  .user-pill{padding:0 6px}
  .cols{flex-direction:column;align-items:stretch}.cols>.side{flex:none;width:100%;position:static}
  .toc{display:none}.toc-m{display:block}
  .app-band{flex-direction:column;align-items:stretch;padding:28px 22px}.app-phones{flex:none;width:100%;max-width:340px;margin:0 auto;height:400px}.hero-in{padding-top:24px;padding-bottom:32px}
  .st{grid-template-columns:1fr}.st-pane{display:none}.st-back{display:flex}body.in-pane .st-list{display:none}body.in-pane .st-pane{display:block}
  .only-desktop{display:none}.side.first-on-phone{order:-1}.trophies{grid-template-columns:1fr}
  .pl-title{font-size:clamp(30px,8vw,44px)}
  .cl-num{flex-basis:44px;font-size:48px}.cl-poster{flex-basis:96px}
  .lcard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-grid{grid-template-columns:minmax(0,1fr)}
  .adv-bar{flex-wrap:wrap}.adv-sum{flex:1 1 100%}.adv-bar .btn{flex:1}
  /* title page */
  .t-hero::before{inset:0 0 auto 0;height:260px;background:linear-gradient(180deg,rgba(17,18,23,.15),transparent 45%,var(--bg))}
  .t-backdrop{position:relative;inset:auto;display:block;height:240px;object-position:center 20%}
  .t-hero-in{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px 16px;align-items:end;margin-top:-76px;padding:0 var(--gutter) 16px}
  .t-poster{width:120px;height:180px;flex:none;border-radius:12px}
  .t-info{display:contents}
  .t-head{flex-direction:column-reverse;gap:8px;align-self:end}
  .t-title{font-size:clamp(34px,10vw,56px)}
  .t-meta{font-size:14px;gap:8px}
  .t-scores{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .t-scores .fp{position:absolute;top:16px;right:var(--gutter)}
  .score{height:60px;align-items:center;padding:0 8px;text-align:center}
  .t-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 52px;margin:0}
  .t-actions .t-add,.t-actions .btn-story{display:none}
  .t-phone-pill{display:inline-flex}
  .t-body{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding-top:16px}
  .t-main,.t-side{display:contents}
  .o-over{order:1}.o-crew{order:2}.o-cast{order:3}.o-watch{order:4}.o-trailer{order:5}.o-reviews{order:6}.o-sug{order:7}.o-more{order:8}.o-also{order:9}
  .reviews{grid-template-columns:1fr}
  .ext-notice{flex-wrap:wrap}
}
@media (max-width:700px){
  :root{--gutter:16px}
  .cl-item{flex-wrap:wrap;gap:12px 14px}.cl-num{order:1;flex:0 0 auto;font-size:56px;text-align:left;width:48px}.cl-poster{order:2;flex:0 0 90px}.cl-item-body{order:3;flex:1 1 100%}.cl-item-head{flex-wrap:wrap}
  .lcard-grid,.plc-grid{grid-template-columns:minmax(0,1fr)}.story-body{max-width:100%}.story-fan{display:none}.search-form{flex:1 1 100%}
  .logo img{height:44px}
  dialog.modal{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh}
  dialog.modal.sheet-full{height:100%;max-height:none;border-radius:0}
  dialog.search-modal{margin:0;width:100%;max-width:none;border-radius:0 0 var(--r-xl) var(--r-xl);align-self:flex-start}
  .notif-dd{position:fixed;left:8px;right:8px;top:72px;width:auto}
  .foot-top{gap:32px}.foot-col{flex:1 1 140px}
  .cookie{flex-direction:column;align-items:stretch}.cookie div .btn{flex:1}
}
@media (max-width:520px){.hdr-login{display:none}}
@media (max-width:400px){.logo img{height:38px}.bar-right{gap:4px}}
@media (max-width:359px){.logo img{height:34px}.bar{gap:6px}.bar-right .btn{padding:0 14px}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* Formatted texts from the admin (curated-list descriptions, staff reviews) */
.rich-text p,.rich-text ul,.rich-text ol{margin:0 0 .7em}
.rich-text>*:last-child{margin-bottom:0}
.rich-text ul,.rich-text ol{padding-left:1.4em}
.rich-text ul{list-style:disc}.rich-text ol{list-style:decimal}
.rich-text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.rich-text a:hover{color:var(--text)}
.review .review-text{color:var(--text-2);font-size:15px;line-height:1.55}
.review .review-text.clamp{max-height:calc(1.55em * 3);overflow:hidden}
.cl-desc.rich-text.clamp-desc{display:block;max-height:calc(1.55em * 5);overflow:hidden}

/* ───────────────────────────── import and export (Settings, dashboard card): docs/import-export/PLAN.md */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.imp-head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}.imp-head h2{margin:0}
.imp-lead{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
[data-imp-root],[data-exp-root]{display:flex;flex-direction:column;gap:20px}
.imp-sec{display:flex;flex-direction:column;gap:10px}.imp-sec h3{margin:0;font-size:16px;font-weight:700}
.imp-group{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.imp-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.imp-src{background:var(--card-2);border-radius:var(--r-l);padding:16px;display:flex;flex-direction:column;gap:10px}
.imp-src p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}.imp-src small{font-size:13px;line-height:1.5;color:var(--muted)}.imp-src small b{color:var(--text-2)}
.imp-src-h{display:flex;align-items:center;gap:10px}.imp-src-h b{font-size:16px}
.imp-imdb{height:28px;padding:0 8px;border-radius:6px;background:#F5C518;color:#111217;font-size:14px;font-weight:900;display:flex;align-items:center}
.imp-lb,.imp-lbdots{display:inline-flex;gap:3px}.imp-lb i,.imp-lbdots i{display:block;border-radius:50%}
.imp-lb i{width:12px;height:12px}.imp-lbdots i{width:10px;height:10px}
.imp-lb i:nth-child(1),.imp-lbdots i:nth-child(1){background:#FF8000}.imp-lb i:nth-child(2),.imp-lbdots i:nth-child(2){background:#00E054}.imp-lb i:nth-child(3),.imp-lbdots i:nth-child(3){background:#40BCF4}
.imp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:170px;padding:20px;border-radius:var(--r-l);border:2px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.02);text-align:center;cursor:pointer;color:var(--text-3);transition:border-color .15s,background .15s}
.imp-drop:hover,.imp-drop.over{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.imp-drop.busy{opacity:.6;pointer-events:none}.imp-drop-t{font-size:16px;font-weight:600;color:var(--text)}.imp-drop-s{font-size:13px;color:var(--muted)}
.imp-know,.imp-left{background:var(--card-2);border-radius:14px;padding:14px 16px}
.imp-know summary,.imp-left summary{cursor:pointer;font-size:15px;font-weight:600}
.imp-know ul,.imp-left ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--text-2);list-style:disc}
.imp-hist{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px}.imp-hist+.imp-hist{border-top:1px solid var(--line)}
.imp-hist>span:last-child{display:flex;flex-direction:column;gap:2px}.imp-hist small{font-size:13px;color:var(--muted)}
.imp-ic{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#2A2B33;color:#E6E6EA}
.imp-ic.ok{background:#1D3A24;color:#4CAF50}.imp-ic.bad{background:#3A1E22;color:#FF6B73}.imp-ic.warn{background:#3A3320;color:#FFC53D}.imp-ic.big{width:44px;height:44px;border-radius:50%}
.imp-hist .imp-ic{width:32px;height:32px;border-radius:9px}
.imp-steps{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.imp-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}.imp-step.done,.imp-step.now{color:var(--text)}
.imp-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#2A2B33;color:var(--text-3);flex-shrink:0}
.imp-step.done .imp-dot{background:#1D3A24;color:#4CAF50}.imp-step.now .imp-dot{background:#fff;color:var(--bg)}
.imp-line{flex:1;height:2px;min-width:12px;background:#2A2B33}.imp-line.done{background:#4CAF50}
.imp-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card-2)}
.imp-file>span{display:flex;flex-direction:column;gap:2px;min-width:0}.imp-file small{font-size:13px;color:var(--muted)}
.imp-prog{display:flex;flex-direction:column;gap:10px}.imp-prog-row{display:flex;justify-content:space-between;align-items:baseline}.imp-prog-row b{font-size:17px}.imp-prog-row span{color:var(--text-2)}
.imp-prog small{font-size:13px;color:var(--muted)}
.imp-bar{height:8px;border-radius:4px;background:#2A2B33;overflow:hidden}.imp-bar i{display:block;height:100%;border-radius:4px;background:#E6E6EA;transition:width .6s}.imp-bar.paused i{background:var(--gold)}
.imp-prog .imp-bar{height:10px;border-radius:5px}
.imp-text{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}.imp-text b{color:var(--text)}
.imp-actions{display:flex;flex-wrap:wrap;gap:10px}
.imp-picks{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.imp-pick{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;border-radius:14px;background:var(--card-2);border:1px solid var(--line);cursor:pointer;font-size:15px}
.imp-pick input{width:20px;height:20px;margin:0;accent-color:var(--text-2);flex-shrink:0}.imp-pick span{display:flex;flex-direction:column}.imp-pick small{font-size:13px;color:var(--muted)}
.imp-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;cursor:pointer}.imp-opt+.imp-opt{border-top:1px solid var(--line)}
.imp-opt>span,.imp-listhead>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.imp-opt b{font-size:16px;font-weight:600}.imp-opt small{font-size:14px;line-height:1.45;color:var(--text-3)}
.imp-box{width:24px;height:24px;margin:0;accent-color:var(--text-2);flex-shrink:0}
.imp-chips{display:flex;gap:6px;flex-wrap:wrap}.imp-chip{height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:700;display:inline-flex;align-items:center}
.imp-chip.ok{background:rgba(76,175,80,.15);color:#7DD181}.imp-chip.dim{background:rgba(255,255,255,.08);color:var(--text-2)}
.imp-fine{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}.imp-sec>.imp-fine{padding:0 4px}
.imp-likely{margin:8px 0 0;padding-left:18px;list-style:disc;font-size:13px;color:var(--text-2);display:flex;flex-direction:column;gap:4px}.imp-likely[hidden]{display:none}
.imp-list{flex-direction:column;gap:12px;cursor:default}.imp-listhead{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.imp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-left:36px}
.imp-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-3)}
.imp-fields .input{min-height:44px;font-weight:400}
.imp-muted{cursor:default;align-items:center;color:var(--muted);font-size:14px}
.imp-confirm{padding:20px;border-radius:18px;background:var(--card);border:1px solid rgba(255,197,61,.45);display:flex;flex-direction:column;gap:16px}
.imp-agree{display:flex;gap:14px;align-items:flex-start;cursor:pointer}.imp-agree input{width:24px;height:24px;margin:0;accent-color:var(--gold);flex-shrink:0}
.imp-agree span{display:flex;flex-direction:column;gap:4px}.imp-agree b{font-size:17px}.imp-agree small{font-size:14px;line-height:1.5;color:#E6E6EA}
.imp-go{height:56px;border-radius:28px;font-size:17px;width:100%}.imp-go:disabled{background:#3A3B42;color:var(--muted);opacity:1;pointer-events:none}
.imp-cancel{align-self:center;min-height:44px;padding:0 16px;font-size:15px;color:var(--text-2)}
.imp-donehead{display:flex;align-items:center;gap:12px}.imp-donehead h2{margin:0;font-size:22px}.imp-donehead small{display:block;font-size:14px;color:var(--muted)}
.imp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.imp-stat{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:14px;background:var(--card-2)}.imp-stat b{font-size:24px;font-weight:700}.imp-stat span{font-size:13px;color:var(--muted)}
.imp-donelist{margin:0;padding:0;list-style:none;border-radius:14px;background:var(--card-2);overflow:hidden}
.imp-donelist li{display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:15px}.imp-donelist li+li{border-top:1px solid var(--line)}
.imp-donelist li>span{flex:1;display:flex;flex-direction:column}.imp-donelist small{font-size:13px;color:var(--muted)}.imp-donelist a{font-size:14px;font-weight:600;color:#FF4D57}
.imp-card{background:var(--card);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.imp-card.is-ready{border:1px solid rgba(76,175,80,.45)}.imp-card.is-failed{border:1px solid rgba(229,9,20,.45)}
.imp-card-head{display:flex;align-items:center;gap:12px}.imp-card-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.imp-card-t h2{margin:0;font-size:17px;font-weight:700}.imp-card-t span{font-size:14px;color:var(--text-3)}
.imp-phone{display:none;margin-bottom:16px}
.imp-note{font-size:13px;line-height:1.45;color:var(--muted)}
.imp-details{font-size:14px;font-weight:600;color:#FF4D57;flex-shrink:0;padding:0 4px}
.imp-x{width:40px;height:40px;border-radius:20px;color:var(--muted);flex-shrink:0}.imp-x:hover{background:var(--hover)}
.imp-card .btn.sm{height:40px;padding:0 16px;border-radius:20px;font-size:14px;flex-shrink:0}
.imp-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--card-2)}
.imp-seg button{flex:1;min-height:44px;padding:8px 12px;border-radius:11px;font-size:14px;font-weight:600;line-height:1.3;color:var(--text-2)}.imp-seg button.on{background:#3A3B42;color:#fff}
.imp-downloads{background:var(--card-2);border:0}
.imp-dl{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px}.imp-dl+.imp-dl{border-top:1px solid var(--line)}.imp-dl.wrap{flex-wrap:wrap}
.imp-dl>span:first-child{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}.imp-dl b{display:flex;align-items:center;gap:8px;font-size:16px}
.imp-dl>span:first-child>span,.imp-dl small{font-size:14px;line-height:1.45;color:var(--text-3)}.imp-dl small{font-size:13px;color:var(--muted)}
.imp-dl .btn{flex-shrink:0;height:40px;padding:0 16px;border-radius:20px;font-size:14px}
.imp-dl-act{display:flex;gap:8px;align-items:center}.imp-dl-act select{max-width:200px;min-height:40px;font-size:14px}
.imp-av{width:36px;height:36px;border-radius:50%}.imp-av.ready{background:#3A1E22;color:#FF6B73}.imp-av.done{background:#1D3A24;color:#4CAF50}
@media (max-width:900px){.imp-card.only-desktop{display:none}.imp-phone{display:flex}.imp-sources,.imp-fields{grid-template-columns:minmax(0,1fr)}.imp-fields{padding-left:0}.imp-steps{gap:6px}.imp-step{font-size:0}.imp-step.now{font-size:13px}.imp-seg{flex-direction:column}.imp-card-head{flex-wrap:wrap}}
.st-delete{margin:20px 0 0;text-align:center}.st-delete a{display:inline-block;padding:10px 16px;font-size:15px;font-weight:600;color:#FF6B73;text-decoration:none}.st-delete a:hover{color:#FF8A91}
.crumbs-gap{height:36px}
.page-title.anton{font-size:clamp(38px,4.8vw,60px);font-weight:400;line-height:1;letter-spacing:.01em;margin:8px 0 20px}
.tx-head{margin-top:8px}
.my-playlists .crumbs,.my-playlists .crumbs-gap{margin-bottom:-20px}

/* Curated list on a phone: the rating and the plus button sit in the top row, right of the poster, however long the title is.
   The body and head boxes step aside (display:contents) so their parts can be placed in the item's own row. */
@media (max-width:700px){
  .cl-item-body,.cl-item-head{display:contents}
  .cl-item-actions{order:2;margin-left:auto;align-self:flex-start}
  .cl-item-head>div{order:3;flex:1 1 100%;min-width:0}
  .cl-plot,.cl-note{order:4;flex:1 1 100%}
}