:root{--bg:#0e0a1f;--pink:#ff2a85;--soft:#ffb3d1;--glass:rgba(255,255,255,.07);--line:rgba(255,179,209,.18)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(circle at 15% 0%,#2b1255 0,var(--bg) 50%) fixed;color:var(--soft);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;padding-top:90px}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
button{cursor:pointer;border:0}
.center{text-align:center;margin:20px 0 50px}
.msg{padding:40px 4%;text-align:center}

/* NAV */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1250px,94%);display:flex;align-items:center;gap:16px;padding:10px 22px;border-radius:999px;background:rgba(20,12,45,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,42,133,.35);box-shadow:0 0 25px rgba(255,42,133,.2);z-index:50}
/* Whole site behaves like an app: clicking titles, descriptions or anything else shows no typing line
   and selects no text. Only boxes you type in (search, login, review) keep the typing line. */
html,body{-webkit-user-select:none;user-select:none;cursor:default;caret-color:transparent}
a,button,select,label,.card,.top-card{cursor:pointer}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;cursor:text;caret-color:auto}
input[type="range"],input[type="file"],input[type="checkbox"]{cursor:pointer}
/* Logo: "NEST" floats up once when the page opens, and again when the mouse is on the logo. Gentle tilt, sharper glow.
   (old style saved in data/logo-old-style.css) */
.logo{font-weight:800;letter-spacing:2px;color:var(--pink);text-shadow:0 0 6px rgba(255,42,133,.75);white-space:nowrap;
  position:relative;top:-1.5px} /* capital letters sit low in their line: lifted so they're centered in the menu bar like the menu words */
