/* Shared visual identity with Android TV; web keeps its mouse/touch navigation. */
@property --lumen-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--gold:#65b7ff;--accent-blue:#65b7ff;--accent-purple:#b28aff;--accent-metal:linear-gradient(115deg,#65b7ff,#daeaff 32%,#b28aff 65%,#667fe8);--focus-fill:linear-gradient(115deg,#65b7ff25,#b28aff30)}
body{--web-glass:rgba(25,30,47,.76)}
body[data-web-theme=gray]{--web-glass:rgba(48,51,66,.8)}
.wordmark{display:inline-flex;align-items:center;gap:9px;color:#b8b7ff;background:var(--accent-metal);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.wordmark::before{content:'';display:block;flex:none;width:32px;height:36px;background:url('/branding/lumen-wolf.png') center/contain no-repeat}
.wordmark>span{display:none}
.login-art{background:radial-gradient(ellipse at 30% 70%,#6a4fa54d,transparent 65%),linear-gradient(130deg,#182238,#15131f)}
.primary{background:var(--accent-metal);color:#101426!important;border:1px solid #d9ddff66;box-shadow:inset 0 1px #fff7,0 4px 18px #6d6ae62b}
.primary:hover{filter:brightness(1.1)}
:is(.tabs a,.tabs button,.nav-item a,.sports-tile,.sports-game,.profile-menu a,.profile-menu button,.card-context-menu button,.lumen-settings-nav a,.lumen-settings-nav button){position:relative}
:is(.tabs .active,.nav-item a.active){color:#dbe5ff!important;background:var(--focus-fill)!important;box-shadow:none;border-bottom-color:transparent!important}
.nav-item a.active::before{display:none}
:is(.tabs a,.tabs button,.nav-item a,.sports-tile,.sports-game,.profile-menu a,.profile-menu button,.card-context-menu button,.lumen-settings-nav a,.lumen-settings-nav button):is(:focus-visible,:hover)::after,.tabs .active::after,
.card:is(:hover,:focus-visible) .poster::after,.episode-image:is(:hover,:focus-visible)::after,.search-episode-card:is(:hover,:focus-visible) .episode-search-image::after,button.title-poster:is(:hover,:focus-visible)::after{
 content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--lumen-angle),#65b7ff,#b28aff 35%,#f4eeff 48%,#b28aff 58%,#65b7ff);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;animation:lumen-border 3.6s linear infinite;z-index:3}
@keyframes lumen-border{to{--lumen-angle:360deg}}
.tabs{align-items:center}.tabs a,.tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin:0;line-height:1.25}
.profile-menu,.card-context-menu,dialog{background:linear-gradient(125deg,#25304de8,#20192eea)!important;border:1px solid #cbd9ff40!important;border-radius:16px!important;backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);box-shadow:inset 0 1px #ffffff20,0 16px 55px #0008}
.profile-menu a,.profile-menu button,.card-context-menu button{border-radius:10px;transition:background .16s}
.profile-menu :is(a,button):hover,.card-context-menu button:hover{background:var(--focus-fill)!important}
.watched{background:var(--accent-metal)!important;color:white!important;border-radius:50%;text-shadow:0 1px 3px #0009}
.progress>span{background:var(--accent-metal)!important}
.skeleton{background:radial-gradient(ellipse,#5a49762a,transparent 70%),#161b28;position:relative;animation:lumen-loading 1.8s ease-in-out infinite alternate}
.skeleton::after{content:'';position:absolute;inset:22%;background:url('/branding/lumen-wolf.png') center/contain no-repeat;opacity:.6}
@keyframes lumen-loading{to{opacity:.55}}
.poster .fallback{font-size:0;background:url('/branding/lumen-wolf.png') center/55% auto no-repeat,#121722}
.searchbox:focus-within,input:focus-visible,select:focus-visible{border-color:#9d9aff!important;outline-color:#9d9aff}
select option:checked{background:#3b385d}.nav-source-label{color:#b5b4db}
#seek{accent-color:#9d9aff}
#seek::-webkit-slider-thumb{background:var(--accent-metal)!important}
#seek::-moz-range-thumb{background:var(--accent-metal)!important}
.player-page{--gold:#9b9eff}
.player-page .player-seek-row{filter:drop-shadow(0 0 3px #9290ff30)}
.player-page button:focus-visible{outline:2px solid #b28aff}
.lumen-web-brand{width:23px;height:23px;object-fit:contain;flex:none}
.lumen-web-clock{font-size:12px;font-variant-numeric:tabular-nums;color:#d8dce8;white-space:nowrap}
.lumen-player-brand{position:absolute;top:25px;right:30px;display:flex;align-items:center;gap:9px;pointer-events:none;z-index:10;transition:opacity .18s}
.controls-hidden .lumen-player-brand{opacity:0}
@media(max-width:650px){.lumen-web-clock{display:none}.header-right>.lumen-web-brand{display:none}.wordmark::before{width:24px;height:28px}.lumen-player-brand{top:16px;right:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}.profile-menu,.card-context-menu{transition:none}}

#seek{background:linear-gradient(var(--lumen-angle),#65b7ff,#b28aff 40%,#dceaff 65%,#65b7ff) 0 0 / var(--played,0%) 100% no-repeat,linear-gradient(to right,#ffffff5a 0 var(--buffered,0%),#ffffff28 var(--buffered,0%) 100%);animation:lumen-border 4.2s linear infinite}

/* Highlights paint inside artwork; they never resize or lift a card. */
.card,.card .poster,.search-episode-card .episode-search-image,button.title-poster{transform:none!important}
.card .poster{outline:none!important;box-shadow:0 5px 15px #0003;transition:none}
.card::after{content:none!important}
.episode-image:is(:hover,:focus-visible),.search-episode-card:is(:hover,:focus-visible) .episode-search-image,button.title-poster:is(:hover,:focus-visible){outline:none!important;box-shadow:none!important}
.episode-search-image{position:relative}
:is(.tabs a,.tabs button,.nav-item a,.sports-tile,.sports-game,.profile-menu a,.profile-menu button,.card-context-menu button,.lumen-settings-nav a,.lumen-settings-nav button):focus-visible{outline:none}
.card-context-menu button:is(:hover,:focus-visible){outline:none;color:var(--text)}
/* Hover updates may change copy/artwork, but cannot move the shelves. */
.web-home-hero{height:clamp(330px,42vh,440px);min-height:0;padding:12px 0;overflow:hidden;overflow-anchor:none}
.web-hero-copy{display:flex;flex-direction:column;gap:6px;max-height:100%;min-width:0}
.web-hero-logo{height:48px;max-height:48px;max-width:300px;margin:0;align-self:flex-start}
.web-hero-copy h1{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.web-hero-copy p{margin:0}
.web-hero-description{-webkit-line-clamp:2;line-height:1.5}
.web-hero-details{margin-top:0;align-self:flex-start}
@media(max-width:750px){.web-home-hero{height:330px;min-height:0}.web-hero-logo{height:48px;max-height:48px}}

.sports-tile,.sports-game{transform:none!important}
.sports-game:is(:hover,:focus-visible){border-color:transparent!important;outline:none!important;box-shadow:none!important}

/* Android TV's line icons share a fixed footprint in either sidebar mode. */
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text)}
#menu svg,#refresh svg{display:block;width:24px;height:24px;margin:auto}
.searchbox>span{display:inline-flex;align-items:center;justify-content:center;flex:none}
.searchbox>span svg{display:block;width:22px;height:22px}
.profile-menu :is(a,button)>span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px}
.profile-menu :is(a,button)>span svg{display:block;width:22px;height:22px}
/* A floating TV-style rail replaces the desktop header. */
:root{--header-height:0px}
header.floating-shell{position:fixed;inset:16px 24px auto auto;width:auto;height:28px;padding:0;border:0;background:transparent!important;backdrop-filter:none;box-shadow:none;z-index:30;pointer-events:none}
.floating-shell>.wordmark,.floating-shell .server-indicator{display:none}
.floating-shell .header-right{gap:8px}
#app>aside,body.nav-collapsed #app>aside{top:50%;bottom:auto;transform:translateY(-50%);height:auto;max-height:calc(100dvh - 30px);display:flex;flex-direction:column;gap:8px;padding:10px 8px;width:224px;overflow:visible;border:1px solid #ffffff24;border-left:0;border-radius:0 18px 18px 0;background:linear-gradient(135deg,#3036449c,#111621aa)!important;backdrop-filter:blur(28px) saturate(145%);box-shadow:inset 0 1px #ffffff16,8px 12px 35px #0003}
body.nav-collapsed #app>aside{width:var(--sidebar-rail)}
#app>aside #nav{overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin}
.sidebar-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:none}
.sidebar-profile{position:relative;margin-right:auto}
.sidebar-tools .avatar{width:34px;height:34px}
.sidebar-tools #menu,.sidebar-tools #refresh{width:34px;height:34px;padding:5px}
.sidebar-tools #refresh{display:none}
.sidebar-tools .searchbox{margin:0;width:100%;max-width:none;height:35px;padding:0 8px;background:#ffffff08;border-color:transparent;order:3;cursor:text}
.sidebar-tools .searchbox input{width:100%;min-width:0}
.sidebar-tools .searchbox kbd{display:none}
.sidebar-profile .profile-menu{top:0;left:calc(100% + 14px);right:auto;min-width:200px}
body.nav-collapsed .sidebar-tools{flex-direction:column;flex-wrap:nowrap}
body.nav-collapsed .sidebar-profile{margin:0}
body.nav-collapsed .sidebar-tools .searchbox{width:36px;overflow:hidden;flex:none}
body.nav-collapsed .sidebar-tools .searchbox input{position:absolute;width:1px;opacity:0}
body.nav-collapsed .sidebar-tools .searchbox:focus-within{position:relative;width:260px;align-self:flex-start;overflow:visible;background:#1a2034;box-shadow:0 8px 30px #0007;z-index:35}
body.nav-collapsed .sidebar-tools .searchbox:focus-within input{position:static;width:100%;opacity:1}
#app>aside .sidebar-bottom{display:none}
.nav-item a,.nav-more-button{border-radius:10px;min-height:38px;padding:9px 11px}
.nav-item a.active:before{display:none}
.nav-item a.active{box-shadow:none!important;color:var(--text)}
#app>#main{margin-top:0;margin-left:224px;padding-top:22px;min-height:100dvh}
body.nav-collapsed #app>#main{margin-left:var(--sidebar-rail)}
#app>#main.title-main{padding:0}
.home-tabs{margin:0 150px 14px 0;min-height:42px}
.web-home-hero{align-items:flex-start;padding-top:8px}
.atmosphere-layer img{top:0}
@media(max-width:650px){#app>#main{margin-left:var(--sidebar-rail);padding:16px 14px}header.floating-shell{right:14px;top:18px}.home-tabs{margin-right:32px;gap:2px;padding:4px}.home-tabs a{padding:8px 10px!important}.web-home-hero{align-items:flex-start}.sidebar-profile .profile-menu{min-width:190px}body:not(.nav-collapsed) #app>aside{z-index:40}}
.home-tabs .active::before{display:none}
/* Keep the shell steady while destinations load underneath it. */
#home-navigation{position:fixed;top:22px;left:calc(var(--sidebar-rail) + 32px);z-index:28;margin:0;max-width:calc(100vw - var(--sidebar-rail) - 200px)}
#app>#main,body.nav-collapsed #app>#main{margin-left:var(--sidebar-rail);transition:opacity .18s ease}
body.has-home-tabs #app>#main{padding-top:100px}
#app>#main.route-loading{opacity:.45}
#app>aside,body.nav-collapsed #app>aside{top:15px;bottom:15px;transform:none;height:calc(100dvh - 30px);max-height:none;z-index:40;transition:width .16s ease;will-change:width}
#app>aside .sidebar-tools,body.nav-collapsed .sidebar-tools{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:6px}
.sidebar-profile,body.nav-collapsed .sidebar-profile{margin:0;align-self:flex-start;margin-left:9px}
.sidebar-tools #menu{display:none!important}
.sidebar-tools .searchbox,body.nav-collapsed .sidebar-tools .searchbox{width:100%;height:35px;min-height:35px;margin:0;flex:none;overflow:hidden}
.sidebar-tools{width:100%}
#app>aside #nav{flex:1;width:100%}
body.nav-collapsed .nav-item a{padding:9px 11px;min-height:44px}
.nav-item a,.nav-more-button{min-height:44px;white-space:nowrap}
body.sidebar-peek.nav-collapsed #app>aside{width:224px}
body.sidebar-peek.nav-collapsed .nav-item a{justify-content:flex-start;gap:14px}
body.sidebar-peek.nav-collapsed .nav-label{display:block}
body.sidebar-peek.nav-collapsed .sidebar-tools .searchbox input{position:static;width:100%;opacity:1}
body.sidebar-peek.nav-collapsed .sidebar-tools .searchbox:focus-within{width:100%;align-self:auto}
body.nav-collapsed:not(.sidebar-peek) .sidebar-tools .searchbox:focus-within{width:100%}
body.nav-collapsed .nav-more-button{padding:9px 11px;justify-content:center}
body.sidebar-peek.nav-collapsed .nav-more-button{justify-content:flex-start;gap:14px}
body.nav-collapsed .nav-more-chevron{display:none}
body.sidebar-peek.nav-collapsed .nav-more-chevron{display:block}
@media(max-width:650px){#home-navigation{top:16px;left:calc(var(--sidebar-rail) + 14px);max-width:calc(100vw - var(--sidebar-rail) - 28px)}body.has-home-tabs #app>#main{padding-top:88px}}
@media(prefers-reduced-motion:reduce){#app>#main,#app>aside{transition:none}}
.plex-users-content{max-width:1050px;display:grid;gap:20px}.plex-users-content .settings-panel{padding:22px;border:1px solid #ffffff1c;border-radius:16px;background:#161b2680;backdrop-filter:blur(20px)}.plex-users-content h2{margin:0 0 12px}.plex-user-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #ffffff12}.plex-user-row:last-child{border-bottom:0}.plex-user-row small{display:block;color:var(--muted);margin-top:6px}.plex-users-content form,.plex-user-editor form{display:grid;gap:14px}.plex-users-content label:not(.check),.plex-user-editor label:not(.check){display:grid;gap:7px;font-size:13px}.plex-users-content input:not([type=checkbox]),.plex-user-editor input:not([type=checkbox]){width:100%}.plex-library-picker{display:flex;flex-wrap:wrap;gap:12px 24px;padding:16px;border:1px solid #ffffff22;border-radius:12px}.plex-library-picker .check{margin:0}.plex-user-editor form{padding:14px 0 24px;border-bottom:1px solid #ffffff20;margin-bottom:16px}.plex-restriction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.plex-restriction-grid fieldset{min-width:0;display:grid;gap:12px;padding:12px;border:1px solid #ffffff22;border-radius:10px}.plex-user-editor .check{margin-bottom:0}.plex-users-content .section-heading{align-items:center}.plex-users-content .primary,.plex-user-editor .primary{justify-self:start}.plex-user-editor{max-height:75vh;overflow:auto}.plex-users-content .danger{color:#ff9fbc}@media(max-width:650px){.plex-user-row{align-items:flex-start;flex-direction:column;gap:10px}.plex-restriction-grid{grid-template-columns:1fr}}
.plex-user-editor{max-height:none;overflow:visible}.plex-user-editor form{gap:12px;align-content:start}.plex-user-editor fieldset,.plex-user-editor label,.plex-user-editor h3,.plex-user-editor .count{margin:0}.plex-user-editor fieldset{align-content:start}.plex-user-editor fieldset label{margin:0!important;line-height:1.4}.plex-user-editor input:not([type=checkbox]){padding:9px 10px}.plex-user-editor [role=status]:empty{display:none}.plex-user-editor .danger{color:#ff9fbc}
/* The centered rail grows with navigation items, never with its width animation. */
#app>aside,body.nav-collapsed #app>aside{top:50%;bottom:auto;transform:translateY(-50%);height:auto;max-height:calc(100dvh - 30px);gap:8px}
#app>aside #nav{flex:0 1 auto;max-height:calc(100dvh - 135px);min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#app>aside #nav::-webkit-scrollbar{display:none}
#app>aside .sidebar-tools,body.nav-collapsed .sidebar-tools{height:75px;min-height:75px;gap:6px;flex:none}
#app>aside .sidebar-profile,body.nav-collapsed .sidebar-profile{height:34px;min-height:34px;width:100%;align-self:stretch;margin:0;flex:none}
.sidebar-profile #account{margin-left:9px;flex:none}
.sidebar-settings{position:absolute;left:58px;top:0;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--text);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s}
.sidebar-settings svg{width:23px;height:23px}
.sidebar-settings:hover,.sidebar-settings:focus-visible{background:#ffffff16}
body.sidebar-peek .sidebar-settings,body:not(.nav-collapsed) .sidebar-settings{opacity:1;visibility:visible;pointer-events:auto}
/* Icons keep the same horizontal origin; labels reveal without reflow. */
#app>aside #nav:not(.is-reordering) .nav-item{height:49px;min-height:49px;flex:none}
#app>aside #nav:not(.is-reordering) .nav-item a,#app>aside .nav-more-button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:0;height:44px;min-height:44px;padding:0;margin:0 0 5px;flex:none;width:100%;}
#app>aside #nav:not(.is-reordering) .nav-icon{width:26px;min-width:26px;height:26px;margin-left:calc((var(--sidebar-rail) - 43px)/2);flex:none}
#app>aside #nav:not(.is-reordering) .nav-label{display:block;position:absolute;left:54px;right:12px;top:0;height:44px;line-height:44px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s}
body.sidebar-peek #app>aside #nav:not(.is-reordering) .nav-label,body:not(.nav-collapsed) #app>aside #nav .nav-label{opacity:1;visibility:visible}
#app>aside .nav-more-chevron{display:block;position:absolute;right:12px;top:0;height:44px;line-height:44px;opacity:0;visibility:hidden;margin:0}
body.sidebar-peek #app>aside .nav-more-chevron,body:not(.nav-collapsed) #app>aside .nav-more-chevron{opacity:1;visibility:visible}
#app>aside .nav-more-button .nav-label{right:30px}
#app>aside .sidebar-tools .searchbox,body.nav-collapsed #app>aside .sidebar-tools .searchbox:focus-within{position:relative;display:block;flex:none;width:100%;height:35px;min-height:35px;padding:0;overflow:hidden;box-shadow:none;align-self:stretch}
.sidebar-tools .searchbox>span{position:absolute;left:calc((var(--sidebar-rail) - 43px)/2);top:50%;transform:translateY(-50%);width:26px;height:26px;margin:0}
#app>aside .sidebar-tools .searchbox input,body.nav-collapsed #app>aside .sidebar-tools .searchbox input{position:absolute;left:54px;right:8px;top:0;width:calc(100% - 62px);height:33px;padding:0;opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s}
body.sidebar-peek #app>aside .sidebar-tools .searchbox input,body:not(.nav-collapsed) #app>aside .sidebar-tools .searchbox input{opacity:1;visibility:visible}
/* Keep keyboard search available while the rail is collapsed. */
body.nav-collapsed:not(.sidebar-peek) #app>aside .sidebar-tools .searchbox input{visibility:visible;left:0;right:0;width:100%;opacity:0;cursor:pointer}
.nav-more-view .nav-pin{position:absolute;right:0;top:0;height:44px}
#app>aside #nav.nav-more-view .nav-label{right:36px}
@media(prefers-reduced-motion:reduce){.sidebar-settings,#app>aside .nav-label,#app>aside .searchbox input{transition:none}}
.sidebar-tools .searchbox>span{left:calc((var(--sidebar-rail) - 45px)/2)}
.sidebar-profile #account{margin-left:calc((var(--sidebar-rail) - 51px)/2)}

/* Anchor settings to the expanded rail's right edge. */
.sidebar-profile .sidebar-settings{left:auto;right:0}