/* Replay TV — iPhone-first product UI, inspired by Apple HIG and Web Interface Guidelines. */
:root{
 --bg:#080b14;--card:#151927;--border:#30384b;--muted:#adb6cb;
 --white:#f7f8fe;--accent:#ff697c;--ux-text:#f7f8fe;--ux-sub:#aab5cb;
 --ux-stroke:rgba(188,198,231,.15);--ux-glass:rgba(14,18,31,.91);
 --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
 --content-max:1290px;
 font-size:15px;
}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{background:radial-gradient(ellipse 90vw 560px at 40% -290px,#33203d 0,transparent 86%),var(--bg);color:var(--ux-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-watching{overflow:hidden}
button,select,input{touch-action:manipulation}
button{transition:background-color .18s ease,border-color .18s ease,opacity .18s ease,transform .15s ease}
button:active{transform:scale(.975)}
button:focus-visible,a:focus-visible,select:focus-visible,.item:focus-visible{outline:3px solid #ff8797;outline-offset:3px}
button:disabled{cursor:not-allowed;transform:none}
header{min-height:62px;padding-top:max(12px,var(--safe-top));padding-bottom:12px;background:var(--ux-glass);border-bottom:1px solid var(--ux-stroke);z-index:30;backdrop-filter:saturate(1.5) blur(26px);-webkit-backdrop-filter:saturate(1.5) blur(26px)}
.wordmark{font-weight:900;letter-spacing:-1.5px;user-select:none}.wordmark b{color:#ff697c}
#home{border-radius:10px}#settingsBtn{min-width:44px;min-height:44px;border-radius:14px;font-size:21px}
.right .beta{opacity:.8}
main{max-width:var(--content-max);padding-bottom:calc(110px + var(--safe-bottom))}
.hero{min-height:385px;border-bottom:1px solid rgba(222,226,255,.08);background:radial-gradient(ellipse at 80% 10%,#77435e,#27203b 49%,#10121d 88%);border-radius:0 0 22px 22px}
.hero::after{background:linear-gradient(90deg,#0b0e16d9,#0d111bb4 48%,#0d111b3d),linear-gradient(0deg,#0b0d15 0%,transparent 60%)}
.hero img{object-position:center 28%;opacity:.74}
.hero .eyebrow{font-weight:850;color:#ff98a7}
.hero h1{text-wrap:balance;letter-spacing:-1.6px;text-shadow:0 2px 18px #0008}
.hero p{color:#d4d8e6;text-wrap:pretty}
.hero .primary{background:#f9f9ff;box-shadow:0 12px 32px #05060d66}
.toolbar{gap:8px;align-items:stretch}
.search{background:#171c2b;border-color:#41495e;border-radius:15px;min-height:50px;flex:1 1 270px;margin:0}
.search:focus-within{border-color:#ef8294;box-shadow:0 0 0 3px #f47a8e22}
.search input{font-size:16px;line-height:23px}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
#clearSearch{min-width:32px;min-height:32px;border:0;border-radius:10px;background:#33394a;color:#fff}
.filter{border-radius:13px;min-height:48px;white-space:nowrap;background:#171d2b}
.filter.selected{background:#edeff8;color:#181b27}
.channel,.category-chip{min-height:44px;border-radius:13px;scroll-snap-align:start}
.channel{background:#171c2a;min-height:44px}
.channel.active{border-color:#fff}
.channels{scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:4px 3px 11px}
.categories{padding-bottom:13px}
.category-chip{border-radius:100px}
.muted-label{font-size:11px;letter-spacing:1.25px;color:#b0b8cc;margin-top:22px}
.section{margin:24px 0 14px}
.section h2{font-size:24px;letter-spacing:-.85px}
#count{font-variant-numeric:tabular-nums}
.grid{gap:19px 12px}
.item{border-radius:14px;min-width:0;outline-offset:5px;scroll-margin-bottom:115px}
.item .poster{aspect-ratio:4/5;border-radius:13px;background:linear-gradient(140deg,#2d3142,#1b2132 62%,#3c2945);box-shadow:0 9px 22px #0005}
.item .poster>img{transition:transform .28s ease;object-position:center}
.item h3{line-height:1.35;font-weight:740;font-size:14px;margin:10px 2px 4px;min-height:0;text-wrap:pretty}
.item p{font-size:11px;color:#aeb5c7;margin-left:2px;margin-right:2px}
.item .genre{color:#ef9aab;margin-top:5px;font-size:10px;letter-spacing:.5px}
.channelpill{bottom:9px;left:9px;padding:6px 8px;border-radius:8px;background:#090b16c9;backdrop-filter:blur(12px);font-size:11px}
.playpill,.drmpill{top:9px;left:9px;font-size:10px;padding:7px 8px;border-radius:9px;background:#0b0f1ccc;backdrop-filter:blur(10px);color:#f4f6ff}
.playpill{background:#0a362bcf;color:#b0ffe1}
.fav{min-width:38px;min-height:38px;display:grid;place-content:center;border-radius:12px;background:#0d0e19d8;padding:6px;font-size:23px}
.fav.on{color:#ff8295}
.section #count{line-height:1.4}
#moreHost .secondary{min-height:48px;border-radius:14px}
.empty{border-radius:20px;padding:26px}
.disclaimer{border-radius:14px;line-height:1.7;background:#131926;color:#aab3c4}
footer{padding-bottom:0}
.modal{background:#080a13;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:max(12px,var(--safe-bottom))}
.modalhead{position:sticky;top:0;z-index:65;background:#0a0c16ed;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding-top:max(12px,var(--safe-top));border-bottom:1px solid #ffffff17;min-height:56px}
.modalhead .round{min-width:46px;min-height:44px}
.player{position:sticky;top:calc(54px + var(--safe-top));z-index:52;width:100%;max-height:50dvh;aspect-ratio:16/9;background:#020205;box-shadow:0 6px 20px #0007}
.modbody{padding:20px max(16px,env(safe-area-inset-left,16px)) 45px;max-width:990px}
.modbody h2{font-size:clamp(22px,5.6vw,30px);line-height:1.13;text-wrap:balance}
.modbody p{color:#b5c0d0;line-height:1.55}
.modbody .providerline{background:#151a2b;border-color:#454055}
.playeractions{gap:9px}
.playeractions button,.playeractions a{min-height:48px;border-radius:13px}
#unsupported{font-size:13px;padding:14px;border:1px solid #5c4c36;background:#2a211d}
#unsupported p{margin-bottom:0}
#m6PrivatePanel .primary,#m6PrivatePanel .secondary{min-height:49px}
#m6Pin{min-height:48px;font-size:16px}
#m6EpisodeList{scroll-margin-top:calc(54px + var(--safe-top) + 56.25vw)}
.ep{min-height:72px;background:#171d2b;border-color:#343d50;border-radius:13px;margin:8px 0}
.ep:active{background:#273147}
.ep.selected{border-color:#f28a9a;background:#332530}
.ep img{width:88px;aspect-ratio:16/10;border-radius:9px}
.ep strong{line-height:1.35;font-size:13px}
.ep small{font-size:11px;line-height:1.5}
.season-head{margin-top:20px}
.season-select{min-height:45px;background:#21293a;border-radius:12px}
.settings{overscroll-behavior:contain;padding-top:max(22px,var(--safe-top));padding-bottom:calc(64px + var(--safe-bottom));background:#0b0e18ee;backdrop-filter:blur(25px)}
.settingscontent{max-width:660px}
.settings button{min-height:44px}
.providerline{border-radius:15px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#continueSection{margin:25px 0 10px}
#continueSection[hidden]{display:none!important}
.ux-row-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 13px}
.ux-row-heading h2{font-size:22px;margin:0;letter-spacing:-.6px}
.ux-row-heading span{font-size:12px;color:var(--ux-sub)}
.ux-resume{display:flex;gap:12px;overflow-x:auto;padding:1px 0 13px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.ux-resume::-webkit-scrollbar{display:none}
.ux-resume-card{flex:none;width:min(60vw,250px);text-align:left;border:1px solid #343d52;background:#141927;border-radius:16px;overflow:hidden;color:#fff;padding:0;scroll-snap-align:start}
.ux-resume-card .ux-thumb{aspect-ratio:16/10;position:relative;display:block;background:#212739}
.ux-resume-card img{width:100%;height:100%;object-fit:cover;display:block}
.ux-resume-card .ux-thumb::after{content:"▶";position:absolute;right:12px;bottom:12px;display:grid;place-items:center;background:#fff;color:#13151f;border-radius:50%;width:35px;height:35px;font-size:14px}
.ux-resume-card .ux-info{padding:11px 12px 14px}
.ux-resume-card strong{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ux-resume-card small{font-size:11px;color:#b4c0d3;display:block;margin-top:4px}
.ux-meter{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#ffffff69}
.ux-meter span{display:block;height:100%;background:#ff7388}
.ux-install{display:none;align-items:center;gap:11px;background:#22243a;border:1px solid #4c4763;border-radius:14px;padding:12px 13px;margin:18px 0 0;color:#e6eafa}
.ux-install strong{font-size:13px}
.ux-install p{font-size:11px;margin:3px 0 0;color:#bfc7d7;line-height:1.45}
.ux-install button{min-width:44px;min-height:44px;background:transparent;color:#fff;border:0}
.bottom-nav{display:none}
.ux-pill{font-size:11px;font-weight:750;color:#ffacb8;letter-spacing:.9px;text-transform:uppercase}
.ux-discovery{display:none}
.ux-empty-saved{color:#c6cedc;line-height:1.6}
@media (hover:hover){.ux-resume-card:hover{border-color:#ff8999}.item:hover .poster img{transform:scale(1.03)}}
@media (max-width:649px){
 header{padding-left:17px;padding-right:17px}
 header .wordmark{font-size:24px}
 main{padding-left:16px;padding-right:16px;padding-bottom:calc(115px + var(--safe-bottom))}
 .hero{margin-left:-16px;margin-right:-16px;min-height:315px;padding:35px 20px 26px;border-radius:0 0 22px 22px}
 .hero h1{font-size:clamp(30px,8.5vw,43px);max-width:300px}
 .hero p{font-size:13px;line-height:1.55;max-width:320px}
 .hero .primary{min-height:47px}
 .toolbar{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .toolbar .search{grid-column:1/-1;min-width:0}
 .toolbar .filter{min-height:45px;padding:10px 12px;font-size:12px}
 .muted-label{margin-top:20px;font-size:11px}
 .channels{margin-right:-16px;padding-right:17px}
 .category-chip{font-size:12px;padding-left:14px;padding-right:14px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 12px}
 .item .poster{aspect-ratio:3/4}
 .item h3{font-size:13px;margin-top:9px}
 .item p{font-size:11px}
 .section{margin-top:25px}
 .section h2{font-size:22px}
 .section p{font-size:11px}
 .modalhead{padding-right:16px;padding-left:16px}
 .modalhead strong{font-size:17px}
 .player{top:calc(56px + var(--safe-top));max-height:44dvh}
 .modbody{padding-left:16px;padding-right:16px;padding-top:16px}
 .modbody h2{font-size:22px}
 .ep{min-height:66px;padding:9px}
 .ep img{width:82px}
 .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;align-items:stretch;justify-content:space-around;padding:7px 7px calc(7px + var(--safe-bottom));background:rgba(13,17,30,.94);border-top:1px solid rgba(231,234,255,.14);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);box-shadow:0 -9px 32px #0204096b}
 .bottom-nav button{min-width:0;flex:1;border:0;background:none;border-radius:12px;padding:7px 4px 5px;min-height:51px;color:#9ea8c0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:730}
 .bottom-nav button[aria-current="page"]{color:#fff;background:#ffffff0f}
 .bottom-nav button[aria-current="page"] .nav-icon{color:#ff8293}
 .nav-icon{width:23px;height:23px;display:block}
 .bottom-nav .nav-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 body.is-watching .bottom-nav,body.settings-open .bottom-nav{display:none}
 .ux-install{display:flex}
}
@media (display-mode:standalone) {
 html{overscroll-behavior-y:contain}
 body{min-height:100dvh}
}
@media (max-width:375px) {.hero h1{font-size:31px}.filter{font-size:11px}.bottom-nav button{font-size:9.5px}}
@media (prefers-reduced-motion:reduce) {
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.ux-install[hidden]{display:none!important}
@media(max-width:649px){body.keyboard-open .bottom-nav{display:none}.item{content-visibility:auto;contain-intrinsic-size:auto 260px}}

.ux-network{background:#282337;color:#ffcdd5;border:1px solid #755263;border-radius:14px;padding:12px 14px;margin:14px 0;line-height:1.45;font-size:12px}
.ux-network[hidden]{display:none!important}
@media(max-width:649px){.ux-resume-card{min-width:195px}}

.section{display:flex;align-items:center;justify-content:space-between;gap:13px}
.section-intro{min-width:0}.section-intro h2{line-height:1.17}
.sort-label{display:flex;align-items:center;gap:7px;flex:none;color:#abb5c7;font-size:12px}
.sort-label select{appearance:none;-webkit-appearance:none;min-height:44px;max-width:155px;border:1px solid #474b63;border-radius:12px;background:#1b2231;color:#f2f4fd;font-size:12px;font-weight:760;padding:0 27px 0 13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 7px center;background-repeat:no-repeat}
.item p.airdate{font-weight:670;color:#c7cde3;font-size:11px;margin-top:5px;letter-spacing:0;text-overflow:ellipsis}
.ep small .date{color:#d8bdd0}
@media(max-width:649px){.section{gap:7px}.section-intro h2{font-size:20px}.section p{font-size:10px}.sort-label>span{display:none}.sort-label select{max-width:138px;font-size:11px;padding-left:9px;padding-right:22px}}

.hls-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,rgba(7,9,17,.42),rgba(7,9,17,.78));z-index:54;pointer-events:none;padding:14px;text-align:center}
.hls-start-button{pointer-events:auto;min-height:52px;min-width:190px;border:0;border-radius:16px;background:#f7f8fc;color:#151827;font-size:15px;font-weight:850;padding:12px 20px;box-shadow:0 8px 27px #0008}
#hlsHint{margin:0!important;font-size:12px;color:#d9ddea}