/* ---------------------------------------------------------------
   WMC fidelity pass: monochrome interpretation of the classic Vista
   Media Center interface. Keep the original WMC geometry and focus rail;
   remove modern dashboard/card styling from every screen.
   --------------------------------------------------------------- */
:root {
  --page-bg: #343638;
  --page-text: #f4f4f4;
  --panel: rgba(58, 60, 63, .98);
  --panel-soft: rgba(255,255,255,.045);
  --panel-border: rgba(235,238,241,.32);
  --muted: rgba(245,246,247,.65);
  --accent: #f5f6f7;
}

body, .tv-screen { background:#35373a; }
.wallpaper {
  background-color:#35373a;
  background-image:
    /* Grayscale adaptation of the supplied WMC wallpaper: preserve the
       bright, diffuse pools of light, the blue-era vignette's geometry,
       and the dim charcoal right edge without leaving the screen flat. */
    radial-gradient(ellipse 10% 12% at 0% 0%, rgba(235,237,239,.38) 0%, rgba(215,218,221,.18) 30%, transparent 100%),
    radial-gradient(ellipse at 7% 8%, rgba(216,219,222,.13) 0%, rgba(196,199,202,.075) 6%, transparent 23%),
    radial-gradient(ellipse at 4% 27%, rgba(188,192,196,.18) 0%, rgba(177,181,185,.07) 7%, transparent 20%),
    radial-gradient(ellipse at 17% 12%, rgba(203,206,209,.12) 0%, transparent 17%),
    radial-gradient(ellipse at 34% 37%, rgba(165,169,173,.12) 0%, transparent 26%),
    radial-gradient(circle at 6.8% 8.8%, rgba(236,238,240,.16) 0%, rgba(219,222,225,.075) 1.3%, rgba(196,199,202,.025) 3.5%, transparent 6.5%),
    radial-gradient(circle at 8.1% 17.8%, rgba(214,217,220,.14) 0%, rgba(198,201,204,.045) 2%, transparent 5.2%),
    radial-gradient(circle at 4.4% 26.5%, rgba(215,218,221,.18) 0%, rgba(193,196,199,.055) 2.2%, transparent 5.6%),
    radial-gradient(circle at 8.2% 40.3%, rgba(210,213,216,.08) 0%, rgba(188,191,195,.03) 2%, transparent 5.8%),
    radial-gradient(circle at 5.5% 51.5%, rgba(198,201,204,.12) 0%, rgba(185,188,191,.04) 2%, transparent 5.2%),
    radial-gradient(circle at 24% 43%, rgba(196,199,202,.11) 0%, transparent 8%),
    radial-gradient(ellipse at 70.8% 57.4%, rgba(198,201,204,.23) 0%, rgba(190,193,197,.10) 2.3%, rgba(181,184,188,.045) 5.8%, transparent 12%),
    radial-gradient(circle at 72% 57.2%, rgba(232,234,236,.27) 0%, rgba(208,211,214,.10) 1.5%, transparent 4%),
    radial-gradient(ellipse at 80% 100%, rgba(225,228,231,.52) 0%, rgba(205,208,212,.27) 12%, rgba(185,189,193,.10) 26%, transparent 43%),
    radial-gradient(circle at 78.7% 91.2%, rgba(219,222,225,.15) 0%, rgba(196,199,202,.06) 2%, transparent 5.3%),
    radial-gradient(circle at 55% 90.4%, rgba(224,226,229,.21) 0%, rgba(204,207,210,.07) 2.4%, transparent 6.3%),
    radial-gradient(ellipse at 43% 108%, rgba(210,214,218,.32) 0%, rgba(188,192,197,.15) 27%, transparent 56%),
    radial-gradient(ellipse at 99% 1%, rgba(16,18,20,.23) 0%, transparent 47%),
    linear-gradient(160deg, #55585c 0%, #4d5054 34%, #44474b 64%, #6a6d71 100%);      background-size:cover;
  background-position:center;
  isolation:isolate;
}
.wallpaper::before {
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse at 8% 20%, rgba(218,221,224,.08) 0%, transparent 25%),
    radial-gradient(ellipse at 70% 61%, rgba(221,224,228,.08) 0%, transparent 18%),
    radial-gradient(ellipse at 43% 101%, rgba(213,216,220,.11) 0%, transparent 44%),
    radial-gradient(ellipse at 3% 49%, rgba(180,184,188,.075) 0%, transparent 16%);
  filter:blur(26px);
  opacity:.85;
  transform:translate3d(-.6%,0,0) scale(1.03);
  animation:wmc-atmosphere 32s ease-in-out infinite alternate;
}
.wallpaper::after {
  background:linear-gradient(90deg, rgba(12,13,15,.015), rgba(10,11,13,.025) 68%, rgba(10,11,13,.075)),
             linear-gradient(180deg, rgba(12,13,15,.01), rgba(12,13,15,.01) 56%, rgba(12,13,15,.08));
}
@keyframes wmc-atmosphere {
  from { transform:translate3d(-.6%,0,0) scale(1.03); opacity:.7; }
  to { transform:translate3d(1.1%,-.8%,0) scale(1.08); opacity:.95; }
}
@media (prefers-reduced-motion:reduce) {
  .wallpaper::before { animation:none; }
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.system-status {
  top:8.2%; right:4.7%; gap:11px;
  font-size:clamp(19px,2.1vw,23px);
  font-weight:400;
  letter-spacing:-.25px;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.home-now-playing {
  position:absolute; z-index:6; top:7.4%; left:4.7%;
  display:flex; align-items:center; gap:.45em;
  height:clamp(30px,3.9vh,44px); overflow:hidden; padding:0;
  border:0; background:transparent; color:rgba(255,255,255,.88);
  font-size:clamp(19px,2.1vw,23px); font-weight:250; line-height:1;
  letter-spacing:-.25px; text-align:left; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
}
.home-now-playing[hidden] { display:none; }
.home-now-playing:hover,.home-now-playing:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.home-now-playing-icon {
  display:flex; flex:none; width:1em; height:1em; min-width:1em; min-height:1em;
  color:inherit; visibility:visible; opacity:1; pointer-events:none;
}
.home-now-playing-icon svg {
  display:block; flex:none; width:100%; height:100%; overflow:visible;
  fill:none; stroke:currentColor; visibility:visible; opacity:1;
}
.home-now-playing-label {
  min-width:0; overflow:hidden; line-height:1.35;
  padding-block:.04em; text-overflow:ellipsis;
}
#homeClock { font-weight:250; }
.system-mark {
  position:relative;
  width:41px; height:32px; padding:5px;
  gap:2px; border-radius:8px 5px 8px 4px;
  background:linear-gradient(145deg,#d3e4b7 0%,#77a74a 18%,#3b702d 47%,#1b3821 100%);
  border:1px solid rgba(225,241,208,.82);
  box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.85), inset 0 -3px 4px rgba(0,0,0,.28);
  transform:perspective(65px) rotateY(-8deg) skewY(-3deg);
}
.system-mark::before {
  content:""; position:absolute; inset:1px; pointer-events:none; border-radius:4px;
  background:linear-gradient(130deg,rgba(255,255,255,.3),transparent 43%,rgba(0,0,0,.1));
}
.system-mark i { position:relative; z-index:1; border-radius:0; box-shadow:inset 0 0 2px rgba(255,255,255,.65); transform:skewY(-2deg); }
.system-mark i:nth-child(1) { background:linear-gradient(135deg,#f6a49c 0%,#d83a35 58%,#982d2a 100%); }
.system-mark i:nth-child(2) { background:linear-gradient(135deg,#d7f1b5 0%,#62b857 55%,#2d762e 100%); }
.system-mark i:nth-child(3) { background:linear-gradient(135deg,#a5d9f3 0%,#238bd4 58%,#19558e 100%); }
.system-mark i:nth-child(4) { background:linear-gradient(135deg,#fff0a0 0%,#f0c342 57%,#ac7628 100%); }

.main-menu {
  top:25.5%; left:22.5%; width:min(47vw,570px);
  --menu-gap:clamp(17px,3.3vh,25px);
  gap:var(--menu-gap);
}
.home-nav-button {
  color:rgba(244,246,248,.92);
  font-size:clamp(23px,2.9vw,30px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.25px;
  text-shadow:0 1px 5px rgba(0,0,0,.12);
  transition:color .18s ease, opacity .18s ease, text-shadow .18s ease;
}
.home-nav-button:hover,
.home-nav-button:focus-visible { color:#fff; opacity:1 !important; }
.home-nav-button.active {
  color:rgba(255,255,255,.99);
  font-size:clamp(26px,3.3vw,34px);
  font-weight:500;
  letter-spacing:-.4px;
  text-shadow:0 1px 7px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.15);
}
.home-nav-button:focus-visible { text-decoration:none; outline:1px solid rgba(255,255,255,.72); outline-offset:5px; }
.spotlight-button { margin-top:-4px; font-size:clamp(23px,2.9vw,30px); font-weight:500; }

.submenu-rail {
  height:clamp(116px,18.5vh,150px);
  margin-top:calc(-3px - var(--menu-gap));
}
.submenu-item {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  width:clamp(205px,25.1vw,280px);
  border:1px solid transparent;
  border-radius:3px;
  padding:20px 8px 8px;
  color:rgba(245,247,249,.48);
  font-size:clamp(17px,2.15vw,23px);
  font-weight:400;
  line-height:1.12;
  text-shadow:0 1px 5px rgba(0,0,0,.12);
  transition:left .28s ease,color .18s ease,background .18s ease,box-shadow .18s ease;
}
.submenu-item > span { display:block; flex:none; width:100%; text-align:center; position:relative; z-index:1; }
.submenu-item:hover,
.submenu-item:focus-visible { color:rgba(255,255,255,.98); }
.submenu-item.active > span { text-align:right; font-size:clamp(19px,2.5vw,26px); font-weight:600; letter-spacing:-.25px; }
.submenu-item.active {
  border-color:rgba(241,244,246,.57);
  background:linear-gradient(180deg,rgba(234,237,240,.50) 0%,rgba(187,191,195,.30) 24%,rgba(95,99,104,.18) 100%);
  box-shadow:0 8px 17px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.58),inset 1px 0 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(0,0,0,.12);
  color:#fff;
  padding:20px 17px 8px;
}
.submenu-art { height:clamp(54px,10.1vh,78px); opacity:.22; bottom:8%; }
.submenu-item.active .submenu-art { opacity:.15; bottom:7%; }
.mini-grid { height:100%; }
.line-art { width:42%; transform:translateX(-40px); background:repeating-linear-gradient(to bottom,rgba(235,238,241,.85) 0 1px,transparent 1px 8px); }
.line-art::after { background:repeating-linear-gradient(to bottom,rgba(235,238,241,.85) 0 1px,transparent 1px 8px); }
.mini-grid { border-color:rgba(235,238,241,.7); }
.mini-grid i { border-color:rgba(235,238,241,.58); background:rgba(235,238,241,.095); }
.radio-grid { width:50%; margin:2px 0 0; }
.radio-grid i { background:rgba(235,238,241,.58); border-color:rgba(255,255,255,.24); }

/* The WMC background remains visible behind library pages; the home rail
   disappears completely when a content page opens, as it does in Media Center. */
.tv-screen.view-open .main-menu,
.tv-screen.view-open #submenuRail { visibility:hidden; pointer-events:none; }
.client-view { background:rgba(27,29,32,.12); backdrop-filter:none; -webkit-backdrop-filter:none; }
.client-view.library-page { background:linear-gradient(180deg,rgba(28,30,33,.07),rgba(18,19,21,.18)); }
.client-view.library-page .view-inner {
  --library-horizontal-inset:2.2vw;
  --library-horizontal-offset:-2.2vw;
  --library-horizontal-bleed:4.4vw;
  padding:6.3vh var(--library-horizontal-inset) 4.6vh;
  justify-content:center;
}
.client-view.library-page .view-head { top:2.5vh; left:2.4vw; right:2.4vw; }
.client-view.library-page .back-button {
  color:rgba(255,255,255,.43);
  font-size:12px;
  text-transform:lowercase;
  letter-spacing:.02em;
}
.client-view.library-page .back-button:hover,
.client-view.library-page .back-button:focus-visible { color:#fff; outline:1px solid rgba(255,255,255,.65); outline-offset:4px; }
.library-label {
  top:2.8vh; right:2.6vw;
  color:rgba(255,255,255,.45);
  font-size:clamp(13px,1.12vw,16px);
  letter-spacing:.05em;
}
.client-view.library-page .library-toolbar {
  gap:clamp(12px,1.9vw,26px);
  margin:0 0 clamp(8px,1.7vh,15px);
  min-height:23px;
}
.client-view.library-page .library-toolbar label {
  color:rgba(255,255,255,.68);
  font-size:clamp(12px,1.1vw,15px);
  display:inline-flex; align-items:center; gap:5px;
}
.client-view.library-page .library-toolbar select {
  appearance:none; -webkit-appearance:none;
  max-width:180px; min-width:70px;
  padding:2px 16px 2px 1px;
  border:0; border-bottom:1px solid rgba(240,242,244,.26);
  border-radius:0;
  background:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%) right 4px center/4px 4px no-repeat,
             linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%) right 0 center/4px 4px no-repeat,
             transparent;
  color:rgba(255,255,255,.86);
  font:inherit; font-size:clamp(12px,1.05vw,14px);
  cursor:pointer;
}
.client-view.library-page .library-toolbar select:focus-visible { outline:1px solid #fff; outline-offset:3px; }
.client-view.library-page .library-toolbar option { background:#3b3e42; color:white; }
.client-view.library-page .status { font-size:clamp(12px,1.05vw,14px); color:rgba(255,255,255,.66); }
.client-view.library-page .media-grid {
  width:calc(100% + var(--library-horizontal-bleed));
  max-width:none;
  max-height:calc(100vh - 300px);
  --media-grid-edge-gutter:clamp(70px,5vw,96px);
  padding:clamp(15px,2.1vh,21px) 0 clamp(18px,2.4vh,23px);
  margin-inline:var(--library-horizontal-offset);
  overflow-x:auto; overflow-y:hidden;
  align-self:stretch;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.client-view.library-page .media-grid.at-start { padding-left:var(--media-grid-edge-gutter); }
.client-view.library-page .media-grid.at-end { padding-right:var(--media-grid-edge-gutter); }
.client-view.library-page .media-grid.three-row {
  grid-auto-columns:clamp(100px,min(12vw,calc(25vh - 52px)),165px);
  grid-template-rows:repeat(2,min-content);
  column-gap:clamp(2px,.35vw,5px);
  row-gap:clamp(13px,2.2vh,18px);
}
.client-view.library-page .media-grid.music-grid {
  grid-auto-columns:clamp(86px,min(11.8vw,calc(18vh - 16px)),138px);
  grid-template-rows:repeat(3,min-content);
  column-gap:clamp(2px,.3vw,4px);
  row-gap:clamp(7px,1.25vh,11px);
}
.client-view.library-page .media-grid:not(.three-row):not(.music-grid) {
  grid-template-rows:repeat(2,min-content);
  grid-auto-columns:clamp(100px,min(12vw,calc(25vh - 52px)),165px);
  column-gap:clamp(2px,.35vw,5px);
  row-gap:clamp(13px,2.2vh,18px);
}
.media-card { transform:scale(1); background:transparent; border:0; border-radius:0; transition:transform .18s ease,filter .18s ease,z-index .18s ease; }
.media-card:hover,.media-card:focus-visible,.media-card.is-focused {
  outline:1px solid rgba(255,255,255,.98);
  outline-offset:2px;
  box-shadow:0 5px 16px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.42);
  filter:brightness(1.08);
  transform:scale(1.075);
}
.poster-frame { background:rgba(245,246,247,.045); }
.poster-frame img { background:rgba(0,0,0,.08); }
.media-footer { min-height:clamp(72px,11vh,98px); margin-top:0; padding:clamp(5px,1vh,10px) 8px 3px; }
.media-footer-title {
  font-size:clamp(25px,2.95vw,40px);
  font-weight:600; line-height:1.12; letter-spacing:-.25px;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
}
.media-footer-details { margin-top:5px; font-size:clamp(13px,1.15vw,16px); color:rgba(255,255,255,.72); }

/* Base detail-pane rules; reference-specific centered WMC panel is defined below. */
.details-backdrop {
  align-items:stretch; justify-content:flex-end;
  background:linear-gradient(90deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.15) 31%,rgba(0,0,0,.3) 31%,rgba(0,0,0,.3) 100%);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  overflow:hidden;
}
.details-panel {
  width:69%; max-width:none; height:100%; max-height:100%;
  margin:0; padding:clamp(30px,5.5vh,60px) clamp(24px,3.4vw,52px) 35px;
  overflow:auto;
  border:0; border-left:1px solid rgba(244,246,248,.45);
  border-radius:0;
  background:linear-gradient(120deg,rgba(83,86,90,.985) 0%,rgba(61,64,68,.99) 45%,rgba(41,43,46,.995) 100%);
  box-shadow:-18px 0 45px rgba(0,0,0,.23);
  animation:wmc-pane-in .24s ease-out both;
}
@keyframes wmc-pane-in { from { transform:translateX(3%); opacity:.75; } to { transform:translateX(0); opacity:1; } }
.album-details-layout { grid-template-columns:minmax(145px,29%) minmax(0,1fr); gap:clamp(18px,2.1vw,30px); }
.album-details-cover { background:#333639; box-shadow:0 8px 22px rgba(0,0,0,.25); }
.album-details-main h2 { font-size:clamp(29px,3.1vw,43px); font-weight:400; letter-spacing:-.35px; }
.album-details-subtitle { font-size:clamp(13px,1.1vw,15px); margin-bottom:16px; color:rgba(255,255,255,.72); }
.album-details-actions { margin-top:0; margin-bottom:16px; }
.album-track-list { max-height:calc(100vh - 245px); border-top:1px solid rgba(255,255,255,.23); }
.album-track {
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:10px; min-height:47px; padding:7px 8px;
  border:0; border-bottom:1px solid rgba(255,255,255,.10);
  background:transparent; border-radius:0;
  font-size:clamp(14px,1.15vw,16px);
}
.album-track:hover,.album-track:focus-visible,.album-track.active {
  outline:1px solid rgba(255,255,255,.74); outline-offset:-1px;
  background:linear-gradient(90deg,rgba(231,234,237,.22),rgba(231,234,237,.07));
}
.album-track-number,.album-track-duration { color:rgba(255,255,255,.61); font-size:13px; }
.album-track-artist { margin-top:2px; font-size:12px; color:rgba(255,255,255,.55); }
.podcast-episode-row { grid-template-columns:minmax(0,1fr) auto; }
.details-layout { grid-template-columns:minmax(145px,28%) minmax(0,1fr); gap:clamp(18px,2.2vw,30px); }
.details-poster { border-radius:0; background:#303235; }
.details-panel h2 { font-size:clamp(29px,3.1vw,43px); font-weight:400; margin-bottom:8px; }
.details-panel p { color:rgba(255,255,255,.76); line-height:1.48; }
.details-actions { gap:8px; margin-top:17px; }
.season-tabs { gap:4px; }
.season-tab { border-radius:1px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.04); }
.episode-list { gap:0; border-top:1px solid rgba(255,255,255,.19); margin-top:14px; }
.episode { grid-template-columns:95px minmax(0,1fr) auto; gap:12px; padding:9px 0; border:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; background:transparent; }
.episode img { border-radius:0; }

.solid-button,.ghost-button,.back-button,.season-tab,.login-button {
  border-radius:1px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background .15s ease,border-color .15s ease;
}
.solid-button {
  border:1px solid rgba(242,245,247,.56);
  background:linear-gradient(180deg,#777b80,#4b4e52 100%);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.solid-button:hover,.solid-button:focus-visible { background:linear-gradient(180deg,#92969a,#5b5e62); outline:1px solid #fff; outline-offset:1px; }
.ghost-button { border:1px solid rgba(255,255,255,.27); background:rgba(255,255,255,.035); color:#f5f6f7; }
.ghost-button:hover,.ghost-button:focus-visible { background:rgba(255,255,255,.12); outline:1px solid rgba(255,255,255,.72); outline-offset:1px; }
.empty-state { border:1px solid rgba(255,255,255,.18); border-radius:1px; background:rgba(0,0,0,.09); }
.toast { border-radius:1px; border:1px solid rgba(255,255,255,.28); background:rgba(45,47,50,.96); box-shadow:0 7px 25px rgba(0,0,0,.28); padding:10px 16px; }

.login-screen { background:rgba(18,20,22,.48); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.login-card {
  border:1px solid rgba(242,245,247,.4); border-radius:2px;
  background:linear-gradient(135deg,rgba(93,96,100,.98),rgba(43,45,48,.99));
  box-shadow:0 18px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.23);
  padding:28px;
}
.login-card h1 { font-weight:400; }
.login-card p,.field label { color:rgba(255,255,255,.7); }
.field input { border-radius:1px; border:1px solid rgba(255,255,255,.27); background:rgba(0,0,0,.15); }
.login-button { background:linear-gradient(180deg,#f3f4f5,#c8cbce); color:#25272a; border:1px solid rgba(255,255,255,.8); font-weight:500; }

.player-close { border-radius:1px; background:rgba(65,68,72,.72); border-color:rgba(255,255,255,.4); }
.player-subtitle { border-radius:1px; background:rgba(56,59,63,.86); border-color:rgba(245,247,249,.4); color:#fff; }
.player-subtitle:focus-visible { outline:1px solid #fff; outline-offset:1px; }
.player-control { border-radius:1px; background:rgba(56,59,63,.82); border-color:rgba(245,247,249,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.player-control:hover,.player-control:focus-visible,.player-control.active { background:rgba(155,159,164,.58); }
.player-seek,.player-volume { accent-color:#e3e5e7; }
.player-audio-screen {
  background:radial-gradient(ellipse at 48% 40%,rgba(147,151,156,.72),rgba(67,70,75,.96) 52%,#17191c 100%);
}
.player-audio-cover { box-shadow:0 18px 48px rgba(0,0,0,.52); }


.client-view:not(.library-page) .view-inner { padding:8vh 4vw 5vh; }
.view-head { align-items:center; gap:16px; margin-bottom:22px; }
.view-head h1 { font-size:clamp(30px,3.2vw,42px); line-height:1.1; font-weight:400; }
.view-head p { color:rgba(255,255,255,.67); font-size:15px; }
.back-button { padding:6px 2px; border:0; border-radius:1px; background:transparent; color:rgba(255,255,255,.55); }
.search-row { align-items:center; margin-bottom:20px; }
.search-input {
  padding:10px 12px; border:1px solid rgba(244,246,248,.3); border-radius:1px;
  background:rgba(24,26,29,.34); color:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.search-input:focus-visible { outline:1px solid rgba(255,255,255,.8); outline-offset:2px; }
.settings-panel {
  width:min(560px,100%); max-width:560px; gap:12px;
  padding:25px 28px; border:1px solid rgba(244,246,248,.32); border-radius:1px;
  background:linear-gradient(125deg,rgba(86,89,93,.88),rgba(43,45,48,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.22);
}
.settings-panel label { color:rgba(255,255,255,.74); }
.settings-panel .search-input { width:100%; }
.settings-panel .solid-button { justify-self:start; margin-top:8px; }

@media (max-width:700px) {
  .main-menu { left:8%; top:19%; width:78vw; --menu-gap:clamp(13px,2.3vh,20px); }
  .home-nav-button,.spotlight-button { font-size:clamp(19px,4.7vw,27px); }
  .home-nav-button.active { font-size:clamp(22px,5.2vw,30px); }
  .submenu-rail { height:clamp(90px,14vh,125px); }
  .client-view.library-page .view-inner {
    --library-horizontal-inset:12px;
    --library-horizontal-offset:-12px;
    --library-horizontal-bleed:24px;
    padding:64px var(--library-horizontal-inset) 24px;
  }
  .client-view.library-page .media-grid { --media-grid-edge-gutter:70px; max-height:calc(100vh - 280px); padding-block:18px; padding-inline:0; }
  .client-view.library-page .media-grid.three-row { grid-auto-columns:clamp(95px,min(23vw,calc(21vh - 30px)),135px); }
  .client-view.library-page .media-grid.music-grid { grid-auto-columns:clamp(80px,min(22vw,calc(15vh - 8px)),112px); }
  .details-panel { width:100%; padding:62px 18px 25px; }
  .album-details-layout,.details-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .album-details-cover { width:min(48vw,220px); margin:0 auto; }
  .album-track-list { max-height:44vh; }
  .episode { grid-template-columns:82px minmax(0,1fr); }
  .episode button { grid-column:2; justify-self:start; }
}



/* Windows Media Center interaction chrome: circular orb, edge-to-edge media
   playback, centered translucent task pane and typography instead of modern cards. */
.system-status { z-index:6; }
.system-mark {
  flex:none; width:39px; height:36px; padding:7px; gap:1px;
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 28% 19%,#f3f6d5 0%,#94ba5b 17%,#497b32 43%,#234626 69%,#112614 100%);
  border:1px solid rgba(226,240,200,.82);
  box-shadow:0 1px 5px rgba(0,0,0,.38),inset 0 1px 2px rgba(255,255,255,.85),inset 0 -3px 4px rgba(0,0,0,.35);
  transform:perspective(65px) rotateY(-8deg) skewY(-2deg);
}
.system-mark::before { content:""; position:absolute; inset:1px; border-radius:50%; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.40),transparent 48%,rgba(0,0,0,.16)); }
.system-mark i { position:relative; z-index:1; border-radius:0; min-width:0; min-height:0; box-shadow:inset 0 0 2px rgba(255,255,255,.65); transform:skewY(-4deg); }
.system-mark i:nth-child(1) { background:linear-gradient(135deg,#f8bbb5,#d93632 58%,#892823); }
.system-mark i:nth-child(2) { background:linear-gradient(135deg,#d8f6bb,#5bba4e 55%,#2d762e); }
.system-mark i:nth-child(3) { background:linear-gradient(135deg,#acdff6,#238bd4 58%,#175184); }
.system-mark i:nth-child(4) { background:linear-gradient(135deg,#fff2a1,#f0c342 57%,#a77328); }
.tv-screen.view-open .system-status { visibility:hidden; }
.tv-screen.view-open .home-now-playing { visibility:hidden; pointer-events:none; }

/* WMC album/track pages use a centered translucent full-height pane with
   a left header, summary and compact rows; they are not a right-hand sidebar. */
.details-backdrop {
  align-items:stretch; justify-content:center; overflow:hidden;
  background:rgba(0,0,0,.61);
  backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px);
}
.details-panel {
  width:58%; min-width:570px; max-width:980px; height:100%; max-height:100%;
  margin:0; overflow:auto; padding:clamp(20px,3vh,31px) clamp(28px,4vw,46px) 32px;
  border-left:1px solid rgba(255,255,255,.23); border-right:1px solid rgba(255,255,255,.23);
  border-top:0; border-bottom:0; border-radius:0;
  background:
    radial-gradient(ellipse at 48% 0%,rgba(222,225,228,.24),transparent 46%),
    linear-gradient(180deg,rgba(104,107,111,.99) 0%,rgba(70,73,77,.99) 43%,rgba(40,42,45,.995) 100%);
  box-shadow:0 0 36px rgba(0,0,0,.28);
  animation:wmc-pane-in .20s ease-out both;
}
.details-close {
  position:absolute; z-index:43; top:2.6vh; left:2.6vw; width:36px; height:36px;
  border:1px solid rgba(255,255,255,.5); border-radius:50%;
  background:radial-gradient(circle at 35% 20%,#9da1a5,#414448 72%); color:#fff;
  font-size:31px; line-height:23px; font-family:Arial,sans-serif; cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
}
.details-close:hover,.details-close:focus-visible { background:#8f9397; outline:1px solid #fff; outline-offset:2px; }
.details-orb { position:absolute; z-index:43; top:2.6vh; left:calc(2.6vw + 43px); width:34px; height:34px; }
.album-details-layout { display:block; }
.album-detail-topbar {
  display:flex; align-items:center; gap:clamp(18px,2.5vw,30px);
  min-height:54px; padding:0 0 9px; border-bottom:1px solid rgba(255,255,255,.12);
}
.album-detail-heading { font-size:clamp(34px,4vw,45px); line-height:1; font-weight:300; letter-spacing:-1.5px; text-transform:lowercase; }
.album-detail-actions-heading { color:rgba(255,255,255,.55); font-size:clamp(17px,2vw,22px); padding-top:5px; }
.album-detail-arrows { display:flex; gap:9px; margin-left:auto; color:rgba(255,255,255,.66); font-size:30px; line-height:1; font-family:Arial,sans-serif; }
.album-detail-summary { display:grid; grid-template-columns:minmax(0,1fr) clamp(85px,10.5vw,118px); align-items:start; gap:18px; padding:13px 0 17px; min-height:115px; border-bottom:1px solid rgba(255,255,255,.13); }
.album-detail-summary-text { min-width:0; }
.album-detail-summary .album-details-main h2,
.album-detail-summary h2 { font-size:clamp(20px,2.2vw,26px); font-weight:400; line-height:1.16; margin:0 0 5px; letter-spacing:0; overflow-wrap:anywhere; }
.album-details-subtitle { margin:0 0 8px; color:rgba(255,255,255,.78); font-size:clamp(14px,1.45vw,17px); }
.album-detail-count { color:rgba(255,255,255,.66); font-size:13px; }
.album-details-cover { display:block; width:100%; aspect-ratio:1; object-fit:contain; border:0; border-radius:0; background:rgba(225,228,230,.13); box-shadow:none; }
.album-details-actions { flex-direction:column; align-items:flex-start; gap:0; margin:7px 0 14px; }
.album-action { display:flex; align-items:center; gap:9px; width:auto; min-height:24px; padding:2px 0; border:0; background:transparent; color:rgba(255,255,255,.89); font-size:clamp(13px,1.22vw,16px); text-align:left; cursor:pointer; }
.album-action:hover,.album-action:focus-visible { color:#fff; text-decoration:underline; outline:none; }
.album-action-symbol { display:inline-block; width:14px; color:#fff; text-align:center; font-family:Arial,sans-serif; font-size:14px; }
.album-track-list { display:grid; gap:0; max-height:calc(100vh - 285px); overflow:auto; border:0; }
.album-track { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; min-height:29px; padding:4px 2px; border:0; border-radius:0; outline:0; background:transparent; color:rgba(255,255,255,.75); text-align:left; font-size:clamp(13px,1.25vw,16px); }
.podcast-episode-sort { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:rgba(255,255,255,.66); font-size:13px; }
.podcast-episode-sort select { max-width:190px; padding:6px 24px 6px 8px; border:1px solid rgba(255,255,255,.25); border-radius:2px; background:#282b30; color:#fff; font:inherit; }
.album-track-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-track-artist,.album-track-number { display:none; }
.album-track-duration { color:rgba(255,255,255,.57); font-size:13px; white-space:nowrap; }
.album-track:hover,.album-track:focus-visible,.album-track.active { outline:1px solid rgba(255,255,255,.5); outline-offset:-1px; background:rgba(255,255,255,.10); color:#fff; }
.details-layout { grid-template-columns:minmax(100px,31%) minmax(0,1fr); gap:22px; }
.details-poster { border-radius:0; }
.details-panel h2 { font-weight:400; }

/* Playback resembles WMC's edge-to-edge full-screen mode with orb/back
   chrome and circular transport controls instead of a web-modal toolbar. */
.player-topbar { position:absolute; z-index:8; top:0; left:0; right:0; display:flex; align-items:center; gap:12px; padding:2.1vh 3vw; pointer-events:none; color:#fff; }
.player-close { position:static; flex:none; width:35px; height:35px; padding:0 0 4px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.58); background:radial-gradient(circle at 35% 20%,#afb3b7,#44474b 72%); box-shadow:0 1px 5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5); font:32px/1 Arial,sans-serif; pointer-events:auto; }
.player-orb { width:33px; height:33px; }
.player-title { position:static; max-width:65vw; margin-left:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(17px,1.9vw,24px); font-weight:400; pointer-events:none; }
.player-clock { margin-left:auto; font-size:clamp(15px,1.6vw,20px); text-shadow:0 1px 5px rgba(0,0,0,.35); }
.player-backdrop.controls-hidden .player-title,.player-backdrop.controls-hidden .player-overlay { opacity:0; pointer-events:none; }
.player-overlay { padding:16px 5vw 2.2vh; background:linear-gradient(transparent,rgba(0,0,0,.34) 18%,rgba(0,0,0,.71)); }
.player-seek { height:4px; appearance:none; -webkit-appearance:none; background:rgba(245,246,247,.42); border-radius:0; margin:0 0 10px; }
.player-seek::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#f0f1f2; border:1px solid rgba(0,0,0,.42); box-shadow:0 0 5px rgba(255,255,255,.5); }
.player-seek::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#f0f1f2; border:1px solid rgba(0,0,0,.42); }
.player-transport { gap:clamp(8px,1.3vw,17px); }
.player-control { width:39px; min-width:39px; height:39px; padding:0; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 20%,rgba(202,205,209,.65),rgba(48,51,55,.78) 77%); border:1px solid rgba(240,242,244,.52); box-shadow:0 1px 5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.34); font-size:17px; line-height:1; }
.player-control:hover,.player-control:focus-visible,.player-control.active { background:radial-gradient(circle at 35% 20%,#e8eaec,#777b80 77%); outline:1px solid rgba(255,255,255,.82); outline-offset:1px; }
#playerPlayPause { width:48px; height:48px; min-width:48px; border-width:2px; background:radial-gradient(circle at 35% 20%,#f5f6f7,#8e9297 57%,#414449 100%); color:#25282c; box-shadow:0 0 13px rgba(240,242,244,.16),0 2px 7px rgba(0,0,0,.55),inset 0 1px 1px #fff; font-size:19px; }
.player-volume { accent-color:#e7e9eb; }
.player-subtitle { height:36px; border-radius:0; background:rgba(35,37,40,.86); border:1px solid rgba(235,238,240,.52); }
.player-audio-screen { overflow:hidden; align-items:stretch; justify-content:flex-start; flex-direction:row; gap:0; background:#181a1d; }
.player-audio-mosaic { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr); overflow:hidden; background:#202226; }
.player-mosaic-tile { overflow:hidden; min-width:0; min-height:0; border:1px solid rgba(235,238,240,.12); background:linear-gradient(135deg,#61656a,#272a2e); }
.player-mosaic-tile img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(1) contrast(.96); }
.player-audio-screen::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(22,24,27,.70),rgba(27,29,32,.38) 35%,rgba(28,30,33,.67) 100%),linear-gradient(180deg,rgba(18,20,23,.10),rgba(18,20,23,.33)); }
.player-music-menu { position:absolute; z-index:3; left:3.4vw; top:24vh; width:clamp(140px,17vw,205px); display:flex; flex-direction:column; align-items:stretch; gap:0; }
.player-music-menu button { padding:7px 10px; text-align:left; border:1px solid transparent; border-radius:0; background:transparent; color:rgba(255,255,255,.76); font-size:clamp(14px,1.55vw,19px); cursor:pointer; }
.player-music-menu button:hover,.player-music-menu button:focus-visible { color:#fff; background:rgba(215,218,222,.18); border-color:rgba(255,255,255,.65); outline:none; }
.player-audio-stage { position:relative; z-index:2; display:flex; align-items:center; gap:clamp(16px,2vw,26px); width:min(67vw,800px); margin:12vh 5vw 10vh 23vw; }
.player-audio-cover { flex:0 0 clamp(150px,21vw,230px); width:clamp(150px,21vw,230px); aspect-ratio:1; object-fit:contain; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.player-audio-information { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-width:40vw; }
.player-audio-caption { font-size:clamp(21px,2.15vw,29px); line-height:1.18; text-align:left; max-width:100%; overflow-wrap:anywhere; }
.player-audio-artist { font-size:clamp(15px,1.45vw,19px); text-align:left; max-width:100%; }
.player-audio-detail { color:rgba(255,255,255,.65); font-size:13px; }
.player-shell.audio-mode .player-title { display:none; }
.player-backdrop.controls-hidden .player-music-menu { opacity:0; pointer-events:none; }

@media (max-width:700px) {
  .details-panel { width:100%; min-width:0; padding:70px 20px 26px; }
  .details-close { top:2vh; left:4vw; }
  .details-orb { top:2vh; left:calc(4vw + 43px); }
  .album-detail-heading { font-size:33px; }
  .album-detail-summary { grid-template-columns:minmax(0,1fr) 85px; gap:12px; }
  .album-track-list { max-height:calc(100vh - 300px); }
  .player-topbar { padding:2vh 3vw; gap:8px; }
  .player-close { width:32px;height:32px; }
  .player-orb { width:30px;height:30px; }
  .player-audio-screen { overflow:auto; }
  .player-music-menu { left:3vw; top:auto; bottom:15vh; width:120px; }
  .player-music-menu button { font-size:13px; padding:6px; }
  .player-audio-stage { width:auto; margin:17vh 4vw 19vh 32vw; gap:10px; flex-direction:column; align-items:flex-start; }
  .player-audio-cover { flex-basis:auto; width:clamp(110px,35vw,180px); }
  .player-audio-information { max-width:58vw; }
  .player-audio-caption { font-size:18px; }
  .player-audio-artist { font-size:14px; }
  .player-transport { gap:5px; }
  .player-control { width:34px; min-width:34px; height:34px; }
  #playerPlayPause { width:41px; min-width:41px;height:41px; }
  .player-time { font-size:11px; }
}


/* Reference-screen calibration at the supplied 1024×768 WMC proportions. */
.system-status { top:7.4%; }
.spotlight-button { margin-top:-2px; }
.submenu-rail { height:clamp(115px,18.3vh,149px); }


.submenu-rail { margin-top:calc(-2px - var(--menu-gap)); }
.submenu-item.active { padding-top:17px; }
.submenu-item.active > span { font-size:clamp(19px,2.45vw,25.5px); font-weight:500; }
.submenu-item.active .submenu-art { bottom:5%; }
.mini-grid { width:79%; }
.client-view.library-page .library-toolbar {
  position:absolute; z-index:4; top:8.3vh; left:12.6vw; right:2.6vw;
  align-self:auto; justify-content:flex-start; flex-wrap:nowrap; gap:clamp(9px,1.55vw,19px);
  margin:0; min-height:23px; overflow:visible;
}
.library-action {
  flex:none; padding:2px 0; border:0; border-radius:0; background:transparent;
  color:rgba(255,255,255,.72); font-size:clamp(12px,1.08vw,15px);
  font-weight:400; white-space:nowrap; text-align:left; cursor:pointer;
}
.library-action:hover,.library-action:focus-visible { color:#fff; outline:1px solid rgba(255,255,255,.55); outline-offset:3px; }
@media (max-width:700px) {
  .client-view.library-page .library-toolbar { top:72px; left:14px; right:14px; flex-wrap:wrap; gap:10px; }
}


/* Final reference calibration: home-screen mark, soft WMC ambient bokeh,
   and a focus pane sized to the supplied 1024×768 frame. */
.system-status .system-mark {
  width:40px; height:30px; padding:3px; gap:1px;
  border-radius:5px 5px 7px 4px;
  background:linear-gradient(145deg,#c3d7a0 0%,#78a752 19%,#3c702f 48%,#1b3821 100%);
  border:1px solid rgba(229,241,214,.84);
  box-shadow:0 1px 4px rgba(0,0,0,.36),inset 0 1px 2px rgba(255,255,255,.75),inset 0 -3px 4px rgba(0,0,0,.25);
  transform:perspective(78px) rotateY(-11deg) skewY(-3deg);
}
.system-status .system-mark::before {
  inset:1px; border-radius:4px;
  background:linear-gradient(130deg,rgba(255,255,255,.36),transparent 43%,rgba(0,0,0,.13));
}
.system-status .system-mark i { border-radius:1px; transform:skewY(-4deg); }
.submenu-rail { height:clamp(115px,18.55vh,149px); }
.submenu-item.active .submenu-art { opacity:.22; }
.mini-grid { border-color:rgba(239,242,245,.74); }
.mini-grid i { border-color:rgba(239,242,245,.62); background:rgba(239,242,245,.105); }
.wallpaper::before {
  background:
    radial-gradient(circle at 2.8% 5.2%,rgba(240,242,244,.22) 0%,rgba(221,224,227,.09) 1.1%,transparent 4.6%),
    radial-gradient(circle at 6.3% 14.1%,rgba(225,228,231,.15) 0%,rgba(213,216,219,.055) 2.2%,transparent 5.7%),
    radial-gradient(circle at 3.5% 24.6%,rgba(231,233,236,.17) 0%,rgba(207,210,213,.055) 2%,transparent 5.3%),
    radial-gradient(circle at 9.7% 34.2%,rgba(211,214,217,.12) 0%,transparent 5.2%),
    radial-gradient(circle at 5.2% 48.5%,rgba(226,228,231,.13) 0%,transparent 4.8%),
    radial-gradient(circle at 13.4% 64.1%,rgba(211,214,217,.10) 0%,transparent 5.5%),
    radial-gradient(circle at 23.7% 10.2%,rgba(220,223,226,.075) 0%,transparent 8%),
    radial-gradient(circle at 32.2% 30.8%,rgba(213,216,220,.08) 0%,transparent 10%),
    radial-gradient(circle at 69.8% 57.4%,rgba(231,233,236,.13) 0%,rgba(215,218,221,.055) 2%,transparent 7.8%),
    radial-gradient(circle at 65.7% 78.8%,rgba(223,226,229,.11) 0%,transparent 6.2%),
    radial-gradient(circle at 81.2% 91.5%,rgba(228,230,233,.17) 0%,transparent 8%),
    radial-gradient(circle at 53.4% 92.4%,rgba(225,227,230,.12) 0%,transparent 7.2%),
    radial-gradient(ellipse at 8% 20%,rgba(218,221,224,.08) 0%,transparent 25%),
    radial-gradient(ellipse at 70% 61%,rgba(221,224,228,.08) 0%,transparent 18%),
    radial-gradient(ellipse at 43% 101%,rgba(213,216,220,.11) 0%,transparent 44%),
    radial-gradient(ellipse at 3% 49%,rgba(180,184,188,.075) 0%,transparent 16%);
  filter:blur(17px);
  opacity:.9;
}


/* WMC was designed as a full-screen ten-foot interface. Scale the exact
   reference proportions with display height on larger desktop/TV screens;
   preserve the supplied 1024×768 sizing and leave the mobile rules alone. */
@media (min-width:701px) {
  .system-status { font-size:clamp(17px,2.8vh,30px); }
  .home-now-playing { font-size:clamp(17px,2.8vh,30px); }
  .system-status .system-mark { width:clamp(40px,5.2vh,60px); height:clamp(30px,3.9vh,44px); padding:clamp(3px,.4vh,5px); }
  .main-menu { --menu-gap:clamp(17px,3.3vh,38px); gap:var(--menu-gap); }
  .home-nav-button { font-size:clamp(23px,3.9vh,44px); }
  .home-nav-button:not(.active) { transform:translateX(3px); }
  .home-nav-button.active { font-size:clamp(26px,4.4vh,49px); transform:none; }
  .spotlight-button { font-size:clamp(23px,3.9vh,44px); }
  .submenu-rail { height:clamp(115px,18.55vh,215px); }
  .submenu-item { width:clamp(205px,min(33.5vh,25.1vw),480px); font-size:clamp(17px,3vh,35px); }
  .submenu-item.active > span { font-size:clamp(20px,3.65vh,42px); }
  .submenu-art { height:clamp(54px,10.1vh,110px); }
  .radio-grid { height:clamp(18px,2.35vh,28px); }
  .client-view.library-page .library-toolbar { gap:clamp(9px,1.5vh,24px); }
  .client-view.library-page .library-toolbar label,
  .client-view.library-page .library-toolbar select,
  .library-action { font-size:clamp(12px,1.9vh,21px); }
  .client-view.library-page .media-grid.three-row,
  .client-view.library-page .media-grid:not(.music-grid):not(.three-row) {
    grid-auto-columns:clamp(100px,min(12vw,calc(25vh - 52px)),360px);
  }
  .client-view.library-page .media-grid.music-grid {
    grid-auto-columns:clamp(86px,min(11.8vw,calc(18vh - 16px)),250px);
  }
  .media-footer { min-height:clamp(84px,12vh,130px); }
  .media-footer-title { font-size:clamp(25px,4vh,46px); }
  .media-footer-details { font-size:clamp(13px,1.9vh,21px); }
  .player-control { width:clamp(39px,5.1vh,60px); min-width:clamp(39px,5.1vh,60px); height:clamp(39px,5.1vh,60px); }
  #playerPlayPause { width:clamp(48px,6.25vh,74px); min-width:clamp(48px,6.25vh,74px); height:clamp(48px,6.25vh,74px); }
  .player-audio-stage { width:min(67vw,100vh); }
  .player-audio-cover { flex-basis:clamp(150px,28vh,340px); width:clamp(150px,28vh,340px); }
  .player-music-menu { width:clamp(140px,22.5vh,260px); }
}




/* Movie details reveal the library's wide Banner/Backdrop/Thumb artwork when available. */
.details-banner-stage { position:relative; width:100%; height:clamp(132px,22vh,245px); margin:0 0 23px; overflow:hidden; background:linear-gradient(135deg,#545a61,#26292d); box-shadow:0 8px 24px rgba(0,0,0,.19); }
.details-banner { display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.details-banner-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(9,11,14,.03) 10%,rgba(9,11,14,.11) 46%,rgba(9,11,14,.5) 100%); }

/* Vista Media Center-style illuminated glass orbs. The palette follows the menu theme. */
:root { --player-orb-hi:#d7edff; --player-orb-light:#6ea8d9; --player-orb-mid:#25699f; --player-orb-dark:#103451; --player-orb-rim:#b6d8f5; --player-orb-glow:rgba(63,154,228,.25); }
html[data-menu-color="grey"] { --player-orb-hi:#e1effb; --player-orb-light:#86b6df; --player-orb-mid:#356f9d; --player-orb-dark:#172f43; --player-orb-rim:#c7dce9; --player-orb-glow:rgba(100,161,202,.24); }
html[data-menu-color="blue"] { --player-orb-hi:#d5f4ff; --player-orb-light:#40a8f7; --player-orb-mid:#0759bc; --player-orb-dark:#052351; --player-orb-rim:#b3e6ff; --player-orb-glow:rgba(15,132,255,.40); }
html[data-menu-color="pink"] { --player-orb-hi:#ffe5f3; --player-orb-light:#f08ac2; --player-orb-mid:#b63a79; --player-orb-dark:#4c173b; --player-orb-rim:#ffd0eb; --player-orb-glow:rgba(232,89,165,.34); }
html[data-menu-color="green"] { --player-orb-hi:#e0ffdf; --player-orb-light:#77d99a; --player-orb-mid:#23844a; --player-orb-dark:#103c2a; --player-orb-rim:#cbf7d3; --player-orb-glow:rgba(63,198,112,.33); }
.player-close { display:grid; place-items:center; width:39px; height:39px; padding:0; border:1px solid var(--player-orb-rim); border-radius:50%; color:#fff; background:radial-gradient(ellipse at 34% 13%,rgba(255,255,255,.92),transparent 28%),radial-gradient(circle at 37% 27%,var(--player-orb-light),var(--player-orb-mid) 52%,var(--player-orb-dark) 83%,#050a10 100%); box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 12px var(--player-orb-glow),inset 0 1px 2px rgba(255,255,255,.82),inset 0 -4px 6px rgba(0,0,0,.48); }
.player-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.42)); }
.player-close:hover,.player-close:focus-visible { outline:2px solid rgba(255,255,255,.88); outline-offset:2px; filter:brightness(1.12); }
.player-control { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; flex:none; padding:0; border:1px solid var(--player-orb-rim); border-radius:50%; color:#fff; background:radial-gradient(ellipse at 32% 11%,rgba(255,255,255,.93),rgba(255,255,255,.23) 17%,transparent 36%),radial-gradient(circle at 39% 28%,var(--player-orb-light) 0%,var(--player-orb-mid) 49%,var(--player-orb-dark) 81%,#050b12 100%); box-shadow:0 2px 7px rgba(0,0,0,.60),0 0 10px var(--player-orb-glow),inset 0 1px 2px rgba(255,255,255,.85),inset 0 -4px 6px rgba(0,0,0,.55); color:#f8fcff; transition:filter .14s ease,box-shadow .14s ease,transform .14s ease; }
.player-control::before { content:""; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.28); border-radius:50%; box-shadow:inset 0 1px 1px rgba(255,255,255,.27); pointer-events:none; }
.player-control::after { content:""; position:absolute; z-index:0; left:13%; right:13%; top:5%; height:36%; border-radius:50% 50% 48% 48%; background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.08) 62%,transparent); pointer-events:none; }
.player-control svg { position:relative; z-index:1; display:block; width:43%; height:43%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.52)); }
.player-control:hover,.player-control:focus-visible,.player-control.active { outline:2px solid rgba(255,255,255,.9); outline-offset:2px; filter:brightness(1.18); box-shadow:0 2px 8px rgba(0,0,0,.60),0 0 16px var(--player-orb-glow),inset 0 1px 2px rgba(255,255,255,.92),inset 0 -4px 6px rgba(0,0,0,.46); }
.player-control:active { transform:scale(.95); }
#playerPlayPause { width:52px; min-width:52px; height:52px; border-width:2px; box-shadow:0 2px 10px rgba(0,0,0,.62),0 0 19px var(--player-orb-glow),inset 0 1px 2px rgba(255,255,255,.95),inset 0 -5px 7px rgba(0,0,0,.48); }
#playerPlayPause svg { width:46%; height:46%; }
.player-volume { accent-color:var(--player-orb-light); }
.player-seek { accent-color:var(--player-orb-hi); }
.player-music-menu { gap:3px; width:clamp(180px,19vw,245px); }
.player-music-menu button { display:flex; align-items:center; gap:11px; min-height:42px; padding:6px 12px; border:1px solid rgba(225,239,252,.16); border-left:3px solid transparent; border-radius:1px; background:linear-gradient(90deg,rgba(7,16,27,.68),rgba(25,43,60,.28)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); color:rgba(255,255,255,.85); text-align:left; font-size:clamp(13px,1.35vw,17px); text-shadow:0 1px 3px rgba(0,0,0,.75); }
.player-music-menu button:hover,.player-music-menu button:focus-visible { color:#fff; border-color:rgba(255,255,255,.62); border-left-color:var(--player-orb-hi); background:linear-gradient(90deg,rgba(35,90,132,.72),rgba(16,27,41,.56)); outline:none; }
.player-menu-gem { display:grid; place-items:center; width:29px; height:29px; flex:none; border:1px solid var(--player-orb-rim); border-radius:50%; color:white; background:radial-gradient(ellipse at 32% 12%,rgba(255,255,255,.8),transparent 32%),radial-gradient(circle at 38% 28%,var(--player-orb-light),var(--player-orb-mid) 55%,var(--player-orb-dark)); box-shadow:0 1px 4px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.5); }
.player-menu-gem svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.player-subtitle { border-color:var(--player-orb-rim); background:linear-gradient(180deg,rgba(38,70,96,.93),rgba(11,24,39,.96)); }
@media(max-width:700px) {
  #playerPlayPause { width:44px; min-width:44px; height:44px; }
  .player-music-menu { width:clamp(145px,40vw,190px); }
  .player-music-menu button { min-height:35px; padding:4px 7px; font-size:12px; }
  .player-menu-gem { width:24px; height:24px; }
  .player-menu-gem svg { width:14px; height:14px; }
  .player-close { width:35px; height:35px; }
}

/* User-requested badge and precise grid spacing: all brand marks use one
   genuine square image asset, and grid row/column gutters share one value. */
img.system-mark {
  display:block;
  width:34px;
  height:34px;
  aspect-ratio:1 / 1;
  object-fit:contain;
  flex:none;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}
.system-status img.system-mark {
  width:clamp(30px,3.9vh,44px);
  height:clamp(30px,3.9vh,44px);
}
.details-orb.system-mark,
.player-orb.system-mark {
  width:34px;
  height:34px;
}
@media (max-width:700px) {
  .system-status img.system-mark { width:30px; height:30px; }
  .details-orb.system-mark,
  .player-orb.system-mark { width:30px; height:30px; }
}

/* On video, the entire top chrome (including badge and clock) fades away.
   On audio, the badge fades with the controls but the clock stays visible. */
.player-orb,
.player-clock {
  transition:opacity .22s ease, visibility .22s ease;
}
.player-backdrop.controls-hidden .player-orb {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.player-backdrop.controls-hidden .player-clock {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.player-backdrop.controls-hidden .player-shell.audio-mode .player-clock {
  opacity:1;
  visibility:visible;
  pointer-events:none;
}

/* The music mural is a seamless wall of square covers. Tile geometry is
   calculated in JS so every tile stays 1:1 and the wall overfills the
   viewport instead of exposing gray gutters or letterboxing. */
.player-audio-mosaic {
  inset:auto;
  left:50%; top:50%; right:auto; bottom:auto;
  transform:translate(-50%,-50%);
  gap:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:visible;
  background:transparent;
}
.player-mosaic-tile {
  min-width:0; min-height:0; margin:0; padding:0;
  overflow:hidden; border:0 !important;
  background:transparent !important;
}
.player-mosaic-tile img {
  display:block; width:100%; height:100%; margin:0; padding:0;
  border:0; object-fit:cover !important; object-position:center;
  background:transparent !important;
}

/* Purpose-specific submenu illustrations and external podcast/radio UI. */
.player-control[hidden], .player-music-menu[hidden], .subtitle-control[hidden] { display:none !important; }
.submenu-art { display:flex; align-items:center; justify-content:center; }
 .submenu-icon { display:block; width:min(47%,82px); height:clamp(45px,8.6vh,70px); overflow:visible; opacity:.84; filter:drop-shadow(0 1px 2px rgba(0,0,0,.23)); }
.submenu-icon * { vector-effect:non-scaling-stroke; }
.submenu-item.active .submenu-icon { opacity:1; }
.submenu-art:has(.submenu-icon) { bottom:6%; }
.source-action { padding:3px 8px; min-height:26px; border:1px solid rgba(255,255,255,.22); border-radius:1px; background:rgba(40,42,45,.42); color:rgba(255,255,255,.86); font:inherit; font-size:clamp(12px,1.05vw,14px); cursor:pointer; }
.source-action:hover,.source-action:focus-visible { color:#fff; border-color:rgba(255,255,255,.8); background:rgba(230,233,236,.12); outline:none; }
.client-view.library-page .library-toolbar .source-action { margin:0 4px; }
.player-audio-screen.external-audio-mode .player-audio-mosaic { display:none !important; }
/* Album mural is a continuous wall of square cover art: no borders or gutters. */
.player-mosaic-tile { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; }
.player-mosaic-tile img { margin:0; padding:0; border:0; border-radius:0; }
.player-audio-screen.external-audio-mode::after { background:linear-gradient(90deg,rgba(15,17,20,.26),rgba(15,17,20,.04) 35%,rgba(15,17,20,.40) 100%),linear-gradient(180deg,rgba(15,17,20,.05),rgba(15,17,20,.24)); }
.player-audio-screen.external-audio-mode .player-music-menu { display:none !important; }
.player-audio-screen.external-audio-mode .player-audio-stage { margin-left:clamp(24px,10vw,150px); width:min(78vw,1040px); }
.player-audio-screen.external-audio-mode .player-audio-cover { object-fit:contain; background:rgba(255,255,255,.06); }
.player-shell.external-radio-mode .player-overlay #playerSeek,
.player-shell.external-radio-mode .player-overlay #playerElapsed,
.player-shell.external-radio-mode .player-overlay .player-transport > .player-time:nth-of-type(2) { opacity:.35; }
.player-shell.external-radio-mode #playerDuration { display:none; }
.player-shell.external-radio-mode .player-overlay .player-transport::after { content:"LIVE"; color:rgba(255,255,255,.72); font-size:12px; letter-spacing:.12em; }
.media-card img.media-fallback { object-fit:contain !important; padding:22%; background:linear-gradient(135deg,#55595e,#2d3034) !important; }
.client-view.library-page .media-grid.music-grid .media-card[data-item-id^="radio-"] img,
.client-view.library-page .media-grid.music-grid .media-card img.media-fallback { object-fit:contain; padding:12%; }
.media-card .poster-frame.album-art img.media-fallback { padding:27%; }
.external-source-info { font-size:clamp(12px,1vw,14px); color:rgba(255,255,255,.68); }
.source-row { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:8px 0 12px; }
@media(max-width:700px) {
  .submenu-icon { width:min(62%,84px); height:clamp(50px,7vh,68px); }
  .player-audio-screen.external-audio-mode .player-audio-stage { margin:12vh 4vw 18vh 26vw; width:auto; }
  .source-action { padding:4px 6px; }
}

/* Keep exactly the existing horizontal gutter between columns, and use
   that same computed pixel value between each row for every library type. */
.client-view.library-page .media-grid.three-row,
.client-view.library-page .media-grid:not(.music-grid):not(.three-row) {
  --media-tile-gap:clamp(2px,.35vw,5px);
  gap:var(--media-tile-gap) !important;
}
.client-view.library-page .media-grid.music-grid {
  --media-tile-gap:clamp(2px,.3vw,4px);
  gap:var(--media-tile-gap) !important;
}


/* Unified WMC library treatment for Podcasts, Radio, Playlists and Continue Watching. */
.client-view.library-page .media-grid.continue-grid {
  grid-template-rows:repeat(2,min-content);
  grid-auto-columns:clamp(100px,min(12vw,calc(25vh - 52px)),165px);
}
.poster-frame.episode-art {
  aspect-ratio:2 / 3 !important;
  background:#000 !important;
  overflow:hidden;
}
.poster-frame.episode-art img {
  width:100%; height:100%; object-fit:cover !important; background:#000 !important;
  padding:0 !important;
}
.episode-art-label {
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:3px; padding:28px 8px 7px;
  color:#fff; line-height:1.2; text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.94));
  pointer-events:none;
}
.episode-art-label span {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:clamp(11px,.9vw,14px); font-weight:600; text-shadow:0 1px 4px #000;
}
.episode-art-label small { color:rgba(255,255,255,.7); font-size:clamp(9px,.72vw,11px); }
.media-grid .poster-frame.album-art { aspect-ratio:1 / 1; }

/* Settings screen: a WMC-style option rail and broad translucent detail pane. */
.client-view.settings-page {
  overflow:auto;
  background:linear-gradient(110deg,rgba(60,63,67,.62),rgba(24,26,29,.78));
}
.client-view.settings-page .view-inner {
  display:flex; flex-direction:column; gap:0; min-height:100%; height:100%;
  padding:7vh 6vw 5vh; overflow:auto;
}
.client-view.settings-page .view-head { align-items:flex-start; margin-bottom:clamp(20px,4vh,38px); }
.client-view.settings-page .view-head h1 { font-size:clamp(32px,3.4vw,48px); font-weight:400; letter-spacing:-.03em; }
.client-view.settings-page .view-head p { margin-top:8px; font-size:clamp(14px,1.15vw,17px); color:rgba(255,255,255,.62); }
.client-view.settings-page #viewStatus { display:none; }
.client-view.settings-page #mediaGrid {
  display:block; width:100%; max-width:1200px; margin:0 auto; padding:0;
  overflow:visible; background:transparent;
}
.settings-wmc {
  display:grid; grid-template-columns:minmax(220px,31%) minmax(0,1fr); min-height:400px;
  border-top:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.18);
  background:linear-gradient(115deg,rgba(235,238,241,.085),rgba(15,16,18,.10));
  box-shadow:0 22px 55px rgba(0,0,0,.18);
}
.settings-nav {
  display:flex; flex-direction:column; gap:0; padding:13px 0;
  border-right:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.11);
}
.settings-nav-item {
  display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; align-items:center;
  padding:16px 20px; border:0; border-left:3px solid transparent; text-align:left;
  color:rgba(255,255,255,.7); background:transparent; cursor:pointer;
}
.settings-nav-item > span { grid-row:span 2; color:rgba(255,255,255,.32); font-size:12px; font-variant-numeric:tabular-nums; }
.settings-nav-item b { font-weight:400; font-size:clamp(16px,1.45vw,20px); }
.settings-nav-item small { margin-top:3px; color:rgba(255,255,255,.45); font-size:12px; }
.settings-nav-item:hover,.settings-nav-item:focus-visible { color:#fff; outline:1px solid rgba(255,255,255,.72); outline-offset:-2px; }
.settings-nav-item.active {
  color:#fff; border-left-color:rgba(255,255,255,.9);
  background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.08);
}
.settings-nav-item.active > span { color:rgba(255,255,255,.7); }
.settings-detail { padding:clamp(24px,4vw,54px); min-width:0; }
.settings-detail h2 { font-size:clamp(26px,2.8vw,38px); font-weight:400; letter-spacing:-.035em; margin-bottom:12px; }
.setting-row { display:flex; gap:22px; align-items:center; justify-content:space-between; padding:17px 0; border-top:1px solid rgba(255,255,255,.16); }
.setting-row strong { display:block; font-size:16px; font-weight:400; }
.setting-row small { display:block; margin-top:5px; max-width:460px; color:rgba(255,255,255,.5); font-size:12px; line-height:1.45; }
.setting-row select {
  min-width:150px; padding:8px 25px 8px 8px; border:0; border-bottom:1px solid rgba(255,255,255,.35);
  border-radius:0; background:transparent; color:#fff; font:inherit; cursor:pointer;
}
.setting-row select option { background:#33363a; color:#fff; }
.settings-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin-top:23px; }
.settings-secondary { margin-right:auto; }
.settings-apply,.settings-secondary {
  padding:10px 18px; border:1px solid rgba(255,255,255,.4); border-radius:1px;
  background:rgba(245,247,249,.15); color:#fff; font:inherit; font-size:14px; cursor:pointer;
}
.settings-apply { background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08)); }
.settings-apply:hover,.settings-secondary:hover,.settings-apply:focus-visible,.settings-secondary:focus-visible { outline:1px solid white; background:rgba(255,255,255,.22); }
.settings-shortcut { display:flex; align-items:center; gap:7px; margin:15px 0; color:rgba(255,255,255,.75); font-size:14px; }
.settings-shortcut span:last-child { margin-left:8px; }
.settings-shortcut kbd { min-width:33px; padding:5px 7px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.16); color:#fff; text-align:center; font:inherit; font-size:12px; }
.settings-note { margin-top:23px; padding-top:14px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.48); font-size:12px; line-height:1.55; }
.settings-state { color:rgba(255,255,255,.66); font-size:10px; letter-spacing:.12em; text-align:right; }
@media(max-width:700px) {
  .settings-wmc { grid-template-columns:1fr; }
  .settings-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-right:0; border-bottom:1px solid rgba(255,255,255,.22); }
  .settings-nav-item { padding:12px 9px; grid-template-columns:23px minmax(0,1fr); column-gap:8px; }
  .settings-nav-item b { font-size:14px; }
  .settings-nav-item small { font-size:10px; }
  .settings-detail { padding:22px 16px; }
  .setting-row { align-items:flex-start; flex-direction:column; gap:12px; }
  .client-view.settings-page .view-inner { padding:7vh 14px 28px; }
}


/* Refined, centered WMC-style submenu artwork with consistent optical balance. */
.submenu-item { isolation:isolate; }
.submenu-art { inset-inline:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.submenu-icon { width:clamp(88px,11vw,134px); height:clamp(62px,11vh,100px); max-width:84%; margin-inline:auto; overflow:visible; opacity:.94; filter:drop-shadow(0 3px 5px rgba(0,0,0,.38)); }
.submenu-icon g { stroke-width:2.15; paint-order:stroke fill; }
.submenu-icon path,.submenu-icon rect,.submenu-icon circle,.submenu-icon ellipse { vector-effect:non-scaling-stroke; }
.submenu-art::before { content:""; position:absolute; width:clamp(82px,10.8vw,132px); height:clamp(54px,9.3vh,88px); border:1px solid rgba(235,245,255,.10); border-radius:50%; background:radial-gradient(ellipse at 35% 18%,rgba(255,255,255,.19),transparent 29%),radial-gradient(ellipse,rgba(220,232,244,.18),var(--menu-glow,rgba(255,255,255,.05)) 42%,transparent 73%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 9px rgba(0,0,0,.12); filter:blur(.3px); pointer-events:none; }
.submenu-item.active .submenu-icon { opacity:1; filter:drop-shadow(0 3px 7px rgba(0,0,0,.44)); }
.submenu-item .submenu-art::before { content:""; position:absolute; width:clamp(70px,8vw,104px); height:clamp(48px,7vh,70px); left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.10),rgba(255,255,255,0) 70%); opacity:.65; }
.submenu-item.active .submenu-art::before { background:radial-gradient(ellipse at 35% 18%,rgba(255,255,255,.24),transparent 31%),radial-gradient(ellipse,rgba(220,232,244,.21),var(--menu-glow,rgba(255,255,255,.06)) 48%,transparent 75%); border-color:rgba(245,250,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 10px rgba(0,0,0,.16); }
.submenu-item .submenu-art { opacity:.7; }
.submenu-item.active .submenu-art { opacity:1; }
/* User-selectable ambient colors affect all menu-backed screens. */
html[data-menu-color="grey"] { --menu-top:#393b3e; --menu-mid:#25272a; --menu-bottom:#141517; --menu-glow:rgba(238,241,244,.14); }
html[data-menu-color="blue"] { --menu-top:#243e58; --menu-mid:#172b40; --menu-bottom:#0b1622; --menu-glow:rgba(104,174,235,.23); }
html[data-menu-color="pink"] { --menu-top:#573642; --menu-mid:#39242e; --menu-bottom:#1b1218; --menu-glow:rgba(239,137,177,.22); }
html[data-menu-color="green"] { --menu-top:#344b3a; --menu-mid:#223329; --menu-bottom:#101912; --menu-glow:rgba(137,202,143,.20); }

html[data-menu-color="grey"] .wallpaper { background-image:radial-gradient(ellipse at 72% 72%,rgba(214,219,225,.32),transparent 32%),radial-gradient(ellipse at 8% 12%,rgba(190,196,203,.23),transparent 31%),linear-gradient(155deg,#202225 0%,#34373c 47%,#656c75 100%) !important; }
html[data-menu-color="blue"] .wallpaper { background-image:radial-gradient(ellipse at 72% 72%,rgba(111,177,231,.32),transparent 32%),radial-gradient(ellipse at 8% 12%,rgba(92,147,199,.23),transparent 31%),linear-gradient(155deg,#101d2b 0%,#203c56 47%,#3b6486 100%) !important; }
html[data-menu-color="pink"] .wallpaper { background-image:radial-gradient(ellipse at 72% 72%,rgba(242,143,182,.30),transparent 32%),radial-gradient(ellipse at 8% 12%,rgba(207,115,151,.22),transparent 31%),linear-gradient(155deg,#21151b 0%,#4b2c3a 47%,#795062 100%) !important; }
html[data-menu-color="green"] .wallpaper { background-image:radial-gradient(ellipse at 72% 72%,rgba(149,209,151,.28),transparent 32%),radial-gradient(ellipse at 8% 12%,rgba(109,169,116,.22),transparent 31%),linear-gradient(155deg,#131c16 0%,#2b4231 47%,#4b6b50 100%) !important; }

.client-view.library-page { background:radial-gradient(ellipse at 50% 0%,var(--menu-glow),transparent 48%),linear-gradient(to bottom,var(--menu-top) 0%,var(--menu-mid) 54%,var(--menu-bottom) 100%) !important; }
.client-view.settings-page { background:radial-gradient(ellipse at 50% 0%,var(--menu-glow),transparent 52%),linear-gradient(to bottom,var(--menu-top),var(--menu-bottom)) !important; }



/* Movie detail banners are a true edge-to-edge 16:9 header. Only the content
   below the image is inset; the artwork touches the panel's top and sides. */
.details-panel.has-details-banner { padding:0 !important; }
#detailsContent > .details-banner-stage {
  width:100%; height:auto; aspect-ratio:16 / 9; margin:0; flex:none;
  overflow:hidden; background:linear-gradient(135deg,#4b5158,#1b1e22);
  box-shadow:none; border:0;
}
#detailsContent > .details-banner-stage .details-banner {
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
.details-panel.has-details-banner #detailsContent > .details-layout {
  padding:clamp(22px,3.2vh,36px) clamp(22px,3.1vw,38px) 34px;
}
.details-panel.has-details-banner .details-banner-stage::after {
  background:linear-gradient(180deg,rgba(5,8,12,.02) 25%,rgba(5,8,12,.12) 56%,rgba(5,8,12,.48) 100%);
}

/* Solid monochrome iconography: remove the decorative lozenge/halo and let
   the silhouettes carry the visual weight, as in the Media Center rail. */
.submenu-art { display:flex !important; align-items:center !important; justify-content:center !important; position:relative; overflow:visible; }
.submenu-art::before { content:none !important; display:none !important; }
.submenu-icon {
  display:block; width:clamp(104px,11.4vw,145px) !important;
  height:clamp(78px,10.1vh,112px) !important; max-width:92%; margin:0 auto;
  color:rgba(250,252,255,.94); opacity:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,.23));
}
.submenu-icon g { fill:currentColor !important; stroke:none !important; }
.submenu-icon * { vector-effect:unset !important; }
.submenu-item.active .submenu-icon { color:#fff; filter:drop-shadow(0 3px 5px rgba(0,0,0,.32)); }
.submenu-item:not(.active) .submenu-icon { color:rgba(244,247,250,.78); }
@media(max-width:700px) {
  .submenu-icon { width:clamp(88px,24vw,118px) !important; height:clamp(66px,9vh,86px) !important; }
  .details-panel.has-details-banner #detailsContent > .details-layout { padding:22px 18px 28px; }
}

/* Theme-synced modern glass-metal transport controls. The grey palette is
   neutral by default; blue reuses the original restrained blue treatment. */
:root {
  --player-orb-hi:#f7f9fb; --player-orb-light:#b8c0c8; --player-orb-mid:#78828d;
  --player-orb-dark:#343d47; --player-orb-rim:#e5e9ed; --player-orb-glow:rgba(204,214,224,.16);
  --player-orb-inner:rgba(245,248,251,.23); --player-orb-shadow:rgba(13,19,25,.76);
}
html[data-menu-color="grey"] {
  --player-orb-hi:#f7f9fb; --player-orb-light:#b8c0c8; --player-orb-mid:#78828d;
  --player-orb-dark:#343d47; --player-orb-rim:#e5e9ed; --player-orb-glow:rgba(204,214,224,.16);
  --player-orb-inner:rgba(245,248,251,.23); --player-orb-shadow:rgba(13,19,25,.76);
}
html[data-menu-color="blue"] {
  --player-orb-hi:#d7edff; --player-orb-light:#6ea8d9; --player-orb-mid:#25699f;
  --player-orb-dark:#103451; --player-orb-rim:#b6d8f5; --player-orb-glow:rgba(63,154,228,.25);
  --player-orb-inner:rgba(229,244,255,.28); --player-orb-shadow:rgba(5,23,38,.78);
}
html[data-menu-color="pink"] {
  --player-orb-hi:#fff3f8; --player-orb-light:#d99cb9; --player-orb-mid:#986079;
  --player-orb-dark:#492f40; --player-orb-rim:#f1c9da; --player-orb-glow:rgba(213,148,178,.21);
  --player-orb-inner:rgba(255,239,247,.24); --player-orb-shadow:rgba(37,15,27,.78);
}
html[data-menu-color="green"] {
  --player-orb-hi:#f2fff5; --player-orb-light:#a0d0ad; --player-orb-mid:#578469;
  --player-orb-dark:#264536; --player-orb-rim:#d0efda; --player-orb-glow:rgba(136,212,157,.20);
  --player-orb-inner:rgba(237,255,241,.24); --player-orb-shadow:rgba(10,35,21,.78);
}
.player-control {
  border:1px solid color-mix(in srgb,var(--player-orb-rim) 74%,transparent);
  color:#f8fbff;
  background:
    radial-gradient(ellipse at 30% 9%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.43) 7%,rgba(255,255,255,.10) 20%,transparent 34%),
    radial-gradient(circle at 50% 42%,var(--player-orb-light) 0%,var(--player-orb-mid) 54%,var(--player-orb-dark) 100%);
  box-shadow:
    0 7px 15px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.36), 0 0 14px var(--player-orb-glow),
    inset 0 1.5px 1px rgba(255,255,255,.78), inset 0 -5px 8px var(--player-orb-shadow),
    inset 0 0 0 3px var(--player-orb-inner);
  transition:filter .16s ease,box-shadow .16s ease,transform .12s ease;
}
.player-control::before {
  inset:3px; border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.07);
}
.player-control::after {
  left:17%; right:17%; top:6%; height:29%; border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.14) 46%,transparent);
  filter:blur(.2px);
}
.player-control svg {
  width:47%; height:47%; color:#fff; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.38));
}
.player-control:hover,.player-control:focus-visible,.player-control.active {
  filter:brightness(1.09) saturate(1.04);
  box-shadow:0 8px 18px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.52),0 0 20px var(--player-orb-glow),
    inset 0 1.5px 1px rgba(255,255,255,.88),inset 0 -5px 8px var(--player-orb-shadow),inset 0 0 0 3px var(--player-orb-inner);
}
.player-control:active { transform:scale(.965); }
#playerPlayPause { border-width:1.5px; box-shadow:0 8px 19px rgba(0,0,0,.44),0 0 20px var(--player-orb-glow),inset 0 1.5px 1px rgba(255,255,255,.85),inset 0 -5px 8px var(--player-orb-shadow),inset 0 0 0 4px var(--player-orb-inner); }
.player-close { border-color:var(--player-orb-rim); background:radial-gradient(ellipse at 31% 8%,rgba(255,255,255,.95),transparent 28%),radial-gradient(circle at 50% 42%,var(--player-orb-light),var(--player-orb-mid) 58%,var(--player-orb-dark)); box-shadow:0 7px 15px rgba(0,0,0,.38),0 0 14px var(--player-orb-glow),inset 0 1px 1px rgba(255,255,255,.84),inset 0 -4px 7px var(--player-orb-shadow); }
.player-close svg { fill:none; }
.player-menu-gem { background:radial-gradient(ellipse at 31% 9%,rgba(255,255,255,.86),transparent 32%),radial-gradient(circle at 50% 42%,var(--player-orb-light),var(--player-orb-mid) 58%,var(--player-orb-dark)); box-shadow:0 3px 8px rgba(0,0,0,.32),inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 4px var(--player-orb-shadow); }
.player-volume { accent-color:var(--player-orb-light); }
.player-seek { accent-color:var(--player-orb-hi); }
.player-control[hidden] { display:none !important; }


/* Actual @andrsrxn/icons duotone SVGs, shown without any decorative oval plate. */
.submenu-art { display:flex !important; align-items:center !important; justify-content:center !important; position:relative !important; overflow:visible !important; }
.submenu-art::before { content:none !important; display:none !important; }
.submenu-icon {
  display:block !important;
  width:clamp(78px,8.4vw,108px) !important;
  height:clamp(78px,8.4vw,108px) !important;
  max-width:70% !important; max-height:70% !important; margin:0 auto !important;
  overflow:visible; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  color:rgba(247,249,252,.88); opacity:1 !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.submenu-icon [opacity=".2"] { opacity:.2; }
.submenu-item.active .submenu-icon { color:#fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.submenu-item:not(.active) .submenu-icon { color:rgba(241,245,250,.82); }
.player-control svg, .player-close svg, .player-menu-gem svg {
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.player-control svg [fill="currentColor"], .player-close svg [fill="currentColor"], .player-menu-gem svg [fill="currentColor"] { fill:currentColor; }
.player-control svg [opacity=".2"], .player-close svg [opacity=".2"], .player-menu-gem svg [opacity=".2"] { opacity:.2; }
@media(max-width:700px) {
  .submenu-icon { width:clamp(72px,21vw,92px) !important; height:clamp(72px,21vw,92px) !important; }
}


/* Player controls are icon-only glass controls: no orb plates or gem backgrounds. */
.player-orb { display:none !important; }
.player-close {
  width:40px !important; height:40px !important; min-width:40px !important;
  border:1px solid rgba(255,255,255,.34) !important; border-radius:2px !important;
  background:rgba(255,255,255,.035) !important; box-shadow:none !important;
  color:#fff; padding:0 !important;
}
.player-close:hover,.player-close:focus-visible { background:rgba(255,255,255,.12) !important; outline:1px solid rgba(255,255,255,.78); outline-offset:1px; }
.player-control, #playerPlayPause {
  position:relative !important; display:grid !important; place-items:center !important;
  width:clamp(44px,5.2vh,62px) !important; min-width:clamp(44px,5.2vh,62px) !important;
  height:clamp(44px,5.2vh,62px) !important; padding:0 !important;
  border:1px solid transparent !important; border-radius:2px !important;
  background:transparent !important; box-shadow:none !important; color:#fff !important;
  overflow:visible !important; isolation:auto !important; transform:none;
}
.player-control::before,.player-control::after { content:none !important; display:none !important; }
.player-control svg { width:clamp(30px,4.1vh,46px) !important; height:clamp(30px,4.1vh,46px) !important; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.player-control svg [fill="currentColor"] { fill:currentColor !important; stroke:none; }
.player-control:hover,.player-control:focus-visible,.player-control.active {
  background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.38) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) !important; outline:none !important; filter:none !important;
}
.player-control:active { transform:scale(.97) !important; }
#playerRepeat { display:none !important; }
.player-transport { position:relative; min-height:clamp(48px,6vh,66px); display:flex; align-items:center; justify-content:flex-end; gap:clamp(8px,1.2vw,16px); padding-left:0; }
#playerBackOrPrevious { position:absolute !important; left:calc(50% - clamp(91px,8vw,112px)); top:50%; transform:translateY(-50%) !important; }
#playerPlayPause { position:absolute !important; left:50%; top:50%; transform:translate(-50%,-50%) !important; }
#playerNextTrack { position:absolute !important; left:calc(50% + clamp(47px,4.1vw,58px)); top:50%; transform:translateY(-50%) !important; }
#playerBackOrPrevious:active { transform:translateY(-50%) scale(.97) !important; }
#playerPlayPause:active { transform:translate(-50%,-50%) scale(.97) !important; }
#playerNextTrack:active { transform:translateY(-50%) scale(.97) !important; }
.player-time { text-shadow:0 1px 3px rgba(0,0,0,.55); }
.player-volume { width:clamp(90px,12vw,170px); margin-right:clamp(8px,1vw,16px); }
#playerFullscreen { margin-left:0; }
.player-music-menu { width:clamp(190px,20vw,260px) !important; gap:1px !important; }
.player-music-menu button {
  display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important;
  min-height:44px !important; padding:6px 8px !important; border:1px solid transparent !important;
  border-radius:0 !important; border-left:1px solid transparent !important; background:transparent !important;
  box-shadow:none !important; color:rgba(255,255,255,.86) !important; text-align:left !important;
}
.player-music-menu button:hover,.player-music-menu button:focus-visible {
  border-color:rgba(255,255,255,.26) !important; background:rgba(255,255,255,.075) !important;
  outline:none !important; color:#fff !important;
}
.player-menu-icon { display:grid !important; place-items:center !important; flex:0 0 29px !important; width:29px !important; height:29px !important; color:rgba(255,255,255,.92) !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.player-menu-icon svg { display:block; width:29px !important; height:29px !important; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.player-menu-icon svg [fill="currentColor"] { fill:currentColor; }
/* Detail panels follow the selected site-wide background theme. */
html[data-menu-color="grey"] .details-panel { background:radial-gradient(ellipse at 48% 0%,rgba(222,225,228,.20),transparent 46%),linear-gradient(180deg,rgba(104,107,111,.99) 0%,rgba(70,73,77,.99) 43%,rgba(40,42,45,.995) 100%) !important; }
html[data-menu-color="blue"] .details-panel { background:radial-gradient(ellipse at 48% 0%,rgba(143,190,231,.20),transparent 46%),linear-gradient(180deg,rgba(49,79,108,.99) 0%,rgba(31,53,75,.99) 43%,rgba(13,26,40,.995) 100%) !important; }
html[data-menu-color="pink"] .details-panel { background:radial-gradient(ellipse at 48% 0%,rgba(242,167,196,.18),transparent 46%),linear-gradient(180deg,rgba(105,65,81,.99) 0%,rgba(68,42,54,.99) 43%,rgba(32,20,27,.995) 100%) !important; }
html[data-menu-color="green"] .details-panel { background:radial-gradient(ellipse at 48% 0%,rgba(172,219,177,.18),transparent 46%),linear-gradient(180deg,rgba(67,94,73,.99) 0%,rgba(42,64,48,.99) 43%,rgba(17,30,21,.995) 100%) !important; }
@media(max-width:700px) {
  .player-transport { gap:4px; }
  .player-control,#playerPlayPause { width:40px !important; min-width:40px !important; height:40px !important; }
  .player-control svg { width:28px !important; height:28px !important; }
  #playerBackOrPrevious { left:calc(50% - 75px); }
  #playerNextTrack { left:calc(50% + 35px); }
  .player-volume { width:70px; margin-right:2px; }
  .player-music-menu button { min-height:40px !important; }
  .player-menu-icon,.player-menu-icon svg { width:26px !important; height:26px !important; flex-basis:26px !important; }
}


/* Player refinements: keep seeking interactive and use icon-only transport controls. */
.player-backdrop.controls-hidden .player-overlay { pointer-events:auto !important; }
.player-overlay { z-index:7 !important; }
#playerSeek { position:relative; z-index:2; display:block; width:100%; pointer-events:auto !important; touch-action:pan-y; cursor:pointer; }
.player-transport .player-control,
.player-transport .player-control:hover,
.player-transport .player-control:focus,
.player-transport .player-control:focus-visible,
.player-transport .player-control.active,
.player-transport .player-control:active,
#playerBackOrPrevious,
#playerBackOrPrevious:hover,
#playerBackOrPrevious:focus,
#playerBackOrPrevious:focus-visible,
#playerBackOrPrevious:active,
#playerPlayPause,
#playerPlayPause:hover,
#playerPlayPause:focus,
#playerPlayPause:focus-visible,
#playerPlayPause:active,
#playerNextTrack,
#playerNextTrack:hover,
#playerNextTrack:focus,
#playerNextTrack:focus-visible,
#playerNextTrack:active,
#playerFullscreen,
#playerFullscreen:hover,
#playerFullscreen:focus,
#playerFullscreen:focus-visible,
#playerFullscreen:active {
  border:0 !important; outline:0 !important; outline-offset:0 !important;
  box-shadow:none !important; background:transparent !important; filter:none !important;
}
.player-transport .player-control svg,
#playerFullscreen svg { filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.player-transport .player-control:hover svg,
#playerFullscreen:hover svg { opacity:.78; }
.player-subtitle {
  height:36px !important; min-width:100px; max-width:min(260px,24vw);
  border-radius:999px !important; padding:0 14px !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:none !important; appearance:auto;
}
.player-subtitle option { color:#fff; }
html[data-menu-color="grey"] .player-subtitle { background:linear-gradient(180deg,rgba(105,108,112,.96),rgba(43,45,48,.98)) !important; }
html[data-menu-color="blue"] .player-subtitle { background:linear-gradient(180deg,rgba(51,83,114,.97),rgba(14,27,42,.99)) !important; }
html[data-menu-color="pink"] .player-subtitle { background:linear-gradient(180deg,rgba(112,68,86,.97),rgba(37,22,30,.99)) !important; }
html[data-menu-color="green"] .player-subtitle { background:linear-gradient(180deg,rgba(70,99,76,.97),rgba(18,31,22,.99)) !important; }
@media(max-width:700px) { .player-subtitle { max-width:120px; min-width:82px; padding:0 10px !important; } }

/* Final player polish: icon-only controls, reliable seek interaction, themed pill subtitle selector. */
.player-close,
.player-close:hover,
.player-close:focus,
.player-close:focus-visible,
.player-close:active {
  border:0 !important; outline:0 !important; outline-offset:0 !important;
  background:transparent !important; box-shadow:none !important; filter:none !important;
}
.player-close { width:40px !important; height:40px !important; min-width:40px !important; }
.player-close svg { filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important; }
.player-transport button,
.player-transport button:hover,
.player-transport button:focus,
.player-transport button:focus-visible,
.player-transport button:active,
.player-transport button.active {
  border:0 !important; outline:0 !important; outline-offset:0 !important;
  background:transparent !important; box-shadow:none !important; filter:none !important;
}
.player-transport button:hover svg { opacity:.78; }
#playerSeek { pointer-events:auto !important; cursor:pointer !important; touch-action:pan-y; }
#playerSeek:disabled { cursor:default !important; opacity:.5; }
.player-subtitle {
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important; overflow:hidden; color-scheme:dark;
  box-shadow:none !important; outline:none;
}
.player-subtitle:focus,.player-subtitle:focus-visible { outline:none !important; box-shadow:0 0 0 1px rgba(255,255,255,.16) !important; }
html[data-menu-color="grey"] .player-subtitle { background-color:#484b4f !important; }
html[data-menu-color="blue"] .player-subtitle { background-color:#203c57 !important; }
html[data-menu-color="pink"] .player-subtitle { background-color:#4d303d !important; }
html[data-menu-color="green"] .player-subtitle { background-color:#2d4934 !important; }
.player-subtitle option { background:#303338; color:#fff; }
@media(max-width:700px) { .player-close { width:35px !important; height:35px !important; } }



/* Home-only local background, stored in IndexedDB and never sent to Jellyfin. */
html[data-menu-color] .tv-screen.has-custom-home-background:not(.view-open) .wallpaper {
  background-image:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.54) 100%),var(--custom-home-background) !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
}
.tv-screen.has-custom-home-background.view-open .wallpaper,
.tv-screen.has-custom-home-background.player-active .wallpaper { background-image:none !important; }
.player-backdrop { background:#000; }
.back-button, .back-button:hover, .back-button:focus, .back-button:focus-visible, #viewBack { text-decoration:none !important; }
.back-button::before, .back-button::after { text-decoration:none !important; }

/* Continue Watching: episodic cards use a true landscape frame at poster-height. */
.client-view.library-page .media-grid.continue-grid .media-card.continue-episode-card,
.client-view.library-page .media-grid.recent-grid .media-card.continue-episode-card {
  grid-column:span 3; width:88.8889%; min-width:0;
}
.poster-frame.episode-art { aspect-ratio:16 / 9 !important; }
.poster-frame.episode-art img { aspect-ratio:16 / 9; object-fit:cover !important; }
.client-view.library-page .media-grid.continue-grid .continue-episode-card .media-meta,
.client-view.library-page .media-grid.recent-grid .continue-episode-card .media-meta { width:100%; }
.client-view.library-page .media-grid.continue-grid .media-card:not(.continue-episode-card) { align-self:start; }

/* Series details: keep the cover/title summary at the top; episodes span the full panel below. */
.series-details-layout { display:block; width:100%; }
.series-details-summary { display:grid; grid-template-columns:minmax(150px,clamp(170px,19vw,250px)) minmax(0,1fr); gap:clamp(20px,3vw,38px); align-items:start; }
.series-details-copy { min-width:0; }
#episodeArea { width:100%; margin-top:clamp(20px,3vh,34px); }
.series-details-layout .episode-list { width:100%; }

/* Detail actions need breathing room and a functional download affordance. */
.details-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; padding:4px 2px 8px; }
.details-actions button { padding:11px 18px !important; min-height:42px; }
.series-summary-actions { margin:18px 0 18px; padding:2px 0 6px; }
.series-summary-actions button:disabled { opacity:.45; cursor:not-allowed; }
.details-actions .download-action { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.action-icon { display:inline-block; width:20px; height:20px; flex:none; vertical-align:middle; }
.album-action { display:inline-flex; align-items:center; gap:8px; }
.album-action-symbol { display:inline-flex; align-items:center; justify-content:center; }
.album-action-symbol .action-icon { width:18px; height:18px; }

/* Playback track settings are available from one settings button rather than crowding transport. */
.player-transport .player-time.subtitle-control { display:none !important; }
.player-track-settings[hidden] { display:none !important; }
.player-track-settings {
  position:absolute; right:clamp(24px,4vw,64px); bottom:calc(100% + 14px); z-index:10;
  display:flex; flex-direction:column; gap:8px; min-width:235px; max-width:min(370px,88vw);
  padding:14px; border:1px solid rgba(255,255,255,.18); border-radius:18px;
  background:rgba(20,22,25,.94); box-shadow:0 18px 52px rgba(0,0,0,.42); backdrop-filter:blur(18px);
}
.player-track-settings label { color:rgba(255,255,255,.8); font-size:12px; }
.player-track-settings select { width:100%; min-width:0; height:40px; padding:0 11px; }
.player-control.video-settings-button { display:inline-flex; align-items:center; justify-content:center; }
.player-control.video-settings-button[hidden] { display:none !important; }
#playerVideoSettings svg { width:25px; height:25px; }
.player-shell.audio-mode .player-track-settings { display:none !important; }

/* Plain player icons—no frames on transport or close, even on hover/focus. */
.player-close, .player-close:hover, .player-close:focus, .player-close:focus-visible,
.player-transport button, .player-transport button:hover, .player-transport button:focus,
.player-transport button:focus-visible, .player-transport button:active, .player-transport button.active {
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
}
.player-close { padding:0 !important; border-radius:0 !important; }
.player-close:hover svg, .player-transport button:hover svg { opacity:.78; }

/* Local-only background file selector and controls. */
.local-background-row { align-items:flex-start !important; }
.local-background-controls { display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-width:min(360px,55%); }
#homeBackgroundFile { max-width:100%; color:rgba(255,255,255,.8); font:inherit; font-size:12px; }
#homeBackgroundFile::file-selector-button { margin-right:8px; padding:7px 10px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.09); color:white; font:inherit; cursor:pointer; }
.player-audio-screen.cover-gradient-background { background-size:250% 250%; animation:coverGradientDrift 24s ease-in-out infinite alternate; }
@keyframes coverGradientDrift { 0% { background-position:0% 10%; filter:saturate(.94); } 50% { background-position:100% 45%; filter:saturate(1.16); } 100% { background-position:40% 100%; filter:saturate(1.04); } }
@media(max-width:700px) {
  .series-details-summary { grid-template-columns:minmax(90px,32vw) minmax(0,1fr); gap:14px; }
  .player-track-settings { right:12px; min-width:205px; }
  .local-background-controls { max-width:60%; }
  .client-view.library-page .media-grid.continue-grid .media-card.continue-episode-card,
  .client-view.library-page .media-grid.recent-grid .media-card.continue-episode-card { grid-column:span 2; width:100%; }
  .poster-frame.episode-art { aspect-ratio:16/9 !important; }
}

.radio-card .poster-frame { background:#17191c !important; }
.radio-card img.radio-logo-missing { display:none !important; }
.episode-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.episode-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 12px; }
.episode-actions .action-icon { width:17px; height:17px; }
.library-action .action-icon { width:18px; height:18px; margin-right:7px; }
.library-action { display:inline-flex; align-items:center; }

/* Icon-only back controls across the app. */
.icon-only-back { font-size:0 !important; text-decoration:none !important; }
.icon-only-back { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.icon-only-back svg { width:24px; height:24px; display:block; }
#libraryLabel { display:none !important; }