.logo span{display:inline-block;transform-origin:50% 80%;animation:nestFloat 1.6s ease-in-out .3s 1}
.logo:hover span{animation:nestHover 1.2s ease-in-out 1}
@keyframes nestFloat{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes nestHover{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.logo span,.logo:hover span{animation:none}}
.links{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.links a{padding:7px 14px;border-radius:999px;font-size:14px;transition:.2s}
.links a:hover,.links a.active{background:var(--pink);color:#fff;box-shadow:0 0 14px rgba(255,42,133,.6)}
.search{position:relative}
.search input{background:var(--glass);border:1px solid var(--line);color:#fff;padding:8px 16px;border-radius:999px;width:200px;outline:none}
.search input:focus{border-color:var(--pink)}
.results{display:none;position:absolute;top:46px;right:0;width:330px;max-height:420px;overflow:auto;background:rgba(20,12,45,.97);border:1px solid var(--line);border-radius:16px;padding:6px}
.res{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px}
.res:hover{background:var(--glass)}
.res img,.res .noimg{width:38px;height:56px;border-radius:6px;object-fit:cover;flex-shrink:0}
.res b{display:block;color:#fff;font-size:14px}
.res small{opacity:.8}
.none{padding:12px}
.auth-link{font-size:14px;padding:7px 14px;border-radius:999px;background:var(--glass);white-space:nowrap}

/* HERO */
.hero{position:relative;height:72vh;min-height:430px;margin-top:0;background-size:cover;background-position:center top;display:flex;align-items:flex-end}
.hero::after,.d-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,transparent 60%),linear-gradient(to right,rgba(14,10,31,.92),transparent 65%)}
.hero-content{position:relative;z-index:2;padding:0 4% 70px;max-width:660px}

/* ===== MOVEMENT (saved copy of the files before this: data/before-motion/) — moves only, never fades ===== */
/* 1) home banner: the picture zooms very slowly, the title and buttons rise in */
.hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;background:center top/cover no-repeat;transform-origin:60% 40%;animation:heroZoom 22s ease-out both}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-content{animation:riseIn .9s .15s cubic-bezier(.2,.7,.2,1) both}
/* 2) rows: the title and the posters glide up into place, one after another */
.row.reveal h2{transform:translateY(16px)}
.row.reveal.in h2{transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.row.reveal.in .row-scroll>*{animation:cardUp .65s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes cardUp{from{transform:translateY(34px)}}
/* 3) Discover panel slides down when it opens */
.dz:not([hidden]){animation:dzOpen .32s cubic-bezier(.2,.8,.2,1)}
@keyframes dzOpen{from{transform:translateX(-50%) translateY(-14px)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero-bg,.hero-content,.row.reveal.in .row-scroll>*,.dz:not([hidden]){animation:none}.row.reveal h2{transform:none}}
h1,.hero-title{color:#fff;font-size:clamp(28px,5vw,52px);margin:10px 0;text-shadow:0 0 25px rgba(255,42,133,.5)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.meta{margin-bottom:10px}
.overview{color:#fff;opacity:.9;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 18px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:var(--pink);color:#fff;padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;display:inline-block;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(255,42,133,.7)}
.btn.ghost{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
.btn.glow{background:#7c3aed;box-shadow:0 0 18px rgba(124,58,237,.8)}

/* ROWS + CARDS */
.row{padding:0 4%;margin:26px 0}
.row h2{color:#fff;font-size:21px;margin-bottom:10px}
.row-wrap{position:relative}
.row-scroll{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:10px 4px 18px;scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:0;bottom:18px;width:42px;background:rgba(14,10,31,.75);color:#fff;font-size:32px;z-index:5;opacity:0;transition:.2s}
.row-wrap:hover .arrow{opacity:1}
.arrow.left{left:0;border-radius:0 12px 12px 0}
.arrow.right{right:0;border-radius:12px 0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding:0 4%}
.card{flex:0 0 170px;border-radius:14px;overflow:hidden;background:var(--glass);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.grid .card{flex:auto}
.card:hover{transform:scale(1.06);box-shadow:0 0 24px rgba(255,42,133,.5);position:relative;z-index:3}
.poster{aspect-ratio:2/3;width:100%;background:#1a1236;overflow:hidden;position:relative}
.air-badge{position:absolute;left:6px;right:6px;bottom:6px;padding:5px 6px;border-radius:8px;background:rgba(255,42,133,.93);color:#fff;font-size:11px;font-weight:700;line-height:1.25;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.air-badge.soon{background:rgba(124,58,237,.93)}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;background:#1a1236}
.info{padding:10px}
.info h3{color:#fff;font-size:14px;margin:6px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info p{font-size:12px;opacity:.85;margin-bottom:8px}
.tag,.stag,.chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff}
.tag.movie{background:#7c3aed}
.tag.tv{background:var(--pink)}
.tag.anime{background:#0ea5e9}
.chip{background:var(--glass);border:1px solid var(--line);margin:0 6px 6px 0;font-weight:500;font-size:13px;padding:4px 12px}
.add-btn,.rm{width:100%;background:#7c3aed;color:#fff;padding:7px;border-radius:10px;font-size:12px;font-weight:600}
.add-btn:hover{background:var(--pink)}
.hero .add-btn{width:auto;font-size:15px;padding:12px 26px;border-radius:999px;background:var(--glass);border:1px solid var(--line)}
.rm{background:rgba(239,68,68,.25);margin-top:6px}

/* TOP 10 */
.top-card{flex:0 0 210px;display:flex;align-items:flex-end;transition:transform .25s}
.top-card:hover{transform:scale(1.05)}
.rank{font-size:140px;font-weight:900;line-height:.78;color:transparent;-webkit-text-stroke:3px var(--pink);margin-right:-20px;z-index:1;text-shadow:0 0 20px rgba(255,42,133,.4)}
.top-card .poster{width:130px;flex-shrink:0;border-radius:10px;z-index:2}

/* STATUS COLORS */
.s-watching{background:#3b82f6}
.s-completed{background:#22c55e}
.s-dropped{background:#ef4444}
.s-plan{background:#f59e0b}
.s-hold{background:#64748b}
.status{display:block;width:100%;margin:8px 0;padding:11px;border-radius:12px;color:#fff;font-weight:700;font-size:15px}
.status:hover{filter:brightness(1.15)}
.status-box{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.status-box[hidden]{display:none}
.status-box .status{width:auto;margin:0;padding:10px 18px}

/* DETAILS — 1) wide picture on top  2) poster lower, overlapping its bottom edge  3) information beside the poster */
.d-top{position:relative;margin:-90px 0 18px;overflow:hidden;padding-bottom:6px}
/* the picture: slow zoom-in when the page opens, soft vignette, fades into the page */
.d-banner{position:relative;height:clamp(360px,62vh,660px);background:#1a1236 center 22%/cover no-repeat;transition:background-image .35s;animation:bannerIn 1.4s cubic-bezier(.2,.7,.2,1) both}
.d-banner.empty{background:radial-gradient(circle at 30% 20%,#3b1670,#1a1236 60%)}
.d-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,transparent 45%,rgba(14,10,31,.55) 100%)}
.d-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,10,31,.7) 0,rgba(14,10,31,0) 24%,rgba(14,10,31,.15) 55%,rgba(14,10,31,.85) 88%,var(--bg) 100%)}
/* movement only, no fading: content is visible even if a browser pauses animations */
@keyframes bannerIn{from{transform:scale(1.07)}to{transform:none}}
@keyframes riseIn{from{transform:translateY(18px)}to{transform:none}}

/* poster lower down, overlapping the picture; information beside it */
.d-main{position:relative;z-index:2;display:flex;align-items:flex-start;gap:40px;padding:0 4%}
.d-cover-box{position:relative;width:260px;flex-shrink:0;margin-top:-190px;transition:transform .35s ease;animation:riseIn .8s .1s cubic-bezier(.2,.7,.2,1) both}
.d-cover-box:hover{transform:translateY(-6px) rotate(-.6deg)}
.d-cover{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:20px;background:#1a1236;
  outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 6px rgba(14,10,31,.55),0 0 40px rgba(255,42,133,.28);transition:box-shadow .35s ease}
.d-cover-box:hover .d-cover{box-shadow:0 38px 80px rgba(0,0,0,.75),0 0 0 6px rgba(14,10,31,.55),0 0 54px rgba(255,42,133,.45)}
/* small time label in a picture's corner: "45m", "1h 15m", "2h 47m" */
.time-tag{position:absolute;right:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:6px;background:rgba(10,6,22,.85);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;line-height:1.4;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.time-tag.big{right:12px;bottom:12px;padding:4px 10px;font-size:13px;border-radius:8px}
.ep-thumb{position:relative;flex-shrink:0;line-height:0}
.d-text{flex:1;min-width:0;max-width:820px;padding-top:24px;animation:riseIn .8s .2s cubic-bezier(.2,.7,.2,1) both}
.d-head{margin-bottom:4px}
/* title: balanced size (26–40px), bold not heavy, neat wrapping for long names */
.d-text h1{font-size:clamp(26px,2.7vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.18;margin:12px 0 8px;
  text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.d-season{color:var(--pink);font-weight:700;font-size:17px;letter-spacing:.3px;margin:0 0 8px}
.d-season[hidden]{display:none}
/* 2024 • ★ 8.1 • 2h 47m */
.d-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;color:var(--soft);font-size:15px;font-weight:500;margin:2px 0 14px}
.d-meta span+span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;margin:0 12px;vertical-align:middle}
.d-rate{color:#ffc94d;font-weight:700}
/* age badge: 13+ / 16+ / 18+ */
.d-age{display:inline-flex;align-items:center;padding:2px 8px;border:1.5px solid rgba(255,255,255,.6);border-radius:6px;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.3px;line-height:1.3;cursor:default}
.d-age.mid{border-color:#ff9f43;color:#ffc58a}
.d-age.hi{border-color:#ff4d6d;color:#ff8fa3;background:rgba(255,77,109,.12)}
.d-meta .d-age+span::before{margin-left:12px}
/* mood */
.d-moods{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.d-moods-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink);font-weight:800;margin-right:2px}
.mood{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;color:#ffd6e6;background:linear-gradient(135deg,rgba(255,42,133,.16),rgba(124,58,237,.16));border:1px solid rgba(255,42,133,.38)}
.d-genres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.d-genres .chip{margin:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,179,209,.28);font-size:12.5px;padding:5px 13px}
/* descriptions: clean reading font, soft white, comfortable spacing, real paragraphs */
.d-overview,.ep p{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;white-space:pre-line}
.d-overview{color:#e9e4f2;line-height:1.75;font-size:16px;margin:14px 0 26px;max-width:68ch}
.d-more{display:none}
/* buttons */
.d-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.d-actions .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;font-size:15px}
.d-actions svg{width:18px;height:18px;fill:currentColor}
.btn-primary{background:linear-gradient(135deg,var(--pink),#c026d3);box-shadow:0 10px 28px rgba(255,42,133,.35)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(255,42,133,.55)}
.btn-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.14);box-shadow:none}
.d-actions .btn-icon{width:50px;height:50px;padding:0;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.d-actions .btn-icon:hover{background:rgba(255,255,255,.16);box-shadow:none}
@media (prefers-reduced-motion:reduce){.d-banner,.d-cover-box,.d-text{animation:none}}

/* section titles get a small accent bar */
.row h2{display:flex;align-items:center;gap:10px}
.row h2::before{content:'';width:4px;height:.95em;border-radius:4px;background:linear-gradient(var(--pink),#7c3aed);flex-shrink:0}
.sel{background:rgba(20,12,45,.95);color:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:12px;margin-bottom:14px}
.ep{display:flex;gap:16px;padding:12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);margin-bottom:10px;transition:background .2s,border-color .2s,transform .2s}
.ep:hover{background:rgba(255,255,255,.09);border-color:rgba(255,42,133,.5);transform:translateX(3px)}
.ep img,.ep .noimg{width:184px;height:104px;border-radius:10px;object-fit:cover;flex-shrink:0}
.ep b{color:#fff}
.ep.upcoming{border-style:dashed;border-color:rgba(255,42,133,.45)}
.ep.upcoming img{opacity:.6}
.ep-soon{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--pink);color:#fff;vertical-align:1px}
.sel + .sel{margin-left:8px}
.sel[hidden]{display:none}

/* NEWS */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.news-card{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;background:var(--glass);border:1px solid var(--line);cursor:default}
.news-card small{font-size:12px;opacity:.75}
.news-card small b{color:var(--pink);text-transform:uppercase;letter-spacing:.8px;font-size:11px}
.news-card h3{color:#fff;font-size:15px;line-height:1.4} /* full headline, never cut off with "…" */
.ep p{font-size:14px;line-height:1.6;color:#c9c2d8;margin-top:6px;max-width:90ch}
.ep-tr{display:block;margin-top:4px;font-size:11px;opacity:.5;font-style:italic}
.cast-card{flex:0 0 140px;position:relative;border-radius:14px;overflow:hidden;background:#1a1236;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.cast-card:hover{transform:translateY(-4px);box-shadow:0 0 22px rgba(255,42,133,.45)}
.cast-photo{aspect-ratio:2/3}
.cast-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cast-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,var(--pink))}
.cast-info{position:absolute;left:0;right:0;bottom:0;padding:38px 10px 10px;background:linear-gradient(to top,rgba(14,10,31,.97) 35%,rgba(14,10,31,0))}
.cast-info b{display:block;color:#fff;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cast-info small{display:block;font-size:11.5px;color:var(--soft);opacity:.85;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}

/* WHERE TO WATCH (title pages) */
.d-where{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,179,209,.12);max-width:780px}
.wt-label{display:block;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--pink);font-weight:800;margin-bottom:12px}
.wt-list{display:flex;flex-wrap:wrap;gap:10px}
/* one button style for every title: service icon + name */
.wt-site{--c:#ff2a85;display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s,transform .2s}
.wt-site img{width:26px;height:26px;border-radius:7px;background:var(--c);padding:4px;display:block}
.wt-site img.full{padding:0;background:none;object-fit:cover}   /* full-colour service logos */
.wt-site img.logo-fit{object-fit:contain;background:#fff;padding:2px} /* channel logos (ITV, CBS…) are wide, keep them whole */
a.wt-site:hover{border-color:var(--c);background:rgba(255,255,255,.1);transform:translateY(-2px)}
span.wt-site{cursor:default}
.wt-note{font-size:14px;line-height:1.6;color:#d9d2e8;margin:2px 0 4px;max-width:70ch}
.wt-note b{color:#fff;font-weight:600}
.wt-chip{display:inline-block;padding:3px 10px;margin-right:8px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:#7c3aed}
.wt-chip.live{background:#16a34a}

/* DISCOVER PANEL (opens from the search bar): choices on the left, recommendations on the right */
.dz{position:absolute;z-index:60;left:50%;transform:translateX(-50%);width:min(1000px,94vw);display:grid;grid-template-columns:310px 1fr;
  border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(43,18,85,.97),rgba(16,10,36,.985));
  border:1px solid rgba(255,42,133,.3);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 44px rgba(255,42,133,.18);backdrop-filter:blur(18px)}
.dz[hidden]{display:none}
.dz-filters{padding:18px 18px 20px;border-right:1px solid rgba(255,179,209,.12);max-height:min(70vh,640px);overflow:auto;scrollbar-width:thin}
.dz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dz-head b{color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em}
.dz-reset{background:none;color:var(--pink);font-weight:700;font-size:12.5px;padding:4px 2px}
.dz-reset:hover{text-decoration:underline}
.dz-group{margin-bottom:15px}
.dz-group small{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--soft);opacity:.7;font-weight:800;margin-bottom:8px}
.dz-pills{display:flex;flex-wrap:wrap;gap:6px}
.dz-pills button{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#e9e2f5;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);transition:background .15s,border-color .15s,transform .15s}
.dz-pills button:hover{border-color:rgba(255,42,133,.7);transform:translateY(-1px)}
.dz-pills button.on{background:linear-gradient(135deg,var(--pink),#c026d3);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(255,42,133,.35)}
.dz-results{padding:18px 20px 20px;max-height:min(70vh,640px);overflow:auto;scrollbar-width:thin}
.dz-res-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dz-res-head b{color:#fff;font-size:15px;font-weight:700}
.dz-all{color:var(--pink);font-weight:700;font-size:13px;white-space:nowrap}
.dz-all:hover{text-decoration:underline}
.dz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px}
.dz-card{display:block;min-width:0}
.dz-poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#1a1236;box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
.dz-card:hover .dz-poster{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 2px var(--pink)}
.dz-poster img{width:100%;height:100%;object-fit:cover;display:block}
.dz-rate{position:absolute;top:6px;left:6px;padding:2px 6px;border-radius:6px;background:rgba(10,6,22,.85);color:#ffc94d;font-size:11px;font-weight:800}
.dz-card b{display:block;color:#fff;font-size:12.5px;font-weight:600;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-card small{display:block;font-size:11px;opacity:.65;margin-top:1px}
.dz-skel{aspect-ratio:2/3;border-radius:12px;background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%);
  background-size:300% 100%;animation:dzShine 1.2s linear infinite}
@keyframes dzShine{to{background-position:-150% 0}}
.dz-empty{grid-column:1/-1;padding:40px 10px;text-align:center;opacity:.75}
@media (max-width:800px){
  .dz{grid-template-columns:1fr;width:94vw;max-height:78vh;overflow:auto}
  .dz-filters{border-right:0;border-bottom:1px solid rgba(255,179,209,.12);max-height:none;padding:14px}
  .dz-results{max-height:none;padding:14px}
  .dz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
}

/* HOVER PREVIEW (computers): grows out of the poster, streaming-site style
   picture with the title on it → round buttons → ★ rating · year · type → genres → short description */
.pv{position:fixed;z-index:120;border-radius:14px;overflow:hidden;background:#181030;
  box-shadow:0 30px 80px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.08),0 0 40px rgba(255,42,133,.18);
  visibility:hidden;transform:scale(.86);pointer-events:none;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.pv.show{visibility:visible;transform:none;pointer-events:auto} /* appears instantly (no fading), then grows into place */
.pv-img{position:relative;aspect-ratio:16/9;background:#1a1236 center/cover no-repeat}
.pv-img::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,#181030 0,rgba(24,16,48,.55) 32%,rgba(24,16,48,0) 62%)}
.pv-hit{position:absolute;inset:0;z-index:1}
.pv-img h4{position:absolute;left:14px;right:14px;bottom:8px;z-index:2;pointer-events:none;color:#fff;font-size:18px;font-weight:800;
  line-height:1.2;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.pv-body{padding:10px 14px 15px}
/* round buttons: ▶ (white) · ＋ · ⌄ */
.pv-btns{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.pv-play,.pv .pv-round{width:36px;height:36px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,border-color .15s,transform .15s}
.pv-play{background:#fff;color:#14091f}
.pv-play:hover{background:#ffd6e6;transform:scale(1.06)}
.pv .pv-round{background:rgba(24,16,48,.6);border:2px solid rgba(255,255,255,.5);color:#fff}
.pv .pv-round:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:scale(1.06)}
.pv-btns svg{width:18px;height:18px;fill:currentColor;display:block}
.pv-more{margin-left:auto}
.pv-meta{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#ece6f5;margin-bottom:6px}
.pv-rate{color:#ffc94d;font-weight:700}
.pv-type{padding:0 6px;border:1px solid rgba(255,255,255,.4);border-radius:4px;font-size:11px;line-height:17px;letter-spacing:.3px}
.pv-genres{font-size:12.5px;color:#d6cee6;margin-bottom:8px}
.pv-genres i{font-style:normal;color:var(--pink);margin:0 7px}
.pv-body p{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:12.5px;line-height:1.55;color:#b9b0cc;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* MODAL + TOAST */
.overlay{position:fixed;inset:0;background:rgba(5,3,15,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{position:relative;background:rgba(25,15,55,.97);border:1px solid var(--line);border-radius:18px;padding:26px;width:min(340px,92vw)}
.modal.video{width:min(920px,94vw);aspect-ratio:16/9;padding:0;overflow:hidden;background:#000}
.modal iframe{width:100%;height:100%;border:0}
.modal h3{color:#fff;margin-bottom:4px}
.close{position:absolute;top:6px;right:12px;background:none;color:#fff;font-size:28px;z-index:2}
/* STATUS PICKER */
.modal.picker{width:min(400px,92vw);padding:22px;background:linear-gradient(160deg,rgba(43,18,85,.97),rgba(18,11,40,.98));box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(255,42,133,.15)}
.pk-head{display:flex;gap:14px;align-items:center;padding-right:28px;margin-bottom:16px}
.pk-head img,.pk-noimg{width:54px;height:80px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#1a1236;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.pk-head small{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink);font-weight:700}
.pk-head h3{font-size:18px;line-height:1.25;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-list{display:flex;flex-direction:column;gap:8px}
.pk-opt{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.pk-opt:hover{background:rgba(255,255,255,.08);border-color:var(--c);transform:translateX(3px)}
.pk-opt:disabled{opacity:.6;cursor:wait}
.pk-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.pk-ico svg,.pk-check svg{width:18px;height:18px;fill:currentColor;display:block}
.pk-txt{flex:1;min-width:0}
.pk-txt b{display:block;font-size:15px}
.pk-txt small{display:block;font-size:12px;opacity:.65;margin-top:1px}
.pk-check{color:var(--c);opacity:0;transition:opacity .2s}
.pk-opt.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.pk-opt.on .pk-check{opacity:1}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;padding:12px 24px;border-radius:999px;z-index:200;font-weight:600;box-shadow:0 0 20px rgba(255,42,133,.6)}

/* FORMS + FILTERS */
.auth{max-width:380px;margin:50px auto;padding:30px;border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 0 30px rgba(255,42,133,.15)}
.auth h2{color:#fff;margin-bottom:16px}
.auth input{width:100%;padding:12px 16px;margin-bottom:12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;outline:none}
.auth input:focus{border-color:var(--pink)}
.auth .btn{width:100%}
.auth .err{color:#ff7a9c;min-height:20px;margin-bottom:8px;font-size:14px}
.auth p{margin-top:14px;font-size:14px}
.auth a{color:var(--pink)}
.auth .auth-note{margin:0 0 14px;font-size:13px;line-height:1.55;opacity:.75}
.auth .nf-title{font-size:28px;margin:0 0 12px}
.auth .field-label{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:#fff}
.auth .forgot-link{display:block;width:max-content;margin:-4px 0 10px auto;font-size:13px}
.auth .code-input{text-align:center;font-size:24px;font-weight:700;letter-spacing:10px}
.auth .code-input::placeholder{font-size:15px;font-weight:400;letter-spacing:normal}
.auth a.btn{color:#fff;text-decoration:none}
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 4%;margin:10px 0 24px}
.filters button,.filters select{padding:9px 18px;border-radius:999px;background:var(--glass);color:var(--soft);border:1px solid var(--line)}
.filters select{background:rgba(20,12,45,.95)}
.filters button.on,.filters button:hover{background:var(--pink);color:#fff}
.page-title{color:#fff;padding:0 4%;margin-bottom:14px;font-size:30px}

/* "I accept the Terms" tick on sign-up and log-in */
.auth .terms-check{display:flex;gap:10px;align-items:flex-start;margin:2px 0 12px;font-size:13.5px;line-height:1.5}
.auth .terms-check input{width:18px;height:18px;margin:1px 0 0;padding:0;flex-shrink:0;accent-color:var(--pink)}

/* About / Terms / Privacy pages: same glass card as the log-in box, wider for reading */
.info-page{max-width:820px;margin:40px auto 60px;padding:36px 40px;border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 0 30px rgba(255,42,133,.15);line-height:1.7;-webkit-user-select:text;user-select:text;cursor:auto}
.info-page h1{color:#fff;font-size:32px;margin-bottom:6px}
.info-page h2{color:#fff;font-size:19px;margin:28px 0 8px}
.info-page p{margin-bottom:10px}
.info-page ul{margin:0 0 10px 22px}
.info-page li{margin-bottom:6px}
.info-page b{color:#fff}
.info-page a{color:var(--pink)}
.info-page .lead{font-size:17px;margin-top:10px}
.info-page .updated{font-size:13px;opacity:.65}
.info-page .info-links{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}

/* footer at the bottom of every page */
.site-footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;width:min(1250px,94%);margin:60px auto 24px;padding:30px 34px 22px;border-radius:24px;background:rgba(20,12,45,.6);border:1px solid var(--line);font-size:14px}
.site-footer .logo{display:inline-block;margin-bottom:10px}
.foot-about p{line-height:1.65;opacity:.85;max-width:430px}
.foot-links{display:flex;flex-direction:column;gap:8px}
.foot-links b{color:#fff;margin-bottom:2px}
.foot-links a:hover{color:var(--pink)}
.foot-note{grid-column:1/-1;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;opacity:.6}

@media(max-width:800px){
  .nav{border-radius:26px;flex-wrap:wrap;padding:12px 16px}
  .search input{width:150px}
  body{padding-top:130px}
    .hero{margin-top:0}
  .ep img,.ep .noimg{width:110px;height:64px}
  .rank{font-size:100px}
}

/* ===== MOBILE FRIENDLY ===== */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
  body { padding-top: 140px; }

  /* navigation: logo + account on top, search, then scrolling links */
  .nav { position: absolute; top: 8px; width: 94%; padding: 8px 12px; gap: 8px; border-radius: 22px; }
  .logo { order: 1; font-size: 15px; letter-spacing: 1px; }
  .auth-link { order: 2; font-size: 12px; padding: 6px 10px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .search + .auth-link { margin-left: auto; }
  .search { order: 3; flex: 0 0 100%; }
  .search input { width: 100%; font-size: 15px; }
  .results { width: 100%; left: 0; right: 0; top: 44px; }
  .links { order: 4; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 2px; scrollbar-width: none; }
  .links::-webkit-scrollbar { display: none; }
  .links a { white-space: nowrap; padding: 6px 12px; font-size: 13px; }

  /* big banner */
    .hero { height: 60vh; min-height: 380px; margin-top: 0; }
  .hero-content { padding: 0 5% 36px; }
  h1, .hero-title { font-size: 26px; }
  .overview { -webkit-line-clamp: 3; line-clamp: 3; font-size: 14px; margin: 8px 0 14px; }
  .btn, .hero .add-btn { padding: 10px 18px; font-size: 14px; }

  /* rows and cards */
  .row { padding: 0 3%; margin: 18px 0; }
  .row h2 { font-size: 18px; }
  .arrow { display: none; }
  .card { flex: 0 0 125px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; padding: 0 3%; }
  .info { padding: 8px; }
  .info h3 { font-size: 13px; }
  .info p { font-size: 11px; }
  .add-btn, .rm { font-size: 11px; padding: 6px; }
  .top-card { flex: 0 0 150px; }
  .top-card .poster { width: 95px; }
  .rank { font-size: 90px; -webkit-text-stroke-width: 2px; }

  /* details page */
  /* picture on top; small poster overlapping its bottom-left; title beside it; the rest full width below */
  .d-top { margin-top: -140px; }
  .d-banner { height: clamp(230px, 40vh, 330px); }
  .d-main { display: grid; grid-template-columns: 116px 1fr; column-gap: 16px; padding: 0 5%; }
  .d-cover-box { width: 116px; margin-top: -74px; grid-column: 1; grid-row: 1; }
  .d-cover-box:hover { transform: none; }
  .d-cover { border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.7), 0 0 0 4px rgba(14,10,31,.6), 0 0 26px rgba(255,42,133,.3); }
  .time-tag.big { right: 6px; bottom: 6px; padding: 2px 7px; font-size: 11.5px; }
  .d-text { animation: none; }
  .d-meta { font-size: 13px; margin-bottom: 0; }
  .d-meta span+span::before { margin: 0 8px; }
  .d-actions { gap: 8px; flex-wrap: nowrap; }
  .d-actions .btn { padding: 11px 12px; font-size: 13.5px; white-space: nowrap; justify-content: center; }
  .d-actions .btn-primary, .d-actions .btn-glass { flex: 1 1 auto; }
  .d-actions .btn-icon { width: 44px; height: 44px; flex: 0 0 44px; }  .d-text { display: contents; }
  .d-head { grid-column: 2; grid-row: 1; padding-top: 12px; min-width: 0; }
  .d-rest { grid-column: 1 / -1; grid-row: 2; padding-top: 16px; }
  .d-head h1 { font-size: 20px; line-height: 1.22; margin: 6px 0 4px; max-width: none; }
  .d-season { font-size: 15px; margin-bottom: 2px; }
  .d-overview { font-size: 15px; line-height: 1.7; margin: 10px 0 6px; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .d-overview.open { display: block; }
  .d-more { display: inline-block; background: none; color: var(--pink); font-weight: 700; font-size: 13px; padding: 0; margin-bottom: 16px; }
  .d-main.no-cover { grid-template-columns: 1fr; }
  .d-main.no-cover .d-head { grid-column: 1; }
  .status-box .status { padding: 8px 14px; font-size: 14px; }
  .sel { max-width: 100%; }
  .ep { gap: 10px; padding: 8px; }
  .ep img, .ep .noimg { width: 110px; height: 64px; }
  .ep p { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cast-card { flex: 0 0 112px; }
  .cast-info { padding: 30px 8px 8px; }
  .cast-info b { font-size: 12px; }
  .cast-info small { font-size: 11px; }

  /* other pages */
  .page-title { font-size: 24px; padding: 0 5%; }
  .filters { padding: 0 3%; gap: 8px; }
  .filters button, .filters select { padding: 7px 14px; font-size: 13px; }
  .auth { width: calc(100% - 28px); margin: 20px auto; padding: 22px; }
  .info-page { width: calc(100% - 28px); margin: 20px auto 40px; padding: 24px 20px; }
  .info-page h1 { font-size: 26px; }
  .info-page h2 { font-size: 17px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 20px 18px; margin-top: 40px; }
  .foot-about { grid-column: 1 / -1; }
  .modal.video { width: 96vw; }
  .toast { bottom: 18px; max-width: 90vw; text-align: center; }
}

/* on touch screens, no hover zoom */
@media (hover: none) {
  .card:hover, .top-card:hover, .cast-card:hover, .news-card:hover { transform: none; box-shadow: none; }
}