:root { color-scheme: dark; --bg:#080b12; --surface:#111724; --surface-2:#1a2232; --text:#f7f8fb; --muted:#a8b0c0; --accent:#60d8ff; --accent-2:#7b6cff; --danger:#ff7d89; --kids:#70e6a4; --radius:18px; }
[hidden] { display:none!important; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 75% -10%,#172844 0,transparent 35rem),var(--bg); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.app-progress { position:fixed; z-index:250; inset:0 0 auto; height:4px; overflow:hidden; background:rgba(96,216,255,.15); }.app-progress>span:first-child { display:block; width:35%; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); animation:app-progress 1.05s ease-in-out infinite; }
@keyframes app-progress { from{transform:translateX(-110%)} to{transform:translateX(395%)} }
a { color:inherit; text-decoration:none; } button,input { font:inherit; }
.app-header { position:sticky; top:0; z-index:20; min-height:76px; padding:max(14px,env(safe-area-inset-top)) clamp(18px,4vw,58px) 14px; display:flex; align-items:center; gap:38px; background:linear-gradient(180deg,rgba(8,11,18,.98),rgba(8,11,18,.86)); backdrop-filter:blur(18px); }
.brand { font-size:25px; font-weight:850; letter-spacing:-1.5px; white-space:nowrap; }.brand span { color:var(--accent); }
nav { display:flex; align-items:center; gap:7px; flex:1; } nav a { color:var(--muted); border:1px solid transparent; border-radius:10px; padding:9px 13px; font-size:15px; font-weight:650; } nav a:hover,nav a:focus-visible { color:var(--text); border-color:#8e97a8; background:rgba(255,255,255,.06); outline:none; }.downloads-link { color:var(--accent)!important; }.search-nav { border-color:#626b7a; color:var(--text); }
.header-actions { display:flex; align-items:center; gap:12px; }.profile-link { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#071018; }.offline-indicator { padding:6px 10px; border-radius:99px; color:#ffdba0; background:#362b1a; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.queue-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:var(--accent); color:#071018; font-size:11px; font-weight:900; }.queue-badge[hidden] { display:none; }
main { padding:0 clamp(18px,4vw,58px) 70px; }.hero { position:relative; min-height:min(56vh,570px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }.google-hero { min-height:clamp(330px,48vw,580px); margin:18px 0 34px; border:1px solid #536078; border-radius:24px; background:linear-gradient(120deg,#172239,#10151f); }.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.64; }.google-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,8,14,.96) 0%,rgba(5,8,14,.7) 42%,rgba(5,8,14,.08) 80%),linear-gradient(0deg,rgba(5,8,14,.7),transparent 50%); }.hero-content { position:relative; z-index:1; width:min(700px,75%); padding:clamp(28px,5vw,70px); }.hero h1,.detail-copy h1,.auth-panel h1,.page-heading h1,.center-panel h1 { margin:.2em 0; font-size:clamp(2.5rem,7vw,5.6rem); line-height:.95; letter-spacing:-.055em; }.hero p,.synopsis,.auth-panel>p,.page-heading p { max-width:680px; color:var(--muted); font-size:clamp(1rem,1.6vw,1.28rem); line-height:1.6; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:850; letter-spacing:.18em; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }.button { border:0; border-radius:12px; padding:13px 19px; display:inline-flex; align-items:center; justify-content:center; gap:9px; color:var(--text); font-weight:780; cursor:pointer; }.button.primary { background:var(--text); color:#080b12; }.button.secondary { background:var(--surface-2); }.button.danger-button { color:#17070a; background:var(--danger); }.button:disabled { opacity:.62; cursor:wait; }.button.compact { padding:9px 13px; font-size:13px; }.button.is-busy::before { content:""; width:1em; height:1em; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:button-spin .72s linear infinite; }
@keyframes button-spin { to{transform:rotate(360deg)} }
.shelf { margin:20px 0 42px; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.shelf h2,.section-heading h2 { margin:0 0 16px; font-size:clamp(1.25rem,2.3vw,1.8rem); }.section-heading p { margin:-10px 0 16px; color:var(--muted); }.kids-safety-badge { margin-bottom:16px; padding:7px 10px; border:1px solid rgba(112,230,164,.38); border-radius:99px; color:var(--kids); background:rgba(34,95,66,.25); font-size:11px; font-weight:900; letter-spacing:.12em; }.media-rail-frame { position:relative; }.card-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,19%); gap:15px; overflow-x:auto; padding:5px 5px 18px; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-inline:contain; touch-action:pan-x pan-y; }.card-row::-webkit-scrollbar { display:none; }.rail-arrow { position:absolute; z-index:5; top:43%; width:46px; height:72px; transform:translateY(-50%); border:1px solid rgba(255,255,255,.2); color:#fff; background:rgba(8,11,18,.78); box-shadow:0 12px 35px rgba(0,0,0,.45); backdrop-filter:blur(12px); font-size:44px; line-height:1; cursor:pointer; }.rail-arrow.previous { left:4px; border-radius:0 16px 16px 0; }.rail-arrow.next { right:4px; border-radius:16px 0 0 16px; }.rail-arrow:hover,.rail-arrow:focus-visible { background:rgba(26,34,50,.98); outline:2px solid var(--accent); }.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px; margin-top:28px; }.results-summary { margin:18px 0 0; color:var(--muted); }.media-card { min-width:0; display:flex; flex-direction:column; gap:6px; scroll-snap-align:start; }.media-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.media-card small,.metadata,.status-message { color:var(--muted); }.poster-placeholder { aspect-ratio:2/3; display:grid; place-items:center; border-radius:var(--radius); background:linear-gradient(145deg,#283855,#111724 62%,#1a1639); box-shadow:0 18px 42px rgba(0,0,0,.22); overflow:hidden; }.poster-placeholder img { width:100%; height:100%; object-fit:cover; }.poster-placeholder>span { font-size:clamp(3rem,7vw,7rem); font-weight:900; color:rgba(255,255,255,.13); }.landscape-poster { aspect-ratio:16/9; border-radius:13px; }.media-card:hover .poster-placeholder,.media-card:focus-visible .poster-placeholder { outline:3px solid #fff; outline-offset:3px; transform:translateY(-2px); }.media-card:focus-visible { outline:none; }
.page-heading { padding:55px 0 24px; }.page-heading h1 { font-size:clamp(2.7rem,6vw,5rem); }.search-form { display:flex; gap:10px; max-width:780px; }.search-form input,.stacked-form input { min-height:52px; border:1px solid #303a4e; border-radius:12px; padding:0 15px; color:var(--text); background:var(--surface); outline:none; }.search-form input { flex:1; }.search-form input:focus,.stacked-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(96,216,255,.12); }
.detail-hero { min-height:calc(100vh - 100px); display:grid; grid-template-columns:minmax(230px,31%) minmax(0,680px); align-items:center; gap:clamp(30px,6vw,90px); padding:40px 5vw; }.detail-poster { width:100%; max-width:380px; }.detail-copy h1 { font-size:clamp(2.7rem,6vw,5.5rem); }.synopsis { font-size:1.08rem; line-height:1.65; }.status-message { min-height:24px; }.auth-panel { width:min(560px,100%); margin:8vh auto; padding:clamp(28px,5vw,58px); border:1px solid #252e40; border-radius:26px; background:rgba(17,23,36,.86); }.auth-panel h1 { font-size:clamp(2.3rem,5vw,4.4rem); }.stacked-form { display:grid; gap:10px; margin-top:30px; }.stacked-form label { margin-top:10px; color:var(--muted); font-weight:650; }.stacked-form .button { margin-top:14px; }.error { color:var(--danger); }.center-panel { text-align:center; padding:10vh 0; }.profile-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:22px; margin-top:40px; }.profile-card { border:0; color:var(--text); background:transparent; display:grid; gap:12px; cursor:pointer; }.profile-card span { width:130px; aspect-ratio:1; display:grid; place-items:center; border-radius:24px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a1120; font-size:52px; font-weight:900; }.profile-card strong { font-size:17px; }
.series-hero { min-height:62vh; display:grid; grid-template-columns:minmax(190px,260px) minmax(0,760px); align-items:center; gap:clamp(30px,6vw,90px); padding:48px 5vw; }.series-hero .detail-copy h1 { margin:.15em 0; }.episode-browser { width:min(1180px,100%); margin:0 auto; }.season-toolbar,.season-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:12px 0 22px; }.season-toolbar { justify-content:flex-start; }.season-toolbar label { color:var(--muted); font-weight:750; }.season-toolbar select { min-height:44px; border:1px solid #39445a; border-radius:10px; padding:0 38px 0 13px; color:var(--text); background:var(--surface); }.season-panel:not(.active) { display:none; }.season-heading h2 { margin:5px 0 0; }.episode-list { display:grid; gap:12px; }.episode-row { display:grid; grid-template-columns:minmax(190px,260px) 1fr; gap:20px; align-items:center; padding:14px; border:1px solid #252e40; border-radius:16px; background:var(--surface); }.episode-image { aspect-ratio:16/9; border-radius:11px; }.episode-image>span { font-size:3rem; }.episode-copy { min-width:0; }.episode-copy>small,.episode-copy>p,.episode-status { color:var(--muted); }.episode-copy h3 { margin:5px 0; font-size:1.2rem; }.episode-copy p { margin:6px 0 12px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.episode-actions { display:flex; flex-wrap:wrap; gap:8px; }.episode-status { display:block; min-height:20px; margin-top:8px; }
.download-list { display:grid; gap:28px; }.download-section { display:grid; gap:12px; }.download-section-heading { display:flex; align-items:center; gap:10px; }.download-section-heading h2 { margin:0; font-size:1.35rem; }.download-section-heading span { display:grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:99px; color:#071018; background:var(--accent); font-size:12px; font-weight:900; }.download-row { display:grid; grid-template-columns:92px 1fr auto; gap:16px; align-items:center; padding:14px; border:1px solid #252e40; border-radius:16px; background:var(--surface); }.download-row>div:not(.download-actions) { display:grid; gap:5px; min-width:0; }.download-row small { color:var(--muted); line-height:1.4; }.download-icon { width:92px; height:62px; display:grid; place-items:center; border-radius:10px; overflow:hidden; background:linear-gradient(145deg,#283855,#1a1639); font-size:28px; font-weight:900; }.download-icon img { width:100%; height:100%; object-fit:cover; }.download-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.empty-state { padding:52px; border:1px dashed #334058; border-radius:var(--radius); text-align:center; color:var(--muted); }.empty-state h2 { color:var(--text); }
.download-native { background:#163d35!important; color:#76efc2!important; }.download-convert { background:#4a3514!important; color:#ffd27a!important; }.state-prepare { border-color:#80622d; }.state-ready { border-color:#286b58; }.state-paused,.state-needs-attention,.state-needs-auth { border-color:#80622d; }.state-downloading { border-color:#2f7192; }.state-label { border-radius:99px; padding:7px 10px; font-size:12px; font-weight:850; }.state-label.prepare { color:#ffd27a; background:#4a3514; } progress { width:100%; height:7px; accent-color:var(--accent); }
#app-notifications { position:fixed; z-index:100; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:grid; gap:10px; width:min(380px,calc(100vw - 36px)); }.app-toast { display:grid; gap:4px; padding:15px 17px; border:1px solid #47546c; border-radius:14px; background:rgba(17,23,36,.96); box-shadow:0 18px 50px rgba(0,0,0,.4); }.app-toast span { color:var(--muted); font-size:14px; }
.app-dialog { width:min(470px,calc(100vw - 36px)); padding:28px; border:1px solid #52617a; border-radius:22px; color:var(--text); background:linear-gradient(145deg,#172033,#0e141f); box-shadow:0 28px 90px rgba(0,0,0,.65); }.app-dialog::backdrop { background:rgba(2,5,10,.78); backdrop-filter:blur(8px); }.app-dialog .dialog-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:var(--danger); background:rgba(255,125,137,.13); font-size:24px; font-weight:900; }.app-dialog h2 { margin:18px 0 8px; font-size:1.65rem; }.app-dialog p { margin:0; color:var(--muted); line-height:1.55; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }
.offline-hero { padding:clamp(55px,9vw,110px) 0 42px; max-width:860px; }.offline-hero h1 { margin:.2em 0; font-size:clamp(3rem,8vw,6.6rem); line-height:.94; letter-spacing:-.06em; }.offline-hero p,.offline-storage { color:var(--muted); font-size:clamp(1rem,1.7vw,1.25rem); line-height:1.6; }.offline-status { display:flex; align-items:center; gap:10px; margin-top:24px; color:var(--kids); }.offline-status span { filter:drop-shadow(0 0 8px var(--kids)); }.offline-storage { margin:0 0 28px; }
.player-mode .app-header { display:none; }.player-mode main { padding:0; }.player-shell { min-height:100vh; background:#000; display:grid; grid-template-rows:auto 1fr auto; position:relative; }.player-heading { padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)); display:flex; gap:24px; align-items:center; }.back-link { color:var(--accent); }.player-shell video { width:100%; height:calc(100vh - 100px); object-fit:contain; }.player-message { text-align:center; color:var(--muted); padding:14px; }.resume-choice { position:absolute; z-index:4; left:50%; bottom:max(42px,env(safe-area-inset-bottom)); width:min(560px,calc(100% - 36px)); transform:translateX(-50%); padding:20px; border:1px solid #52617a; border-radius:18px; background:rgba(17,23,36,.96); box-shadow:0 24px 70px rgba(0,0,0,.7); }.resume-choice>div:first-child { display:grid; gap:5px; }.resume-choice span { color:var(--muted); }.resume-actions { display:flex; gap:10px; margin-top:17px; }
@media(max-width:720px){.app-header{gap:14px;flex-wrap:wrap}.app-header nav{order:3;width:100%;overflow-x:auto;padding-bottom:5px}.header-actions{margin-left:auto}.card-row{grid-auto-columns:42%}.detail-hero,.series-hero{grid-template-columns:1fr;padding-top:28px}.detail-poster{max-width:230px}.episode-row{grid-template-columns:1fr}.download-row{grid-template-columns:52px 1fr}.download-actions{grid-column:1/-1}.search-form{flex-direction:column}}
@media(prefers-reduced-motion:no-preference){.poster-placeholder,.button{transition:transform .18s ease,outline-color .18s ease}.button:active{transform:scale(.97)}}

/* FiWiTv premium visual system */
:root {
    --bg:#05070c; --surface:#101622; --surface-2:#182132; --surface-glass:rgba(16,22,34,.72);
    --text:#f8f9ff; --muted:#aab3c6; --accent:#55d8ff; --accent-2:#8273ff; --accent-3:#42efbd;
    --danger:#ff7282; --kids:#6df0ad; --radius:22px; --shadow:0 24px 70px rgba(0,0,0,.46);
    --pointer-x:72vw; --pointer-y:14vh;
}
html { scroll-behavior:smooth; background:#05070c; }
html::before { content:""; position:fixed; z-index:-2; inset:0; pointer-events:none; background:radial-gradient(620px circle at var(--pointer-x) var(--pointer-y),rgba(71,164,255,.105),transparent 62%); }
body { overflow-x:hidden; background:linear-gradient(180deg,#070a11 0,#05070c 35%,#070a11 100%); }
body::after { content:""; position:fixed; z-index:300; inset:0; pointer-events:none; opacity:.028; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.8) 1px,transparent 1px,transparent 3px); mix-blend-mode:soft-light; }
.app-ambient { position:fixed; z-index:-3; inset:0; overflow:hidden; pointer-events:none; }
.app-ambient span { position:absolute; width:46rem; height:46rem; border-radius:50%; filter:blur(120px); opacity:.13; }
.app-ambient span:first-child { top:-28rem; right:-12rem; background:#3487ff; animation:ambient-drift 18s ease-in-out infinite alternate; }
.app-ambient span:last-child { left:-30rem; top:42vh; background:#6f55ff; animation:ambient-drift 24s ease-in-out -7s infinite alternate-reverse; }
@keyframes ambient-drift { to { transform:translate3d(7vw,6vh,0) scale(1.12); } }

.app-header { min-height:84px; padding:max(17px,env(safe-area-inset-top)) clamp(22px,4.2vw,70px) 16px; gap:44px; border-bottom:1px solid rgba(255,255,255,.035); background:linear-gradient(180deg,rgba(5,7,12,.94),rgba(5,7,12,.72)); transition:min-height .28s ease,padding .28s ease,background .28s ease,box-shadow .28s ease; }
.app-header.is-scrolled { min-height:66px; padding-top:max(10px,env(safe-area-inset-top)); padding-bottom:10px; background:rgba(5,7,12,.88); box-shadow:0 16px 45px rgba(0,0,0,.28); }
.brand { display:flex; align-items:center; gap:1px; font-size:27px; letter-spacing:-1.9px; filter:drop-shadow(0 0 18px rgba(85,216,255,.14)); }
.brand i { width:11px; height:11px; margin-right:4px; border-radius:3px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 20px rgba(85,216,255,.55); transform:rotate(45deg); }
nav { gap:6px; }
nav a { position:relative; padding:10px 15px; border:0; color:#9da6ba; border-radius:13px; transition:color .2s ease,background .2s ease,transform .2s ease; }
nav a::after { content:""; position:absolute; left:16px; right:16px; bottom:3px; height:2px; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); opacity:0; transition:transform .25s ease,opacity .25s ease; }
nav a:hover,nav a:focus-visible { color:#fff; border:0; background:rgba(255,255,255,.055); transform:translateY(-1px); }
nav a[aria-current="page"] { color:#fff; background:rgba(255,255,255,.075); }
nav a[aria-current="page"]::after { transform:scaleX(1); opacity:1; }
.search-nav { border:1px solid rgba(164,177,201,.5)!important; background:rgba(255,255,255,.025); }
.downloads-link { color:var(--accent)!important; }
.profile-link { position:relative; width:42px; height:42px; border:2px solid rgba(255,255,255,.65); background:linear-gradient(145deg,#65e0ff,#736eff 58%,#ba69ff); box-shadow:0 0 0 4px rgba(255,255,255,.035),0 10px 30px rgba(77,115,255,.25); transition:transform .22s ease,box-shadow .22s ease; }
.profile-link:hover,.profile-link:focus-visible { transform:scale(1.08); box-shadow:0 0 0 4px rgba(85,216,255,.13),0 12px 34px rgba(77,115,255,.4); outline:none; }
.profile-link span { color:#071019; font-size:14px; font-weight:950; }
.offline-indicator { display:flex; align-items:center; gap:7px; border:1px solid rgba(255,202,113,.18); }
.offline-indicator i,.travel-ready-pill i { display:block; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 11px currentColor; }
.queue-badge { box-shadow:0 0 0 3px #080b12,0 0 18px rgba(85,216,255,.45); animation:badge-arrive .35s cubic-bezier(.2,.9,.2,1.3); }
@keyframes badge-arrive { from { transform:scale(.2); } }

main { position:relative; isolation:isolate; padding:0 clamp(22px,4.2vw,70px) 90px; }
.hero-carousel { position:relative; display:grid; margin:8px 0 52px; }
.hero-slide { grid-area:1/1; margin:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(18px) scale(.992); transition:opacity .55s ease,transform .65s cubic-bezier(.2,.75,.2,1),visibility 0s linear .65s; }
.hero-slide.is-active { z-index:1; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
.hero-hit-area { position:absolute; z-index:2; inset:0; border-radius:inherit; }
.hero-content { z-index:3; }
.hero-carousel-arrow { position:absolute; z-index:5; top:50%; display:grid; place-items:center; width:48px; height:88px; transform:translateY(-50%); border:1px solid rgba(255,255,255,.15); color:#fff; background:rgba(5,8,14,.66); backdrop-filter:blur(18px); font-size:42px; line-height:1; cursor:pointer; opacity:.42; transition:opacity .2s ease,background .2s ease,transform .2s ease; }
.hero-carousel-arrow.previous { left:0; border-radius:0 16px 16px 0; }
.hero-carousel-arrow.next { right:0; border-radius:16px 0 0 16px; }
.hero-carousel:hover .hero-carousel-arrow,.hero-carousel:focus-within .hero-carousel-arrow { opacity:1; }
.hero-carousel-arrow:hover,.hero-carousel-arrow:focus-visible { background:rgba(27,37,55,.96); outline:2px solid var(--accent); transform:translateY(-50%) scale(1.04); }
.hero-pagination { position:absolute; z-index:5; left:clamp(36px,6.2vw,92px); bottom:25px; display:flex; gap:7px; }
.hero-pagination button { width:25px; height:4px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.27); cursor:pointer; transition:width .25s ease,background .25s ease; }
.hero-pagination button.is-active { width:58px; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.7); }
.google-hero { min-height:clamp(470px,68vh,720px); margin:8px 0 52px; border:1px solid rgba(255,255,255,.12); border-radius:30px; background:#111826; box-shadow:0 35px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08); }
.hero-carousel .google-hero { margin:0; }
.hero-art { opacity:.83; transform:scale(1.015); animation:hero-breathe 16s ease-in-out infinite alternate; }
@keyframes hero-breathe { to { transform:scale(1.065) translate3d(-.5%,.4%,0); } }
.hero-vignette { position:absolute; z-index:1; inset:0; border-radius:inherit; background:linear-gradient(90deg,rgba(3,5,9,.97) 0%,rgba(3,5,9,.77) 38%,rgba(3,5,9,.12) 78%),linear-gradient(0deg,rgba(3,5,9,.82),transparent 48%),radial-gradient(circle at 70% 35%,transparent 0,rgba(3,5,9,.06) 50%); }
.google-hero::after { z-index:1; background:linear-gradient(180deg,transparent 70%,rgba(5,7,12,.4)); }
.hero-content { width:min(760px,77%); padding:clamp(36px,6.2vw,92px); }
.hero h1 { max-width:780px; margin:.12em 0 .18em; font-size:clamp(3rem,7.4vw,7.1rem); line-height:.88; letter-spacing:-.068em; text-wrap:balance; text-shadow:0 14px 44px rgba(0,0,0,.5); }
.hero p { max-width:650px; margin:18px 0 0; color:#c2cad8; font-size:clamp(1rem,1.45vw,1.23rem); line-height:1.58; text-shadow:0 4px 18px #000; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--accent); font-size:11px; letter-spacing:.22em; text-shadow:0 0 18px rgba(85,216,255,.24); }
.eyebrow::before { content:""; width:22px; height:2px; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(85,216,255,.55); }
.hero-meta,.metadata { display:flex; flex-wrap:wrap; align-items:center; gap:8px 13px; color:#bac3d4; }
.hero-meta { margin:15px 0 0; font-size:14px; font-weight:650; }
.hero-meta span:not(:first-child)::before,.metadata span:not(:first-child)::before { content:""; display:inline-block; width:3px; height:3px; margin:0 11px 3px 0; border-radius:50%; background:#737d91; }
.match-score { color:var(--accent-3); font-weight:850; }
.hero-progress { position:absolute; z-index:3; left:clamp(36px,6.2vw,92px); bottom:26px; width:min(150px,24vw); height:3px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.2); }
.hero-progress span { display:block; width:42%; height:100%; background:#fff; box-shadow:0 0 12px #fff; }

.button { min-height:48px; border:1px solid transparent; border-radius:14px; padding:13px 21px; letter-spacing:-.01em; box-shadow:0 10px 26px rgba(0,0,0,.18); transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease; }
.button.primary { background:#f7f8fc; box-shadow:0 13px 34px rgba(0,0,0,.35); }
.button.secondary { border-color:rgba(255,255,255,.08); background:rgba(31,41,60,.86); backdrop-filter:blur(16px); }
.button:hover,.button:focus-visible { transform:translateY(-2px) scale(1.015); outline:none; }
.button.primary:hover,.button.primary:focus-visible { background:#fff; box-shadow:0 15px 40px rgba(0,0,0,.42),0 0 0 4px rgba(255,255,255,.1); }
.button.secondary:hover,.button.secondary:focus-visible { border-color:rgba(115,211,255,.32); background:#253149; box-shadow:0 15px 35px rgba(0,0,0,.28),0 0 24px rgba(85,216,255,.08); }
.play-button span { color:#070a10; font-size:.86em; }
.info-button span { color:var(--accent); font-size:1.1em; }
.button.compact { min-height:38px; border-radius:11px; }

.shelf { margin:24px 0 54px; }
.shelf h2,.section-heading h2 { margin-bottom:18px; font-size:clamp(1.35rem,2.25vw,2rem); letter-spacing:-.035em; }
.section-heading p { color:#8994a9; }
.media-rail-frame { margin:0 calc(clamp(22px,4.2vw,70px) * -1); }
.card-row { grid-auto-columns:minmax(165px,19.5%); gap:18px; margin:0; padding:8px clamp(22px,4.2vw,70px) 28px; scroll-padding-inline:clamp(22px,4.2vw,70px); }
.card-row:focus-visible { outline:none; }
.media-card-shell { position:relative; min-width:0; scroll-snap-align:start; border-radius:18px; transition:transform .3s cubic-bezier(.2,.75,.2,1),filter .3s ease; }
.media-card-shell>.media-card { height:100%; scroll-snap-align:none; }
.media-card { position:relative; gap:9px; padding:4px; border-radius:18px; transition:transform .3s cubic-bezier(.2,.75,.2,1),filter .3s ease; }
.media-card strong { padding:0 2px; font-size:15px; letter-spacing:-.02em; }
.media-card small { padding:0 2px; font-size:12.5px; }
.media-card:hover,.media-card:focus-visible { z-index:4; transform:translateY(-8px) scale(1.035); filter:drop-shadow(0 23px 35px rgba(0,0,0,.45)); }
.media-card-shell:hover,.media-card-shell:focus-within { z-index:6; transform:translateY(-8px) scale(1.035); filter:drop-shadow(0 23px 35px rgba(0,0,0,.45)); }
.media-card-shell:hover>.media-card,.media-card-shell:focus-within>.media-card { transform:none; filter:none; }
.poster-placeholder { position:relative; border:1px solid rgba(255,255,255,.075); background:linear-gradient(120deg,#151c2b 24%,#222c40 42%,#151c2b 62%); background-size:280% 100%; box-shadow:0 18px 42px rgba(0,0,0,.28); transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease; animation:poster-shimmer 2.2s linear infinite; }
@keyframes poster-shimmer { to { background-position:-180% 0; } }
.poster-placeholder:has(img[data-image-ready="true"]) { animation:none; }
.poster-placeholder::after { content:"▶"; position:absolute; z-index:2; left:50%; top:50%; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#071018; background:rgba(255,255,255,.92); box-shadow:0 12px 35px rgba(0,0,0,.38); opacity:0; transform:translate(-50%,-42%) scale(.72); transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1); }
.media-card:hover .poster-placeholder::after,.media-card:focus-visible .poster-placeholder::after { opacity:1; transform:translate(-50%,-50%) scale(1); }
.poster-placeholder img { opacity:1; transform:scale(1.035); transition:opacity .48s ease,transform .6s cubic-bezier(.2,.75,.2,1); }
.poster-placeholder img[data-image-ready="true"] { opacity:1; }
.media-card:hover img,.media-card:focus-visible img { transform:scale(1.075); }
.media-card:hover .poster-placeholder,.media-card:focus-visible .poster-placeholder { border-color:rgba(255,255,255,.72); outline:0; box-shadow:0 24px 60px rgba(0,0,0,.52),0 0 0 3px rgba(255,255,255,.12); }
.landscape-poster { border-radius:17px; }
.card-quick-actions { position:absolute; z-index:8; top:14px; right:14px; display:flex; gap:7px; opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .2s ease,transform .25s ease; }
.media-card-shell:hover .card-quick-actions,.media-card-shell:focus-within .card-quick-actions { opacity:1; transform:none; pointer-events:auto; }
.card-action { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; color:#fff; background:rgba(5,8,14,.82); box-shadow:0 8px 22px rgba(0,0,0,.42); backdrop-filter:blur(14px); font-size:19px; font-weight:900; cursor:pointer; transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease; }
.card-action:hover,.card-action:focus-visible { color:#071018; background:#fff; border-color:#fff; outline:2px solid var(--accent); outline-offset:2px; transform:scale(1.08); }
.card-action.favorite-action.is-selected { color:#ff7da9; border-color:rgba(255,125,169,.68); }
.media-card-shell.is-queued .poster-placeholder { border-color:rgba(112,230,164,.64); box-shadow:0 0 0 2px rgba(112,230,164,.14),0 24px 55px rgba(0,0,0,.4); }
.rail-arrow { top:44%; width:52px; height:86px; border-color:rgba(255,255,255,.15); background:rgba(6,9,15,.72); opacity:.2; backdrop-filter:blur(18px); transition:opacity .2s ease,background .2s ease,transform .2s ease; }
.rail-arrow.previous { left:0; }
.rail-arrow.next { right:0; }
.media-rail-frame:hover .rail-arrow,.media-rail-frame:focus-within .rail-arrow { opacity:1; }
.rail-arrow:hover,.rail-arrow:focus-visible { background:rgba(25,34,52,.95); transform:translateY(-50%) scale(1.04); }

.page-heading { padding:clamp(62px,9vw,125px) 0 38px; }
.page-heading h1,.center-panel h1,.auth-panel h1 { margin:.18em 0; font-size:clamp(3rem,7.8vw,7rem); line-height:.9; letter-spacing:-.07em; text-wrap:balance; }
.page-heading p { color:#9da8bb; }
.search-form { max-width:940px; padding:7px; border:1px solid rgba(255,255,255,.11); border-radius:18px; background:rgba(17,23,36,.72); box-shadow:0 22px 60px rgba(0,0,0,.28); backdrop-filter:blur(20px); }
.search-form input { border:0; background:transparent; font-size:17px; }
.search-form input:focus { border:0; box-shadow:none; }
.card-grid { gap:24px 18px; }

.detail-backdrop { position:absolute; z-index:-1; top:0; left:calc(clamp(22px,4.2vw,70px) * -1); right:calc(clamp(22px,4.2vw,70px) * -1); height:min(85vh,850px); overflow:hidden; pointer-events:none; }
.detail-backdrop img { width:100%; height:100%; object-fit:cover; opacity:.3; filter:saturate(.82) contrast(1.08); transform:scale(1.06); animation:hero-breathe 18s ease-in-out infinite alternate; }
.detail-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#05070c 3%,rgba(5,7,12,.62) 45%,rgba(5,7,12,.35)),linear-gradient(0deg,#05070c 0%,transparent 58%,rgba(5,7,12,.18)); }
.detail-hero,.series-hero { min-height:calc(100vh - 86px); grid-template-columns:minmax(230px,29%) minmax(0,760px); padding:48px 4vw 70px; }
.detail-poster { max-width:410px; border-radius:26px; box-shadow:0 35px 100px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.12); }
.detail-poster::after,.episode-image::after,.download-icon::after { display:none; }
.detail-copy h1 { font-size:clamp(3.2rem,7vw,7.4rem); line-height:.87; letter-spacing:-.072em; text-shadow:0 18px 55px rgba(0,0,0,.55); text-wrap:balance; }
.metadata { margin:22px 0; font-size:15px; }
.synopsis { color:#b4bed0; }
.status-message { margin-top:18px; color:#9ea9bd; }

.episode-browser { padding-bottom:70px; }
.season-toolbar { position:sticky; z-index:8; top:72px; width:max-content; padding:8px 10px 8px 14px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(12,17,27,.82); backdrop-filter:blur(18px); }
.season-toolbar select { border:0; background:#1d2739; }
.episode-list { gap:14px; }
.episode-row { padding:16px; border-color:rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(120deg,rgba(20,27,41,.9),rgba(14,19,30,.8)); box-shadow:0 18px 48px rgba(0,0,0,.16); transition:transform .24s ease,border-color .24s ease,background .24s ease; }
.episode-row:hover,.episode-row:focus-within { transform:translateY(-3px); border-color:rgba(85,216,255,.28); background:linear-gradient(120deg,rgba(26,36,54,.95),rgba(16,22,34,.9)); }
.episode-image { overflow:hidden; }

.downloads-heading { position:relative; }
.travel-ready-pill { display:flex; width:max-content; align-items:center; gap:9px; margin-top:17px; padding:9px 13px; border:1px solid rgba(66,239,189,.19); border-radius:99px; color:#72e8c1; background:rgba(24,75,63,.22); font-size:13px; }
.download-section { gap:14px; }
.download-row { padding:17px; border-color:rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(115deg,rgba(19,26,40,.95),rgba(13,18,29,.9)); box-shadow:0 16px 46px rgba(0,0,0,.18); transition:transform .22s ease,border-color .22s ease; }
.download-row:hover { transform:translateY(-2px); border-color:rgba(85,216,255,.22); }
.download-icon { border:1px solid rgba(255,255,255,.08); border-radius:13px; }
progress { height:6px; border:0; border-radius:99px; overflow:hidden; background:#293246; }
progress::-webkit-progress-bar { border-radius:99px; background:#293246; }
progress::-webkit-progress-value { border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px rgba(85,216,255,.52); transition:width .35s ease; }
.state-ready { border-color:rgba(66,239,189,.32); box-shadow:inset 3px 0 0 rgba(66,239,189,.65),0 16px 46px rgba(0,0,0,.18); }
.state-needs-attention,.state-needs-auth { box-shadow:inset 3px 0 0 #d7a84c,0 16px 46px rgba(0,0,0,.18); }

.auth-panel { position:relative; overflow:hidden; width:min(610px,100%); margin:7vh auto; border-color:rgba(255,255,255,.11); background:linear-gradient(145deg,rgba(22,30,47,.92),rgba(9,13,21,.9)); box-shadow:0 40px 120px rgba(0,0,0,.52); backdrop-filter:blur(25px); }
.auth-panel::before { content:""; position:absolute; width:280px; height:280px; right:-150px; top:-150px; border-radius:50%; background:var(--accent-2); filter:blur(80px); opacity:.17; }
.stacked-form input { border-color:rgba(255,255,255,.11); background:rgba(8,12,20,.72); }
.stacked-form input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(85,216,255,.1),0 12px 30px rgba(0,0,0,.24); }
.profile-card span { border:1px solid rgba(255,255,255,.18); background:linear-gradient(145deg,#66e5ff,#7470ff 58%,#be68ff); box-shadow:0 24px 60px rgba(73,91,236,.28); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease; }
.profile-card:hover span,.profile-card:focus-visible span { transform:translateY(-9px) scale(1.04); box-shadow:0 35px 80px rgba(73,91,236,.42),0 0 0 4px rgba(255,255,255,.1); }

.app-dialog { border-color:rgba(255,255,255,.16); background:linear-gradient(145deg,rgba(28,38,58,.98),rgba(9,13,21,.98)); animation:dialog-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes dialog-in { from { opacity:0; transform:translateY(16px) scale(.96); } }
.app-toast { position:relative; overflow:hidden; border-color:rgba(255,255,255,.12); background:rgba(16,23,36,.94); box-shadow:0 24px 70px rgba(0,0,0,.52); backdrop-filter:blur(20px); animation:toast-in .42s cubic-bezier(.2,.8,.2,1); }
.app-toast::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(var(--accent),var(--accent-2)); }
@keyframes toast-in { from { opacity:0; transform:translateX(25px) scale(.96); } }

.app-progress { height:3px; background:transparent; }
.app-progress>span:first-child { width:28%; background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent-2),transparent); box-shadow:0 0 18px rgba(85,216,255,.72); }
.app-is-busy main { opacity:.72; transform:scale(.996); transition:opacity .16s ease,transform .16s ease; }
[data-reveal-ready="true"] { opacity:0; transform:translateY(17px); transition:opacity .55s ease var(--reveal-delay,0ms),transform .55s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms); }
[data-reveal-ready="true"].is-revealed { opacity:1; transform:none; }
html.app-ready main { animation:page-arrive .45s ease both; }
@keyframes page-arrive { from { opacity:0; transform:translateY(7px); } }
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:page-out .18s ease both; }
::view-transition-new(root) { animation:page-arrive .38s ease both; }
@keyframes page-out { to { opacity:0; transform:scale(.992); } }

.player-shell { background:radial-gradient(circle at center,#151b28,#000 60%); }
.player-heading { background:linear-gradient(180deg,rgba(0,0,0,.82),transparent); }
.resume-choice { border-color:rgba(255,255,255,.16); background:rgba(15,21,33,.93); backdrop-filter:blur(24px); animation:resume-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes resume-in { from { opacity:0; transform:translate(-50%,16px) scale(.97); } }

@media(max-width:900px) {
    .app-header { gap:18px; }
    nav a { padding:9px 11px; }
    .card-row { grid-auto-columns:minmax(155px,31%); }
    .hero-content { width:min(720px,88%); }
    .detail-hero,.series-hero { grid-template-columns:minmax(210px,34%) minmax(0,1fr); gap:35px; padding-inline:0; }
}
@media(max-width:720px) {
    .app-header { padding-inline:18px; background:rgba(5,7,12,.94); }
    .app-header nav { flex:1 0 100%; order:3; width:100%; margin:0 -18px; padding:5px 18px 4px; scrollbar-width:none; }
    nav a { flex:none; }
    .search-nav { order:-1; }
    main { padding-inline:18px; }
    .hero-carousel { margin-inline:-18px; }
    .google-hero { min-height:66vh; margin-inline:-18px; border-width:1px 0; border-radius:0; }
    .hero-carousel .google-hero { margin-inline:0; }
    .hero-carousel-arrow { display:none; }
    .hero-vignette { border-radius:0; background:linear-gradient(0deg,rgba(3,5,9,.98) 0%,rgba(3,5,9,.58) 55%,rgba(3,5,9,.12)),linear-gradient(90deg,rgba(3,5,9,.7),transparent); }
    .hero-content { align-self:flex-end; width:100%; padding:44px 24px 55px; }
    .hero h1 { font-size:clamp(2.9rem,14vw,5rem); }
    .hero p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .hero-progress { left:24px; bottom:20px; }
    .media-rail-frame { margin-inline:-18px; }
    .card-row { grid-auto-columns:43%; margin-inline:0; padding-inline:18px; scroll-padding-inline:18px; }
    .rail-arrow { display:none; }
    .page-heading h1,.center-panel h1,.auth-panel h1 { font-size:clamp(3rem,15vw,5.2rem); }
    .detail-backdrop { left:-18px; right:-18px; height:65vh; }
    .detail-backdrop::after { background:linear-gradient(0deg,#05070c 3%,rgba(5,7,12,.55) 60%,rgba(5,7,12,.18)); }
    .detail-hero,.series-hero { grid-template-columns:1fr; padding:30px 0 60px; }
    .detail-poster { max-width:230px; margin:auto; }
    .detail-copy h1 { font-size:clamp(3rem,14vw,5.6rem); }
    .season-toolbar { top:126px; }
    .download-row { grid-template-columns:62px 1fr; }
    .download-icon { width:62px; height:54px; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    [data-reveal-ready="true"] { opacity:1; transform:none; }
}