:root{--ink:#f4f7f5;--muted:#aebbb7;--aqua:#D7C84F;--aqua2:#F0E58A;--night:#050b0b;--panel:#0c1716;--line:rgba(255,255,255,.12);--shadow:0 24px 80px rgba(0,0,0,.48);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--night);color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 90% -10%,#123b36 0,transparent 35rem),var(--night);overflow-x:hidden}button,a,input{font:inherit}.topbar{position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;gap:2rem;height:72px;padding:0 clamp(1rem,4vw,4rem);background:linear-gradient(#04100fee,transparent);transition:background .25s}.topbar.scrolled{background:#06100ff2;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:.7rem;color:white;text-decoration:none;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #74f5dc66;border-radius:50%;background:linear-gradient(145deg,#1ed6b5,#0b736e);font-size:.85rem;box-shadow:0 0 28px #20d6b144}.brand-name{font-size:1.05rem;letter-spacing:.08em}.nav{display:flex;align-items:center;gap:clamp(.85rem,2.2vw,2rem);margin-left:auto}.nav a{color:#d7dfdc;text-decoration:none;font-size:1rem;font-weight:700;letter-spacing:.02em;padding:.7rem 0;position:relative}.nav a::after{content:"";position:absolute;inset:auto 50% 0;height:2px;background:var(--aqua);transition:inset .2s}.nav a:hover::after,.nav a.active::after{inset:auto 0 0}.nav a.active{color:white}.loading{height:100vh;display:grid;place-content:center;text-align:center;color:var(--muted)}.loader{width:42px;height:42px;margin:auto;border:2px solid #ffffff22;border-top-color:var(--aqua);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero{min-height:min(38vh,420px);display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding:6.5rem clamp(1rem,5vw,5rem) 2.25rem;background-position:center 20%;background-size:cover;isolation:isolate}.hero::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#030807f5 0,#030807c7 34%,transparent 68%),linear-gradient(0deg,var(--night) 0,transparent 45%),linear-gradient(180deg,#02080866,transparent 30%)}.hero::after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:min(15rem,60%);background:linear-gradient(180deg,transparent,var(--night))}.hero-copy{width:min(400px,85vw)}.eyebrow,.type-pill{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--aqua)}.hero h1{font-size:clamp(1.8rem,3vw,2.9rem);line-height:1.02;margin:.45rem 0 .6rem;letter-spacing:-.02em;font-weight:800;overflow-wrap:break-word} /* Home North Star, first corrections -- the Continue strip is part of the hero but must not span its full width: constrained so ~3-4 cards show at wide desktop, leaving the right side of the hero clear for artwork; extra real items stay reachable by scrolling within this strip. */ .hero-continue-row{width:100%;max-width:1130px;margin-top:1.75rem} .episode-line{font-size:.98rem;font-weight:600;color:#ccd6d3;margin:.35rem 0 0;letter-spacing:.005em} .hero-continue-row .media-row{padding-bottom:.2rem} .hero-progress{max-width:420px;margin:.9rem 0 0} .hero-progress .remaining{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aqua);margin:0 0 .45rem} .hero-progress .track{height:5px;border-radius:9px;background:#ffffff2b;overflow:hidden} .hero-progress .track i{display:block;height:100%;background:var(--aqua);border-radius:inherit}.meta-line{display:flex;align-items:center;gap:.7rem;color:#c7d1ce;font-size:1rem;margin:.6rem 0}.meta-line>*+*::before{content:"•";margin-right:.7rem;color:#6f827d}.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}.button{border:0;border-radius:10px;padding:.85rem 1.2rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;text-decoration:none;font-weight:800;cursor:pointer;min-height:46px;font-size:1.1em}.button.primary{background:var(--aqua);color:#03100e}.button.primary:hover{background:#72f5dc}.button.secondary{background:#ffffff18;color:white;backdrop-filter:blur(12px);border:1px solid #ffffff24}.button.secondary:hover{background:#ffffff29}.button.ghost{background:transparent;color:var(--muted);border:1px solid transparent;padding:.85rem .3rem;min-height:auto}.button.ghost:hover{color:var(--ink);text-decoration:underline}.content{position:relative;margin-top:-2.5rem;padding:0 clamp(1rem,4vw,4rem) 5rem}.browse-page{padding:7rem clamp(1rem,4vw,4rem) 5rem;min-height:100vh}.page-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:1rem 0 2rem}.page-head h1{font-size:clamp(2rem,6vw,4rem);margin:0;letter-spacing:-.04em}.page-head p{color:var(--muted);margin:.35rem 0}.row-section{margin:0 0 1.6rem}.row-title{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .65rem}.row-title h2{font-size:clamp(1.1rem,1.6vw,1.2rem);margin:0;letter-spacing:.06em;text-transform:uppercase;font-weight:650;color:#e4e9e6}.row-title span{font-size:.87rem;color:var(--muted)}.media-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,12vw,260px);gap:clamp(.7rem,1.3vw,1.3rem);overflow-x:auto;padding:.25rem .2rem 1.2rem;margin:0 -.2rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#31534d transparent} /* Continue card dimensions are shared in continue-cards.css. */ /* Recently Added, half-width band context -- tuned so ~6 posters are visible at wide desktop. */ .recent-row{grid-auto-columns:clamp(110px,8vw,170px)}.card{scroll-snap-align:start;cursor:pointer;min-width:0}.poster{aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#17302d,#08110f);position:relative;box-shadow:0 8px 30px #0008;transition:transform .22s,box-shadow .22s}.card:hover .poster,.card:focus-visible .poster{transform:translateY(-6px) scale(1.018);box-shadow:0 16px 42px #000c}.poster img{width:100%;height:100%;object-fit:cover;display:block}.badge{position:absolute;top:.55rem;left:.55rem;background:#06100ddd;color:#dffaf3;border:1px solid #ffffff22;padding:.3rem .5rem;border-radius:999px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.progress{position:absolute;left:.55rem;right:.55rem;bottom:.55rem;height:4px;border-radius:9px;background:#ffffff33;overflow:hidden}.progress i{display:block;height:100%;background:var(--aqua);border-radius:inherit}.card h3{font-size:.9rem;margin:.75rem .1rem .2rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.card p{font-size:.84rem;color:var(--muted);margin:0 .1rem}.fallback-cover{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;background:radial-gradient(circle at 75% 18%,#49e5c750,transparent 28%),linear-gradient(145deg,#163f39,#07100f 65%);position:relative;overflow:hidden}.fallback-cover::before{content:"";position:absolute;width:160%;height:30%;left:-30%;top:28%;border:1px solid #55f3d455;border-radius:50%;transform:rotate(-18deg)}.fallback-cover strong{font-family:Georgia,serif;font-size:1.2rem;line-height:1.05;position:relative}.fallback-cover small,.fallback-brand{color:#9fcac1;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;margin-top:.4rem;position:relative}.fallback-brand{position:absolute;top:1rem;left:1rem}.fallback-glyph{position:absolute;font-size:6rem;color:#53e5ca1f;right:-.3rem;top:18%}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:1.5rem clamp(.75rem,1.4vw,1.2rem)}.grid .card{max-width:260px}.music-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.music-grid .poster{aspect-ratio:1/1;border-radius:12px}.filters{display:flex;gap:.55rem;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#ffffff0b;color:#d9e2df;border-radius:99px;padding:.55rem .85rem;cursor:pointer}.chip.active{background:#dffbf5;color:#07110f}.search-wrap{max-width:850px;margin:1rem auto 2rem}.search-controls-row{margin-top:.85rem;align-items:center}.search-controls-row .chip{padding:.42rem .8rem;font-size:.82rem}.search-controls-divider{width:1px;align-self:stretch;min-height:1.4rem;background:var(--line)}.search-discovery-indicator{margin:.6rem 0 0;font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}.search-discovery-indicator::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua);animation:af-pulse 1.4s ease-in-out infinite}@keyframes af-pulse{0%,100%{opacity:.35}50%{opacity:1}}.searchbox{width:100%;border:1px solid #ffffff25;border-radius:16px;background:#ffffff0c;color:white;font-size:clamp(1.1rem,3vw,1.6rem);padding:1rem 1.2rem;outline:none}.searchbox:focus{border-color:var(--aqua);box-shadow:0 0 0 3px #39dcbc22}.search-empty{text-align:center;color:var(--muted);padding:5rem 1rem}.detail-shell{position:fixed;z-index:100;inset:0;overflow:auto;background:#030807f5;backdrop-filter:blur(14px)}.detail{min-height:100%;position:relative}.detail-backdrop{position:absolute;inset:0 0 auto;height:min(66vh,620px);background-size:cover;background-position:center 20%;opacity:.52;mask-image:linear-gradient(#000 35%,transparent 100%)}.detail-close{position:fixed;z-index:2;right:clamp(1rem,3vw,2rem);top:1rem;width:46px;height:46px;border:1px solid #ffffff25;border-radius:50%;background:#07100dcc;color:#fff;font-size:1.5rem;cursor:pointer}.detail-body{position:relative;display:grid;grid-template-columns:minmax(180px,260px) minmax(0,760px);gap:clamp(1.5rem,4vw,4rem);align-items:end;padding:clamp(9rem,28vh,18rem) clamp(1rem,7vw,7rem) 4rem}.detail-poster{aspect-ratio:2/3;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#10201d}.detail-poster img{width:100%;height:100%;object-fit:cover}.detail-copy h1{font-size:clamp(2.4rem,6vw,5.6rem);line-height:.95;letter-spacing:-.05em;margin:.4rem 0 1rem}.detail-copy .overview{color:#ccd7d3;line-height:1.7;font-size:1rem}.title-logo{margin:.5rem 0 1.1rem}.title-logo img{display:block;max-width:min(420px,70vw);max-height:150px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 6px 28px rgba(0,0,0,.6))}.credit-line,.collection-line{color:#c7d1ce;font-size:1rem;line-height:1.6;margin:.5rem 0 0}.collection-line{color:var(--aqua);font-weight:700}.cast-block h3{margin:0 0 .8rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted)}.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem 1.5rem;list-style:none;margin:0;padding:0}.cast-grid li{display:flex;flex-direction:column;gap:.15rem;min-width:0}.cast-grid strong{font-size:.9rem;color:var(--ink);font-weight:700;white-space:normal;overflow-wrap:break-word}.cast-grid span{font-size:.87rem;color:var(--muted);white-space:normal;overflow-wrap:break-word}.rich-detail .detail-hero{position:relative;height:min(62vh,660px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;--nitros-art-media-start:42%}.rich-detail .detail-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 20%}/* Confirmed cause of the hard rectangular trailer / separate black left panel: .detail-hero-player (below) carried its OWN opaque background:#000 across the ENTIRE hero at ALL times -- it is never hidden itself, only its children are -- painted after (so visually above) .detail-hero-bg in the same z-index:auto paint order, so the cinematic backdrop was never visible at all, trailer active or not. Fixed below by removing that background entirely. Separately, .detail-hero-trailer's own `inset:0` tied in CSS specificity (0,2,0) with the shared ".nitros-art-hero .nitros-art-media{left:var(--nitros-art-media-start);mask-image:...}" rule declared later in this file -- so the trailer's rendered box DID already start at the same ~42% boundary as the backdrop and DID already inherit the same blend mask, but only via an incidental tie far from the rule it depends on. Declared explicitly here instead (same selector, now self-sufficient) so the blend no longer depends on that tie -- it reproduces the backdrop's own positioning + mask directly, so the trailer's left edge fades into the hero rather than forming a hard boundary, and still correctly defers to the existing mobile override (".nitros-art-hero .nitros-art-media{left:0;mask-image:none}" at <=760px, declared even later and still wins there, matching the backdrop's own full-bleed mobile treatment with no change needed). pointer-events:none here is the item 3 fix: mouse/touch can no longer reach the YouTube iframe mounted inside (hover/click no longer reveal or operate YouTube's native controls), while nothing about loading, playback or postMessage commands is affected -- pointer-events has no bearing on any of those. .trailer-controls (a sibling, not a descendant) is untouched and stays interactive. */ .rich-detail .detail-hero-trailer{position:absolute;top:0;right:0;bottom:0;left:var(--nitros-art-media-start);width:auto;overflow:hidden;background:#000;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--nitros-art-blend));mask-image:linear-gradient(90deg,transparent 0,#000 var(--nitros-art-blend))}.rich-detail .detail-hero-trailer .continuity-trailer-video,.rich-detail .detail-hero-trailer .continuity-trailer-frame{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:150%;min-height:150%;transform:translate(-50%,-50%);border:0;object-fit:cover}.rich-detail .detail-hero::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--night) 0,transparent 42%),linear-gradient(90deg,#030807ee 0,#030807b0 38%,transparent 72%)}.rich-detail .detail-hero.trailer-playing::before{opacity:.55;transition:opacity .3s}.trailer-controls{position:absolute;z-index:3;right:clamp(1rem,3vw,2rem);bottom:1.2rem;align-items:center;gap:.6rem}.trailer-controls[hidden]{display:none}.trailer-controls:not([hidden]){display:flex}.trailer-controls .af-seek{width:84px}.rich-detail .detail-hero>.detail-hero-media{position:absolute;inset:0;z-index:0}.rich-detail .detail-hero-media>.detail-hero-player{position:absolute;inset:0;overflow:hidden} /* Optional real foreground artwork (e.g. the Audiobook cover) over the dimmed/blended backdrop -- explicit z-index:2, the same level .detail-hero-content itself uses, so it is never left to the scrim's own z-index:1 gradient (.rich-detail .detail-hero::before above) to decide whether it stays visible. Anchored toward the right of the media region (clear of the scrim's own left-to- right fade) and vertically centred; sized by height so a portrait cover keeps its real 2/3 aspect ratio, never stretched. Hidden on phone (see the <=760px block at the end of this file) -- the dimmed backdrop atmosphere alone already carries the same artwork there. */ .rich-detail .detail-hero-media-content{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(2rem,8vw,6rem);pointer-events:none} .rich-detail .detail-hero-media-content .detail-poster{height:min(52vh,460px);width:auto;aspect-ratio:2/3;margin:0;box-shadow:0 30px 70px #000c;pointer-events:auto}.rich-detail .detail-hero-content{position:relative;z-index:2;width:min(42vw,760px);min-width:min(560px,88vw);padding:clamp(6rem,20vh,9rem) clamp(1.25rem,5vw,4.5rem) clamp(1.75rem,4.5vh,2.75rem);transition:opacity .25s} /* "Approved Torrent UI": overlays the hero's own ARTWORK area only -- starting at the same left edge where .detail-hero-content's own established width ends, so the title/actions column is never covered, resized or shifted. position:absolute within .detail-hero (already position:relative) -- opening/closing this never changes hero height or moves anything below it. */ /* "Approved Torrent UI" reference proportions (1740px-wide mockup): left media area ~430px (~25%), panel spanning from there to near the right edge, with a small (~12px) margin on top/right/bottom -- a floating rounded card over the artwork, not an edge-to-edge sheet. Proportional (min()/%), not fixed pixels, so it adapts at other viewport widths per the spec's own instruction. */ /* "Uploaded mockup" visual authority: a deliberate overlay filling the hero's own right-side space -- flush to the hero's own top/right/bottom (no floating-card margins), with a left border dividing it from the artwork, blending from translucent (artwork still visible behind the header) to a solid dark ground where the comparison rows sit. left:max(...) + a capped width is the explicit fix for "the panel can visually extend badly or waste huge amounts of space on ultrawide screens" (the previous min()-based left offset stayed pinned at a small fixed value as the viewport grew, so the panel's own width grew unbounded with it) -- width now has a real ceiling regardless of viewport, and never becomes a narrow wasted strip on an ordinary desktop width either, since it still claims all the remaining space up to that ceiling. */ /* ROOT CAUSE (confirmed via real rendered-DOM inspection, not guesswork): .torrent-panel is a direct child of .detail-hero.nitros-art-hero, and .nitros-art-hero>:not(.nitros-art-media){position: relative;z-index:2} (an existing, unrelated rule that lifts the hero's own content above the backdrop art) has HIGHER specificity (two classes) than a bare .torrent-panel{...} rule (one class) -- it was silently overriding position:absolute back to position:relative. With position:relative, the panel stayed in NORMAL FLEX FLOW as a flex item of .detail-hero (display:flex;align-items: flex-end), sized purely by its own CONTENT (confirmed ~1250px tall against a ~610px hero) and bottom-aligned by the hero's own flex cross-axis alignment -- which is exactly "extends beyond the visible screen" (bottom-aligned content taller than its container overflows UPWARD, off the top of the viewport) and "narrow areas" (its `left` computed as a position:relative OFFSET from its normal flex position, not as an absolute inset from the hero's own edge, so its rendered width/position varied unpredictably with content and viewport rather than being deterministic). The real fix is a selector with genuinely higher specificity than the generic rule (three classes), never another speculative width/position number. */ .rich-detail .nitros-art-hero>.torrent-panel{position:absolute;z-index:3;top:0;right:0;bottom:0;left:max(420px,28%);width:min(1300px,calc(100% - max(420px,28%)));background:linear-gradient(135deg,#07100d99 0%,#040a08f2 22%,#030706fa 100%);backdrop-filter:blur(14px);border-left:1px solid #ffffff22;padding:clamp(1.3rem,2.6vw,2.2rem) clamp(1.3rem,2.6vw,2.4rem);overflow-y:auto;display:flex;flex-direction:column} /* Confirmed live defect: the `hidden` attribute (set by closeNitrosRecommends()) has no visual effect once the rule above sets `display:flex` -- an author-stylesheet declaration always beats the user-agent stylesheet's own `[hidden]{display:none}` regardless of specificity, so the empty panel's background/blur/absolute box kept rendering as a dark rectangle over the hero even when closed. Same established pattern already used elsewhere in this file for the same reason (.dock-menu[hidden], .next-episode[hidden], .music-mini[hidden], .book-mini[hidden], .showcase-trailer[hidden], .showcase-nav button[hidden]) -- scoped through the same compound selector as the base rule so it isn't itself defeated by it. */ .rich-detail .nitros-art-hero>.torrent-panel[hidden]{display:none} .rich-detail .detail-hero-content h1{font-size:clamp(1.6rem,4.6vw,4rem);line-height:1.05;letter-spacing:-.04em;margin:.3rem 0 1rem;text-shadow:0 10px 34px rgba(0,0,0,.55);overflow-wrap:break-word}.rich-detail .detail-hero-content .overview{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.rich-detail .title-logo img{max-width:min(400px,80%);max-height:150px}/* Supporting information band: a compact horizontal strip below the hero, not a tall side column. Director/creator credit sits above the cast grid; the cast grid itself already distributes into as many compact columns as the available width allows (reused from .cast-grid, unchanged) rather than a single vertical list. */ .detail-support{padding:1.1rem clamp(1.5rem,6vw,5rem) 1.75rem;max-width:1800px;margin:0 auto} .detail-support .overview{max-width:70ch} .detail-support .credit-line{margin:0 0 .9rem} .detail-support .collection-line{margin:0 0 .9rem} .detail-support .cast-block{margin-top:0} .detail-support .cast-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem 1.5rem} .rich-detail .season-browser{margin-top:0}.detail-progress{margin:1rem 0;max-width:400px}.detail-progress .track{height:5px;background:#ffffff2b;border-radius:9px}.detail-progress .track i{display:block;height:100%;background:var(--aqua)}.episodes,.tracklist{margin:0 clamp(1rem,7vw,7rem) 5rem;max-width:1050px}.episodes h2,.tracklist h2{font-size:1.6rem}.episode,.track-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.9rem .2rem;border-bottom:1px solid var(--line);cursor:pointer}.episode:hover{color:var(--aqua)}.number{color:var(--muted);font-variant-numeric:tabular-nums}.empty-card{border:1px solid var(--line);border-radius:12px;padding:2rem;color:var(--muted)}.error{min-height:100vh;display:grid;place-content:center;text-align:center;padding:2rem}.error h1{font-size:2rem}.mobile-nav{display:none} @media(max-width:760px){.topbar{height:62px;padding:0 .9rem}.brand-name{display:none}.brand-mark{width:34px;height:34px}.nav{position:fixed;z-index:60;left:0;right:0;bottom:0;height:68px;background:#06100ff5;border-top:1px solid var(--line);padding:0 .45rem;padding-bottom:env(safe-area-inset-bottom);justify-content:space-around;gap:0;backdrop-filter:blur(18px)}.nav a{font-size:.67rem;padding:1.2rem .36rem}.nav a::after{bottom:.7rem}.hero{min-height:46vh;padding:6rem 1rem 1.75rem;background-position:62% 20%}.hero::before{background:linear-gradient(0deg,var(--night),transparent 60%),linear-gradient(90deg,#030807d9,transparent)}.hero h1{font-size:2.1rem;max-width:90%}.content{margin-top:-1rem;padding:0 1rem 6rem}.media-row{grid-auto-columns:42vw}.browse-page{padding:5.2rem 1rem 6rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem .7rem}.music-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-head{display:block}.detail-body{display:block;padding:8rem 1rem 2rem}.detail-poster{width:36vw;min-width:130px;margin-bottom:1.5rem}.detail-copy h1{font-size:2.7rem}.title-logo img{max-width:80vw;max-height:90px}.credit-line,.collection-line{font-size:.85rem}.cast-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.episodes,.tracklist{margin:0 1rem 6rem}.episode{grid-template-columns:auto 1fr}.button{flex:1}.detail-close{top:.7rem;right:.7rem}.brand{margin-right:auto}/* Phone: the hero's content region now carries metadata/actions/synopsis/progress that used to live in a separate section below it, so a fixed desktop-style hero height here risks clipping -- height:auto (floored by the same min-height the fixed value used to be) lets it grow with whatever the content genuinely needs instead. */ .rich-detail .detail-hero{height:auto;min-height:min(58vh,560px)}.rich-detail .detail-hero-content{width:100%;padding:5.5rem 1rem 1.25rem}.rich-detail .detail-hero-content h1{font-size:2.2rem}.rich-detail .title-logo img{max-width:75vw;max-height:80px}.rich-detail .detail-hero-media-content{display:none}.rich-detail .nitros-art-hero>.torrent-panel{left:0;right:0;top:0;bottom:0;width:auto;border-left-width:0;padding:4.5rem 1rem 1.25rem} /* Same cascade-ordering issue as the base panel fix above, confirmed the same way (real rendered computed-style inspection): this @media block sits EARLIER in the file than the base .torrent-row- grid/.torrent-col-labels rules (added later, elsewhere in the stylesheet), so an equal-specificity override here loses to the later base rule regardless of the media query matching. Scoped through .torrent-panel (itself now unambiguously specific) so these mobile overrides win regardless of physical file position. */ .rich-detail .nitros-art-hero>.torrent-panel .torrent-panel-head-status{padding-right:0;flex-direction:column;align-items:flex-end;gap:.3rem} .rich-detail .nitros-art-hero>.torrent-panel .torrent-col-labels{display:none} .rich-detail .nitros-art-hero>.torrent-panel .torrent-row-grid{grid-template-columns:1fr;row-gap:.5rem} .rich-detail .nitros-art-hero>.torrent-panel .torrent-col-size{text-align:left} .rich-detail .nitros-art-hero>.torrent-panel .torrent-col-seeders{justify-content:flex-start} .rich-detail .nitros-art-hero>.torrent-panel .torrent-col-action{justify-self:stretch}.detail-support{padding:1rem 1rem 1.25rem}.detail-support .cast-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.book-series-shelf{padding:0 1rem 1.75rem}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}} .account-button{border:1px solid #76ebd06b;background:linear-gradient(145deg,#20cbb0,#0b6b65);color:white;border-radius:50%;width:38px;height:38px;cursor:pointer;margin-left:.4rem;font-size:.72rem;font-weight:900}.account-button[data-avatar="coral"],.avatar-preview.coral,.avatar-choice.coral span{background:linear-gradient(145deg,#ff8b76,#a33946)}.account-button[data-avatar="violet"],.avatar-preview.violet,.avatar-choice.violet span{background:linear-gradient(145deg,#a68bff,#51369b)}.account-button[data-avatar="amber"],.avatar-preview.amber,.avatar-choice.amber span{background:linear-gradient(145deg,#ffc65c,#9c5d0f)}.account-button[data-avatar="midnight"],.avatar-preview.midnight,.avatar-choice.midnight span{background:linear-gradient(145deg,#4e6e86,#14222e)}.account-menu{position:fixed;z-index:70;right:clamp(1rem,4vw,4rem);top:64px;width:210px;padding:.75rem;border:1px solid var(--line);border-radius:14px;background:#091311f4;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.account-menu strong{display:block;padding:.5rem .6rem .8rem}.account-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#dce7e3;padding:.7rem .6rem;border-radius:8px;cursor:pointer}.account-menu button:hover{background:#ffffff12}.account-view{min-height:100%;padding:5rem 1rem;background:radial-gradient(circle at 75% 0,#12453d,transparent 36rem),#050b0b}.account-inner{width:min(980px,100%);margin:auto}.account-inner>h1{font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.05em;margin:.4rem 0 1.5rem}.account-intro{color:var(--muted)}.account-form{display:grid;gap:1rem;padding:1.4rem;border:1px solid var(--line);border-radius:16px;background:#ffffff08;margin:1rem 0 2rem}.account-form h2{margin:0}.account-form label{display:grid;gap:.4rem;color:#cbd6d2;font-size:.8rem;font-weight:700}.account-form input,.account-form select{border:1px solid #ffffff25;border-radius:10px;background:#07100f;color:white;padding:.8rem;outline:none}.account-form fieldset{border:0;padding:0;margin:0}.account-form legend{margin-bottom:.7rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.avatar-options{display:flex;gap:.8rem;flex-wrap:wrap}.avatar-choice input{position:absolute;opacity:0}.avatar-choice span,.avatar-preview{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#20cbb0,#0b6b65);font-weight:900}.avatar-choice small{font-size:.65rem;text-align:center}.avatar-choice:has(input:checked) span{outline:3px solid white;outline-offset:3px}.form-message{color:var(--aqua)}.form-message.bad{color:#ff9d9d}.user-list{display:grid;gap:.8rem}.user-admin{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#ffffff08}.user-admin.disabled{opacity:.58}.user-main{display:grid;gap:.2rem}.user-main span,.user-main small{color:var(--muted)}.user-actions{grid-column:2;display:flex;gap:.45rem;flex-wrap:wrap}.chip.danger{color:#ff9d9d;border-color:#ff8d8d44}.password-form{margin-top:2rem}.login-page{min-height:100vh;background:radial-gradient(circle at 70% 10%,#164c43,transparent 40rem),linear-gradient(145deg,#030807,#071513)}.login-main{min-height:100vh;display:grid;place-items:center;padding:1.2rem}.login-card{width:min(430px,100%);padding:clamp(1.6rem,6vw,3rem);border:1px solid #ffffff18;border-radius:24px;background:#081311dd;box-shadow:var(--shadow);backdrop-filter:blur(20px)}.login-mark{margin-bottom:2rem}.login-card h1{font-size:clamp(2.2rem,8vw,3.7rem);letter-spacing:-.05em;margin:.45rem 0}.login-card>p{color:var(--muted);margin:0 0 2rem}.login-card form{display:grid;gap:1rem}.login-card label{display:grid;gap:.45rem;color:#cad5d1;font-size:.82rem;font-weight:700}.login-card input{width:100%;border:1px solid #ffffff24;background:#ffffff0b;color:white;border-radius:12px;padding:.9rem 1rem;outline:none}.login-card input:focus{border-color:var(--aqua);box-shadow:0 0 0 3px #43dfc022}.login-card .button{width:100%;margin-top:.4rem}#login-error{color:#ff9d9d;min-height:1.2rem;font-size:.82rem}.login-card button:disabled{opacity:.65} @media(max-width:760px){.account-button{position:fixed;right:.8rem;top:.75rem}.account-menu{right:.75rem;top:56px}.account-view{padding:4.5rem .8rem 5rem}.form-grid{grid-template-columns:1fr}.user-admin{grid-template-columns:auto 1fr}.user-actions{grid-column:1/-1}.account-inner>h1{font-size:2.7rem}} /* Narrow-screen overflow safeguards. */ .row-section{min-width:0}.media-row{max-width:100%} @media(max-width:760px){ .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100vw;margin:0;padding-left:.2rem;padding-right:.2rem} .nav a{font-size:0;min-width:0;padding-left:.1rem;padding-right:.1rem;text-align:center} .nav a::before{content:attr(data-mobile);font-size:.62rem} .hero{width:100vw;max-width:100vw} .hero-copy{width:calc(100vw - 2rem);max-width:calc(100vw - 2rem)} .hero .actions{display:grid;grid-template-columns:1fr;width:100%} .hero .button{min-width:0;padding:.75rem .5rem;font-size:.9rem;white-space:nowrap} } /* 1.2 streaming interaction refinements */ :focus-visible{outline:3px solid var(--aqua);outline-offset:3px}.row-title{justify-content:space-between}.row-title>div:first-child{display:flex;align-items:baseline;gap:.75rem}.rail-controls{display:flex;gap:.45rem}.rail-controls button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#07110ed9;color:white;font-size:1.8rem;line-height:1;cursor:pointer;transition:opacity .2s,background .2s}.rail-controls button:hover:not(:disabled){background:#ffffff25}.rail-controls button:disabled{opacity:.22;cursor:default}.media-row{scroll-padding-inline:.2rem;overscroll-behavior-inline:contain}/* Build 218: poster media-type badges (the task's own specific reference) -- internal symbols +~40%, circular background (width/height:28px) deliberately unchanged. */ .type-mark,.watched,.availability-mark{position:absolute;display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff29;border-radius:50%;background:#06100de8;color:#eafff9;font-size:1rem;box-shadow:0 4px 16px #0008}.type-mark{top:.55rem;left:.55rem}.watched{top:.55rem;right:.55rem;color:var(--aqua);font-weight:900}.availability-mark{top:.55rem;right:.55rem;color:var(--aqua)}.availability-mark svg{width:20px;height:20px}.availability-mark.availability-external{color:#dde6e3}.availability-mark.availability-upcoming{color:#f3c969} /* "Media Presentation Corrections", Task 2: a plain, non-interactive label for a collection member that is genuinely upcoming -- same visual weight as a .button but deliberately not one (no hover/ focus affordance, never a click target of its own; the card/hero itself still opens the detail page). */ .upcoming-indicator{display:inline-flex;align-items:center;gap:.45rem;padding:.85rem 1.2rem;border-radius:10px;background:#ffffff0c;color:#f3c969;font-weight:800;min-height:46px} .upcoming-indicator svg{width:18px;height:18px} .torrent-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;flex:0 0 auto} .torrent-panel-head h2{font-size:1.7rem;font-weight:800;margin:0;letter-spacing:-.01em} .torrent-panel-subtitle{margin:.3rem 0 0;color:var(--muted);font-size:.85rem} .torrent-panel-head-status{display:flex;align-items:center;gap:1rem;flex:0 0 auto;padding-right:2.6rem} .torrent-result-count{color:var(--muted);font-size:.8rem;white-space:nowrap} .torrent-status-pill{display:flex;align-items:center;gap:.5rem;color:var(--aqua);font-size:.8rem;font-weight:700;white-space:nowrap} .torrent-status-spinner{width:15px;height:15px;border-radius:50%;border:2px solid #ffffff25;border-top-color:var(--aqua);animation:torrent-spin .8s linear infinite;flex:0 0 auto} @keyframes torrent-spin{to{transform:rotate(360deg)}} .torrent-panel-close{position:absolute;top:clamp(1.3rem,2.6vw,2.2rem);right:clamp(1.3rem,2.6vw,2.4rem);flex:0 0 auto;width:34px;height:34px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff0f;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer} .torrent-panel-body{min-height:60px;margin-top:1.1rem;overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column} .torrent-progress-track{width:100%;height:3px;border-radius:3px;background:#ffffff1c;overflow:hidden;flex:0 0 auto;margin-bottom:1.3rem} .torrent-progress-fill{width:30%;height:100%;background:var(--aqua);border-radius:inherit;animation:torrent-progress-slide 1.3s ease-in-out infinite} @keyframes torrent-progress-slide{0%{transform:translateX(-120%)}100%{transform:translateX(430%)}} /* Clean, generously-spaced comparison rows ("uploaded mockup" visual authority): bold quality, small source/encoding chips, size and seeders right-aligned in fixed columns, action button far right -- filename demoted to small secondary text beneath, never the row's primary content. */ .torrent-col-labels,.torrent-row-grid{display:grid;grid-template-columns:1fr 90px 110px 140px;align-items:center;column-gap:1.2rem} .torrent-col-labels{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;padding:0 1.1rem;margin-bottom:.5rem;flex:0 0 auto} .torrent-col-labels span:nth-child(2),.torrent-col-labels span:nth-child(3){text-align:right} .torrent-row-list{display:flex;flex-direction:column;flex:0 0 auto;gap:.6rem} .torrent-row{border:1px solid #ffffff1a;border-radius:12px;padding:.9rem 1.1rem;background:#0a120fb3;position:relative} .torrent-row.recommended{border-color:#f3c969;background:#2a230ccc;margin-top:.6rem} .torrent-recommends-tag{position:absolute;top:-13px;left:1rem;display:inline-flex;align-items:center;gap:.3rem;background:var(--aqua);color:#1a1400;font-size:.68rem;font-weight:800;padding:.25rem .65rem;border-radius:999px;letter-spacing:.02em} .torrent-recommends-tag::before{content:"★"} .torrent-col-main{display:flex;align-items:center;gap:.6rem;min-width:0;flex-wrap:wrap} .torrent-col-quality{font-size:1rem;font-weight:800;color:var(--ink)} .torrent-col-encoding,.torrent-col-source{font-size:.72rem;font-weight:700;color:#c7d1ce;background:#ffffff14;padding:.22rem .55rem;border-radius:6px;white-space:nowrap} .torrent-col-size{font-size:.88rem;color:var(--ink);text-align:right;white-space:nowrap} .torrent-col-seeders{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;font-size:.88rem;color:#6ee7a8;font-weight:700;white-space:nowrap} .torrent-col-seeders svg{width:14px;height:14px} .torrent-col-action{justify-self:end;padding:.55rem 1rem;min-height:38px;font-size:.82rem;white-space:nowrap} .torrent-row-filename{margin-top:.5rem;color:var(--muted);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .torrent-panel-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;flex:0 0 auto} .file-selection-list{display:flex;flex-direction:column;gap:.4rem;max-height:40vh;overflow-y:auto;margin:.8rem 0}.file-selection-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border:1px solid #ffffff14;border-radius:8px;font-size:.82rem}.file-selection-row span:first-of-type{flex:1;overflow-wrap:break-word}.file-selection-actions{display:flex;gap:.6rem;margin-top:.6rem;flex:0 0 auto}.file-selection-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}.file-selection-tools .button{min-height:32px;padding:0 .8rem;font-size:.75rem}.file-selection-group{display:flex;flex-direction:column;gap:.3rem}.file-selection-group-head{display:flex;align-items:center;gap:.6rem;padding:.45rem .2rem;font-size:.8rem;font-weight:800;color:var(--ink)}.file-selection-group-head span:first-of-type{flex:1;overflow-wrap:anywhere}.file-selection-group [data-file-group-files]{display:flex;flex-direction:column;gap:.3rem;padding-left:1.2rem}.torrent-row-scope{margin-top:.45rem;color:var(--muted);font-size:.72rem}.torrent-row-scope.plausible{color:#e8c46a}.square-card .poster{aspect-ratio:1/1}.browse-controls{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;flex-wrap:wrap}.sort-control{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.78rem;font-weight:700}.sort-control select{border:1px solid var(--line);border-radius:999px;background:#0b1715;color:white;padding:.62rem 2.2rem .62rem .9rem;cursor:pointer}.search-field{position:relative}.search-field .searchbox{padding-right:3.5rem}.search-field button{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.5rem;cursor:pointer}.search-empty{border:1px dashed var(--line);border-radius:18px;margin:2rem auto;max-width:680px}.search-empty h2{color:var(--ink);margin:0 0 .5rem}.search-empty p{margin:0}.empty-state{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;padding:4rem 1rem;text-align:center;color:var(--muted)}.empty-state h2{color:var(--ink)}.detail-back{position:fixed;z-index:2;left:clamp(1rem,3vw,2rem);top:1rem;min-height:46px;border:1px solid #ffffff25;border-radius:999px;background:#07100de8;color:#fff;padding:0 1rem;font-weight:800;cursor:pointer;backdrop-filter:blur(12px)}.card h3{line-height:1.25}.poster img{background:#10201d} @media(max-width:760px){.rail-controls{display:none}.browse-controls{justify-content:flex-start;margin-top:1rem}.sort-control{width:100%;justify-content:space-between}.sort-control select{flex:1;max-width:260px}.row-title>div:first-child{display:block}.row-title span{display:block;margin-top:.2rem}.media-row{grid-auto-columns:42vw;scroll-snap-type:x mandatory;padding-right:16vw}.detail-back{top:.7rem;left:.7rem}.detail-back span{display:none}.topbar{padding-right:4rem}.card h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.25em}.card p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} .account-loading{display:grid;place-items:center;min-height:220px;color:var(--muted);text-align:center}.account-loading .loader{margin-bottom:1rem} /* 1.3 native Photos */ .photos-page{min-height:100vh;padding:7rem clamp(1rem,4vw,4rem) 6rem}.photos-head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}.photos-head h1{font-size:clamp(2.8rem,7vw,5.5rem);line-height:.9;letter-spacing:-.055em;margin:.45rem 0}.photo-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55rem}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-rows:190px;gap:.5rem}.photo-tile{position:relative;border:0;border-radius:8px;padding:0;overflow:hidden;background:#10201d;cursor:pointer;min-width:0}.photo-tile img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s,filter .25s}.photo-tile:hover img,.photo-tile:focus-visible img{transform:scale(1.045);filter:brightness(1.08)}.photo-tile span{position:absolute;right:.6rem;bottom:.5rem;text-shadow:0 2px 8px #000;font-size:1.2rem}.photo-group{margin:0 0 2.4rem}.photo-group h2{position:sticky;top:72px;z-index:2;width:max-content;background:#06100fe8;border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;font-size:.85rem;backdrop-filter:blur(12px)}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.photo-album{border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0 0 1rem;background:#0b1715;color:white;text-align:left;cursor:pointer}.photo-album img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:.8rem}.photo-album strong,.photo-album span{display:block;padding:0 1rem}.photo-album span{color:var(--muted);font-size:.78rem;margin-top:.25rem}.photo-viewer{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) 260px;background:#020504}.photo-stage{min-height:100vh;display:grid;place-items:center;padding:4.5rem 1rem 1rem}.photo-stage img,.photo-stage video{max-width:100%;max-height:calc(100vh - 5.5rem);object-fit:contain}.photo-viewer aside{display:flex;flex-direction:column;gap:.7rem;padding:5rem 1.4rem 2rem;border-left:1px solid var(--line);background:#09110f}.photo-viewer aside span{color:var(--muted);font-size:.85rem}.photo-loading{height:45vh}.upload-state{min-height:45vh;display:grid;place-content:center;text-align:center;color:var(--muted)}.photo-search{margin-top:2.5rem}.photo-more{margin:1.5rem auto;display:flex} @media(max-width:760px){.nav{grid-template-columns:repeat(5,minmax(0,1fr))}.nav a::before{font-size:.56rem}.photos-page{padding:5.2rem .65rem 6rem}.photos-head{display:block}.photo-actions{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:.8rem 0;scrollbar-width:thin;scrollbar-color:#31534d transparent}.photo-actions>*{flex:0 0 auto}.photo-actions [data-photo-upload]{position:sticky;right:0}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:32vw;gap:3px}.photo-viewer{display:block}.photo-stage{min-height:calc(100vh - 110px);padding:4rem .3rem .3rem}.photo-viewer aside{border:0;border-top:1px solid var(--line);padding:1rem 1rem 5rem}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.photo-group h2{top:62px}.photo-search .photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .photo-stage{position:relative}.photo-nav{position:absolute;z-index:4;top:50%;translate:0 -50%;display:grid;place-items:center;width:48px;height:64px;border:1px solid #ffffff2b;border-radius:999px;background:#020504b8;color:white;font-size:2.3rem;cursor:pointer;backdrop-filter:blur(12px)}.photo-nav.previous{left:1.25rem}.photo-nav.next{right:1.25rem}.backup-panel{display:grid;gap:1rem;margin:0 0 2rem;padding:1.4rem;border:1px solid #65e2c43d;border-radius:18px;background:linear-gradient(145deg,#0f2823,#081310)}.backup-panel h2,.backup-panel p{margin:.2rem 0}.backup-panel p,.backup-panel small{color:var(--muted)}.backup-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.55rem}.backup-groups span{display:grid;gap:.2rem;padding:.7rem;border-radius:10px;background:#ffffff08;color:var(--aqua);font-size:.78rem}.backup-groups strong{color:white} .intake-launch,.intake-upload{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.2rem;padding:1.4rem;border:1px solid #65e2c43d;border-radius:18px;background:linear-gradient(145deg,#0f2823,#081310)}.intake-launch h2,.intake-launch p,.intake-upload h2,.intake-upload p{margin:.2rem 0}.intake-launch p,.intake-upload p,.intake-section>p{color:var(--muted)}.intake-upload{flex-wrap:wrap}.intake-upload-actions,.intake-actions{display:flex;gap:.65rem;flex-wrap:wrap}.intake-progress{flex-basis:100%;padding:.75rem;border-radius:10px;background:#ffffff0b;color:var(--aqua)}.intake-progress.bad{color:#ff9d9d}.intake-section{margin:2rem 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.section-heading h2{margin:.2rem 0}.section-heading>span{color:var(--muted)}.intake-card{display:grid;gap:1rem;margin:0 0 1rem;padding:1.2rem;border:1px solid var(--line);border-radius:16px;background:#ffffff08}.intake-card-head{display:flex;justify-content:space-between;gap:1rem}.intake-card-head h3{margin:.45rem 0 .25rem}.intake-card-head p{margin:0;color:var(--muted)}.intake-state{display:inline-block;padding:.25rem .55rem;border-radius:999px;background:#ffffff10;color:#ffcb79;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.intake-state.ready{color:var(--aqua);background:#43dfc014}.intake-state.failed{color:#ff9d9d;background:#ff9d9d14}.progress-track{height:6px;border-radius:999px;background:#ffffff10;overflow:hidden}.progress-fill{height:100%;background:var(--aqua);border-radius:999px}.intake-files{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}.intake-files li{display:grid;gap:.15rem;padding:.6rem .7rem;border-radius:9px;background:#02070666;overflow-wrap:anywhere}.intake-files small,.health-review small{color:var(--muted)}.intake-proposal{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.intake-proposal span{color:var(--muted);margin-right:.25rem}.intake-proposal strong{padding:.4rem .6rem;border-radius:8px;background:#43dfc014;color:var(--aqua)}.health-review{display:grid;gap:.3rem;margin:.6rem 0;padding:.85rem;border-left:3px solid #ffbd69;border-radius:8px;background:#ffffff08;overflow-wrap:anywhere}.healthy-list{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px}.healthy-list summary{cursor:pointer;color:var(--aqua)}.healthy-list div{display:grid;gap:.15rem;padding:.6rem 0;border-bottom:1px solid #ffffff0d;overflow-wrap:anywhere}.healthy-list small{color:var(--muted)}.empty-state.compact{min-height:0;padding:2rem} @media(max-width:760px){.intake-launch,.intake-upload,.section-heading,.intake-card-head{align-items:stretch;flex-direction:column}.intake-upload-actions .button,.intake-actions .button{flex:1}.intake-card-head>strong{color:var(--muted)}} .native-player{position:fixed;inset:0;z-index:90;background:#020504;color:white}.playback-error{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 70% 20%,#164c43,transparent 40rem),#030807}.playback-error>div{max-width:580px}body.has-music-player,body.has-book-player,body.has-music-player .detail-shell,body.has-book-player .detail-shell{padding-bottom:120px}.track-play{border:0;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;background:var(--aqua);color:#04100e;cursor:pointer;flex:0 0 auto}.track-play svg{width:21px;height:21px}.continue-card p{color:var(--aqua)} /* Shared Aqua Fortis loading / error / busy states */ .af-loading{display:grid;place-items:center;gap:.9rem;padding:3rem 1rem;text-align:center;color:var(--muted)} .af-loading p{margin:0;font-size:.85rem} .af-loading-ring{width:34px;height:34px;position:relative} .af-loading-ring::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;background:var(--aqua);transform:rotate(45deg);border-radius:3px;animation:af-spin 1s linear infinite;box-shadow:0 0 16px #43dfc066} @keyframes af-spin{to{transform:rotate(405deg)}} .af-loading-screen{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,#164c43,transparent 40rem),#030807;color:white} .af-loading-screen [data-player-back],.af-loading-screen [data-back]{position:absolute;top:1.1rem;left:1.25rem} .af-error{display:grid;place-items:center;gap:.8rem;padding:3rem 1.5rem;text-align:center;color:#ffb3a9;max-width:420px;margin:0 auto} .af-error p{margin:0} .af-busy{position:relative;pointer-events:none;opacity:.55} .af-busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;background:var(--aqua);transform:rotate(45deg);border-radius:3px;animation:af-spin 1s linear infinite} .af-toast{position:fixed;z-index:120;left:50%;bottom:24px;transform:translate(-50%,20px);padding:.8rem 1.2rem;border-radius:12px;background:#0c1918f2;border:1px solid var(--line);color:#ffb3a9;font-size:.85rem;box-shadow:var(--shadow);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:min(360px,80vw);text-align:center} .af-toast.visible{opacity:1;transform:translate(-50%,0)} /* Channels */ .channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem} /* Channel card: artwork spans the whole card as a layered background (not a cropped strip above a separate panel) and fades into the info area via .channel-scrim, per the composition principle that different source artwork (posters, programme stills, channel logos) should stay recognisable rather than being forced into one aggressive crop. Aspect ratio is fixed on the card itself (not derived from content) specifically so every card in a row stretches to the same height regardless of title/programme text length -- the artwork fit adapts to the image inside it instead. */ .channel-card{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#10201d;aspect-ratio:3/4;display:block} .channel-art{position:absolute;inset:0;overflow:hidden;background:#10201d} /* Blurred continuation of the SAME real artwork, shown only behind a contain-fit image so a portrait poster or a narrow logo doesn't leave flat bare bars -- never a different/generated image. */ .channel-art .art-backdrop{position:absolute;inset:-14%;background-size:cover;background-position:center;filter:blur(20px) brightness(.7) saturate(1.25);transform:scale(1.06);opacity:0;transition:opacity .25s} .channel-art.contain-fit .art-backdrop{opacity:1} .channel-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block} /* Toggled by measuring the real image's natural dimensions once loaded (see the capture-phase 'load' listener) -- landscape-ish artwork (programme stills, wide logos) covers naturally; anything notably taller/narrower (movie posters, square/tall logos) is fully preserved via contain instead of being zoomed until part of it disappears. */ .channel-art.contain-fit>img{object-fit:contain} .channel-art .fallback-cover{position:absolute;inset:0;width:100%;height:100%} /* Top edge, not bottom -- the info overlay now occupies the bottom of the whole card, so a bottom-anchored bar would sit hidden behind/under the programme text instead of being visible. */ .channel-art .progress{position:absolute;left:0;right:0;top:0;height:4px;background:#ffffff33;z-index:2} .channel-art .progress i{display:block;height:100%;background:var(--aqua)} /* Gradient fade standing in for the old hard image/panel seam -- artwork dominates the upper card and gradually disappears behind the info region rather than stopping at a visible line. */ .channel-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 38%,rgba(5,11,11,.5) 60%,rgba(5,11,11,.92) 80%,#050b0b 100%);pointer-events:none} .channel-info{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column} .channel-number{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--aqua);background:#43dfc014;border-radius:999px;padding:.2rem .55rem;margin-bottom:.5rem;align-self:flex-start} .channel-info h3{margin:0 0 .4rem;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* NOW titles may wrap once; truncation only after the second line. */ .channel-now{color:var(--ink);font-weight:700;margin:0;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere} .channel-now.no-epg{color:var(--muted);font-weight:600;font-style:italic} .channel-next{color:var(--muted);font-size:.82rem;margin:.2rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Now / Next: a small label, then the programme; the episode line carries the full SxEy identifier. */ .channel-label{display:inline-block;margin-right:.4rem;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);vertical-align:.12em} .channel-next .channel-label{color:#c9d4d2} .channel-next{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:.45rem} .channel-episode{margin:.15rem 0 0;color:#dbe5e3;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Official channel logo as the identity mark. Dark-ink logos (RIFF, EMBER, SPN) sit on a light plate. */ .channel-info h3.channel-identity{margin:0 0 .55rem;line-height:0} .channel-info h3.channel-identity.is-artwork{margin:0} .channel-logo{display:block;height:30px;width:auto;max-width:72%;object-fit:contain;object-position:left center;filter:drop-shadow(0 1px 3px #000c)} .channel-logo:is([src*="/riff."],[src*="/ember."],[src*="/spn."]){height:32px;padding:4px 9px;border-radius:6px;background:#f4f1eaf0;box-sizing:border-box} /* The same logos as tier-2 artwork (no programme artwork): centred in the upper card, plated likewise. */ .channel-art>img[src^="/channel-logos/"]{object-fit:contain;padding:12% 10% 50%;box-sizing:border-box} .channel-art>img:is([src*="/riff."],[src*="/ember."],[src*="/spn."])[src^="/channel-logos/"]{background:#f1eee6} .channel-card.compact .channel-info{padding:.8rem .85rem .9rem} .channel-card.compact .channel-logo{height:26px} .channel-card.compact .channel-logo:is([src*="/riff."],[src*="/ember."],[src*="/spn."]){height:28px} .channel-card.compact .channel-now{font-size:.95rem} .channel-info .actions{margin-top:.9rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .channel-info .actions .button{padding:.5rem .85rem;min-height:32px;font-size:.78rem} .channel-info .actions .button.icon-only{padding:0;width:32px;height:32px;min-height:32px;border-radius:50%;flex:0 0 auto} .channel-info .actions .button.icon-only .icon{width:21px;height:21px} .live-badge{display:inline-block;background:#ff4d4f;color:white;font-size:.65rem;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:.15rem .4rem;margin-right:.5rem;vertical-align:middle} .live-indicator{display:inline-flex;align-items:center;gap:.35rem;color:#ff6b6d;font-size:.78rem;font-weight:800;letter-spacing:.04em} /* Channels/Surf/Guide sub-nav */ .channels-subnav{display:flex;gap:.5rem;margin:0 0 1.5rem} .channels-subnav .chip{cursor:pointer} .surf-guide-link{margin-left:auto} .surf-episode{color:var(--muted);font-size:.9rem;margin:-.4rem 0 .6rem} /* Guide */ .guide-nav{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem} .guide-nav.mobile{display:none;margin-top:1rem} .guide-grid{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#ffffff05} .guide-now-line{position:absolute;top:0;bottom:0;width:2px;background:var(--aqua);box-shadow:0 0 8px #43dfc088;z-index:3;pointer-events:none} .guide-header{display:flex;border-bottom:1px solid var(--line);background:#07110fcc} .guide-row{display:flex;border-bottom:1px solid var(--line)} .guide-row:last-child{border-bottom:0} .guide-channel-label{flex:0 0 150px;padding:.7rem .9rem;display:flex;flex-direction:column;justify-content:center;gap:.15rem;border-right:1px solid var(--line)} .guide-channel-label strong{font-size:.85rem;line-height:1.2} .guide-header .guide-channel-label{border-right:1px solid var(--line)} .guide-timeline{position:relative;flex:1;min-height:58px} .guide-header .guide-timeline{min-height:34px} .guide-hour{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:.4rem;color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums;border-left:1px solid var(--line)} .guide-block{position:absolute;top:.3rem;bottom:.3rem;border:1px solid var(--line);border-radius:7px;background:#ffffff0c;color:var(--ink);text-align:left;padding:.4rem .55rem;overflow:hidden;cursor:pointer;transition:background .15s} .guide-block:hover{background:#ffffff1c} .guide-block.current{background:#43dfc01c;border-color:#43dfc055} .guide-block-title{display:block;font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Guide mobile list */ .guide-mobile{display:none} .guide-mobile-heading{font-size:1.3rem;margin:0 0 1rem} .guide-mobile-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.8rem;row-gap:.15rem;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:#ffffff08;color:var(--ink);padding:.8rem .9rem;margin-bottom:.7rem;cursor:pointer} .guide-mobile-card .channel-number{grid-row:1/3} .guide-mobile-card strong{font-size:.95rem} .guide-mobile-title{font-weight:700} .guide-mobile-sub{color:var(--muted);font-size:.8rem} .guide-mobile-time{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums} /* Guide detail panel */ .guide-panel-root{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:1rem} .guide-panel-backdrop{position:absolute;inset:0;background:#020504cc;backdrop-filter:blur(6px)} .guide-panel{position:relative;width:min(420px,100%);border-radius:18px;overflow:hidden;background:#0c1918f5;border:1px solid var(--line);box-shadow:var(--shadow)} .guide-panel-close{position:absolute;top:.8rem;left:.8rem;z-index:2} .guide-panel-art{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .guide-panel-body{padding:1.3rem 1.4rem 1.6rem} .guide-panel-body h2{margin:0 0 .2rem;font-size:1.4rem;letter-spacing:-.02em} .guide-panel-sub{color:var(--aqua);font-size:.82rem;font-weight:700;margin:0 0 .6rem} .guide-panel-channel{color:var(--muted);margin:0} .guide-panel-time{color:#cfe0db;margin:.2rem 0} .guide-panel-state{color:var(--aqua);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:0 0 1rem} .guide-panel-body .actions{display:flex;gap:.6rem;flex-wrap:wrap} /* Surf mode */ .surf-view{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;place-items:center;text-align:center;padding:0 1.5rem} .surf-atmosphere{position:absolute;inset:0;z-index:0;background-image:var(--surf-art);background-size:cover;background-position:center;filter:blur(80px) brightness(.32) saturate(1.3);transform:scale(1.35)} .surf-view::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 30%,transparent,#030807e0 75%)} .surf-view .player-top{position:relative;justify-self:start} .surf-content{position:relative;z-index:1;display:grid;justify-items:center;gap:.4rem;max-width:640px} .surf-content .channel-number{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--aqua);background:#43dfc014;border-radius:999px;padding:.25rem .7rem} .surf-content h2{margin:.3rem 0 0;font-size:1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .surf-content h1{margin:.4rem 0 .8rem;font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.03em;line-height:1.02} .surf-status{color:#cfe0db;font-size:.9rem;line-height:1.5;margin:0 0 1.3rem} .surf-content .actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center} .surf-next{color:var(--muted);font-size:.85rem;line-height:1.6;margin-top:1.6rem} .surf-next strong{color:var(--ink);display:block;font-size:1rem} .surf-nav{position:relative;z-index:1;display:flex;gap:1rem;padding:1.8rem 0 2.2rem;flex-wrap:wrap;justify-content:center} .card.now-playing .poster{outline:2px solid var(--aqua);outline-offset:2px} .card.now-playing h3{color:var(--aqua)} .track-item.now-playing,.episode-card.now-playing strong{color:var(--aqua)} .track-item.now-playing .track-play,.episode-card.now-playing .episode-play{background:var(--aqua);box-shadow:0 0 0 3px #43dfc033} /* Restrained live progress treatment (Global Music Playback Presentation, Pass 1): a plain fill behind the row's own existing text/border, width driven by --track-progress (set from the same global musicAudio.currentTime/duration already used everywhere else) -- no new child element, no row restructuring, so it fits the current .track-item grid exactly as it already exists. */ .track-item.now-playing{background:linear-gradient(90deg,#D7C84F1f var(--track-progress,0%),transparent var(--track-progress,0%))} .track-item .track-time{font-variant-numeric:tabular-nums} .book-shelf-card.now-playing .book-cover{outline:2px solid var(--aqua);outline-offset:2px} /* =========================================================================== AUDIO CORRECTION PASS -- Artist split (Popular Songs / Albums & Releases) Corrects: identity too large/duplicated, loose/detached song rows, no internal-scroll trap, undersized release artwork, over-prominent Jellyfin link. See renderArtistDetail/renderAlbumDetail (app.js) and the shared .artist-header/.detail-backdrop sizing correction further below. =========================================================================== */ /* Both intentions visible together on wide layouts without travelling through one entire section to reach the other. Releases get a touch more of the width since its artwork needs it more than the now-compact song rows do. .single (no releases at all) collapses to one column so a sparse artist never leaves a fabricated empty second panel. No internal scroll on the Songs column any more -- a dense artist's tracklist is allowed to make the page taller, never a nested scrolling pane. */ .artist-split{display:grid;grid-template-columns:minmax(300px,1fr) minmax(400px,1.25fr);gap:clamp(1.5rem,3vw,3rem);align-items:start} .artist-split.single{grid-template-columns:1fr} .artist-songs .tracklist,.album-tracks .tracklist{margin:0;max-width:none} /* Release artwork scaled up substantially -- this is the visual browsing alternative to immediately playing a song, so it needs to actually be recognisable, matching the same minmax the rest of the app already uses for square album art (.music-grid). */ .artist-release-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.2rem} .album-artist-link{appearance:none;border:0;background:none;padding:0;margin:.35rem 0 0;display:block;color:var(--aqua);font:700 1.05rem inherit;cursor:pointer;text-align:left} .album-artist-link:hover,.album-artist-link:focus-visible{text-decoration:underline} .album-artist{color:var(--aqua);font-weight:700;margin:.35rem 0 0} /* The only action a bare Artist page has today is "Open in Jellyfin" -- as the sole button in the header it read as the star action, more prominent than the real NitrOS listening/browsing below it. Downgraded to the same restrained, borderless treatment .button.ghost already uses elsewhere, scoped to real external links only (the Play button, a