@font-face{font-family:Inter;src:url('/fonts/inter.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Sora;src:url('/fonts/sora.woff2') format('woff2');font-weight:600 700;font-display:swap}
:root{--bg:#0a0c11;--surface:#12151d;--card:#141821;--border:#ffffff14;--line:#ffffff14;--text:#f4f6fa;--text-2:#c9cfda;--text-3:#9aa3b2;--text-4:#8a93a4;--muted:#9aa3b2;--accent:#4d7cff;--accent-hover:#7298ff;--success:#7be3b0;font-family:Inter,system-ui,sans-serif}
body,#app{background:var(--bg);color:var(--text)}
button,input,select{font-family:Inter,system-ui,sans-serif}h1,h2,h3,.brand-text{font-family:Inter,system-ui,sans-serif}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.button{border-radius:999px;min-height:44px;padding:11px 20px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.4}
.button.primary{background:var(--accent);border:1px solid var(--accent);color:#fff;min-height:48px}
.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.secondary{background:#ffffff07;border:1px solid #ffffff24;color:var(--text-2)}
.button.secondary:hover{background:#ffffff10;border-color:#ffffff40;color:var(--text)}
.button:disabled{opacity:.42;cursor:default}
.topbar{height:auto;min-height:86px;padding:16px clamp(20px,3.5vw,60px);gap:26px;border-bottom:1px solid var(--border);background:rgba(10,12,17,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.topbar .brand-text{font-size:22px;font-weight:600;letter-spacing:-.8px}.brand-logo{width:27px;height:32px}
.top-nav{gap:4px}.nav-button{border:0;border-radius:999px;min-height:44px;padding:11px 16px;font-size:13px;font-weight:500;color:var(--text-3)}
.nav-button.active{background:#ffffff1a;border:0;box-shadow:none;color:var(--text)}
.nav-button:hover:not(.active){background:#ffffff09;border:0}
.request-count{display:inline-grid;place-items:center;font-size:10px;margin-left:5px;min-width:19px;height:19px;background:#4d7cff24;border-radius:999px;color:var(--accent);padding:0 5px}
.top-actions{gap:9px}.topbar .search-box{width:210px;height:44px;border:1px solid #ffffff18;border-radius:999px;gap:10px;background:#ffffff05;padding:0 15px;box-shadow:none}
.topbar .search-box:focus-within{border-color:#4d7cff80;box-shadow:none}
.search-box svg,.round-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.search-box svg{color:var(--text-3)}.topbar .search-box input{background:none;border:0;outline:0;padding:0;font-size:12px}.topbar .search-box input::placeholder{color:var(--text-4)}
.round-button,.avatar{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff20;background:#ffffff06;display:inline-grid;place-items:center;color:var(--text-2);flex-shrink:0}
.avatar{background:#4d7cff17;border-color:#4d7cff40;color:var(--accent);font-weight:600}
.notification-button{position:relative}.topbar #server-button{display:none}
.find-page{padding:0 0 60px}.find-page>.collection-heading{display:none}
.find-hero{min-height:560px;border:0;border-radius:0;background:var(--bg);margin:0;overflow:hidden;isolation:isolate}
.find-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2}
.find-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0c11 0%,#0a0c11e0 20%,#0a0c1170 55%,#0a0c1122 100%),linear-gradient(0deg,#0a0c11 0%,transparent 60%);z-index:-1}
.find-hero-copy{padding:80px clamp(24px,4vw,64px) 110px;max-width:860px}
.find-hero-copy .eyebrow{font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--accent);text-transform:none;margin:0 0 20px}
.find-hero h2{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:clamp(44px,6vw,76px);line-height:1.08;letter-spacing:-2.8px;margin:0 0 22px;max-width:780px;text-wrap:balance}
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-2);margin:0 0 20px}
.hero-meta>span:empty{display:none}.hero-meta .rating{border:1px solid #ffffff45;padding:2px 6px;border-radius:4px;font-size:10px}
.find-hero .hero-synopsis{max-width:560px;color:var(--text-2);line-height:1.8;font-size:13px;margin:0 0 27px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.find-hero .actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.find-hero .button.secondary{background:#ffffff0b;border-color:#ffffff30}
.heart-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linejoin:round;stroke-linecap:round;display:block;flex-shrink:0}
[aria-pressed=true]>.heart-icon{fill:var(--accent);stroke:var(--accent)}
.find-hero .preference-button{width:auto;padding:11px 18px}
.find-hero-controls{position:absolute;left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);bottom:35px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-dots{display:flex;align-items:center;gap:7px}.hero-dots button{height:28px;width:14px;border:0;background:transparent;padding:0;position:relative}
.hero-dots button:after{content:"";display:block;width:6px;height:6px;margin:auto;background:#ffffff55;border-radius:99px}.hero-dots button.selected{width:30px}.hero-dots button.selected:after{width:25px;background:var(--accent)}
.hero-arrows{display:flex;gap:8px}.hero-arrows button{background:#0a0c1166;font-size:24px;border-color:#ffffff30}
.find-row,.find-on-way{padding:0 clamp(24px,4vw,64px);margin:32px 0 40px;min-height:0}.find-row .section-heading,.find-on-way .section-heading{margin-bottom:20px}
.find-row .section-heading h2,.find-on-way h2{font-size:21px;letter-spacing:-.7px;font-weight:600}
.section-link{font-size:12px;color:var(--text-3);min-height:44px}.section-link:hover{color:var(--accent)}
.find-row .poster-row{grid-auto-columns:168px;gap:20px;padding:5px 2px 14px;scrollbar-color:#ffffff16 transparent}
.find-art{position:relative}.find-art .poster-card{display:block;width:100%;padding:0}.find-art .poster-image{aspect-ratio:2/3;border-radius:14px;box-shadow:none;border:1px solid #ffffff0d;transition:transform .15s,border-color .15s}
.find-art .poster-image img{border-radius:14px;transform:none!important}
.find-art:hover .poster-image{border-color:#4d7cffa0;transform:translateY(-4px);box-shadow:0 12px 28px #0006}
.find-card-copy>.availability{position:absolute;top:11px;left:10px;max-width:135px;pointer-events:none;border:1px solid #ffffff2b;background:#0a0c11cf;color:var(--text-2);padding:5px 9px;border-radius:999px;font-size:9px;font-weight:500;line-height:1.2;margin:0}
.find-card-copy>.availability.available{color:var(--success);border-color:#7be3b04d;background:#10251fdd}
.find-card-copy h3{font-family:Inter,system-ui,sans-serif;font-size:12px;line-height:1.5;font-weight:600;margin:14px 0 5px;overflow:hidden}
.find-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;border:0;padding:0;background:none;font:inherit;color:var(--text);text-align:left;min-height:24px}
.find-card-copy p{font-size:11px;line-height:1.6;color:var(--text-3);margin:0;min-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.find-art .find-heart{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #ffffff50;background:#0a0c11ce;opacity:0;color:#f4f6fa}
.find-art:hover .find-heart,.find-art:focus-within .find-heart{opacity:1}.find-art .find-heart[aria-pressed=true]{opacity:1;color:var(--accent)}
.find-streaming-heading,.find-provider-choice{margin:50px clamp(24px,4vw,64px) 0;padding-top:30px;border-color:var(--border)}.find-streaming-heading h2,.find-provider-choice h2{font-size:22px;font-weight:600;letter-spacing:-.6px}.find-streaming-heading p{font-size:11px;color:var(--text-4);line-height:1.7;max-width:850px}
.find-provider-choice select{background:var(--surface);border:1px solid var(--border);border-radius:999px;min-height:44px;padding:0 16px}.find-page>.catalog-credit{margin:36px clamp(24px,4vw,64px);color:var(--text-4);font-size:10px}
.on-way-row{gap:18px;scroll-snap-type:x proximity}
.on-way-card{min-width:0;position:relative;align-self:start;scroll-snap-align:start}
.on-way-card .request-progress{margin-top:12px}
/* Shared title and request sheet. Native dialogs provide focus trapping/Escape. */
dialog.detail-dialog{width:760px;max-width:calc(100vw - 40px);max-height:90vh;border-radius:24px;border:1px solid #ffffff18;padding:0;background:var(--surface);color:var(--text);overflow:auto;box-shadow:0 35px 100px #0007;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}
dialog.detail-dialog::backdrop{background:rgba(5,6,10,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#catalog-content,#detail-content{display:block;padding:0}
.detail-dialog .close-button{position:absolute;z-index:5;right:18px;top:18px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff35;background:#0a0c1199;color:var(--text);font-size:24px;display:grid;place-items:center}
.sheet-band{height:240px;position:relative;background:var(--card);overflow:hidden}.sheet-band img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.8}
.sheet-band:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--surface),#12151d00 90%)}
.sheet-main{padding:0 32px 0}.sheet-identity{display:flex;gap:24px;align-items:flex-end;position:relative;margin-top:-85px;margin-bottom:24px}
.sheet-poster{display:block;width:128px;aspect-ratio:2/3;object-fit:cover;border-radius:14px;border:1px solid #ffffff24;box-shadow:0 16px 35px #0005;flex-shrink:0}
.detail-dialog .detail-heading{position:relative;inset:auto;min-width:0;margin:0;padding-bottom:5px;z-index:1}
.detail-dialog .detail-heading .eyebrow{font-size:10px;font-weight:600;letter-spacing:1.4px;color:var(--accent);text-transform:uppercase;margin:0 0 10px}
.detail-dialog .detail-heading h2{font-family:Inter,system-ui,sans-serif;font-size:38px;line-height:1.13;letter-spacing:-1.4px;font-weight:600;margin:0 0 15px;text-wrap:balance}
.detail-dialog .meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text-3)}
.detail-dialog .meta .rating{border:1px solid #ffffff33;padding:2px 5px;font-size:10px;border-radius:4px}.library-state{display:inline-flex;align-items:center;gap:6px}.library-state i{display:block;width:5px;height:5px;border-radius:50%;background:var(--text-4)}.library-state.in-library{color:var(--success)}.library-state.in-library i{background:var(--success)}
.detail-dialog .description{font-size:13px;line-height:1.8;color:var(--text-2);margin:0 0 28px;max-width:none}
.detail-dialog .actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.detail-dialog fieldset.quality-picker,.detail-dialog fieldset.season-picker{border:0;padding:0;min-width:0;margin:0 0 28px;max-height:none;overflow:visible}
.quality-picker legend,.season-picker legend{font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:var(--text);padding:0;margin-bottom:14px}
.quality-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quality-option{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid #ffffff20;border-radius:14px;padding:17px 16px;background:#ffffff02;position:relative}
.quality-option input{position:absolute;opacity:0;width:1px;height:1px}.quality-option:has(input:checked){border-color:var(--accent);background:#4d7cff1a}.quality-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.quality-option strong{display:block;color:var(--text);font-size:12px;font-weight:600;line-height:1.5}.quality-option small{display:block;font-size:10px;color:var(--text-3);margin-top:6px;line-height:1.5}.quality-option i{height:16px;width:16px;border:1px solid #ffffff40;border-radius:50%;flex-shrink:0}.quality-option:has(input:checked) i{border:5px solid var(--accent);background:var(--surface)}
.season-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:-3px 0 15px;font-size:11px;color:var(--text-3)}
.season-toolbar>span{margin-right:auto;order:-1}.season-toolbar>label,.season-clear{min-height:32px;padding:6px 12px;border-radius:999px;background:#ffffff05;border:1px solid #ffffff1a;display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--text-2);cursor:pointer}.season-toolbar>label input{width:12px;height:12px;accent-color:var(--accent);margin:0}
.season-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:360px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent;padding:3px}
.season-choice{border:1px solid #ffffff18;border-radius:14px;background:#ffffff02;overflow:hidden;min-width:0;align-self:start}.season-choice:has(input[name=seasons]:checked),.season-choice:has(input[data-episode]:checked){border-color:#4d7cff80;background:#4d7cff0b}
.season-row{padding:13px 13px 8px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;justify-content:space-between}.season-row>label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;min-width:0;flex:1}
.season-row input,.episode-option input{width:16px;height:16px;accent-color:var(--accent);margin:2px 0 0;flex:0 0 16px}.season-row strong{font-size:12px;line-height:1.6;font-weight:500;color:var(--text)}.season-row small{display:block;font-size:10px;color:var(--text-3);margin-top:3px;line-height:1.5}
.episode-expand{display:block;min-height:34px;background:none;border:0;color:var(--text-3);font-size:10px;text-align:right;padding:7px 0;margin-left:auto}.episode-expand:hover{color:var(--accent)}.episode-expand span{margin-left:4px}.episode-choices{padding:0 12px 9px;border-top:1px solid #ffffff0c}
.episode-option{display:flex;align-items:flex-start;gap:8px;padding:9px 0;font-size:10px;line-height:1.6;color:var(--text-2);cursor:pointer}.episode-option small{display:block;font-size:9px;color:var(--text-4)}
.request-footer{position:sticky;bottom:0;z-index:2;background:var(--surface);border-top:1px solid var(--border);margin:12px -32px 0;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-radius:0 0 24px 24px}
.request-summary{flex:1;min-width:150px}.request-summary strong{display:block;font-size:11px;font-weight:500;line-height:1.6;color:var(--text-2)}.text-link{display:block;border:0;padding:5px 0;background:none;color:var(--text-3);font-size:10px;text-align:left;min-height:30px}.text-link:hover{color:var(--accent)}
.request-footer-actions{display:flex;gap:8px;align-items:center}.request-footer-actions .button{white-space:nowrap;font-size:12px;padding-left:17px;padding-right:17px}
.request-success{padding:70px 40px;text-align:center}.success-icon{width:68px;height:68px;margin:0 auto 25px;background:#7be3b015;color:var(--success);border:1px solid #7be3b050;border-radius:50%;display:grid;place-items:center;font-size:32px}.request-success h2{font-size:32px;letter-spacing:-1px}.request-success p{font-size:14px;color:var(--text-2);line-height:1.8;max-width:450px;margin:0 auto 30px}.request-success .actions{justify-content:center;margin:0}
.detail-dialog #episode-area{border-top:1px solid var(--border);margin:28px 0 24px;padding-top:24px}.detail-dialog .episode{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:14px 0}.detail-dialog .episode-art{border-radius:8px}.detail-dialog .episode-copy h4{color:var(--text-2);font-size:12px}.detail-dialog .episode-copy p{color:var(--text-3);font-size:11px}.detail-dialog .episode-play{color:var(--accent)}.detail-dialog select{background:var(--surface);color:var(--text-2);border:1px solid #ffffff25;border-radius:999px;min-height:44px;padding:8px 16px;font-size:12px}
.small-dialog,.server-dialog{background:var(--surface);border-color:var(--border);border-radius:20px}.account-link{min-height:44px;color:var(--text-2)}.account-link:hover{color:var(--accent)}.avatar:focus-visible{outline-color:var(--accent)}
.native-client .topbar{background:#0a0c11;backdrop-filter:none;-webkit-backdrop-filter:none}.native-client .detail-dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:1150px){.topbar{gap:16px;padding:14px 24px;flex-wrap:wrap}.top-nav{order:3;flex-basis:100%;justify-content:center}.top-actions{margin-left:auto}.topbar .search-box{width:220px}.find-hero-copy{padding-top:60px}.find-hero h2{max-width:660px}.sheet-main{padding-left:28px;padding-right:28px}.request-footer{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px}}
@media(max-width:700px){.topbar{position:sticky;min-height:0;padding:14px 20px;gap:14px}.topbar .brand-text{display:block;font-size:21px}.topbar .brand-logo{width:25px;height:30px}.top-actions{gap:8px}.topbar .search-box{width:130px;height:44px;padding:0 12px}.top-actions .notification-button{display:none}.top-nav{position:static;left:auto;right:auto;bottom:auto;flex:1 1 100%;justify-content:flex-start;overflow-x:auto;gap:4px;padding-bottom:2px;scrollbar-width:none}.nav-button{font-size:12px;min-height:44px;padding:10px 14px;flex-shrink:0}.topbar .avatar{width:40px;height:40px}.find-hero{min-height:580px}.find-hero-art{object-position:65% center;opacity:.75}.find-hero:after{background:linear-gradient(90deg,#0a0c11ed,#0a0c1160),linear-gradient(0deg,#0a0c11,transparent 75%)}.find-hero-copy{padding:60px 24px 95px;max-width:none}.find-hero h2{font-size:44px;line-height:1.12;letter-spacing:-1.8px}.hero-meta{font-size:11px;gap:9px}.find-hero .hero-synopsis{font-size:12px;-webkit-line-clamp:4}.find-hero .actions{gap:8px}.find-hero .button{font-size:11px;padding:10px 15px}.find-hero-controls{left:24px;right:24px;bottom:22px}.find-row,.find-on-way{padding:0 24px;margin:24px 0 32px}.find-row .poster-row{grid-auto-columns:152px;gap:16px}.find-row .section-heading h2,.find-on-way h2{font-size:19px}.section-link{font-size:10px}.on-way-row{grid-auto-columns:152px}.find-streaming-heading,.find-provider-choice{margin-left:24px;margin-right:24px}.find-streaming-heading h2{font-size:20px}.find-art .find-heart{opacity:1}
 dialog.detail-dialog{max-width:100vw;width:100%;max-height:94vh;border-radius:24px 24px 0 0;margin:auto 0 0}.sheet-band{height:200px}.sheet-main{padding:0 22px}.sheet-identity{gap:16px;margin-top:-60px;align-items:flex-end}.sheet-poster{width:95px;border-radius:12px}.detail-dialog .detail-heading{padding-bottom:2px}.detail-dialog .detail-heading h2{font-size:27px;letter-spacing:-.9px;margin-bottom:12px}.detail-dialog .detail-heading .eyebrow{font-size:9px}.detail-dialog .meta{font-size:10px;gap:7px}.detail-dialog .description{font-size:12px;margin-bottom:24px}.quality-options{gap:8px}.quality-option{padding:14px 12px;gap:8px}.quality-option strong{font-size:11px}.quality-option small{font-size:9px}.quality-option i{width:14px;height:14px}.season-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:320px;gap:8px}.season-row{padding:12px 10px 6px}.season-row strong{font-size:11px}.request-footer{margin-left:-22px;margin-right:-22px;padding:16px 22px;gap:12px;border-radius:0}.request-summary{flex-basis:100%}.request-footer-actions{width:100%}.request-footer-actions .primary{flex:1}.request-footer-actions .button{font-size:12px}.request-success{padding:65px 25px}.request-success h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.find-art .poster-image{transition:none}.find-art:hover .poster-image{transform:none}}

.download-track .progress-0{width:0%}.download-track .progress-1{width:1%}.download-track .progress-2{width:2%}.download-track .progress-3{width:3%}.download-track .progress-4{width:4%}.download-track .progress-5{width:5%}.download-track .progress-6{width:6%}.download-track .progress-7{width:7%}.download-track .progress-8{width:8%}.download-track .progress-9{width:9%}.download-track .progress-10{width:10%}.download-track .progress-11{width:11%}.download-track .progress-12{width:12%}.download-track .progress-13{width:13%}.download-track .progress-14{width:14%}.download-track .progress-15{width:15%}.download-track .progress-16{width:16%}.download-track .progress-17{width:17%}.download-track .progress-18{width:18%}.download-track .progress-19{width:19%}.download-track .progress-20{width:20%}.download-track .progress-21{width:21%}.download-track .progress-22{width:22%}.download-track .progress-23{width:23%}.download-track .progress-24{width:24%}.download-track .progress-25{width:25%}.download-track .progress-26{width:26%}.download-track .progress-27{width:27%}.download-track .progress-28{width:28%}.download-track .progress-29{width:29%}.download-track .progress-30{width:30%}.download-track .progress-31{width:31%}.download-track .progress-32{width:32%}.download-track .progress-33{width:33%}.download-track .progress-34{width:34%}.download-track .progress-35{width:35%}.download-track .progress-36{width:36%}.download-track .progress-37{width:37%}.download-track .progress-38{width:38%}.download-track .progress-39{width:39%}.download-track .progress-40{width:40%}.download-track .progress-41{width:41%}.download-track .progress-42{width:42%}.download-track .progress-43{width:43%}.download-track .progress-44{width:44%}.download-track .progress-45{width:45%}.download-track .progress-46{width:46%}.download-track .progress-47{width:47%}.download-track .progress-48{width:48%}.download-track .progress-49{width:49%}.download-track .progress-50{width:50%}.download-track .progress-51{width:51%}.download-track .progress-52{width:52%}.download-track .progress-53{width:53%}.download-track .progress-54{width:54%}.download-track .progress-55{width:55%}.download-track .progress-56{width:56%}.download-track .progress-57{width:57%}.download-track .progress-58{width:58%}.download-track .progress-59{width:59%}.download-track .progress-60{width:60%}.download-track .progress-61{width:61%}.download-track .progress-62{width:62%}.download-track .progress-63{width:63%}.download-track .progress-64{width:64%}.download-track .progress-65{width:65%}.download-track .progress-66{width:66%}.download-track .progress-67{width:67%}.download-track .progress-68{width:68%}.download-track .progress-69{width:69%}.download-track .progress-70{width:70%}.download-track .progress-71{width:71%}.download-track .progress-72{width:72%}.download-track .progress-73{width:73%}.download-track .progress-74{width:74%}.download-track .progress-75{width:75%}.download-track .progress-76{width:76%}.download-track .progress-77{width:77%}.download-track .progress-78{width:78%}.download-track .progress-79{width:79%}.download-track .progress-80{width:80%}.download-track .progress-81{width:81%}.download-track .progress-82{width:82%}.download-track .progress-83{width:83%}.download-track .progress-84{width:84%}.download-track .progress-85{width:85%}.download-track .progress-86{width:86%}.download-track .progress-87{width:87%}.download-track .progress-88{width:88%}.download-track .progress-89{width:89%}.download-track .progress-90{width:90%}.download-track .progress-91{width:91%}.download-track .progress-92{width:92%}.download-track .progress-93{width:93%}.download-track .progress-94{width:94%}.download-track .progress-95{width:95%}.download-track .progress-96{width:96%}.download-track .progress-97{width:97%}.download-track .progress-98{width:98%}.download-track .progress-99{width:99%}.download-track .progress-100{width:100%}
.season-choice:has(input[name=seasons]:disabled){opacity:.55}.season-row input:disabled{cursor:default}.episode-option:has(input:disabled){opacity:.55;cursor:default}.episode-option em{font-size:9px;color:var(--text-3);display:block;font-style:normal;margin-top:3px}
.season-row>label{flex-basis:100%;min-height:44px;gap:10px}.season-row strong,.season-row small{white-space:nowrap}.episode-expand{margin-left:26px;text-align:left;min-height:44px}.season-toolbar>label,.season-clear{min-height:44px}.hero-dots button{height:44px}.text-link{min-height:36px}
.on-way-card.queued .on-way-status{color:var(--text-3)}

/* Connected milestones, with download percentage kept separate from pipeline status. */
.request-progress{margin:16px 0 8px;max-width:620px;color:var(--text-3)}
.request-progress-caption{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;color:var(--accent);font-weight:500}
.request-steps{display:flex;list-style:none;margin:0;padding:0;gap:0}
.request-steps li{position:relative;flex:1;min-width:0;text-align:center;font-size:10px;color:var(--text-3)}
.request-steps li:before{content:'';position:absolute;height:2px;top:12px;left:calc(-50% + 13px);right:calc(50% + 13px);background:#ffffff12}
.request-steps li:first-child:before{display:none}
.step-marker{position:relative;display:grid;place-items:center;width:26px;height:26px;margin:0 auto 8px;border:1px solid #ffffff20;border-radius:50%;background:var(--card);font-size:11px;font-weight:600}
.step-label{display:block;overflow-wrap:anywhere;padding:0 3px;line-height:1.4}
.request-steps .done:before,.request-steps .active:before{background:var(--accent)}
.request-steps .done .step-marker{background:var(--accent);border-color:var(--accent);color:#fff}
.request-steps .active{color:var(--text)}
.request-steps .active .step-marker{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px #4d7cff15}
.request-progress.complete .request-progress-caption{color:var(--success)}
.request-progress.complete .done:before,.request-progress.complete .step-marker{background:var(--success);border-color:var(--success)}
.request-progress.blocked .request-progress-caption{color:var(--text-2)}
.request-progress.compact{margin:0}
.request-progress.compact .step-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.request-progress.compact .step-marker{width:24px;height:24px;margin-bottom:0;font-size:10px}
.request-progress.compact .request-steps li:before{top:11px}
@media(max-width:420px){.request-steps li{font-size:9px}.step-label{padding:0 1px}}
.request-progress.compact .step-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:8px;padding:7px 0 0;letter-spacing:-.15px}
/* Discovery cards stay quiet; the full milestone labels belong in Requests. */
.request-progress.compact .request-progress-caption{font-size:11px;margin-bottom:9px}
.request-progress.compact .request-steps{gap:3px}
.request-progress.compact .request-steps li{height:5px;background:#ffffff12;border-radius:2px}
.request-progress.compact .request-steps li:before{display:none}
.request-progress.compact .step-marker,.request-progress.compact .step-label{display:none}
.request-progress.compact .request-steps .done{background:var(--accent);opacity:.55}
.request-progress.compact .request-steps .active{background:var(--accent)}
.request-progress.compact.complete .request-steps .done{background:var(--success)}
@keyframes milestone-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.request-progress:not(.complete):not(.blocked) .active .step-marker,.request-progress.compact:not(.complete):not(.blocked) .request-steps .active{animation:milestone-pulse 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.request-progress .active .step-marker,.request-progress.compact .request-steps .active{animation:none!important}}

/* ── Boxy contrast theme ─────────────────────────────────────────────────────
   Hairline-framed content column and joined grids, square-cornered boxes,
   white pill primary actions, amber kept for brand moments. Flat surfaces only:
   gradients, no blur filters, for the embedded WebKit compositor. */
:root{--bg:#0b0d12;--surface:#10131a;--card:#141821;--raise:#1a1f2a;--border:#ffffff1a;--line:#ffffff1a;--line-strong:#ffffff2e;--text:#ffffff;--text-2:#d3d7e0;--text-3:#a0a7b4;--text-4:#8b93a1;--muted:#a0a7b4;--box:4px;--frame:1320px;--gutter:40px;
 /* Kraefik logo blue: --brand is the solid fill behind white text, --accent the
    lighter tone for text, rings and tints on the dark background. */
 --brand:#2f63f5;--brand-hover:#2453d6;--accent:#4d7cff;--accent-hover:#7298ff}
body,#app{background:var(--bg)}
::selection{background:var(--brand);color:#fff}

/* Frame: one centered column with visible rails, sections divided by hairlines. */
.main-shell{padding:0 var(--gutter)}
#main{max-width:var(--frame);margin:0 auto;min-height:calc(100vh - 77px)}
#content>*+*{border-top:1px solid var(--line)}
#content>.feature+.section,#content>.collection-heading+*{border-top:0}

/* Top bar: brand, pill nav, actions. Flat and opaque. */
.topbar{min-height:76px;padding:12px var(--gutter);gap:24px;background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar .brand-text{font-weight:700;letter-spacing:-.6px}
.nav-button{border-radius:999px;font-weight:500;color:var(--text-3);min-height:38px;padding:9px 15px}
.nav-button.active{background:#fff;color:#0b0b0c;font-weight:600}
.nav-button:hover:not(.active){background:#ffffff10;color:var(--text)}
.request-count{background:var(--brand);color:#fff}
.nav-button.active .request-count{background:var(--brand);color:#fff}
.topbar .search-box{height:40px;border-radius:var(--box);border-color:var(--line-strong);background:var(--surface)}
.topbar .search-box:focus-within{border-color:var(--accent)}
.round-button,.avatar{width:40px;height:40px;border-radius:var(--box);border-color:var(--line-strong);background:var(--surface)}
.round-button:hover{background:var(--raise);border-color:#ffffff55}
.avatar{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

/* Buttons: white pill primary (high contrast), outlined secondary. */
.button{border-radius:999px;min-height:42px;font-weight:600;transform:none}
.button:hover{transform:none}
.button.primary{background:#fff;border-color:#fff;color:#0b0b0c;min-height:42px}
.button.primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.button.secondary{background:transparent;border-color:var(--line-strong);color:var(--text)}
.button.secondary:hover{background:#ffffff0d;border-color:#ffffff66}

/* Headings: heavy, tight, left aligned. */
h1,h2,h3{color:var(--text)}
.section{padding:40px var(--gutter) 36px;margin:0}
.section-heading{margin-bottom:22px}
.section-heading h2,.find-row .section-heading h2,.find-on-way h2{font-family:Inter,system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.7px}
.section-heading h2 small{color:var(--text-4)}
.section-link{font-size:12px;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:0 14px;min-height:34px}
.section-link:hover{color:#fff;background:var(--brand);border-color:var(--brand)}

/* Home hero: centered carousel over a warm glow, title in bold display type. */
.feature{height:auto;padding:36px 0 40px;background:radial-gradient(ellipse 70% 85% at 50% 0%,#4d7cff2e,#4d7cff0a 45%,transparent 75%)}
.feature-caption{padding-top:52px}
.feature-caption h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-1.4px;line-height:1.1;margin-bottom:10px}
.feature-type{font-size:11px;letter-spacing:1.8px;color:var(--text-3);margin-bottom:22px}
.feature-poster,.feature-poster>img,.feature-card{border-radius:var(--box)}
.feature-poster{box-shadow:0 0 0 1px var(--line-strong)}
.feature-center .feature-poster{box-shadow:0 0 0 1px #4d7cff99,0 24px 60px #0008}
.feature-arrow{border-radius:var(--box);background:var(--bg);border-color:var(--line-strong);opacity:1}
.feature-arrow:hover{background:#fff;color:#111}
.feature-info{width:42px;height:42px;border-radius:50%}

/* Poster rows: square corners, hairline edge, no reflections, tight captions. */
.poster-row{grid-auto-columns:164px;gap:18px;padding:2px 2px 12px;scrollbar-color:#ffffff24 transparent}
.continue-row{grid-auto-columns:320px}
.poster-row .art-reflection{display:none}
.poster-image{border-radius:var(--box);box-shadow:none;border:1px solid var(--line);background:var(--card)}
.poster-image img{border-radius:0}
.poster-card h3{margin:12px 0 4px;font-size:13px;font-weight:600}
.poster-card p{font-size:11px;color:var(--text-3)}
.poster-card:hover .poster-image{box-shadow:none;border-color:var(--accent);transform:none}
.poster-card:focus-visible{outline-offset:4px}
.card-play{border-radius:50%;background:#fff;color:#111}
.continue-card .poster-image{aspect-ratio:16/9}
.progress-track{height:4px;background:#ffffff26}.progress-track span{background:var(--brand)}
.library-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:30px 18px;padding:28px var(--gutter) 48px}
.library-grid .poster-card{max-width:none}

/* Collection pages: big title, segmented sort control. */
.collection-heading{padding:44px var(--gutter) 32px;gap:24px;align-items:flex-end;border-bottom:1px solid var(--line)}
.collection-heading h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-1.4px;margin:0 0 8px}
.collection-heading p{color:var(--text-3);font-size:13px}
.sort-bar{gap:0;border:1px solid var(--line-strong);border-radius:var(--box);overflow:hidden;flex-wrap:nowrap}
.sort-bar>span{padding:0 14px;margin:0;font-size:10px;letter-spacing:1.4px;color:var(--text-4);border-right:1px solid var(--line-strong);align-self:stretch;display:flex;align-items:center}
.sort-choice{border:0;border-radius:0;min-height:40px;padding:0 14px;font-size:12px;color:var(--text-3)}
.sort-choice+.sort-choice{border-left:1px solid var(--line)}
.sort-choice:hover{background:#ffffff0b;color:var(--text)}
.sort-choice.selected{background:#fff;color:#0b0b0c;border-color:#fff}
.filter-strip{padding:20px var(--gutter)}
.filter-strip>span{border-radius:var(--box);border-color:var(--accent);background:#4d7cff1a;color:var(--accent)}
.filter-strip button{color:var(--text-3)}.filter-strip button:hover{color:var(--text)}

/* Genres: separate soft cards of thumbnail + label, with open gaps. */
.category-section{padding:32px var(--gutter)}
.category-row{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-columns:unset;gap:12px;background:none;border:0;padding:0}
.genre-tile{display:flex;align-items:center;gap:16px;height:auto;min-height:88px;padding:12px;border:1px solid #ffffff10;border-radius:14px;background:var(--card)}
.genre-tile:after{display:none}
.genre-tile img{position:static;flex:0 0 64px;width:64px;height:64px;object-fit:cover;opacity:1;border-radius:10px}
.genre-tile>span{position:static}
.genre-tile strong{font-size:14px;font-weight:600;letter-spacing:-.2px;margin-bottom:4px}
.genre-tile small{font-size:12px;color:var(--text-3)}
.genre-tile:hover{background:var(--raise);border-color:#ffffff24}
.genre-tile:hover strong{color:var(--accent)}

/* Studios: logo strip in a joined grid. */
.studio-row{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-columns:unset;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--box);overflow:hidden;padding:0}
.studio-tile,.studio-tile:hover{border:0;border-radius:0;background:var(--bg)}
.studio-tile:hover{background:var(--raise)}
/* Draw joined-grid lines on the cells so a short last row leaves open space. */
.studio-row{gap:0;background:none;border-width:1px 0 0 1px;border-radius:0}
.studio-row>.studio-tile{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Empty and loading states. */
.empty-state{margin:40px var(--gutter);border:1px dashed var(--line-strong);border-radius:var(--box);padding:56px 24px}
.empty-state h2{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.6px}
.loading-orbit{border-color:#ffffff22;border-top-color:var(--accent)}

/* Discover: full-bleed framed hero, boxy cards and badges. */
.find-page{padding:0}
.find-hero{min-height:540px;border-bottom:1px solid var(--line)}
.find-hero-copy{padding:80px var(--gutter) 120px}
.find-hero-copy .eyebrow{display:inline-block;color:#fff;background:var(--brand);padding:5px 10px;border-radius:var(--box);font-size:11px;letter-spacing:.4px}
.find-hero h2{font-size:clamp(40px,5.4vw,72px);letter-spacing:-2.4px}
.find-hero-controls{left:var(--gutter);right:var(--gutter)}
.hero-arrows button{border-radius:var(--box);background:var(--bg)}
.hero-arrows button:hover{background:#fff;color:#111}
.find-row,.find-on-way{padding:40px var(--gutter) 36px;margin:0;border-top:1px solid var(--line)}
.find-hero+.find-on-way,.find-hero+.find-row{border-top:0}
.find-art .poster-image,.find-art .poster-image img{border-radius:var(--box)}
.find-art:hover .poster-image{border-color:var(--accent);transform:none;box-shadow:none}
.find-art .find-heart{border-radius:50%}
.find-card-copy>.availability{border-radius:var(--box);font-weight:600}
.find-card-copy h3{font-size:13px}
.find-streaming-heading,.find-provider-choice{margin:0;padding:56px var(--gutter) 24px;border-top:1px solid var(--line)}
.find-streaming-heading h2,.find-provider-choice h2{font-family:Inter,system-ui,sans-serif;font-size:30px;font-weight:700;letter-spacing:-1px}
.find-provider-choice select{border-radius:var(--box);border-color:var(--line-strong);background:var(--surface)}
.find-page>.catalog-credit{margin:0;padding:28px var(--gutter);border-top:1px solid var(--line)}

.availability{border-radius:var(--box)}

/* Sheets and dialogs: square frames, hairline structure. */
dialog.detail-dialog{border-radius:6px;border-color:var(--line-strong);background:var(--surface)}
.detail-dialog .close-button{border-radius:var(--box);background:var(--bg)}
.detail-dialog .close-button:hover{background:#fff;color:#111}
.sheet-poster{border-radius:var(--box);border-color:var(--line-strong)}
.detail-dialog .detail-heading h2{font-weight:700}
.quality-options{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--box);overflow:hidden}
.quality-option{border:0;border-radius:0;background:var(--surface)}
.quality-option:has(input:checked){background:#4d7cff1f;box-shadow:inset 0 0 0 1px var(--accent)}
.season-choice{border-radius:var(--box)}
.season-toolbar>label,.season-clear{border-radius:var(--box)}
.request-footer{border-radius:0 0 6px 6px}
.detail-dialog .episode{padding:14px 0}
.detail-dialog .episode-heading{border-top:0;margin-top:0;padding-top:0}
.detail-dialog .episode-art{border-radius:var(--box)}
.detail-dialog select,.episode-heading select{border-radius:var(--box)}
.small-dialog,.server-dialog{border-radius:6px;border-color:var(--line-strong);background:var(--surface)}
.small-dialog h2,.server-dialog h2{font-family:Inter,system-ui,sans-serif;font-weight:700}
.close-button{border-radius:var(--box)}
.player-choice{border-radius:var(--box);border-color:var(--line)}
.player-choice.selected{border-color:var(--accent);background:#4d7cff14}
.server-stats{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--box);overflow:hidden}
.server-stats>div{border:0;border-radius:0;background:var(--surface)}
.server-dialog .eyebrow,.small-dialog .eyebrow,.detail-heading .eyebrow{color:var(--accent)}
.toast,.now-playing{background:var(--raise);border-color:var(--line-strong);border-radius:var(--box)}
.toast{border-left:3px solid var(--accent)}.toast.bad{border-left-color:#e8796b}
.method-tag{color:var(--accent);border-color:#4d7cff66}
.meta .score,.episode .episode-play{color:var(--accent)}

/* Workspace screens (Requests, Users, Review). */
.workspace{max-width:none;padding:44px var(--gutter) 60px}
.workspace-heading{gap:10px;flex-wrap:wrap}
.workspace-heading h1{margin-right:auto;font-family:Inter,system-ui,sans-serif;font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-1.4px}
.workspace-panel{background:var(--surface);border-color:var(--line);border-radius:var(--box);padding:28px}
.workspace h2{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.5px}
.workspace-notice{border-color:#4d7cff66;background:#4d7cff12;color:var(--text-2);border-radius:var(--box)}
.workspace input,.workspace select{background:var(--bg);border-color:var(--line-strong);border-radius:var(--box)}
.workspace input:focus,.workspace select:focus{border-color:var(--accent);outline:0}
.workspace input[type=checkbox]{accent-color:var(--accent)}
.processing-policy p{max-width:760px;margin:0;line-height:1.6}
.processing-policy p+p{margin-top:8px}
.processing-entry{padding:24px 0;border-bottom:1px solid var(--line)}
.processing-entry:first-child{padding-top:0}.processing-entry:last-child{padding-bottom:0;border-bottom:0}
.processing-summary{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.processing-summary h2{margin:0;font-size:18px;line-height:1.4}.processing-summary p{margin:6px 0 0}
.processing-retention{flex:none;color:var(--text-2);font-size:12px;padding-top:4px}
.processing-details{display:flex;gap:20px 36px;flex-wrap:wrap;margin:16px 0;font-size:13px}
.processing-details dt{color:var(--text-3);margin-bottom:4px}.processing-details dd{margin:0;color:var(--text-2)}
.processing-message,.processing-operation{font-size:13px;line-height:1.6;color:var(--text-2);margin:12px 0}
.processing-preview{border-left:2px solid var(--accent);padding:2px 0 2px 14px;margin:16px 0;font-size:13px;line-height:1.6}
.processing-preview p{margin:4px 0 10px}.processing-remove{border-color:var(--line-strong)}
.processing-entry .actions{justify-content:flex-start;gap:8px;flex-wrap:wrap}
.processing-entry .button{font-size:12px;min-height:36px;padding:8px 13px}
@media(max-width:600px){.processing-summary{display:block}.processing-retention{display:block;margin-top:10px}.processing-details{display:block}.processing-details>div+div{margin-top:12px}}
.workspace fieldset{border-color:var(--line);border-radius:var(--box)}
.request-entry,.user-editor,.group-list>div,.provider-list article,.library-matrix th,.library-matrix td{border-color:var(--line)}
/* Details on the left, actions top right, milestones centered across the whole entry. */
.request-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:start}
.request-entry>div:first-child{display:contents}
.request-entry>div:first-child>*{grid-column:1;justify-self:start;margin:0 0 6px}
.request-entry>div:first-child>h3{margin-bottom:8px}
.request-entry>div:first-child>.state-label{margin:4px 0 10px}
.request-entry>.actions{grid-column:2;grid-row:1/span 3}
.request-entry>div:first-child>.request-progress{grid-column:1/-1;justify-self:center;width:100%;max-width:640px;margin:18px 0 4px}
.request-progress:not(.compact) .request-progress-caption{justify-content:center;gap:8px}
/* Minimal milestones: small dots on a hairline; only the current step speaks. */
.request-progress:not(.compact) .request-progress-caption{font-size:11px;font-weight:500;margin-bottom:14px;color:var(--text-2)}
.request-progress:not(.compact) .request-steps li:before{top:4px;height:1px;left:calc(-50% + 9px);right:calc(50% + 9px);background:#ffffff1f}
.request-progress:not(.compact) .step-marker{width:9px;height:9px;margin:0 auto 10px;border:1px solid #ffffff3d;background:transparent;font-size:0;box-shadow:none}
.request-progress:not(.compact) .step-label{font-size:10px;color:var(--text-4)}
.request-progress:not(.compact) .done .step-marker{background:var(--brand);border-color:var(--brand)}
.request-progress:not(.compact) .active .step-marker{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px #4d7cff26}
.request-progress:not(.compact) .active .step-label{color:var(--text)}
.request-progress.complete:not(.compact) .step-marker{background:var(--success);border-color:var(--success)}
.request-progress.complete:not(.compact) .done:before{background:#7be3b066}
.request-progress.complete:not(.compact) .request-progress-caption,.request-progress.complete:not(.compact) .active .step-label{color:var(--success)}
.request-progress.complete:not(.compact) .active .step-marker{box-shadow:0 0 0 4px #7be3b026}
.state-label{background:#4d7cff1a;border-color:#4d7cff66;color:var(--accent);border-radius:var(--box)}

/* Sign in: square card with an amber top rule. */
.login-screen{background:var(--bg)}
.login-card{border-radius:6px;border-color:var(--line-strong);border-top:3px solid var(--accent);background:var(--surface)}
.login-card input{border-radius:var(--box);background:var(--bg);border-color:var(--line-strong)}
.login-card .button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.login-card .button.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}

/* ── Kraefik brand: blue K, Inter wordmark, quieter chrome ───────────────── */
h1,h2,h3,.brand-text{font-family:Inter,system-ui,sans-serif}
.topbar .brand-text,.login-card .brand-text{font-size:21px;font-weight:500;letter-spacing:-.02em;color:#fff}
.find-hero h2,.feature-caption h1,.collection-heading h1,.workspace-heading h1,.section-heading h2,.find-row .section-heading h2,.find-on-way h2,.empty-state h2,.find-streaming-heading h2,.find-provider-choice h2,.detail-dialog .detail-heading h2,.small-dialog h2,.server-dialog h2,.workspace h2{font-weight:600}
.feature-caption h1,.collection-heading h1,.workspace-heading h1{letter-spacing:-.035em}
.find-hero h2{letter-spacing:-.04em}
.topbar{min-height:64px;padding:10px var(--gutter);gap:20px}
.nav-button{min-height:36px;padding:8px 13px;font-size:13px;border-radius:6px}
.nav-button.active{background:#ffffff14;color:#fff;font-weight:500}
.topbar .search-box{height:36px;border-radius:6px}
.round-button,.avatar{width:36px;height:36px;border-radius:50%}
.avatar{font-weight:600;font-size:14px}
#web-playback-method:empty{display:none}

/* One menu. Wider screens: the avatar opens it as a compact dropdown. */
.menu-button{display:none;position:relative}
.menu-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body:has(#request-count:not([hidden])) .menu-button:after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--surface)}
.topbar .top-nav .ico{display:none}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
dialog.menu-drawer{position:fixed;inset:60px var(--gutter) auto auto;margin:0;width:272px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 76px);overflow:auto;padding:6px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);box-shadow:0 18px 48px #000c}
dialog.menu-drawer::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
dialog.menu-drawer[open]{display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:center;gap:10px;padding:8px 6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.drawer-avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;font-weight:600}
.drawer-head strong{flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-close{display:none;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:6px;background:none;color:var(--text-3)}
.drawer-close:hover{background:#ffffff0d;color:var(--text)}
.drawer-label{margin:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
.drawer-nav-slot:empty+.drawer-group .drawer-label{display:none}
.drawer-nav-slot:not(:empty)+.drawer-group{margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
#account-dialog .account-link,#account-dialog .drawer-signout,#account-dialog .nav-button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:40px;margin:0;padding:8px 10px;border:0;border-radius:6px;background:none;box-shadow:none;color:var(--text-2);font-size:14px;font-weight:500;letter-spacing:0;text-align:left}
#account-dialog .ico{color:var(--text-3)}
#account-dialog .account-link:hover,#account-dialog .drawer-signout:hover,#account-dialog .nav-button:hover{background:#ffffff0d;color:#fff}
#account-dialog .nav-button.active{background:#4d7cff1f;color:#fff}
#account-dialog .nav-button.active .ico{color:var(--accent)}
#account-dialog .request-count{margin-left:auto}
#account-dialog .drawer-signout{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 6px 6px;padding-top:12px;color:var(--text-3)}
#account-dialog .top-nav{position:static;inset:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;margin:0;padding:0;flex:none;order:0;overflow:visible;border:0;background:none;box-shadow:none}
/* A title without artwork gets a short band instead of an empty block. */
.sheet-band:not(:has(img:not([hidden]))){height:72px}
.sheet-band:not(:has(img:not([hidden])))+.sheet-main .sheet-identity{margin-top:0}

@media(max-width:1150px){:root{--gutter:28px}.topbar{padding:12px var(--gutter)}}
/* One phone layout in portrait and landscape, selected before sign-in renders. */

html.phone-menu{--gutter:20px}
html.phone-menu .main-shell{padding:0}
html.phone-menu .topbar{padding:12px var(--gutter)}
html.phone-menu .nav-button{min-height:38px}
html.phone-menu .round-button,html.phone-menu .avatar{width:38px;height:38px}
html.phone-menu .feature{padding-top:20px}
html.phone-menu .feature-caption{padding-top:36px}
html.phone-menu .poster-row{grid-auto-columns:140px;gap:14px}
html.phone-menu .continue-row{grid-auto-columns:82%}
html.phone-menu .section{padding:30px var(--gutter) 26px}
html.phone-menu .collection-heading{padding:30px var(--gutter) 22px}
html.phone-menu .sort-bar{overflow-x:auto;max-width:100%;scrollbar-width:none}
html.phone-menu .sort-choice{flex-shrink:0}
html.phone-menu .category-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html.phone-menu .genre-tile{gap:10px;min-height:68px;padding:10px;border-radius:12px}
html.phone-menu .genre-tile img{flex-basis:44px;width:44px;height:44px;border-radius:8px}
html.phone-menu .genre-tile strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.phone-menu .genre-tile>span{min-width:0}
html.phone-menu .studio-row{grid-template-columns:repeat(2,minmax(0,1fr))}
html.phone-menu .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
html.phone-menu .find-hero-copy{padding:56px var(--gutter) 100px}
html.phone-menu .find-hero h2{font-size:40px;letter-spacing:-1.6px}
html.phone-menu .find-streaming-heading h2,html.phone-menu .find-provider-choice h2{font-size:24px}
html.phone-menu .on-way-row{grid-auto-columns:152px}
html.phone-menu .workspace{padding:30px var(--gutter) 50px}
html.phone-menu .workspace-panel{padding:20px 16px}
html.phone-menu .request-entry{grid-template-columns:minmax(0,1fr)}
html.phone-menu .request-entry>.actions{grid-column:1;grid-row:auto;margin-top:12px}
html.phone-menu .request-entry>div:first-child>.request-progress{max-width:300px;margin:20px 0 8px}
html.phone-menu .request-progress:not(.compact) .step-label{display:none}
html.phone-menu .request-progress:not(.compact) .step-marker{margin-bottom:0}
html.phone-menu dialog.detail-dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 40px);margin:auto;border-radius:6px}
html.phone-menu .request-footer{border-radius:0 0 6px 6px}
html.phone-menu .topbar{flex-wrap:nowrap;gap:10px;min-height:60px;padding:10px 16px 10px 12px}
html.phone-menu .menu-button{display:inline-grid;border:0;background:none}
html.phone-menu .topbar .brand{gap:9px}
html.phone-menu .topbar .brand-logo{width:22px;height:26px}
html.phone-menu .topbar .brand-text{font-size:19px}
html.phone-menu .top-actions{flex:1;justify-content:flex-end;gap:8px;margin-left:0;min-width:0}
html.phone-menu .topbar .search-box{flex:0 1 190px;width:auto;min-width:0;height:36px}
html.phone-menu .topbar .search-box input{min-width:0}
html.phone-menu .topbar .avatar{display:none}
html.phone-menu .ddns-setup-only .topbar .avatar{display:inline-grid}
html.phone-menu dialog.menu-drawer{inset:0 auto 0 0;width:min(300px,84vw);max-width:none;height:100dvh;max-height:none;padding:8px 10px calc(10px + env(safe-area-inset-bottom));border:0;border-right:1px solid var(--line-strong);border-radius:0;background:var(--bg);box-shadow:24px 0 60px #000a}
html.phone-menu dialog.menu-drawer::backdrop{background:#000a}
html.phone-menu .drawer-head{padding:6px 0 12px 4px;margin-bottom:8px}
html.phone-menu .drawer-close{display:grid}
html.phone-menu #account-dialog .account-link,html.phone-menu #account-dialog .drawer-signout,html.phone-menu #account-dialog .nav-button{min-height:44px;font-size:15px}
html.phone-menu #account-dialog .drawer-signout{margin-top:auto}
.feature,#find-hero{touch-action:pan-y pinch-zoom}
.feature img,#find-hero img{-webkit-user-drag:none;user-select:none}
.feature:focus-visible,#find-hero:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
html.phone-menu .feature-arrow{opacity:.85}


/* Native edge-to-edge web views expose the same insets as Safari. */
.topbar{padding-top:calc(12px + env(safe-area-inset-top));padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
html.phone-menu .topbar{padding-top:calc(10px + env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
html.phone-menu .drawer-head{padding-top:calc(6px + env(safe-area-inset-top))}
html.phone-menu dialog.menu-drawer{height:100vh;height:100dvh;padding-left:max(10px,env(safe-area-inset-left))}

/* Keep the account header and Sign out fixed while menu links scroll. */
dialog.menu-drawer{overflow:hidden}.drawer-head,#account-dialog .drawer-signout{flex-shrink:0}.drawer-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}

/* ── Title pages, browse pages and the phone tab bar ────────────────────────
   Layout follows the user's streaming-app references; colour stays Kraefik
   blue on navy. Pills and soft cards rather than boxes for these surfaces. */
.tab-bar{display:none}
.card-strip::-webkit-scrollbar,.chip-row::-webkit-scrollbar,.season-tabs::-webkit-scrollbar,.people-row::-webkit-scrollbar{display:none}

/* Title page */
.title-page{padding-bottom:72px}
.title-bar{display:flex;align-items:center;gap:12px;padding:16px var(--gutter) 0}
.title-back{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:50%;background:#ffffff12;color:#fff}
.title-back:hover{background:#ffffff22}
.title-back .ico{width:22px;height:22px;stroke-width:2.2}
.title-bar-name{margin:0;min-width:0;font-size:15px;font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title-hero{position:relative;margin:16px var(--gutter) 0;height:min(42vw,500px);overflow:hidden;border-radius:18px;background:var(--card)}
html.phone-menu .title-hero{margin-left:0;margin-right:0;border-radius:0}
.title-hero:empty{height:140px;background:radial-gradient(ellipse 70% 100% at 50% 0%,#2f63f52e,transparent 70%)}
.title-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.title-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,#0b0d12cc 24%,#0b0d1200 62%)}
.title-body{position:relative;z-index:1;margin-top:-110px;padding:0 var(--gutter);max-width:1040px}
.title-name{position:relative;margin:0 0 16px;font-size:clamp(34px,5vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.title-name img{display:block;max-width:min(78%,440px);max-height:140px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 4px 18px #000a)}
.title-name img[hidden]{display:none}
.title-name.has-logo img:not([hidden])+.title-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.title-meta{margin:0 0 18px;font-size:14px;font-weight:600;color:var(--text-2)}
.title-actions{display:flex;align-items:center;gap:10px;margin-bottom:20px;max-width:540px}
.title-actions .button{min-height:52px;font-size:16px;gap:10px}
.title-actions .button .ico{width:20px;height:20px}
.title-play{flex:1 1 auto}
.title-actions .button.secondary{background:#ffffff14;border-color:transparent;color:#fff;padding:0 22px}
.title-actions .button.secondary:hover{background:#ffffff24}
.title-actions .round-button{width:52px;height:52px;background:#ffffff14;border-color:transparent;color:#fff}
.title-actions .round-button .ico{width:22px;height:22px}
.title-overview{margin:0;max-width:760px;font-size:15px;line-height:1.6;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.title-overview.expanded{display:block}
.title-more{display:block;min-height:40px;margin:2px 0 0;padding:8px 0;border:0;background:none;color:#fff;font-size:14px;font-weight:600}
.title-credits{margin:12px 0 0;font-size:14px;font-weight:500;color:var(--text-3)}
.title-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:12px;padding:8px 0;border:0;background:none;color:var(--accent);font-size:14px;font-weight:600}
.title-link .ico{width:16px;height:16px}
.title-loading{margin-top:28px}
.season-tabs{position:relative;display:flex;gap:10px;margin:32px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 4px;overflow-x:auto;scrollbar-width:none}
.season-tab,.chip{flex:none;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:#ffffff14;color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
.season-tab:hover,.chip:hover{background:#ffffff24}
.season-tab.selected,.chip.selected{background:#fff;color:#0b0d12}
.season-head{margin:26px 0 16px}
.season-head h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.season-head h3 small{margin-left:8px;font-size:16px;font-weight:500;color:var(--text-3)}
.season-head p{margin:8px 0 0;max-width:760px;font-size:14px;line-height:1.55;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:12px}
.episode-card{display:grid;grid-template-columns:minmax(120px,40%) minmax(0,1fr);align-items:center;gap:16px;width:100%;padding:8px;border:0;border-radius:16px;background:#ffffff0d;color:var(--text);text-align:left}
.episode-card:hover{background:#ffffff17}
.episode-card.focused{box-shadow:inset 0 0 0 1.5px var(--accent)}
.episode-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--card)}
.episode-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.episode-watched{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0b0d12cc;color:#fff}
.episode-watched .ico{width:14px;height:14px;stroke-width:2.4}
.episode-info{display:grid;gap:4px;min-width:0;padding-right:6px}
.episode-info strong{font-size:16px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-info small{font-size:14px;font-weight:500;color:var(--text-3)}
.episode-desc{font-size:14px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title-section{margin-top:40px}
.title-section h3{margin:0 0 16px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.title-section .poster-row{margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 12px;scroll-padding-inline:var(--gutter)}
.people-row{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:14px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none}
.person{display:grid;justify-items:center;align-content:start;gap:3px;min-width:0;text-align:center}
.person-photo{position:relative;display:grid;place-items:center;width:84px;height:84px;margin-bottom:8px;border-radius:50%;overflow:hidden;background:#ffffff1f;color:#fff;font-size:30px;font-weight:600}
.person-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person strong{font-size:14px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.person small{max-width:100%;font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-chips{display:flex;flex-wrap:wrap;gap:10px}
.info-chip{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:8px 18px;border:1px solid var(--line);border-radius:12px;background:#ffffff0a;font-size:15px;font-weight:600}
.info-chip img{width:auto;height:20px;max-width:72px;object-fit:contain}
.detail-rows{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 28px;margin:0;font-size:15px}
.detail-rows dt{color:var(--text-3);font-weight:600}
.detail-rows dd{margin:0}

/* Movies, Shows, Watchlist */
#content>.browse-head,#content>.chip-row,#content>.browse-row,#content>.poster-grid,#content>.browse-hero+*{border-top:0}
.browse-hero{position:relative;margin:16px var(--gutter) 0;overflow:hidden;border-radius:18px}
html.phone-menu .browse-hero{margin:0;border-radius:0}
.browse-hero-art{display:block;width:100%;height:min(48vw,560px);object-fit:cover;object-position:center 20%}
.browse-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--bg) 0%,#0b0d12d9 30%,#0b0d1200 70%)}
.browse-hero-copy{position:relative;z-index:1;margin-top:-150px;padding:0 32px 28px;max-width:680px}
html.phone-menu .browse-hero-copy{padding:0 var(--gutter) 8px}
.browse-hero-overview{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.browse-hero .title-actions{margin-bottom:0}
.browse-hero .title-actions .button.primary{flex:0 0 auto;padding:0 30px}
.browse-head{display:flex;align-items:baseline;gap:12px;padding:36px var(--gutter) 0}
.browse-head h2{margin:0;font-size:28px;font-weight:600;letter-spacing:-.03em}
.browse-head span{font-size:14px;color:var(--text-3)}
.chip-row{display:flex;gap:10px;padding:16px var(--gutter) 4px;overflow-x:auto;scrollbar-width:none}
.chip{min-height:42px;padding:0 18px;font-size:14px}
.chip-clear{background:none;color:var(--text-3)}
.chip-clear:hover{background:#ffffff0d;color:#fff}
.browse-row{padding-top:28px}
.browse-row h3{margin:0 0 14px;padding:0 var(--gutter);font-size:20px;font-weight:600;letter-spacing:-.02em}
.card-strip{display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scroll-snap-type:x proximity;scrollbar-width:none}
.genre-strip{grid-auto-columns:clamp(220px,24vw,320px)}
.genre-card{position:relative;aspect-ratio:16/9;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--card);scroll-snap-align:start}
.genre-card img{display:block;width:100%;height:100%;object-fit:cover}
.genre-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b0d12e6 0%,#0b0d1200 65%)}
.genre-card span{position:absolute;z-index:1;left:14px;right:14px;bottom:12px;font-size:16px;font-weight:600;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genre-card.selected,.studio-strip .studio-tile.selected{outline:2px solid #fff;outline-offset:-2px}
.studio-strip{grid-auto-columns:clamp(190px,20vw,260px)}
.studio-strip .studio-tile,.studio-strip .studio-tile:hover{aspect-ratio:1.85;height:auto;padding:0;border:0;border-radius:14px;background:#ffffff12;scroll-snap-align:start}
.studio-strip .studio-tile:hover{background:#ffffff1f}
.studio-strip .studio-tile .studio-identity{height:100%;aspect-ratio:auto}
.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px;padding:28px var(--gutter) 48px}
.poster-grid .poster-card h3,.poster-grid .poster-card p,.poster-grid .art-reflection{display:none}
.poster-grid .poster-image{border:0;border-radius:14px}
.poster-grid .poster-card:hover .poster-image{outline:2px solid var(--accent);outline-offset:2px}

/* Phones: library pills on top, floating tab bar at the bottom. */
html.phone-menu .tab-bar{position:fixed;z-index:45;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-around;height:64px;padding:0 6px;border:1px solid #ffffff1f;border-radius:999px;background:#161b26e0;box-shadow:0 14px 40px #000b;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
html.phone-menu .tab-bar button{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:none;color:var(--text-3)}
html.phone-menu .tab-bar button[hidden]{display:none}
html.phone-menu .tab-bar button[aria-current]{background:#ffffff17;color:#fff}
html.phone-menu .tab-bar .ico{width:26px;height:26px;stroke-width:1.8}
.tab-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-size:14px;font-weight:600}
html.phone-menu .tab-bar [aria-current] .tab-avatar{box-shadow:0 0 0 2px #fff}
body:has(#request-count:not([hidden])) #tab-requests:after{content:"";position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #161b26}
.ddns-setup-only .tab-bar [data-view],.ddns-setup-only .tab-bar [data-tab-search]{display:none!important}
html.phone-menu #main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
html.phone-menu .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
html.phone-menu .now-playing{bottom:calc(86px + env(safe-area-inset-bottom))}
html.phone-menu .topbar{flex-wrap:wrap;gap:6px;min-height:0;padding-bottom:10px}
html.phone-menu .menu-button,html.phone-menu .topbar .brand-text,html.phone-menu .topbar .notification-button,html.phone-menu .topbar #account-button{display:none}
html.phone-menu .topbar .brand{flex:none;padding:0 4px}
html.phone-menu .topbar .brand-logo{width:24px;height:28px}
html.phone-menu .top-nav{display:flex;flex:1;min-width:0;gap:4px;overflow-x:auto;scrollbar-width:none}
html.phone-menu .top-nav::-webkit-scrollbar{display:none}
html.phone-menu .top-nav [data-view=home],html.phone-menu .top-nav [data-view=discover],html.phone-menu .top-nav #requests-nav,html.phone-menu .top-nav .ico{display:none}
html.phone-menu .top-nav .nav-button{flex:none;min-height:40px;padding:8px 16px;border-radius:999px;font-size:16px;font-weight:600;color:var(--text-3)}
html.phone-menu .top-nav .nav-button.active{background:#fff;color:#0b0d12}
html.phone-menu .top-actions{display:none}
html.phone-menu.phone-search .top-actions{display:flex;flex:1 0 100%;order:5}
html.phone-menu.phone-search .topbar .search-box{flex:1;max-width:none;height:44px}
html.phone-menu.title-open .topbar{display:none}
html.phone-menu dialog.menu-drawer{inset:auto 0 0 0;width:100%;max-width:none;height:auto;max-height:82dvh;padding:6px 12px calc(12px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line-strong);border-radius:22px 22px 0 0;background:var(--surface);box-shadow:0 -18px 50px #000a}
html.phone-menu dialog.menu-drawer:before{content:"";flex:none;width:40px;height:5px;margin:6px auto 4px;border-radius:3px;background:#ffffff33}
html.phone-menu .drawer-head{padding:8px 4px 12px}
html.phone-menu #account-dialog .drawer-signout{margin-top:6px}
html.phone-menu .title-bar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;padding:calc(8px + env(safe-area-inset-top)) 12px 10px;background:linear-gradient(180deg,var(--bg) 60%,#0b0d1200)}
html.phone-menu .title-back{background:none}
html.phone-menu .title-bar-name{font-size:17px;color:#fff;text-align:center}
html.phone-menu .title-hero{margin-top:0;height:auto;aspect-ratio:4/3}
html.phone-menu .title-hero:empty{height:40px;aspect-ratio:auto}
html.phone-menu .title-body{margin-top:-72px}
html.phone-menu .title-name{font-size:38px}
html.phone-menu .title-name img{max-width:82%;max-height:110px}
html.phone-menu .title-actions{max-width:none}
html.phone-menu .title-actions .button{min-height:54px;font-size:17px}
html.phone-menu .episode-cards{grid-template-columns:1fr;gap:10px}
html.phone-menu .episode-card{grid-template-columns:42% minmax(0,1fr);gap:12px;padding:7px;border-radius:14px}
html.phone-menu .episode-info strong{font-size:15px}
html.phone-menu .episode-info small,html.phone-menu .episode-desc{font-size:13px}
html.phone-menu .browse-hero-art{height:auto;aspect-ratio:4/3}
html.phone-menu .browse-hero-copy{margin-top:-96px}
html.phone-menu .browse-hero .title-name{font-size:40px}
html.phone-menu .browse-head{padding-top:30px}
html.phone-menu .genre-strip{grid-auto-columns:46%}
html.phone-menu .studio-strip{grid-auto-columns:40%}
html.phone-menu .poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:22px}

/* Stable, layout-matched loading placeholders. */
.skeleton-shimmer{position:relative;overflow:hidden;background:#ffffff0d;border:1px solid #ffffff0b}
.skeleton-shimmer:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff12,transparent);animation:kraefik-skeleton 1.45s ease-in-out infinite}
@keyframes kraefik-skeleton{to{transform:translateX(100%)}}
.skeleton-page{min-height:70vh}
.skeleton-feature{height:min(48vw,560px);margin:16px var(--gutter) 0;border-radius:18px}
.skeleton-browse-hero{height:min(48vw,560px);margin:16px var(--gutter) 0;border-radius:18px}
.skeleton-section{padding:30px var(--gutter) 8px}
.skeleton-heading{display:block;width:min(190px,42vw);height:24px;border-radius:6px;margin-bottom:16px}
.skeleton-count{display:block;width:64px;height:14px;border-radius:5px}
.skeleton-browse-head{display:flex;align-items:center;gap:12px;padding:36px var(--gutter) 0}.skeleton-browse-head .skeleton-heading{margin:0}
.skeleton-poster-row{display:grid;grid-auto-flow:column;grid-auto-columns:164px;gap:18px;overflow:hidden}
.skeleton-poster{display:block;width:100%;aspect-ratio:2/3;border-radius:14px}
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px;padding:28px var(--gutter) 48px}
.skeleton-discover-hero{position:absolute;inset:0;border:0}
.find-results>.skeleton-poster-row{padding:5px 2px 14px;grid-auto-columns:168px;gap:20px}
html.phone-menu .skeleton-feature,html.phone-menu .skeleton-browse-hero{height:auto;aspect-ratio:4/3;margin:0;border-radius:0}
html.phone-menu .skeleton-poster-row{grid-auto-columns:140px;gap:14px}
html.phone-menu .skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:22px}
@media (prefers-reduced-motion:reduce){.skeleton-shimmer:after{animation:none;display:none}}

/* Native iOS design — stage 1: shared theme, header and navigation. */
:root{color-scheme:dark;--bg:#0b0d12;--surface:#10131a;--card:#191c22;--panel:#10131a;--brand:#2f63f5;--accent:#4d7cff;--accent-hover:#7298ff;--text:#fff;--text-2:#d3d7e0;--text-3:#aeb4bf;--muted:#d3d7e0;--border:rgba(255,255,255,.18);--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.18);--gutter:16px;--tab-clearance:calc(96px + env(safe-area-inset-bottom));font-family:Inter,system-ui,-apple-system,sans-serif}
html.phone-menu{--gutter:16px}
body,#app{background:var(--bg);color:var(--text)}
body{margin:0;overflow-x:clip}
[hidden],.legacy-tab-hooks[hidden]{display:none!important}
button,a,input,select{touch-action:manipulation}
button,a{transition:background-color .16s,color .16s,opacity .16s,transform .2s}
html .main-shell,html.phone-menu .main-shell{width:100%;max-width:980px;margin:0 auto;padding:0}
html #main,html.phone-menu #main{padding-bottom:var(--tab-clearance)}
html .topbar,html.phone-menu .topbar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;max-width:980px;height:auto;min-height:64px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));gap:16px;border:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-sizing:border-box}
html .topbar .brand,html.phone-menu .topbar .brand{display:flex;align-items:center;gap:10px;padding:0;min-height:34px;text-decoration:none}
html .topbar .brand-logo,html.phone-menu .topbar .brand-logo{width:24px;height:28px}
html .topbar .brand-text,html.phone-menu .topbar .brand-text{display:none;font-size:20px;font-weight:750;letter-spacing:-.5px}
html[data-view=home] .topbar .brand-text{display:inline}
html .topbar .top-actions,html.phone-menu .topbar .top-actions{display:flex;flex:0 0 auto;width:auto;margin:0;padding:0}
html .topbar #account-button,html.phone-menu .topbar #account-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:50%;padding:0;background:var(--brand);color:#fff;font-size:15px;font-weight:700}
html .topbar .menu-button,html .topbar .notification-button,html .topbar #server-button,html .topbar .top-nav,html.phone-menu .topbar .menu-button,html.phone-menu .topbar .notification-button,html.phone-menu .topbar #server-button,html.phone-menu .topbar .top-nav{display:none}
html .tab-bar,html.phone-menu .tab-bar{position:fixed;z-index:45;left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-content:normal;gap:0;width:min(560px,calc(100% - 24px));height:64px;padding:4px 7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(43,44,47,.9);box-shadow:0 8px 26px #0003;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-sizing:border-box}
html .tab-bar button,html.phone-menu .tab-bar button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;height:54px;padding:3px 0;border:0;border-radius:28px;background:transparent;color:var(--text-2);font-size:10px;font-weight:650;line-height:1.2}
html .tab-bar button .ico,html.phone-menu .tab-bar button .ico{display:block;width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
html .tab-bar button[aria-current],html.phone-menu .tab-bar button[aria-current]{background:transparent;color:var(--accent)}
html .tab-bar button:hover{background:rgba(255,255,255,.05)}
html .tab-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
html .toast,html.phone-menu .toast{bottom:var(--tab-clearance)}
html .now-playing,html.phone-menu .now-playing{bottom:calc(84px + env(safe-area-inset-bottom))}
html #drawer-nav-slot .top-nav,html.phone-menu #drawer-nav-slot .top-nav{position:static;display:grid;gap:2px;width:100%;padding:0;margin:0;overflow:visible}
#drawer-nav-slot [data-view=home],#drawer-nav-slot [data-view=discover],#drawer-nav-slot [data-view=movies],#drawer-nav-slot [data-view=shows]{display:none!important}
html #drawer-nav-slot .nav-button,html.phone-menu #drawer-nav-slot .nav-button{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:15px;font-weight:600;text-align:left}
html #drawer-nav-slot .nav-button .ico,html.phone-menu #drawer-nav-slot .nav-button .ico{display:inline-block;width:20px;height:20px}
html #drawer-nav-slot .nav-button.active{background:rgba(255,255,255,.08)}
html dialog.menu-drawer,html.phone-menu dialog.menu-drawer{inset:76px 16px auto auto;width:min(420px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 170px);margin:0;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(38,40,45,.98);box-shadow:0 18px 60px #0006;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html dialog.menu-drawer:before,html.phone-menu dialog.menu-drawer:before{display:none}
.drawer-head{padding:4px 4px 16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.drawer-close{display:grid;place-items:center;flex:none;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.drawer-avatar{border-radius:50%;background:var(--brand)}
#account-dialog .account-link{min-height:46px;padding:10px 12px;border-radius:10px;color:#fff;font-size:15px;font-weight:600}
#account-dialog .drawer-label{font-size:11px;color:var(--text-3)}
.search-panel{padding:16px}
.search-panel h1{font-size:30px;font-weight:750;letter-spacing:-.8px;margin:0 0 18px}
.search-panel .search-box{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 14px;border:0;border-radius:14px;background:rgba(255,255,255,.1);box-sizing:border-box}
.search-panel .search-box svg{width:20px;height:20px;stroke:var(--text-2);fill:none;stroke-width:2;flex-shrink:0}
.search-panel .search-box input{width:100%;font-size:16px;background:none;border:0;outline:none;color:#fff}
.search-panel .search-box input::placeholder{color:#aeb4bf}
html.search-open .topbar{display:none}
html.title-open .topbar,html.phone-menu.title-open .topbar{display:flex}
@supports not (backdrop-filter:blur(1px)){html .tab-bar,html.phone-menu .tab-bar{background:#292c32}}
@media (prefers-reduced-motion:reduce){button,a{transition:none}}

/* Stage 2: flat poster showcase, library heroes and compact content rows. */
.ambient{display:none}
html .feature,html.phone-menu .feature{--feature-width:min(62vw,300px);height:auto;min-height:0;padding:20px 0 10px;overflow:hidden}
html.phone-menu .feature{--feature-width:min(62vw,280px)}
html .feature-stage,html.phone-menu .feature-stage{position:relative;max-width:none;height:calc(var(--feature-width) * 1.5);margin:0;overflow:visible;perspective:none}
html .feature-card,html.phone-menu .feature-card{top:0;left:50%;width:var(--feature-width);height:calc(var(--feature-width) * 1.5);border:0;border-radius:14px;transform:translateX(-50%);filter:none;transition:transform .22s,opacity .2s;box-shadow:none}
html .feature-m1,html.phone-menu .feature-m1{left:calc(50% - var(--feature-width) - 24px);opacity:.85}
html .feature-p1,html.phone-menu .feature-p1{left:calc(50% + var(--feature-width) + 24px);opacity:.85}
html .feature-m2,html.phone-menu .feature-m2{left:calc(50% - 2 * (var(--feature-width) + 24px));opacity:.7}
html .feature-p2,html.phone-menu .feature-p2{left:calc(50% + 2 * (var(--feature-width) + 24px));opacity:.7}
html .feature-poster,html.phone-menu .feature-poster{overflow:hidden;border-radius:14px;-webkit-box-reflect:unset}
.feature-poster>img{border-radius:14px}
.feature-poster-info{position:absolute;z-index:3;right:9px;top:9px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#10131abf;color:#fff;font-size:20px}
html .feature-caption,html.phone-menu .feature-caption{padding:24px 16px 12px}
html .feature-caption h1,html.phone-menu .feature-caption h1{font-size:24px;font-weight:750;line-height:1.2;letter-spacing:-.6px;margin:0 auto 10px;max-width:760px}
.feature-caption .feature-type{margin:0;color:var(--text-2);font-size:11px;font-weight:650;letter-spacing:1.3px}
.feature .art-reflection,.poster-card .art-reflection{display:none}
.poster-image{-webkit-box-reflect:unset!important;box-shadow:none}
html .section,html.phone-menu .section{padding:22px 16px 0;margin:0}
html .section-heading,html.phone-menu .section-heading{margin:0 0 10px}
html .section-heading h2,html.phone-menu .section-heading h2{font-size:18px;font-weight:750;letter-spacing:-.3px}
html .poster-row,html.phone-menu .poster-row{grid-auto-columns:118px;gap:12px;padding:0 0 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.poster-row::-webkit-scrollbar{display:none}
.poster-row .poster-image{border-radius:10px}
.poster-card h3{margin:7px 0 3px;font-size:13px;font-weight:650;letter-spacing:0;line-height:1.3}
.poster-card p{margin:0;font-size:11px;line-height:1.4;color:var(--text-2)}
.poster-row .poster-card{scroll-snap-align:start;min-width:0}
html .continue-row,html.phone-menu .continue-row{grid-auto-columns:min(70vw,300px);gap:12px}
.continue-row .poster-image{aspect-ratio:16/9}
.continue-card h3{margin-top:7px}
.continue-card .card-play{display:none}
.continue-card .continue-remaining{left:8px;right:auto;bottom:10px;font-size:11px;font-weight:650;background:#0009;border-radius:6px;padding:3px 7px}
.progress-track{height:3px}
.progress-track span{background:var(--accent)}
html .browse-hero,html.phone-menu .browse-hero{position:relative;height:460px;margin:0;overflow:hidden;border-radius:0}
html.phone-menu .browse-hero{height:400px;margin-top:-64px}
html .browse-hero-art,html.phone-menu .browse-hero-art{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 25%}
html .browse-hero:after{z-index:1;background:linear-gradient(180deg,transparent 35%,rgba(11,13,18,.85) 80%,#0b0d12 100%)}
html .browse-hero-copy,html.phone-menu .browse-hero-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:680px;margin:0;padding:0 16px 16px}
html .browse-hero .title-name,html.phone-menu .browse-hero .title-name{margin:0 0 10px;font-size:30px;line-height:1.08;font-weight:750;letter-spacing:-.8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.browse-hero .title-meta{font-size:12px;font-weight:600;line-height:1.5;color:var(--text-2);margin:0 0 8px}
html .browse-hero-overview{margin:0 0 14px;font-size:13px;line-height:1.4;color:var(--text-2);-webkit-line-clamp:2}
.browse-hero .title-actions{gap:10px;margin:0}
html .browse-hero .button.primary,html.phone-menu .browse-hero .button.primary{min-height:40px;height:40px;padding:0 20px;border:0;border-radius:999px;background:#fff;color:#0b0d12;font-size:15px;font-weight:700}
.browse-hero .title-actions .round-button{width:40px;height:40px}
.browse-hero .title-actions .ico{width:18px;height:18px}
.showcase-backdrop-layer,.showcase-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0}
.showcase-backdrop-layer{object-position:center 25%;transition:opacity 1.4s ease}
.showcase-backdrop-layer.visible{opacity:1}
.showcase-preview{z-index:1;transition:opacity .8s ease}
.showcase-preview.ready{opacity:1}
.browse-hero:after,.title-hero:after{z-index:2}
html .browse-hero-copy,html.phone-menu .browse-hero-copy{z-index:3}
html .browse-head,html.phone-menu .browse-head{justify-content:space-between;align-items:center;padding:22px 16px 0;gap:12px}
.browse-head h2{font-size:24px;font-weight:750;letter-spacing:-.6px}
.browse-head span{font-size:12px;color:var(--text-2)}
html .chip-row{display:flex;flex-wrap:nowrap;gap:8px;padding:18px 16px 0;overflow-x:auto;scrollbar-width:none}
.chip-row .chip{flex:none;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:550}
.chip-row .chip.selected{background:var(--brand);color:#fff}
.chip-row .chip-clear{background:transparent;color:var(--text-2)}
html .browse-row{padding-top:22px}
.browse-row h3{padding:0 16px;margin:0 0 10px;font-size:18px;font-weight:750;letter-spacing:-.3px}
html .genre-strip,html .studio-strip,html.phone-menu .genre-strip,html.phone-menu .studio-strip{grid-auto-columns:150px;gap:10px;padding:2px 16px 6px}
html .genre-card,html .studio-strip .studio-tile{position:relative;width:150px;height:84px;aspect-ratio:auto;border:0;border-radius:12px;overflow:hidden;scroll-snap-align:start}
.genre-card:after{background:rgba(0,0,0,.4)}
.genre-card span{left:10px;right:10px;bottom:10px;font-size:14px;font-weight:650;line-height:1.25;white-space:normal}
.genre-card.selected,.studio-strip .studio-tile.selected{outline:2px solid var(--accent);outline-offset:-2px}
.studio-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio-tile:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
html .studio-tile .studio-identity{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;padding:12px;box-sizing:border-box}
html .studio-tile .studio-logo{position:absolute;max-width:112px;max-height:46px;width:auto;height:auto;object-fit:contain;opacity:0}
html .studio-tile .studio-name{color:#fff;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.studio-identity.logo-ready .studio-logo{opacity:1}
.studio-identity.logo-ready .studio-name{visibility:hidden}
html .poster-grid,html.phone-menu .poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 12px;padding:22px 16px 30px}
.poster-grid .poster-card{width:100%;max-width:200px;justify-self:center}
.poster-grid .poster-image{border-radius:10px}
html .skeleton-poster-row,html.phone-menu .skeleton-poster-row{grid-auto-columns:118px;gap:12px}
.skeleton-poster{border-radius:10px;background:rgba(255,255,255,.08)}
.skeleton-feature{max-width:300px;aspect-ratio:2/3;height:auto;margin:20px auto;border-radius:14px}
.skeleton-browse-hero{height:460px;margin:0;border-radius:0}
@media(max-width:700px){html .poster-grid,html.phone-menu .poster-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.poster-grid .poster-card{max-width:140px}html .browse-hero{height:400px}html .skeleton-feature,html.phone-menu .skeleton-feature{width:min(62vw,280px);height:auto;aspect-ratio:2/3;margin:20px auto;border-radius:14px}html .skeleton-browse-hero,html.phone-menu .skeleton-browse-hero{height:400px;aspect-ratio:auto}}

/* Stage 3: title pages share the native hero and readable content rhythm. */
html .title-page,html.phone-menu .title-page{padding-bottom:24px}
html .title-bar,html.phone-menu .title-bar{position:relative;top:auto;z-index:2;display:flex;align-items:center;gap:12px;padding:6px 16px 12px;background:var(--bg)}
.title-bar-name{flex:1;font-size:14px;font-weight:600;color:var(--text-2);text-align:left}
html .title-back,html.phone-menu .title-back{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
html .title-hero,html.phone-menu .title-hero{height:420px;aspect-ratio:auto;margin:0;border-radius:0;background:var(--surface)}
html .title-hero:empty,html.phone-menu .title-hero:empty{height:120px;aspect-ratio:auto;background:var(--surface)}
.title-hero:after{background:linear-gradient(180deg,transparent 35%,rgba(11,13,18,.85) 80%,#0b0d12 100%)}
html .title-body,html.phone-menu .title-body{position:relative;z-index:2;max-width:none;margin-top:-115px;padding:0 16px}
html .title-name,html.phone-menu .title-name{font-size:30px;font-weight:750;line-height:1.1;letter-spacing:-.8px;margin:0 0 12px}
html .title-name img,html.phone-menu .title-name img{max-width:min(80%,320px);max-height:105px;object-position:left bottom}
.title-body .title-meta{font-size:12px;line-height:1.5;margin:0 0 16px;color:var(--text-2)}
html .title-body .title-actions,html.phone-menu .title-body .title-actions{gap:8px;flex-wrap:wrap;max-width:560px;margin:0 0 16px}
html .title-body .title-actions .button,html.phone-menu .title-body .title-actions .button{min-height:44px;padding:0 18px;font-size:14px;border:0;border-radius:999px;gap:7px}
.title-body .title-play{flex:0 1 auto;background:#fff;color:#0b0d12;font-weight:700}
.title-body .title-play:hover{background:#e6e9ef;color:#0b0d12}
.title-body .title-secondary{background:rgba(255,255,255,.1);color:#fff}
.title-body .title-actions .ico{width:18px;height:18px}
.title-overview{max-width:740px;font-size:14px;line-height:1.55;color:var(--text-2)}
.title-more{font-size:13px;min-height:36px;padding:6px 0}
.title-credits{font-size:12px;line-height:1.5;color:var(--text-2);margin-top:10px}
.title-link{font-size:13px;margin-top:10px}
.season-tabs{margin:24px -16px 0;padding:0 16px 4px;gap:8px;scrollbar-width:none}
.season-tabs .season-tab{min-height:34px;border:0;border-radius:999px;padding:0 14px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:550;white-space:nowrap}
.season-tabs .season-tab.selected{background:var(--brand);color:#fff}
.season-head{margin:20px 0 12px}
.season-head h3{font-size:18px;font-weight:750;margin:0 0 6px}
.season-head small{font-size:12px;color:var(--text-2)}
.season-head p{font-size:13px;line-height:1.5;color:var(--text-2);margin:0}
html .episode-cards,html.phone-menu .episode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
html .episode-card,html.phone-menu .episode-card{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:start;gap:12px;padding:0;border:0;border-radius:10px;background:transparent;min-width:0}
.episode-thumb{border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--surface)}
.episode-thumb img{width:100%;height:100%;object-fit:cover}
.episode-info strong{font-size:14px;font-weight:650;line-height:1.3}
.episode-info small{font-size:11px;color:var(--text-2)}
.episode-desc{font-size:12px;line-height:1.4;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-card.focused{outline:2px solid var(--accent);outline-offset:5px}
.title-section{margin-top:28px}
.title-section h3{margin:0 0 10px;font-size:18px;font-weight:750;letter-spacing:-.3px}
.title-section .poster-row{padding:0 16px 8px;margin:0 -16px}
.people-row{gap:16px}
.person{width:90px;flex:0 0 90px}
.person-photo{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.08)}
.person strong{font-size:12px;font-weight:650;line-height:1.3}
.person small{font-size:11px;line-height:1.3;color:var(--text-2)}
.info-chip{border:0;border-radius:999px;background:rgba(255,255,255,.08);padding:8px 13px;font-size:13px}
.detail-rows{font-size:13px;gap:10px 20px;line-height:1.5}
.detail-rows dt{color:var(--text-2)}
.detail-rows dd{margin:0;overflow-wrap:anywhere}
@media(max-width:700px){html .title-hero,html.phone-menu .title-hero{height:340px}html .title-body,html.phone-menu .title-body{margin-top:-86px}html .title-hero:empty+ .title-body{margin-top:-50px}html .episode-cards,html.phone-menu .episode-cards{grid-template-columns:minmax(0,1fr)}}

/* Stage 4: dedicated search and an opaque, centered sign-in screen. */
html.search-open .topbar,html.phone-menu.search-open .topbar{display:none}
html.keyboard-open .tab-bar,html.phone-menu.keyboard-open .tab-bar{display:none}
.search-panel{padding:20px 16px 0}
.search-panel h1{font-size:30px;font-weight:750;margin:0 0 18px;letter-spacing:-.7px}
.search-panel .search-box{height:46px;border-radius:14px;background:#ffffff1a}
html .search-panel .search-box,html.phone-menu .search-panel .search-box{width:100%;max-width:none;min-width:0;box-sizing:border-box}
.search-results .search-summary{padding:16px;margin:0;color:var(--text-2);font-size:14px;line-height:1.5}
.search-results>.error{margin:0 16px 16px}
.search-results .library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px;padding:8px 16px 24px}
.search-results .poster-card{min-width:0;width:100%;max-width:200px;justify-self:center}
.search-results .poster-image{border-radius:10px}
.search-results .poster-card h3{font-size:13px;margin:5px 0 3px}
.search-results .poster-card p,.search-results .availability{font-size:11px}
.search-results .availability{display:block;background:none;border:0;padding:5px 0 0;color:var(--text-2)}
.search-results>.button{margin:0 16px}
html .login-screen,html.phone-menu .login-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px 16px;box-sizing:border-box;background:#0b0d12;overflow-y:auto}
.login-screen .login-art{display:none}
html .login-card,html.phone-menu .login-card{display:flex;flex-direction:column;align-items:center;width:100%;max-width:360px;margin:auto;padding:24px 0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}
.login-card .brand{display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:0;margin-bottom:18px}
.login-card .brand-logo{width:32px;height:37px}
.login-card .brand-text{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.6px}
html .login-card .brand-text,html.phone-menu .login-card .brand-text{display:inline}
.login-card h1{margin:0 0 20px;font-size:18px;font-weight:500;color:var(--text-2);letter-spacing:0}
#identity-signin{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 12px}
html .login-card .identity-signin,html.phone-menu .login-card .identity-signin{display:inline-flex;align-items:center;justify-content:center;width:260px;min-height:48px;padding:0 14px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:16px;font-weight:650;line-height:1.2;text-decoration:none}
.login-card .identity-signin:hover{background:var(--accent)}
.login-card label{width:100%;margin:12px 0 0;text-align:left;color:var(--text-2);font-size:13px}
.login-card input{height:44px;font-size:16px;background:#ffffff0d;border:1px solid var(--line-strong);border-radius:10px}
.login-card #login-submit{align-self:center;width:200px;min-height:44px;font-size:15px;background:var(--brand);color:#fff;border:0;border-radius:999px;margin-top:18px}
.login-card #login-error:empty{display:none}
.login-card #login-error{font-size:13px;line-height:1.5;margin:12px 0}
html[data-view=discover] .topbar .brand-logo{display:none}
html[data-view=discover] .topbar .brand-text{display:block;font-size:30px;font-weight:750;letter-spacing:-.7px}
.devices-page{max-width:920px;margin:0 auto;padding:48px var(--gutter) 140px}.devices-page>header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.devices-page h1{margin:0 0 8px;font-size:36px}.pairing-card{margin:0 0 24px;padding:28px;border:1px solid rgba(55,110,255,.55);border-radius:20px;background:rgba(40,89,230,.12);text-align:center}.pairing-qr{width:min(240px,70vw);margin:12px auto 18px;padding:10px;border-radius:14px;background:#fff;line-height:0}.pairing-qr svg{display:block;width:100%;height:auto}.pairing-card>strong{display:block;margin:8px 0;font-size:clamp(48px,10vw,76px);letter-spacing:.16em;font-variant-numeric:tabular-nums}.pairing-card p{margin:8px 0;color:var(--text-2)}.pairing-card small{color:var(--text-3)}.device-list{display:grid;gap:10px}.device-list article{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.device-list article div{display:grid;gap:5px}.device-list article span{color:var(--text-3);font-size:13px}@media(max-width:600px){.devices-page{padding-top:28px}.devices-page>header{align-items:stretch;flex-direction:column}.pairing-card>strong{font-size:44px}.device-list article{align-items:flex-start;flex-direction:column}}
html .find-page .collection-heading{display:flex;justify-content:flex-end;min-height:24px;margin:0;padding:0 16px 10px}
.find-page .collection-heading h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.find-page [data-find-refresh]{min-height:28px;width:28px;padding:0;border:0;border-radius:50%;font-size:0;background:rgba(255,255,255,.06);color:var(--text-2)}
.find-page [data-find-refresh]:before{content:'↻';font-size:19px}
html .find-row,html.phone-menu .find-row{padding:0 16px;margin:26px 0 0}
html .find-row .poster-row,html.phone-menu .find-row .poster-row{grid-auto-columns:118px;gap:12px}
.find-card .find-art,.find-card .poster-image{border-radius:10px}
.find-card h3,.find-card .find-title{font-size:13px;font-weight:650;line-height:1.3}
.find-card p,.find-card .availability{font-size:12px}
.find-card .find-heart{width:26px;height:26px;right:5px;bottom:5px;border:0;background:#0b0d1280}
.find-card .find-heart svg{width:14px;height:14px}
.find-streaming-heading,.find-provider-choice{padding:0 16px;margin-top:30px}
.find-streaming-heading h2,.find-provider-choice h2{font-size:20px;letter-spacing:-.3px}
.find-streaming-heading p{font-size:12px;line-height:1.5}
.find-page{overflow:hidden}
html .find-hero,html.phone-menu .find-hero{position:relative;height:320px;min-height:0;margin:0 16px 34px;border:0;border-radius:18px;overflow:visible;background:var(--surface)}
.find-hero-target{position:relative;display:block;width:100%;height:100%;border:0;border-radius:18px;padding:0;overflow:hidden;background:var(--surface);color:#fff;text-align:left}
.find-hero-target:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.85) 100%)}
html .find-hero-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:18px}
html .find-hero-copy,html.phone-menu .find-hero-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:none;padding:20px;margin:0}
.find-hero-copy .eyebrow{display:block;margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--text-2)}
.find-hero-title{display:block;margin-bottom:8px;font-size:28px;font-weight:750;letter-spacing:-.7px;line-height:1.1}
.find-hero-copy .hero-meta{display:flex;flex-wrap:wrap;gap:5px;margin:0;font-size:12px;font-weight:550;line-height:1.4;color:var(--text-2)}
.find-hero-copy .hero-meta>span:not([hidden])+span:not([hidden]):before{content:'·';margin-right:5px}
html .find-hero-controls{position:absolute;left:0;right:0;top:100%;bottom:auto;height:28px;display:flex;justify-content:center;align-items:center}
.find-hero-controls .hero-dots{gap:6px}
.find-hero-controls .hero-dots button{width:6px;height:6px;min-height:0;border:0;border-radius:50%;padding:0;background:#ffffff40}
.find-hero-controls .hero-dots button.selected{background:#fff}
.find-hero-options{position:absolute;z-index:3;top:10px;right:10px;color:#fff}
.find-hero-options summary{display:grid;place-items:center;width:28px;height:28px;list-style:none;border-radius:50%;background:#0b0d1280;cursor:pointer;letter-spacing:1px;font-size:11px}
.find-hero-options summary::-webkit-details-marker{display:none}
.find-hero-options>div{position:absolute;top:34px;right:0;display:grid;gap:6px;width:180px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#22252d;box-shadow:0 8px 24px #0006}
.find-hero-options:not([open])>div{display:none}
.find-hero-options .button{justify-content:flex-start;font-size:12px;min-height:36px;padding:8px 10px;background:none;border:0}
@media(max-width:700px){html .find-hero,html.phone-menu .find-hero{height:220px}.find-hero-title{font-size:24px}html .find-hero-copy,html.phone-menu .find-hero-copy{padding:16px}}
@media(max-width:700px){.search-results .library-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.search-results .poster-card{max-width:140px}html .login-card .identity-signin,html.phone-menu .login-card .identity-signin{width:200px;min-height:44px;font-size:14px}}
@media(max-width:700px){html.phone-menu .search-results .library-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 12px;padding:8px 16px 24px}}
@media(prefers-reduced-motion:reduce){.showcase-preview,.showcase-backdrop-layer{transition:none}}
/* Clear legacy overlay treatments inside the native Discover cards. */
html .find-hero-art{z-index:0;opacity:1}
.find-hero-copy .eyebrow{background:none;padding:0;border-radius:0}
.find-hero-controls .hero-dots button:after{content:none}
.find-card-copy>.availability{position:static;display:block;max-width:none;margin:6px 0 0;padding:0;border:0;background:none;color:var(--text-2);font-size:12px}
.find-card-copy>.availability.available{background:none;border:0;color:var(--success)}
.find-art .find-heart{top:auto;left:auto;right:5px;bottom:5px;transform:none}
.language-form{display:grid;gap:16px;margin-top:20px}.language-form label{display:grid;gap:8px;color:var(--text-2);font-size:13px}.language-form select{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);color:var(--text)}.language-form .button{width:100%;margin:0}