:root {
  color-scheme: dark;
  --bg: #00143f;
  --bg-soft: #001b4d;
  --surface: #06345f;
  --surface-strong: #094474;
  --surface-warm: #102f55;
  --line: #23658e;
  --line-soft: #124a76;
  --text: #f6fbff;
  --muted: #97bdd6;
  --muted-strong: #cce2f2;
  --accent: #3ec6ff;
  --accent-strong: #149bd6;
  --coral: #ff8f66;
  --gold: #f4c95d;
  --good: #b6f55d;
  --danger: #ff6f7e;
  --sidebar-width: 232px;
  --sidebar-expanded-width: 232px;
  --topbar-height: 68px;
  --poster-width: 154px;
  --poster-height: 242px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

.player-sports-next{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid rgba(109,255,141,.55);border-radius:9px;background:rgba(8,75,54,.8);color:#d9fff2;font-weight:800;white-space:nowrap}.player-sports-next:hover,.player-sports-next:focus-visible{outline:0;border-color:#6dff8d;background:rgba(12,105,73,.92)}.player-sports-next svg{width:16px;height:16px}

/* TideView Roku visual language and feature-complete media surfaces. */
.brand-tide { color: #ff8f2f; }
.brand-view { color: #35d6e7; }
body { background: var(--bg); }
.topbar { border-bottom-color: #0f4d7b; background: rgba(0, 14, 49, 0.97); }
.search-box { border-color: #1b5e8c; background: #052a55; }
.search-box:focus-within { border-color: var(--focus, #75d8ff); background: #073866; box-shadow: 0 0 0 2px rgba(117,216,255,.14); }
.search-box kbd { border-color: #25678f; background: #001b43; }
.sidebar { border-right-color: #0d4b78; background: #001b4d; }
.nav-item:hover, .library-navigation button:hover, .sidebar-more-button:hover { background: #06345f; }
.nav-item.active { background: #054177; box-shadow: inset 3px 0 0 #6bc0e8; }
.content { background: #00143f; }
.primary-button { border-color: #3ec6ff; color: #001633; background: #3ec6ff; }
.primary-button:hover { background: #75d8ff; }
.secondary-button { border-color: #23658e; background: #05325e; }
.secondary-button:hover { border-color: #6fc4e8; background: #0a4978; }
.text-button:hover, .metadata-credit a { color: #9ceeff; }
.poster-frame { border-color: #12517f; background: #073b6b; }
.media-card-button:hover .poster-frame, .media-card-button:focus-visible .poster-frame { border-color: #75d8ff; box-shadow: 0 13px 32px rgba(0,0,0,.42), 0 0 0 2px rgba(58,169,216,.2); }
.poster-fallback { color: #cce2f2; background: #073b6b; }
.progress-track span { background: #35e8f7; }
.match-badge { color: #001633; background: #9ceeff; }
.watched-badge { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #001633; background: #b6f55d; }
.watched-badge svg { width: 14px; height: 14px; }
.channel-card { border-color: #15527c; background: #06345f; }
.channel-card:hover, .channel-card:focus-visible { border-color: #75d8ff; background: #094474; box-shadow: 0 0 0 2px rgba(58,169,216,.16); }
.channel-live { color: #ff9b72; }
.popover, .context-menu, .activity-drawer { border-color: #23658e; background: #00234f; }
.activity-item > span { color: #9ceeff; background: #064a78; }
.toast { border-color: #23658e; background: #073b6b; }

.sidebar-heading { align-items: center; color: #97bdd6; }
.sidebar-icon-button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #cce2f2; background: transparent; cursor: pointer; }
.sidebar-icon-button:hover, .sidebar-icon-button:focus-visible { outline: 0; color: #fff; background: #094474; }
.sidebar-icon-button svg { width: 16px; height: 16px; }
.library-nav-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; }
.library-nav-row > button:first-child { grid-template-columns: 20px minmax(0,1fr) auto; }
.library-unpin { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #97bdd6; background: transparent; cursor: pointer; opacity: 0; }
.library-nav-row:hover .library-unpin, .library-unpin:focus-visible { opacity: 1; }
.library-unpin:hover { color: #fff; background: #094474; }
.library-unpin svg { width: 14px; height: 14px; }
.sidebar-more-button { width: 100%; height: 38px; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 5px; color: #97bdd6; background: transparent; cursor: pointer; text-align: left; }
.sidebar-more-button svg { width: 17px; }
.sidebar-more-button small { font-size: 10px; }

.search-channel-results { margin-top: 38px; padding-top: 24px; border-top: 1px solid #124a76; }

.detail-view { margin: calc(-1 * (var(--topbar-height) + 34px)) -34px -60px; min-height: 100vh; padding-top: var(--topbar-height); background: #00143f; }
.detail-hero { position: relative; min-height: 590px; overflow: hidden; }
.detail-backdrop { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: center 22%; opacity: .5; filter: saturate(.9); transform: scale(1.01); }
.detail-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,14,49,.98) 0%, rgba(0,18,55,.88) 35%, rgba(0,25,73,.4) 70%, rgba(0,20,63,.72) 100%), linear-gradient(0deg, #00143f 0%, transparent 48%); }
.detail-back { position: absolute; z-index: 3; top: 22px; left: 30px; color: #f6fbff; background: rgba(0,14,49,.7); backdrop-filter: blur(8px); }
.detail-layout { position: relative; z-index: 2; min-height: 590px; max-width: 1320px; display: grid; grid-template-columns: 250px minmax(0,720px); align-items: start; gap: 42px; padding: 40px 58px 52px; }
.detail-poster-wrap { position: relative; width: 250px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid #6fc4e8; border-radius: 6px; background: #073b6b; box-shadow: 0 24px 60px rgba(0,0,0,.48); }
.detail-fallback { z-index: 0; }
.detail-poster { position: relative; z-index: 1; }
.detail-copy { align-self: start; padding-top: 30px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.detail-copy h1 { max-width: 800px; margin: 8px 0 14px; font-size: 46px; line-height: 1.08; font-weight: 760; }
.detail-meta { flex-wrap: wrap; gap: 7px; }
.detail-meta span { padding: 4px 8px; border: 1px solid rgba(169,216,232,.58); border-radius: 4px; color: #e7faff; background: rgba(0,30,78,.62); font-size: 11px; text-shadow: none; }
.detail-actions { flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.detail-overview { max-width: 720px; min-height: 0; margin: 22px 0 0; color: #e0eff8; font-size: 14px; line-height: 1.65; }
.detail-provider { max-width: 720px; margin-top: 17px; padding-top: 12px; border-top: 1px solid rgba(111,196,232,.36); color: #97bdd6; font-size: 10px; text-shadow: none; }
.detail-section { padding: 10px 58px 66px; }
.detail-empty { color: #97bdd6; }

.guide-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 1px 14px; scrollbar-width: thin; }
.live-heading-copy { min-width:0; display:flex; align-items:center; gap:22px; }
.live-heading-copy > div:first-child { min-width:190px; }
#liveView > .page-heading { align-items:center; margin-bottom:14px; }
#liveView .inline-search { width:clamp(180px, 16vw, 300px); }
.live-dvr-tabs { display:flex; gap:8px; overflow-x:auto; margin:0; padding:2px 1px; }
.live-dvr-tabs button { min-height:42px; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:0 15px; border:1px solid #1a5d88; border-radius:7px; color:#cce2f2; background:#042b53; font:700 13px/1 inherit; cursor:pointer; }
.live-dvr-tabs button:hover { border-color:#6fc4e8; background:#094474; }
.live-dvr-tabs button.active { border-color:#75d8ff; color:#001633; background:#75d8ff; }
.live-dvr-tabs svg { width:17px; height:17px; }
.guide-toolbar { min-width:0; display:flex; align-items:center; gap:12px; }
.guide-toolbar .guide-tabs { min-width:0; flex:1 1 auto; }
.guide-tools { flex:0 0 auto; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.guide-date-filter, .guide-epg-search { height:39px; display:flex; align-items:center; gap:8px; border:1px solid #1a5d88; border-radius:5px; color:#cce2f2; background:#05325e; }
.guide-date-filter { padding:0 9px; }
.guide-date-filter svg, .guide-epg-search svg { width:16px; flex:0 0 auto; color:#75d8ff; }
.guide-date-filter select { max-width:175px; border:0; outline:0; color:inherit; background:transparent; cursor:pointer; font-weight:700; }
.guide-date-filter option { color:#081426; background:#fff; }
.guide-epg-search { width:280px; padding:0 11px; }
.guide-epg-search input { min-width:0; flex:1; border:0; outline:0; color:#f6fbff; background:transparent; }
.guide-epg-search input::placeholder { color:#8fb7d2; }
.guide-theme-picker { min-height:39px; display:flex; align-items:center; gap:7px; padding:0 9px; border:1px solid var(--line); border-radius:7px; color:var(--muted-strong); background:var(--surface); white-space:nowrap; font-size:11px; font-weight:750; }
.guide-theme-picker svg { width:15px; height:15px; color:var(--accent); }
.guide-theme-picker select { min-width:100px; max-width:132px; padding:7px 16px 7px 2px; border:0; outline:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.guide-theme-picker option { color:#111; background:#fff; }
.guide-search-match { z-index:6; color:#fff !important; border:2px solid #b9f7ff !important; background:linear-gradient(180deg,#0b779b,#07516f) !important; box-shadow:inset 5px 0 0 #75f3ff, 0 0 0 2px rgba(117,243,255,.5), 0 0 18px rgba(54,217,255,.42) !important; }
.guide-search-muted { opacity:.24 !important; filter:grayscale(.85) !important; }
.search-match-badge { color:#00243a !important; background:#9af5ff !important; box-shadow:0 0 8px rgba(117,243,255,.55); }
.guide-time-lane span.past { color:#6f7f8c; background:#203245; }
.guide-program.past { opacity:.62; filter:saturate(.08); color:#a5afb7 !important; border-color:#465766 !important; background:linear-gradient(180deg,#30404d,#1d2b37) !important; box-shadow:inset 3px 0 0 #74818b !important; }
.guide-program.past em { color:#26313a; background:#929ca4; }
.guide-program.past.guide-search-match { opacity:1; filter:saturate(.18); color:#f2fbff !important; border:2px solid #b9f7ff !important; background:linear-gradient(180deg,#385665,#263f4d) !important; box-shadow:inset 5px 0 0 #75f3ff, 0 0 0 2px rgba(117,243,255,.48), 0 0 18px rgba(54,217,255,.34) !important; }
.guide-program.past.guide-search-match .search-match-badge { color:#00243a !important; background:#9af5ff !important; }
.live-dvr-panel { min-height:360px; }
.live-dvr-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.live-dvr-metric { padding:15px; border:1px solid #23658e; border-radius:8px; background:linear-gradient(145deg,#052e59,#022249); }
.live-dvr-metric span { display:block; color:#8fb7d2; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.live-dvr-metric strong { display:block; margin-top:5px; color:#f5fbff; font-size:25px; }
.live-dvr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:13px; }
.live-dvr-card { min-width:0; overflow:hidden; border:1px solid #23658e; border-radius:9px; background:#032654; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.live-dvr-art { height:142px; display:flex; align-items:flex-end; padding:12px; background:linear-gradient(160deg,#0a5681,#061b43); background-position:center; background-size:cover; }
.live-dvr-art span { padding:5px 8px; border-radius:5px; background:rgba(0,18,40,.86); color:#9eeaff; font-size:11px; font-weight:800; text-transform:uppercase; }
.live-dvr-copy { padding:13px; }
.live-dvr-copy strong { display:block; color:#f5fbff; font-size:16px; }
.live-dvr-copy small,.live-dvr-copy p { display:block; margin:5px 0 0; color:#9fbed3; line-height:1.4; }
.live-dvr-card-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.live-dvr-card-actions button { min-height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border:1px solid #28749f; border-radius:6px; color:#eaf8ff; background:#08436d; font-weight:700; cursor:pointer; }
.live-dvr-card-actions button.danger { border-color:#a33b57; background:#5d1730; }
.dvr-program-dialog { width:min(620px,calc(100vw - 30px)); }
.dvr-program-details { min-height:0; overflow-y:auto; padding:18px 20px 0; }
.dvr-program-episode-meta { width:max-content; max-width:100%; margin:0; padding:7px 10px; border:1px solid rgba(88,205,242,.42); border-radius:999px; color:#aeeeff; background:rgba(8,94,128,.28); font-size:12px; font-weight:800; letter-spacing:.035em; }
.dvr-program-overview { min-height:42px; margin:14px 0 0; color:#d1e4ef; font-size:13px; line-height:1.55; }
.dvr-destination-dialog { width:min(580px,calc(100vw - 30px)); }
.dvr-destination-dialog form { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.dvr-destination-dialog .dvr-admin-save-options { margin:18px 20px; }
.dvr-destination-dialog .dvr-series-actions { padding:0 20px 20px; }
.dvr-existing-status { display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border:1px solid rgba(81,190,235,.24); border-radius:12px; background:rgba(4,38,71,.52); color:#d7efff; }
.dvr-existing-status > i { width:20px; height:20px; flex:0 0 20px; margin-top:1px; color:#5fd3ff; }
.dvr-existing-status > span { display:grid; gap:3px; min-width:0; }
.dvr-existing-status strong { font-size:.9rem; color:#fff; }
.dvr-existing-status small { color:#a8c7da; line-height:1.35; }
.dvr-existing-status.is-checking > i { animation:dvr-status-spin 1s linear infinite; }
.dvr-existing-status.is-found { border-color:rgba(255,189,61,.5); background:rgba(93,57,0,.28); }
.dvr-existing-status.is-found > i { color:#ffc85a; }
.dvr-existing-status.is-series { border-color:rgba(74,199,255,.42); background:rgba(1,72,107,.26); }
.dvr-existing-status.is-clear { border-color:rgba(83,210,151,.4); background:rgba(7,88,58,.22); }
.dvr-existing-status.is-clear > i { color:#63dfa5; }
.dvr-existing-status.is-unavailable { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
@keyframes dvr-status-spin { to { transform:rotate(360deg); } }
.dvr-admin-save-options { margin-top:16px; padding:14px; border:1px solid #28749f; border-radius:8px; background:linear-gradient(145deg,#06365f,#02254d); }
.dvr-admin-save-options label { display:flex; flex-direction:column; gap:7px; color:#9eddf5; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.dvr-admin-save-options select { min-height:42px; padding:0 11px; border:1px solid #28749f; border-radius:6px; outline:0; color:#f6fbff; background:#001c44; font:700 14px/1 inherit; }
.dvr-admin-save-options small { display:block; margin-top:8px; color:#a9cadc; line-height:1.45; }
.dvr-program-actions { display:flex; flex-wrap:wrap; gap:9px; margin:18px 20px 20px; }
.dvr-program-actions button:disabled { opacity:.52; cursor:not-allowed; filter:saturate(.35); }
.dvr-series-dialog { width:min(680px,calc(100vw - 30px)); }
.dvr-series-options { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; overflow-y:auto; padding:19px 22px 22px; }
.dvr-series-field { min-width:0; display:flex; flex-direction:column; gap:7px; padding:14px; border:1px solid #17577f; border-radius:8px; background:#032b56; }
.dvr-series-field > span,.dvr-series-channel > span { color:#9eddf5; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.dvr-series-field input,.dvr-series-field select { width:100%; min-height:42px; padding:0 11px; border:1px solid #28749f; border-radius:6px; outline:0; color:#f6fbff; background:#001c44; font:700 14px/1 inherit; }
.dvr-series-field input:focus,.dvr-series-field select:focus { border-color:#75d8ff; box-shadow:0 0 0 2px rgba(117,216,255,.14); }
.dvr-series-field small,.dvr-series-channel small { color:#92b6ce; font-size:11px; line-height:1.45; }
.dvr-series-wide { grid-column:1 / -1; }
.dvr-series-channel { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid #17577f; border-radius:8px; background:linear-gradient(145deg,#06365f,#02254d); }
.dvr-series-channel strong { color:#f5fbff; font-size:15px; }
.dvr-series-channel-picker { max-height:360px; }
.dvr-series-all-channels { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 10px; padding:10px 12px; border:1px solid #28749f; border-radius:6px; background:#001c44; cursor:pointer; }
.dvr-series-all-channels input { width:18px; height:18px; grid-row:1 / 3; accent-color:#75d8ff; }
.dvr-series-all-channels strong { color:#f5fbff; font-size:14px; }
.dvr-series-all-channels small { margin:0; }
.dvr-series-channel-tools { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; }
.dvr-series-channel-tools input { min-width:0; min-height:38px; padding:0 10px; border:1px solid #28749f; border-radius:6px; outline:0; color:#f6fbff; background:#001c44; }
.dvr-series-channel-tools button { min-height:38px; padding:0 10px; border:1px solid #28749f; border-radius:6px; color:#dff5ff; background:#08436d; font-weight:700; cursor:pointer; }
.dvr-series-channel-tools button:hover { border-color:#75d8ff; background:#0a527f; }
.dvr-series-channel-tools button:disabled { opacity:.45; cursor:not-allowed; }
.dvr-series-channel-choices { min-height:96px; max-height:170px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; overflow-y:auto; padding:8px; border:1px solid #17577f; border-radius:6px; background:#001a3e; }
.dvr-series-channel-choice { min-width:0; display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:5px; color:#dceefa; background:#032b56; cursor:pointer; }
.dvr-series-channel-choice:hover { background:#08436d; }
.dvr-series-channel-choice input { width:16px; height:16px; flex:0 0 auto; accent-color:#75d8ff; }
.dvr-series-channel-choice span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.dvr-series-channel-picker.all-selected .dvr-series-channel-choices { opacity:.45; pointer-events:none; }
.dvr-series-channel-empty { grid-column:1 / -1; margin:8px; color:#8eb7ce; font-size:12px; }
.dvr-series-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:2px; }
.dvr-series-actions button { min-width:128px; justify-content:center; }
.guide-day-strip { flex:0 0 auto; min-height:43px; display:grid; grid-template-columns:repeat(7,minmax(96px,1fr)); gap:7px; margin:0 0 10px; overflow-x:auto; scrollbar-width:thin; }
.guide-day-strip button { min-width:96px; min-height:43px; display:flex; align-items:center; justify-content:center; gap:7px; padding:5px 9px; border:1px solid #1a5d88; border-radius:6px; color:#b9d6e8; background:#042d57; cursor:pointer; }
.guide-day-strip button strong { font-size:12px; }
.guide-day-strip button span { color:#83abc4; font-size:10px; font-weight:750; text-transform:uppercase; }
.guide-day-strip button:hover { border-color:#66c8ed; background:#08426f; }
.guide-day-strip button.active { border-color:#8ceaff; color:#001b31; background:#75d8ff; box-shadow:0 0 0 2px rgba(117,216,255,.18); }
.guide-day-strip button.active span { color:#074d6c; }
.guide-channel-heading.next-day { border-right-color:#75d8ff; background:linear-gradient(135deg,#06456e,#00305d); box-shadow:inset 4px 0 0 #75d8ff; }
.guide-channel-heading.next-day strong { color:#9af2ff; font-size:12px; }
.guide-tabs button { height: 39px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 13px; border: 1px solid #1a5d88; border-radius: 5px; color: #cce2f2; background: #05325e; cursor: pointer; }
.guide-tabs button:hover { border-color: #6fc4e8; background: #094474; }
.guide-tabs button.active { border-color: #75d8ff; color: #001633; background: #75d8ff; }
.guide-tabs svg { width: 16px; height: 16px; }
.guide-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 13px;
}
.guide-filter-chip {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(111,196,232,.34);
  border-radius: 4px;
  color: #cce2f2;
  background: rgba(5,50,94,.72);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}
.guide-filter-chip span {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.guide-filter-chip.active { color: #fff; border-color: color-mix(in srgb, currentColor 55%, #75d8ff 45%); background: rgba(6,52,95,.95); }
.guide-filter-chip:not(.active) { color: #d5eef9; border-color: rgba(117,216,255,.26); background: rgba(3,35,68,.72); opacity: 1; }
.guide-shell { position: relative; min-height: 360px; overflow: hidden; border: 1px solid #23658e; border-radius: 7px; background: #01224f; }
.guide-loading { position: absolute; z-index: 30; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(0,18,55,.92); }
.guide-scroll { max-height: calc(100vh - 250px); min-height: 360px; overflow: auto; }
.guide-time-row, .guide-row { width: 1140px; display: grid; grid-template-columns: 180px 960px; }
.guide-time-row { position: sticky; z-index: 20; top: 0; height: 48px; border-bottom: 1px solid #23658e; background: #002e5e; }
.guide-channel-heading { position: sticky; z-index: 24; left: 0; display: grid; align-content: center; padding: 0 13px; border-right: 1px solid #23658e; background: #002e5e; }
.guide-channel-heading strong { font-size: 11px; }
.guide-channel-heading span { margin-top: 2px; color: #97bdd6; font-size: 9px; }
.guide-time-lane { width: 960px; display: grid; grid-template-columns: repeat(8,120px); }
.guide-time-lane span { display: flex; align-items: center; padding-left: 10px; border-left: 1px solid rgba(111,196,232,.26); color: #cce2f2; font-size: 10px; }
.guide-row { height: 74px; border-bottom: 1px solid #124a76; }
.guide-channel { position: sticky; z-index: 10; left: 0; width: 180px; display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 11px; border: 0; border-right: 1px solid #23658e; color: #f6fbff; background: #002e5e; cursor: pointer; text-align: left; }
.guide-channel:hover, .guide-channel:focus-visible { outline: 0; background: #054177; box-shadow: inset 3px 0 0 #75d8ff; }
.guide-logo { width: 52px; height: 50px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #f6fbff; }
.guide-logo img { width: 100%; height: 100%; object-fit: contain; }
.guide-logo b { color: #064a78; font-size: 10px; }
.guide-channel strong, .guide-channel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-channel strong { font-size: 12px; }
.guide-channel small { margin-top: 4px; color: #97bdd6; font-size: 9px; }
.guide-program-lane { position: relative; width: 960px; height: 74px; background: #06345f; }
.guide-program { position: absolute; top: 4px; bottom: 4px; min-width: 34px; display: grid; align-content: center; gap: 4px; overflow: hidden; padding: 0 10px; border: 1px solid #1d608c; border-radius: 4px; color: #f6fbff; background: #094474; cursor: pointer; text-align: left; }
.guide-program:hover, .guide-program:focus-visible { z-index: 4; outline: 0; border-color: #e7faff; background: #1b6d9c; box-shadow: 0 0 0 2px rgba(117,216,255,.22); }
.guide-program.current { border-color: #b6f55d; box-shadow: inset 3px 0 0 #b6f55d; }
.guide-program strong, .guide-program span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-program strong { font-size: 11px; }
.guide-program { grid-template-columns: minmax(0, 1fr); }
.guide-program > strong, .guide-program > span {
  min-width: 0;
  margin-left: clamp(0px, calc(var(--guide-scroll-left, 0px) - var(--guide-program-start, 0px)), 100%);
}
.guide-program span { display: flex; align-items: center; gap: 6px; color: #cce2f2; font-size: 9px; }
.guide-program em {
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: 3px;
  color: #001633;
  background: #b6f55d;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}
.guide-program em.plain-badge {
  color: #cce2f2;
  background: rgba(204,226,242,.16);
  box-shadow: none;
}
.guide-program.guide-recording, .guide-filter-chip.guide-recording { color: #ff4f8f; }
.guide-program.guide-news, .guide-filter-chip.guide-news { color: #36d9ff; }
.guide-program.guide-sports, .guide-filter-chip.guide-sports { color: #6dff8d; }
.guide-program.guide-movie, .guide-filter-chip.guide-movie { color: #ffb54a; }
.guide-filter-chip.guide-new { color: #d8ff58; }
.guide-program.guide-recording { border-color: rgba(255,79,143,.74); background: linear-gradient(180deg, rgba(107,16,51,.96), rgba(46,7,26,.98)); box-shadow: inset 4px 0 0 #ff4f8f; }
.guide-program.guide-news { border-color: rgba(54,217,255,.56); background: linear-gradient(180deg, rgba(7,78,126,.96), rgba(4,37,76,.98)); box-shadow: inset 4px 0 0 #36d9ff; }
.guide-program.guide-sports { border-color: rgba(109,255,141,.52); background: linear-gradient(180deg, rgba(17,99,60,.96), rgba(8,48,37,.98)); box-shadow: inset 4px 0 0 #6dff8d; }
.guide-program.guide-movie { border-color: rgba(255,181,74,.58); background: linear-gradient(180deg, rgba(129,72,18,.96), rgba(63,32,10,.98)); box-shadow: inset 4px 0 0 #ffb54a; }
.guide-program.guide-new:not(.guide-recording):not(.guide-news):not(.guide-sports):not(.guide-movie) { border-color: rgba(216,255,88,.56); box-shadow: inset 4px 0 0 #d8ff58; }
.guide-program.plain,
.guide-program.guide-recording.plain,
.guide-program.guide-news.plain,
.guide-program.guide-sports.plain,
.guide-program.guide-movie.plain,
.guide-program.guide-new.plain {
  border-color: #1d608c;
  color: #f6fbff;
  background: #094474;
  box-shadow: none;
  opacity: 1;
  filter: none;
}
.empty-program { opacity: .68; }
.guide-now-line { position: absolute; z-index: 5; top: 0; bottom: 0; width: 2px; background: #ff8f66; pointer-events: none; }

.utility-dialog, .trailer-dialog { width: min(860px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 1px solid #23658e; border-radius: 8px; color: #f6fbff; background: #00234f; box-shadow: 0 30px 90px rgba(0,0,0,.62); }
.utility-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.dialog-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 15px 14px 20px; border-bottom: 1px solid #124a76; background: #001b43; }
.dialog-heading h2 { margin: 2px 0 0; font-size: 20px; }
.dialog-heading small { display: block; max-width: 680px; margin-top: 4px; overflow: hidden; color: #97bdd6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid #124a76; background: #001b43; }
.dialog-loading { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 14px; color: #cce2f2; }
.compact-empty { min-height: 190px; }

.file-details-content { overflow-y: auto; padding: 18px; }
.file-summary { padding-bottom: 17px; border-bottom: 1px solid #124a76; }
.file-summary > strong, .file-summary > code { display: block; }
.file-summary > strong { font-size: 15px; }
.file-summary > code { margin-top: 7px; overflow-wrap: anywhere; color: #97bdd6; font-size: 10px; }
.file-summary dl, .stream-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px 20px; margin: 15px 0 0; }
.file-summary dl div, .stream-card dl div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(18,74,118,.62); }
dt { color: #97bdd6; font-size: 10px; } dd { margin: 0; color: #f6fbff; font-size: 11px; overflow-wrap: anywhere; }
.stream-list { display: grid; gap: 12px; padding-top: 16px; }
.stream-card { padding: 14px; border: 1px solid #15527c; border-radius: 6px; background: #052c57; }
.stream-title { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.stream-title svg { width: 17px; color: #3ec6ff; }
.stream-title span { padding: 3px 6px; border-radius: 4px; color: #001633; background: #9ceeff; font-size: 8px; font-weight: 800; }

.match-search { display: grid; grid-template-columns: minmax(0,1fr) 100px auto auto; gap: 9px; align-items: end; padding: 15px 18px; border-bottom: 1px solid #124a76; }
.match-search label, .form-field { display: grid; gap: 6px; color: #97bdd6; font-size: 10px; }
.match-search input, .form-field input, .form-field textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #23658e; border-radius: 5px; outline: 0; color: #f6fbff; background: #052c57; resize: vertical; }
.match-search input:focus, .form-field input:focus, .form-field textarea:focus { border-color: #75d8ff; box-shadow: 0 0 0 2px rgba(117,216,255,.13); }
.match-search .match-tmdb-id { grid-column: 1 / 3; }
#automaticMatchButton { grid-column: 3 / 5; }
.match-results { max-height: 430px; overflow-y: auto; padding: 10px 18px; }
.match-result { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #124a76; }
.match-poster { width: 70px; height: 104px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #073b6b; }
.match-poster img { width: 100%; height: 100%; object-fit: cover; }
.match-poster svg { color: #97bdd6; }
.match-result > span:nth-child(2) { min-width: 0; }
.match-result strong, .match-result small { display: block; }
.match-result small { margin-top: 5px; color: #9ceeff; font-size: 9px; }
.match-result-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.provider-badge { padding: 3px 6px; border: 1px solid #2876a5; border-radius: 4px; color: #bcecff; background: #073b6b; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.match-result .match-reason { color: #bdd2e1; line-height: 1.4; }
.match-result p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: #cce2f2; font-size: 10px; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.manual-match-entry { border-top: 1px solid #124a76; padding: 13px 18px 18px; }
.manual-match-entry > .text-button { color: #9ceeff; }
.manual-metadata-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #124a76; }
.manual-form-grid { display: grid; grid-template-columns: minmax(0,1fr) 110px; gap: 12px; }
.manual-form-grid .full { grid-column: 1 / -1; }
.manual-metadata-form .dialog-footer { margin: 14px -18px -18px; }

.library-manager-list, .folder-list { min-height: 190px; max-height: 510px; overflow-y: auto; padding: 10px 18px; }
.library-dialog[open] { height: min(760px, calc(100vh - 28px)); }
.library-manager-scroll { min-height: 0; overflow-y: auto; }
.library-manager-scroll > .library-manager-list { min-height: 0; max-height: none; overflow: visible; }
.library-manager-scroll .discovery-manager .library-manager-list { min-height: 0; max-height: none; overflow: visible; padding-top: 4px; }
.library-manager-scroll .discovery-manager .library-manager-row { min-height: 56px; padding: 8px 0; }
.library-manager-scroll .home-order-manager .library-manager-list { min-height: 0; max-height: none; overflow: visible; padding-top: 4px; }
.library-manager-scroll .home-order-manager .library-manager-row { min-height: 52px; padding: 7px 8px; }
.library-manager-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 70px; border-bottom: 1px solid #124a76; }
.home-order-row { grid-template-columns: 24px 42px minmax(0,1fr) auto; border-radius: 6px; cursor: grab; }
.home-order-row.dragging { opacity: .52; }
.home-order-row.drag-over { outline: 1px solid #75d8ff; background: #06345f; }
.home-order-row.disabled { cursor: default; opacity: .58; }
.home-order-row.locked { cursor: not-allowed; }
.drag-handle {
  width: 24px;
  height: 38px;
  display: grid;
  place-items: center;
  border-left: 3px solid #75d8ff;
  color: #75d8ff;
  background: linear-gradient(180deg, rgba(117,216,255,.18), rgba(255,143,47,.12));
}
.drag-handle svg { width: 17px; }
.library-manager-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; color: #3ec6ff; background: #064a78; }
.library-manager-icon svg { width: 19px; }
.library-manager-row > span:nth-child(2) { min-width: 0; }
.library-manager-row strong, .library-manager-row small, .library-manager-row em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-manager-row small { margin-top: 4px; color: #97bdd6; font-size: 9px; }
.library-manager-row em { margin-top: 4px; color: #9ceeff; font-size: 9px; font-style: normal; }
.library-manager-row .icon-button.active { border-color: #75d8ff; color: #001633; background: #75d8ff; }
.library-manager-actions { display: flex; align-items: center; gap: 6px; }
.library-form { overflow-y: auto; padding: 20px; }
.library-type-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.library-type-picker legend { margin-bottom: 9px; color: #97bdd6; font-size: 10px; }
.library-type-picker input { position: absolute; opacity: 0; }
.library-type-picker span { min-height: 86px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px solid #23658e; border-radius: 6px; color: #cce2f2; background: #052c57; cursor: pointer; }
.library-type-picker svg { width: 22px; }
.library-type-picker input:checked + span { border-color: #75d8ff; color: #001633; background: #75d8ff; }
.library-form > .form-field { margin-top: 13px; }
.folder-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.library-form > .dialog-footer { margin: 20px -20px -20px; }
.folder-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid #124a76; }
.folder-list button { width: 100%; min-height: 54px; display: grid; grid-template-columns: 24px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-bottom: 1px solid #124a76; color: #f6fbff; background: transparent; cursor: pointer; text-align: left; }
.folder-list button:hover, .folder-list button:focus-visible { outline: 0; background: #073b6b; }
.folder-list button > svg:first-child { color: #3ec6ff; }
.folder-list button span { min-width: 0; }
.folder-list button strong, .folder-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-list button small { margin-top: 4px; color: #97bdd6; font-size: 9px; }

.trailer-dialog[open] { display: grid; grid-template-rows: 58px minmax(0,1fr) 42px; height: min(650px,calc(100vh - 28px)); }
.trailer-dialog.local-trailer[open] { grid-template-rows: 58px minmax(0,1fr); }
.trailer-dialog iframe { width: 100%; height: 100%; border: 0; background: #000; }
.trailer-dialog video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.trailer-status { display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; color: var(--muted-strong); background: #000; text-align: center; font-size: 15px; }
.youtube-source { display: flex; align-items: center; justify-content: center; color: #9ceeff; background: #001b43; font-size: 11px; text-decoration: none; }
.player-dialog { border-color: #23658e; background: #000; }
.player-topbar { background: #001b43; }
.player-status { background: #000; }
.spinner { border-color: #124a76; border-top-color: #3ec6ff; }
.mini-spinner { width: 16px; height: 16px; border-width: 2px; }

@media (max-width: 900px) {
  .detail-view { margin-right: -24px; margin-left: -24px; }
  .detail-layout { grid-template-columns: 190px minmax(0,1fr); gap: 28px; padding: 38px 32px 42px; }
  .detail-poster-wrap { width: 190px; }
  .detail-copy h1 { font-size: 38px; }
  .detail-section { padding-right: 32px; padding-left: 32px; }
  .match-search { grid-template-columns: minmax(0,1fr) 92px; }
  .match-search button { width: 100%; }
  .match-search .match-tmdb-id, #automaticMatchButton { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .detail-view { margin: calc(-1 * (var(--topbar-height) + 25px)) -16px -48px; }
  .detail-hero { min-height: 0; }
  .detail-backdrop { opacity: .38; background-position: center top; }
  .detail-shade { background: linear-gradient(0deg, #00143f 0%, rgba(0,20,63,.9) 48%, rgba(0,14,49,.56) 100%); }
  .detail-back { top: 14px; left: 14px; }
  .detail-layout { min-height: 0; grid-template-columns: 118px minmax(0,1fr); align-items: end; gap: 17px; padding: 58px 16px 30px; }
  .detail-layout .detail-copy { align-self: end; padding-top: 0; }
  .detail-poster-wrap { width: 118px; align-self: end; }
  .detail-copy h1 { margin-top: 6px; font-size: 28px; }
  .detail-meta span { font-size: 9px; }
  .detail-actions { grid-column: 1 / -1; }
  .detail-overview, .detail-provider { grid-column: 1 / -1; }
  .detail-section { padding: 14px 16px 48px; }
  .guide-scroll { max-height: calc(100vh - 225px); }
  .guide-time-row, .guide-row { grid-template-columns: 150px 960px; width: 1110px; }
  .guide-channel { width: 150px; grid-template-columns: 42px minmax(0,1fr); padding: 8px; }
  .guide-logo { width: 42px; height: 42px; }
  .guide-channel-heading { padding-left: 9px; }
  .match-result { grid-template-columns: 54px minmax(0,1fr); }
  .match-poster { width: 54px; height: 81px; }
  .match-result .primary-button { grid-column: 2; justify-self: start; }
  .file-summary dl, .stream-card dl { grid-template-columns: 1fr; }
  .library-type-picker { grid-template-columns: 1fr; }
  .library-type-picker span { min-height: 58px; grid-template-columns: 24px auto; }
}

/* Shared per-user navigation and favorites. */
.sidebar-heading { gap: 7px; }
.sidebar-heading > span { margin-right: auto; }
.sidebar-heading > small { color: #75d8ff; font-size: 9px; }
.library-nav-row { grid-template-columns: minmax(0,1fr) 30px; }
.library-nav-row > button:first-child { min-width: 0; }
.nav-order-controls { height: 38px; display: grid; grid-template-rows: 1fr 1fr; opacity: .22; transition: opacity 120ms ease; }
.library-nav-row:hover .nav-order-controls, .nav-order-controls:focus-within { opacity: 1; }
.nav-order-controls button { width: 28px; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 3px; color: #97bdd6; background: transparent; cursor: pointer; }
.nav-order-controls button:hover, .nav-order-controls button:focus-visible { color: #fff; background: #094474; outline: 0; }
.nav-order-controls button:disabled { opacity: .2; cursor: default; }
.nav-order-controls svg { width: 13px; height: 13px; }
.library-navigation [data-view].active { color: #f6fbff; background: #054177; box-shadow: inset 3px 0 0 #75d8ff; }

.channel-card-main { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.channel-card:focus-within { border-color: #75d8ff; outline: 0; box-shadow: 0 0 0 2px #e7faff, 0 0 22px rgba(58,169,216,.72), inset 0 1px 0 rgba(255,255,255,.16); }
.channel-favorite, .guide-favorite { display: grid; place-items: center; border: 1px solid rgba(255,91,104,.7); color: #ff5b68; background: rgba(3,10,24,.86); cursor: pointer; }
.channel-favorite { position: absolute; z-index: 5; top: 7px; left: 7px; width: 27px; height: 27px; border-radius: 50%; }
.channel-favorite svg, .guide-favorite svg { width: 15px; height: 15px; }
.channel-favorite.active, .guide-favorite.active { color: #fff; background: #e50920; }
.channel-favorite.active svg, .guide-favorite.active svg { fill: currentColor; }
.channel-logo, .channel-logo img, .guide-logo, .guide-logo img { margin: auto; object-position: 50% 50%; }
.channel-logo img, .guide-logo img { display: block; place-self: center; }

.guide-channel-cell { position: sticky; z-index: 10; left: 0; width: var(--guide-channel-width); height: 74px; background: #002e5e; }
.guide-channel-cell .guide-channel { position: relative; z-index: 1; left: auto; width: 100%; height: 100%; padding-right: 38px; }
.guide-favorite { position: absolute; z-index: 3; right: 7px; top: 7px; width: 25px; height: 25px; border-radius: 50%; }
.guide-row + .guide-row .guide-channel-cell { border-top: 1px solid rgba(18,74,118,.62); }

.cast-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 17px; }
.cast-card { min-width: 0; text-align: center; }
.cast-card img, .cast-avatar { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto; border: 1px solid rgba(117,216,255,.34); border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #052c57; }
.cast-card strong, .cast-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-card strong { margin-top: 8px; font-size: 11px; }
.cast-card span { margin-top: 3px; color: #97bdd6; font-size: 9px; }

/* Compact sidebar ordering, TideView favorites, and multi-folder libraries. */
.sidebar, .sidebar-section, .library-navigation { min-width: 0; overflow-x: hidden; }
.sidebar-section {
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 240, 246, .72) transparent;
  scrollbar-gutter: stable;
}
.sidebar-section::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  display: block;
}
.sidebar-section::-webkit-scrollbar-track { background: transparent; }
.sidebar-section::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(225, 240, 246, .56);
}
.sidebar-section:hover::-webkit-scrollbar-thumb,
.sidebar-section:focus-within::-webkit-scrollbar-thumb { background: rgba(225, 240, 246, .82); }
.sidebar-collapsed .sidebar-section { scrollbar-color: rgba(225, 240, 246, .28) transparent; }
.sidebar-collapsed .sidebar:not(:hover) .sidebar-section::-webkit-scrollbar-thumb { background: rgba(225, 240, 246, .24); }
.sidebar-collapsed .sidebar:hover .sidebar-section { scrollbar-color: rgba(225, 240, 246, .72) transparent; }
.library-nav-row { grid-template-columns: minmax(0, 1fr) 20px; width: 100%; min-width: 0; }
.library-nav-row > button:first-child { width: 100%; min-width: 0; }
.nav-order-controls { display: none; }
.nav-drag-handle { width: 20px; height: 34px; display: grid; place-items: center; color: rgba(151,189,214,.35); cursor: grab; opacity: 0; transition: color 120ms ease, opacity 120ms ease; }
.library-nav-row:hover .nav-drag-handle, .nav-drag-handle:focus-visible { opacity: 1; color: #97bdd6; }
.nav-drag-handle:active { cursor: grabbing; }
.nav-drag-handle svg { width: 14px; height: 14px; }
.library-nav-row.dragging { opacity: .48; }
.library-nav-row.drag-over { box-shadow: inset 0 -2px 0 #75d8ff; }
.library-navigation [data-library-id].active { color: #f6fbff; background: #054177; box-shadow: inset 3px 0 0 #75d8ff; }

.home-nav-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 4px; }
.home-nav-row .sidebar-icon-button { width: 32px; height: 32px; }
.primary-nav { padding-bottom: 0; }
.sidebar-section { padding-top: 0; }
.library-nav-row { display: block; cursor: grab; }
.library-nav-row:active { cursor: grabbing; }
.library-navigation button { grid-template-columns: 20px minmax(0, 1fr); }
.nav-drag-handle { display: none; }

.channel-favorite, .guide-favorite {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #f04464;
  background: transparent;
  box-shadow: none;
}
.channel-favorite { top: 17px; right: 25px; left: auto; width: 24px; height: 24px; }
.guide-favorite { top: 7px; right: 8px; width: 24px; height: 24px; }
.channel-favorite:hover, .channel-favorite:focus-visible, .guide-favorite:hover, .guide-favorite:focus-visible { outline: 0; filter: drop-shadow(0 0 5px rgba(240,68,100,.72)); transform: scale(1.08); }
.channel-favorite img, .guide-favorite img { width: 19px; height: 19px; display: block; object-fit: contain; filter: brightness(0) saturate(100%) invert(38%) sepia(96%) saturate(1750%) hue-rotate(319deg) brightness(97%) contrast(94%); opacity: .78; }
.channel-favorite.active, .guide-favorite.active { color: #f04464; background: transparent; }
.channel-favorite.active img, .guide-favorite.active img { width: 21px; height: 21px; opacity: 1; }

.channel-logo-plate { display: grid; place-items: center; }
.channel-logo { position: relative; inset: auto; width: 84%; height: 78%; display: grid; place-items: center; margin: auto; }
.channel-logo img { width: 100%; height: 100%; display: block; place-self: center; object-fit: contain; object-position: center center; }
.guide-logo { display: grid; place-items: center; }
.guide-logo img { width: 100%; height: 100%; display: block; place-self: center; object-fit: contain; object-position: center center; }

.library-manager-row { align-items: start; padding: 12px 0; }
.library-manager-copy { min-width: 0; }
.library-manager-copy > strong, .library-manager-copy > em { display: block; }
.library-manager-copy > em { margin-top: 3px; color: #9ceeff; font-size: 9px; font-style: normal; }
.library-path-list { display: grid; gap: 5px; margin-top: 9px; }
.library-path-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; gap: 5px; padding: 5px 5px 5px 8px; border: 1px solid rgba(35,101,142,.58); border-radius: 4px; color: #b9d8e9; background: rgba(0,27,67,.64); }
.library-path-row > span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.library-path-remove { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 3px; color: #97bdd6; background: transparent; cursor: pointer; }
.library-path-remove:hover, .library-path-remove:focus-visible { outline: 0; color: #fff; background: #8f2944; }
.library-path-remove svg { width: 13px; height: 13px; }
.library-manager-actions { padding-top: 1px; }

@media (max-width: 480px) {
  .detail-layout { display: grid; grid-template-columns: 100px minmax(0,1fr); }
  .detail-poster-wrap { width: 100px; float: none; margin: 0; }
  .detail-copy h1 { font-size: 24px; }
  .detail-actions { padding-top: 0; }
  .detail-actions .primary-button, .detail-actions .secondary-button { flex: 0 1 auto; font-size: 10px; }
  .manual-form-grid { grid-template-columns: 1fr; }
  .manual-form-grid .full { grid-column: auto; }
  .match-search { grid-template-columns: 1fr; }
  .folder-input-row { grid-template-columns: 1fr; }
}

/* Final Tide Blue overrides must follow the original component rules. */
.brand-tide { color: #ff8f2f; }
.brand-view { color: #35d6e7; }
.topbar { border-bottom-color: #0f4d7b; background: rgba(0, 14, 49, 0.97); }
.search-box { border-color: #1b5e8c; background: #052a55; }
.search-box:focus-within { border-color: #75d8ff; background: #073866; box-shadow: 0 0 0 2px rgba(117,216,255,.14); }
.search-box kbd { border-color: #25678f; background: #001b43; }
.sidebar { border-right-color: #0d4b78; background: #001b4d; }
.nav-item:hover, .library-navigation button:hover, .sidebar-more-button:hover { background: #06345f; }
.nav-item.active { background: #054177; box-shadow: inset 3px 0 0 #6bc0e8; }
.library-navigation button.active { color: #9ceeff; background: rgba(62,198,255,.1); }
.sidebar-heading { color: #97bdd6; }
.primary-button { border-color: #3ec6ff; color: #001633; background: #3ec6ff; }
.primary-button:hover { background: #75d8ff; }
.secondary-button { border-color: #23658e; background: #05325e; }
.secondary-button:hover { border-color: #6fc4e8; background: #0a4978; }

.search-box { grid-template-columns: 18px minmax(0, 1fr); }
.search-box kbd { display: none !important; }
.primary-nav { gap: 2px; padding-top: 6px; }
.sidebar-section { padding-top: 0; }
.detail-copy { padding-top: 6px; }
.detail-layout { padding-top: 22px; }
.detail-section:first-of-type { margin-top: -34px; }
.context-menu, .toast { border-color: #23658e; background: #00234f; }

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

button, input, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
.is-hidden { display: none !important; }

.topbar {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto 0;
  height: var(--topbar-height);
  display: grid;
  grid-template-columns: minmax(220px, var(--sidebar-width)) minmax(260px, 590px) 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(14, 17, 16, 0.97);
  backdrop-filter: blur(16px);
}

.topbar-start, .topbar-actions, .page-actions, .collection-controls, .detail-actions, .detail-meta {
  display: flex;
  align-items: center;
}

.topbar-start { gap: 10px; }

.media-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-decoration: none;
}

.media-brand img { width: 34px; height: 34px; object-fit: contain; }
.media-brand span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.media-brand strong { font-size: 18px; font-weight: 750; }
.media-brand small { color: var(--accent); font-size: 10px; font-weight: 800; }

.search-box {
  height: 40px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color 140ms ease, background 140ms ease;
}

.search-box:focus-within { border-color: var(--accent); background: #1b211d; }
.search-box svg { width: 18px; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
.search-box input::placeholder { color: #7e8880; }
.search-box kbd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: #111512; font-size: 11px; }

.topbar-actions { justify-content: flex-end; gap: 6px; min-width: 0; position: relative; }
.web-quality-menu[hidden] { display: none; }
.web-quality-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  right: 0;
  width: min(350px, calc(100vw - 24px));
  padding: 18px;
  border: 1px solid rgba(118, 206, 247, .3);
  border-radius: 16px;
  background: #071c31;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
  color: #f3faff;
}
.web-quality-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.web-quality-heading strong { font-size: 17px; }
.web-quality-heading small { color: #70d7f8; font-size: 11px; text-align: right; }
.web-quality-menu p { margin: 9px 0 15px; color: #bdd1e1; font-size: 13px; line-height: 1.45; }
.web-quality-menu label { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 6px; font-size: 13px; font-weight: 700; }
.web-quality-menu label span { color: #92adc3; font-size: 11px; font-weight: 500; }
.web-quality-menu select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid #42637a; border-radius: 9px; background: #102e48; color: #f3faff; font: inherit; }
.web-quality-note { display: block; margin-top: 15px; color: #a8c0d1; font-size: 11px; line-height: 1.45; }
.topbar .topbar-actions {
  justify-self: end;
  padding: 4px 6px 4px 12px;
  gap: 6px;
  border-radius: 16px;
  border: 1px solid rgba(145, 208, 244, .2);
  background: linear-gradient(135deg, rgba(13, 38, 62, .94), rgba(4, 18, 36, .94));
  color: #f5f9ff;
  box-shadow: 0 8px 24px rgba(0, 7, 20, .22), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
}
.topbar .topbar-actions .icon-button, .topbar .topbar-actions .profile-button { color: #f5f9ff; }
.topbar .topbar-actions .icon-button { border-radius: 10px; background: rgba(133, 201, 239, .06); }
.topbar .topbar-actions .icon-button:hover,
.topbar .topbar-actions .profile-button:hover { background: rgba(91, 191, 243, .16); }
.topbar .topbar-actions :is(.icon-button, .profile-button):focus-visible { outline: 2px solid #65d5ff; outline-offset: 2px; }
.topbar .topbar-actions .server-status { margin-right: 4px; color: #c9deeb; font-size: 11px; font-weight: 600; }
.topbar .topbar-actions .profile-button { margin-left: 3px; border-radius: 11px; border-color: rgba(145, 208, 244, .12); background: rgba(133, 201, 239, .07); }
.topbar .topbar-actions .profile-copy { text-align: left; }
.topbar .topbar-actions .profile-copy small { color: #9eb9cc; }
.topbar .topbar-actions .avatar { box-shadow: 0 0 0 2px rgba(97, 205, 250, .24); }
#homeHeroSection > #homeHeroPositionButton { position: absolute; z-index: 8; right: 24px; bottom: 20px; left: auto; top: auto; width: 34px; height: 34px; padding: 8px; border-radius: 9px; color: #f5f9ff; background: rgba(3, 13, 30, .82); border: 1px solid rgba(180, 212, 245, .3); }
.hero-position-toggle svg { width: 17px; height: 17px; }
#homeHeroSection > #homeHeroPositionEditor { position: absolute; z-index: 9; right: 24px; bottom: 64px; left: auto; top: auto; width: min(390px, calc(100% - 48px)); padding: 14px; border-radius: 12px; background: rgba(3, 13, 30, .94); border: 1px solid rgba(180, 212, 245, .3); color: #f5f9ff; cursor: default; }
.hero-position-editor[hidden] { display: none; }
.hero-position-editor label { display: grid; grid-template-columns: 106px 1fr 40px; align-items: center; gap: 10px; margin: 10px 0; }
.hero-position-editor input { width: 100%; accent-color: #28b9ed; }
.hero-position-editor small { display: block; margin-top: 8px; }
.hero-position-editor .hero-poster-choice { display: flex; gap: 10px; }
.hero-position-editor .hero-poster-choice input { width: 18px; height: 18px; }
#homeHeroSection.hero-poster-hidden > .home-hero-poster { display: none; }

.server-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 6px;
  color: var(--muted-strong);
  font-size: 12px;
  white-space: nowrap;
}
.server-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px rgba(93, 221, 141, 0.6); }
.server-status.offline span { background: var(--danger); box-shadow: none; }
.server-status.checking span { background: #f4b942; box-shadow: 0 0 10px rgba(244,185,66,.65); }

.icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--muted-strong);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.icon-button:hover, .icon-button:focus-visible { color: var(--text); background: var(--surface-strong); outline: 0; }
.icon-button svg { width: 19px; height: 19px; }
.icon-button.bordered { border: 1px solid var(--line); }
.mobile-menu-button { display: none; }
.edge-navigation-hint { display:none; }

.activity-count {
  position: absolute;
  top: 1px;
  right: -11px;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border-radius: 8px;
  color: #0b1210;
  background: var(--coral);
  font-size: 9px;
  font-weight: 800;
}
#activityButton.has-activity { color: var(--accent); }
#activityButton.has-activity::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid transparent;
  border-top-color: #32d4c5;
  border-right-color: #32d4c5;
  border-bottom-color: #ff9234;
  border-radius: 50%;
  pointer-events: none;
  animation: activity-ring-spin 3.2s linear infinite;
}
#activityButton.has-activity::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  border-top-color: #ff9234;
  border-left-color: #ff9234;
  border-bottom-color: #32d4c5;
  border-radius: 50%;
  pointer-events: none;
  animation: activity-ring-spin-reverse 2.4s linear infinite;
}
#activityButton .activity-core { z-index: 1; display: grid; place-items: center; width: 19px; height: 19px; transform-origin: center; }
#activityButton.has-activity .activity-core { color: #dffdfa; animation: activity-orbit 1.8s linear infinite; filter: drop-shadow(0 0 3px #32d4c5) drop-shadow(0 0 3px rgba(255, 146, 52, 0.72)); }
#activityButton .activity-count { z-index: 2; }
@keyframes activity-orbit { to { transform: rotate(360deg); } }
@keyframes activity-ring-spin { to { transform: rotate(360deg); } }
@keyframes activity-ring-spin-reverse { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  #activityButton.has-activity::before,
  #activityButton.has-activity::after,
  #activityButton.has-activity .activity-core { animation: none; }
}

.profile-button {
  max-width: 190px;
  height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  margin-left: 4px;
  padding: 0 8px 0 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.profile-button:hover, .profile-button[aria-expanded="true"] { border-color: var(--line); background: var(--surface); }
.profile-button > svg { width: 15px; color: var(--muted); }
.profile-copy { min-width: 0; display: grid; }
.profile-copy strong, .profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #091513;
  background: var(--accent);
  font-size: 11px;
  font-weight: 850;
  background-position: center;
  background-size: cover;
}

.sidebar {
  position: fixed;
  z-index: 50;
  top: var(--topbar-height);
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: var(--bg-soft);
  transition: width 170ms ease, box-shadow 170ms ease;
  user-select: none;
}

.primary-nav { display: grid; gap: 3px; padding: 18px 12px 14px; }
.nav-item, .library-navigation button {
  width: 100%;
  height: 40px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  color: var(--muted-strong);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.nav-item svg, .library-navigation svg { width: 18px; height: 18px; }
.nav-item:hover, .library-navigation button:hover { color: var(--text); background: #1a1f1b; }
.nav-item.active { color: var(--text); background: var(--surface-strong); box-shadow: inset 3px 0 0 var(--accent); }

.sidebar-section { min-height: 0; padding: 4px 12px 14px; overflow-y: auto; }
.sidebar-heading { display: flex; justify-content: space-between; padding: 9px 11px 7px; color: #78827a; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.library-navigation { display: grid; gap: 3px; }
.library-navigation button { grid-template-columns: 20px minmax(0, 1fr) auto; }
.library-navigation button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-navigation button small { color: var(--muted); font-size: 10px; }
.library-navigation button.active { color: var(--accent); background: rgba(50, 212, 197, 0.08); }

html.sidebar-collapsed { --sidebar-width: 72px; }
.sidebar-collapsed .nav-item span, .sidebar-collapsed .library-navigation button span { display: none; }
.sidebar-collapsed .topbar { grid-template-columns: minmax(160px, 220px) minmax(260px, 590px) 1fr; }
.sidebar-collapsed .topbar-start { justify-content: flex-start; }
.sidebar-collapsed .media-brand { justify-content: flex-start; }
.sidebar-collapsed .primary-nav, .sidebar-collapsed .sidebar-section { padding-right: 12px; padding-left: 12px; }
.sidebar-collapsed .home-nav-row { grid-template-columns: 1fr; gap: 5px; }
.sidebar-collapsed .home-nav-row .sidebar-icon-button { display: none; }
.sidebar-collapsed .nav-item, .sidebar-collapsed .library-navigation button { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 0; }
.sidebar-collapsed .library-navigation button { grid-template-columns: 1fr; }
.sidebar-collapsed .sidebar:hover { width: var(--sidebar-expanded-width); box-shadow: 14px 0 34px rgba(0, 0, 0, .42); }
.sidebar-collapsed .sidebar:hover .nav-item span, .sidebar-collapsed .sidebar:hover .library-navigation button span { display: block; }
.sidebar-collapsed .sidebar:hover .home-nav-row { grid-template-columns: minmax(0, 1fr) 32px; gap: 4px; }
.sidebar-collapsed .sidebar:hover .home-nav-row .sidebar-icon-button { display: grid; }
.sidebar-collapsed .sidebar:hover .nav-item, .sidebar-collapsed .sidebar:hover .library-navigation button { grid-template-columns: 20px minmax(0, 1fr); justify-items: stretch; gap: 11px; padding: 0 11px; }
.sidebar-collapsed .sidebar:hover .library-navigation button { grid-template-columns: 20px minmax(0, 1fr); }
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover { width: var(--sidebar-width); box-shadow: none; }
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .nav-item span,
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .library-navigation button span { display: none; }
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .home-nav-row { grid-template-columns: 1fr; gap: 5px; }
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .home-nav-row .sidebar-icon-button { display: none; }
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .nav-item,
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .library-navigation button { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 0; }

.content {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 34px) 34px 60px;
}

.view { display: none; }
.view.active { display: block; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-heading h1 { max-width: 900px; margin: 3px 0 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; font-weight: 720; }
.ipad-home-return { display:none; }
html.is-ipad-browser .ipad-home-return {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px;
  margin:0 0 15px; padding:0 14px; border:1px solid var(--line); border-radius:11px;
  color:var(--text); background:var(--app-popover); font:inherit; font-size:13px; font-weight:750; cursor:pointer;
  box-shadow:0 5px 16px var(--app-shadow);
}
html.is-ipad-browser .ipad-home-return svg { width:17px; height:17px; color:var(--accent); }
html.is-ipad-browser .ipad-home-return:where(:hover,:focus-visible) {
  border-color:var(--accent); background:var(--surface-strong); outline:2px solid var(--accent); outline-offset:2px;
}
.eyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.collection-count { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.primary-button, .secondary-button, .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
}
.primary-button svg, .secondary-button svg, .text-button svg { width: 17px; height: 17px; }
.primary-button { padding: 0 18px; border: 1px solid var(--accent); color: #071312; background: var(--accent); }
.primary-button:hover { background: #57e0d4; }
.secondary-button { padding: 0 14px; border: 1px solid var(--line); color: var(--text); background: var(--surface); }
.secondary-button:hover { border-color: #465048; background: var(--surface-strong); }
.text-button { min-height: 30px; padding: 0; border: 0; color: var(--muted-strong); background: transparent; font-size: 12px; }
.text-button:hover { color: var(--accent); }

.shelf { margin-bottom: 36px; }
.shelf-scroll-button {
  position: absolute;
  z-index: 9;
  top: 50%;
  width: 42px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(117,216,255,.34);
  border-radius: 4px;
  color: #e7faff;
  background: rgba(0,18,52,.72);
  box-shadow: 0 18px 38px rgba(0,0,0,.36);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-35%);
  cursor: pointer;
  transition: opacity 130ms ease, background 130ms ease, transform 130ms ease;
}
.shelf:hover .shelf-scroll-button, .shelf:focus-within .shelf-scroll-button {
  opacity: .96;
  pointer-events: auto;
}
.shelf-scroll-button:hover, .shelf-scroll-button:focus-visible {
  outline: 0;
  border-color: #75d8ff;
  background: rgba(5,55,101,.94);
  transform: translateY(-35%) scale(1.04);
}
.shelf-scroll-button.left { left: 26px; }
.shelf-scroll-button.right { right: 8px; }
.shelf-scroll-button svg { width: 22px; height: 22px; stroke-width: 2.5; }
.shelf-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.shelf-heading h2 { margin: 0; font-size: 18px; font-weight: 720; }
.shelf-heading span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.poster-row, .channel-row {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  scroll-snap-type: x proximity;
}
.poster-row::-webkit-scrollbar, .channel-row::-webkit-scrollbar { display: none; }
.poster-row { grid-auto-columns: var(--poster-width); gap: 15px; }
.channel-row { grid-auto-columns: 245px; gap: 12px; }
#continueRow { grid-auto-columns: 204px; gap: 18px; padding-bottom: 16px; }

.media-card { position: relative; width: var(--poster-width); min-width: 0; scroll-snap-align: start; }
.media-card-button { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.poster-frame {
  position: relative;
  width: var(--poster-width);
  height: var(--poster-height);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--surface-strong);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.media-card-button:hover .poster-frame, .media-card-button:focus-visible .poster-frame { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,0.32); }
.media-card-button:focus-visible { outline: 0; }
.poster-frame img, .detail-poster { width: 100%; height: 100%; display: block; object-fit: cover; }
.poster-frame img { position: relative; z-index: 1; }
.poster-frame img[data-failed="true"] { display: none; }
.poster-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 18px;
  color: #d8ded9;
  background: #282d29;
  text-align: center;
}
.poster-fallback::before { content: "TV"; display: block; margin-bottom: 10px; color: var(--accent); font-size: 26px; font-weight: 850; }
.poster-fallback span { max-width: 120px; font-size: 13px; font-weight: 750; }
.poster-badges { position: absolute; z-index: 2; inset: 7px 7px auto 7px; display: flex; justify-content: space-between; pointer-events: none; }
.format-badge, .match-badge { padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 850; }
.format-badge { color: #10130f; background: var(--gold); }
.match-badge { color: #081311; background: var(--accent); }
.card-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071210;
  background: rgba(243, 246, 243, 0.95);
  opacity: 0;
  transform: translate(-50%, -44%);
  transition: opacity 130ms ease, transform 130ms ease;
}
.card-play svg { width: 20px; fill: currentColor; }
.card-play.external-action svg { fill: none; }
.media-card-button:hover .card-play, .media-card-button:focus-visible .card-play { opacity: 1; transform: translate(-50%, -50%); }
.progress-track { position: absolute; z-index: 2; inset: auto 7px 7px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,0.26); }
.progress-track span { display: block; height: 100%; background: var(--coral); }
.card-copy { min-width: 0; padding-top: 9px; }
.card-copy strong, .card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-copy strong { color: var(--text); font-size: 12px; font-weight: 670; }
.card-copy span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.list-card-copy, .list-chevron { display: none; }
.card-menu-button { position: absolute; z-index: 3; top: 7px; right: 7px; width: 28px; height: 28px; opacity: 0; background: rgba(10,13,11,0.88); }
.card-info-button { position: absolute; z-index: 4; top: 39px; right: 7px; width: 28px; height: 28px; opacity: 0; color: #f6fbff; background: rgba(2,18,43,.92); }
.media-card:hover .card-menu-button, .media-card:focus-within .card-menu-button { opacity: 1; }
.media-card:hover .card-info-button, .media-card:focus-within .card-info-button { opacity: 1; }
.continue-card { width: 204px; }
.continue-card .poster-frame { width: 204px; height: 318px; }
.continue-card .poster-frame > img { height: 100%; object-position: center top; }
.continue-card .poster-fallback { bottom: 0; }
.continue-card .card-copy {
  min-height: 42px;
  padding: 10px 8px 5px;
  background: linear-gradient(0deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.9) 72%, rgba(0,0,0,0) 100%);
}
.continue-card .card-copy strong { font-size: 11px; }
.continue-card .card-copy span { font-size: 9px; }
.continue-card .progress-track { bottom: 0; }
.external-badge { display: inline-grid; min-height: 23px; place-items: center; padding: 0 6px; border: 1px solid rgba(216,246,255,.72); border-radius: 4px; color: #f6fbff; background: rgba(2,18,43,.92); font-size: 8px; font-weight: 850; }
.external-badge.saved { color: #001633; border-color: #75d8ff; background: #75d8ff; }

.discovery-info-dialog { width: min(720px, calc(100vw - 28px)); }
.discovery-info-content { min-height: 290px; display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 22px; overflow-y: auto; padding: 20px; }
.discovery-info-poster { width: 170px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid #23658e; border-radius: 5px; background: #001b43; }
.discovery-info-poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.discovery-info-poster img:not([src]) { display: none; }
.discovery-info-copy { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.discovery-info-copy p { margin: 0; color: #d8e8f2; font-size: 14px; line-height: 1.65; }
.discovery-info-actions { margin-top: auto; display: flex; justify-content: flex-start; }

.channel-card {
  width: 215px;
  height: 122px;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.channel-card:hover, .channel-card:focus-visible { border-color: var(--accent); outline: 0; background: var(--surface-strong); }
.channel-logo { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #f3f5f3; }
.channel-logo img { width: 100%; height: 100%; object-fit: contain; }
.channel-logo span { color: #172018; font-size: 11px; font-weight: 850; }
.channel-copy { min-width: 0; align-self: center; }
.channel-copy strong, .channel-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-copy strong { font-size: 13px; }
.channel-copy span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.channel-live { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--coral); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.channel-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.metadata-credit { padding-top: 10px; color: #778078; font-size: 10px; }
.metadata-credit a { color: var(--muted); }
.discovery-load-more { display: flex; justify-content: center; padding: 22px 0 42px; }
.discovery-manager, .home-order-manager { border-top: 1px solid var(--line-soft); }
.dialog-section-heading { padding: 14px 18px 4px; }
.dialog-section-heading strong, .dialog-section-heading small { display: block; }
.dialog-section-heading small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.availability-list { display: flex; flex-wrap: wrap; gap: 10px; }
.availability-item { min-width: 180px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--surface); }
.availability-item.local { border-color: rgba(117,216,255,.64); background: rgba(5,65,119,.58); }
.availability-item strong, .availability-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.availability-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.availability-logo { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #f5f7f6; color: #06345f; }
.availability-logo img { width: 100%; height: 100%; object-fit: contain; }
.availability-logo svg { width: 20px; }
.availability-credit { margin: 10px 0 0; color: var(--muted); font-size: 10px; }
.availability-credit a { color: var(--accent); }

.collection-heading { align-items: center; }
.collection-controls { gap: 10px; }
.library-filter-bar { display:grid; gap:10px; margin:-14px 0 24px; }
.alpha-filter-rail { min-width:0; display:flex; align-items:center; gap:4px; overflow-x:auto; padding:3px 1px 7px; scrollbar-width:thin; }
.alpha-filter { min-width:34px; height:34px; flex:1 0 34px; display:grid; place-items:center; padding:0 7px; border:1px solid var(--line-soft); border-radius:5px; color:var(--muted); background:rgba(4,43,83,.76); cursor:pointer; font-size:11px; font-weight:800; }
.alpha-filter:first-child { min-width:52px; flex-basis:52px; }
.alpha-filter:hover,.alpha-filter:focus-visible { color:#fff; border-color:#6fc4e8; background:#094474; outline:0; }
.alpha-filter.active { color:#001633; border-color:#75d8ff; background:#75d8ff; box-shadow:0 0 0 2px rgba(117,216,255,.16); }
.library-filter-selects { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.library-filter-selects label { height:38px; display:flex; align-items:center; gap:7px; padding:0 9px 0 11px; border:1px solid var(--line); border-radius:5px; background:var(--surface); }
.library-filter-selects label > span { color:var(--muted); font-size:10px; font-weight:750; text-transform:uppercase; }
.library-filter-selects select { min-width:96px; max-width:180px; border:0; outline:0; color:var(--text); background:transparent; font-size:11px; }
.library-filter-selects option,.library-filter-selects optgroup { color:#081426; background:#fff; }
.person-filter-button,.clear-library-filters { height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--line); border-radius:5px; color:#cce2f2; background:var(--surface); cursor:pointer; font-size:11px; font-weight:750; }
.person-filter-button svg,.clear-library-filters svg { width:15px; height:15px; color:#75d8ff; }
.person-filter-button.active { border-color:#75d8ff; color:#001633; background:#75d8ff; }
.person-filter-button.active svg { color:#001633; }
.clear-library-filters { margin-left:auto; }
.people-search-results { margin:0 0 24px; padding:16px; border:1px solid #23658e; border-radius:7px; background:rgba(2,34,75,.76); }
.people-result-row { display:flex; gap:10px; overflow-x:auto; padding:2px 1px 5px; }
.person-result-card { min-width:230px; display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:11px; padding:9px; border:1px solid #1a5d88; border-radius:7px; color:#f5fbff; background:#06345f; text-decoration:none; }
.person-result-card:hover { border-color:#75d8ff; background:#094474; }
.person-result-card > img,.person-result-avatar { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; object-fit:cover; color:#001633; background:#75d8ff; font-weight:850; }
.person-result-card strong,.person-result-card small,.person-result-card em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-result-card small { margin-top:3px; color:#a9c9dc; font-size:10px; }
.person-result-card em { margin-top:5px; color:#75d8ff; font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; }
.person-filter-dialog { width:min(520px,calc(100vw - 28px)); }
.person-picker-body { min-height:340px; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; padding:14px; overflow:hidden; }
.person-picker-search { height:42px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid #23658e; border-radius:6px; background:#042d57; }
.person-picker-search svg { width:17px; color:#75d8ff; }
.person-picker-search input { min-width:0; flex:1; border:0; outline:0; color:#fff; background:transparent; }
.person-picker-list { max-height:55vh; overflow-y:auto; border:1px solid #124a76; border-radius:6px; }
.person-picker-row { width:100%; display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:8px 10px; border:0; border-bottom:1px solid #124a76; color:#f5fbff; background:#032654; cursor:pointer; text-align:left; }
.person-picker-row:last-child { border-bottom:0; }
.person-picker-row:hover,.person-picker-row:focus-visible { background:#094474; outline:0; }
.person-picker-avatar { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#001633; background:#75d8ff; font-size:11px; font-weight:850; }
.person-picker-avatar img { width:100%; height:100%; object-fit:cover; }
.person-picker-row strong,.person-picker-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-picker-row small { margin-top:3px; color:#9fc1d5; font-size:10px; }
.person-picker-row > svg { width:16px; color:#75d8ff; }
.select-control { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 9px 0 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.select-control span { color: var(--muted); font-size: 11px; }
.select-control select { border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.select-control select option { color: #081426; background: #fff; }
.segmented-control { height: 38px; display: grid; grid-template-columns: repeat(2, 38px); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.segmented-control button { display: grid; place-items: center; border: 0; color: var(--muted); background: var(--surface); cursor: pointer; }
.segmented-control button + button { border-left: 1px solid var(--line); }
.segmented-control button.active { color: var(--text); background: var(--surface-strong); }
.segmented-control svg { width: 17px; }

.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--poster-width), 1fr)); gap: 26px 18px; align-items: start; }
.poster-grid .media-card { width: 100%; }
.media-load-more { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 16px; border: 1px solid rgba(117,216,255,.34); border-radius: 6px; color: #eaf8ff; background: rgba(8,48,82,.82); cursor: pointer; }
.media-load-more:hover, .media-load-more:focus-visible { border-color: #75d8ff; background: rgba(11,76,126,.92); outline: 0; }
.media-load-more svg { width: 17px; height: 17px; }
.media-load-more small { color: #8fb3ca; }
.poster-grid .poster-frame { width: 100%; height: auto; aspect-ratio: 5 / 8; }
.poster-grid.compact { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(0,20,54,.72); }
.poster-grid.compact .media-card { width: 100%; min-width: 0; }
.poster-grid.compact .media-card-button { display: grid; grid-template-columns: 52px minmax(0,1fr) 24px; align-items: center; gap: 15px; min-height: 90px; padding: 6px 16px 6px 8px; border-bottom: 1px solid var(--line-soft); transition: background 120ms ease; }
.poster-grid.compact .media-card:last-child .media-card-button { border-bottom: 0; }
.poster-grid.compact .media-card-button:hover, .poster-grid.compact .media-card-button:focus-visible { background: rgba(9,68,116,.58); }
.poster-grid.compact .poster-frame { width: 52px; height: 78px; aspect-ratio: auto; transform: none; box-shadow: 2px 3px 10px rgba(0,0,0,.35); }
.poster-grid.compact .media-card-button:hover .poster-frame, .poster-grid.compact .media-card-button:focus-visible .poster-frame { transform: none; }
.poster-grid.compact .poster-badges, .poster-grid.compact .card-play, .poster-grid.compact .card-menu-button { display: none; }
.poster-grid.compact .poster-frame .card-copy, .poster-grid.compact .progress-track { display: none; }
.poster-grid.compact .list-card-copy { min-width: 0; display: block; }
.poster-grid.compact .list-card-copy > strong { display: block; overflow: hidden; color: #f6fbff; font-size: 15px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.poster-grid.compact .list-card-copy > span { display: block; margin-top: 4px; color: #cce2f2; font-size: 11px; }
.poster-grid.compact .list-card-copy small { display: flex; align-items: center; gap: 8px; margin-top: 8px; overflow: hidden; color: #97bdd6; font-size: 10px; }
.poster-grid.compact .list-card-copy small em { flex: none; padding: 3px 6px; border-radius: 3px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.poster-grid.compact .list-card-copy small em.needs-match { color: #fff; background: #c74655; }
.poster-grid.compact .list-card-copy small em.match-pending { color: #001633; background: #f4c95d; }
.poster-grid.compact .list-card-copy small em.has-match { color: #001633; background: #9ceeff; }
.poster-grid.compact .list-card-copy small b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.poster-grid.compact .list-card-copy small b + b::before { content: "\2022"; margin-right: 8px; }
.poster-grid.compact .list-chevron { width: 18px; display: block; color: #75d8ff; }

.inline-search { width: min(300px, 44vw); height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--text); background: var(--surface); }
.inline-search:focus { border-color: var(--accent); }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.live-grid .channel-card { width: 100%; }

.empty-state { min-height: 360px; display: grid; place-items: center; align-content: center; padding: 40px; color: var(--muted); text-align: center; }
.empty-state svg { width: 42px; height: 42px; color: #596159; }
.empty-state h2 { margin: 16px 0 7px; color: var(--muted-strong); font-size: 18px; }
.empty-state p { max-width: 440px; margin: 0; font-size: 12px; line-height: 1.6; }

.popover {
  position: fixed;
  z-index: 130;
  top: 60px;
  right: 20px;
  width: 260px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171c18;
  box-shadow: 0 20px 60px rgba(0,0,0,0.48);
}
.popover-heading { display: grid; gap: 3px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line-soft); }
.popover-heading span { color: var(--muted); font-size: 10px; }
.popover-heading strong { font-size: 13px; }
.profile-list { display: grid; gap: 2px; padding-top: 6px; }
.profile-list button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 5px 8px; border: 0; border-radius: 5px; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.profile-list button:hover { background: var(--surface-strong); }
.profile-list button > span:nth-child(2) { display: grid; }
.profile-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.profile-list svg { width: 16px; color: var(--accent); }
.profile-quick-actions { display:none; }
.profile-sign-out { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 11px 10px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 5px; color: var(--text); background: transparent; font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.profile-sign-out:hover, .profile-sign-out:focus-visible { color: var(--accent); background: var(--surface-strong); }
.profile-sign-out:disabled { opacity: .6; cursor: wait; }
.profile-sign-out svg { width: 16px; height: 16px; }

.scrim { position: fixed; z-index: 99; inset: 0; visibility: hidden; opacity: 0; background: rgba(0,0,0,0.56); transition: opacity 160ms ease, visibility 160ms; }
.scrim.open { visibility: visible; opacity: 1; }
.activity-drawer { position: fixed; z-index: 120; inset: var(--topbar-height) 0 0 auto; width: min(400px, 92vw); padding: 22px; border-left: 1px solid var(--line); background: #151a16; transform: translateX(100%); transition: transform 180ms ease; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.activity-drawer.open { transform: translateX(0); }
.drawer-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer-heading h2 { margin: 2px 0 0; font-size: 22px; }
.activity-back-button { display: none; }
.activity-list { display: grid; gap: 1px; }
.activity-drawer > .activity-list { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-gutter: stable; }
.activity-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
.activity-item.has-action { grid-template-columns: 36px minmax(0, 1fr) 34px; }
.activity-item > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: var(--accent); background: rgba(50,212,197,0.09); }
.activity-item svg { width: 17px; }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { font-size: 12px; }
.activity-item small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.activity-stop-button { width: 34px; height: 34px; }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,0.72); backdrop-filter: blur(5px); }
.detail-dialog { width: min(780px, calc(100vw - 28px)); min-height: 460px; display: none; grid-template-columns: 260px minmax(0,1fr); gap: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #171b18; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.detail-dialog[open] { display: grid; }
.dialog-close { position: absolute; z-index: 3; top: 14px; right: 14px; background: rgba(10,13,11,0.76); }
.detail-poster-wrap { position: relative; width: 260px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 5px; background: var(--surface-strong); }
.detail-fallback { z-index: -1; }
.detail-copy { min-width: 0; align-self: center; }
.detail-copy h2 { margin: 7px 0 10px; font-size: 30px; line-height: 1.12; }
.detail-meta { flex-wrap: wrap; gap: 7px; color: var(--muted-strong); font-size: 11px; }
.detail-meta span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; }
.detail-overview { min-height: 72px; margin: 18px 0 24px; color: #c3cac4; font-size: 13px; line-height: 1.65; }
.detail-actions { flex-wrap: wrap; gap: 9px; }
.detail-provider { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: #768078; font-size: 10px; }

.player-dialog { width: min(1180px, calc(100vw - 24px)); height: min(760px, calc(100vh - 24px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #050605; }
.player-dialog[open] { display: grid; grid-template-rows: 58px minmax(0,1fr); }
.player-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; background: #131714; }
.player-topbar div { min-width: 0; display: grid; }
.player-topbar strong, .player-topbar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-topbar strong { font-size: 13px; }
.player-topbar small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.player-stage { position: relative; min-height: 0; display: grid; background: #000; }
.player-skip-intro { position:absolute; z-index:7; right:22px; bottom:92px; min-width:132px; height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(117,216,255,.52); border-radius:6px; background:rgba(0,20,43,.92); color:#f5fbff; font:700 13px/1 inherit; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.34); }
.player-skip-intro:hover,.player-skip-intro:focus-visible { background:#75d8ff; color:#001633; outline:none; }
.player-skip-intro svg { width:18px; height:18px; }
.player-skip-intro.is-hidden { display:none; }
@media (max-width:700px) {
  .live-dvr-summary { grid-template-columns:1fr; }
  .live-dvr-grid { grid-template-columns:1fr; }
  .dvr-series-options { grid-template-columns:1fr; padding:15px; }
  .dvr-series-wide { grid-column:1; }
  .dvr-series-actions { flex-direction:column-reverse; }
  .dvr-series-actions button { width:100%; }
  .dvr-series-channel-tools { grid-template-columns:1fr 1fr; }
  .dvr-series-channel-tools input { grid-column:1 / -1; }
  .dvr-series-channel-choices { grid-template-columns:1fr; }
}
.player-dialog video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.player-controls { position: absolute; z-index: 5; right: 14px; bottom: 14px; left: 14px; min-height: 62px; display: grid; grid-template-columns: 42px 42px minmax(0,1fr) 42px 42px minmax(74px,110px) 42px 42px; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(117,216,255,.28); border-radius: 8px; background: linear-gradient(180deg, rgba(0,23,50,.9), rgba(0,14,32,.96)); box-shadow: 0 18px 50px rgba(0,0,0,.48); }
.player-control-button { width: 42px; height: 42px; color: #eaf8ff; border-color: rgba(117,216,255,.22); background: rgba(7,46,78,.78); }
.player-control-button:hover, .player-control-button:focus-visible { color: #001633; border-color: #75d8ff; background: #75d8ff; outline: 0; }
.player-control-button:disabled, .player-volume:disabled, .player-timeline input:disabled { opacity: .38; cursor: default; }
.player-control-button svg { width: 19px; height: 19px; }
.player-timeline { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
.player-timeline input, .player-volume { width: 100%; accent-color: #75d8ff; cursor: pointer; }
.player-time { color: #cce2f2; }
#playerTimeText { min-width: 104px; color: #cce2f2; font-size: 11px; font-weight: 750; text-align: right; white-space: nowrap; }
.player-status { position: absolute; z-index: 4; inset: 58px 0 0; display: grid; place-content: center; justify-items: center; gap: 16px; color: #f6fbff; background: #000; pointer-events: none; }
.player-status-brand { display: flex; align-items: center; gap: 12px; }
.player-status-brand img { width: 64px; height: 64px; object-fit: contain; }
.player-status-brand > span { display: flex; align-items: baseline; gap: 7px; }
.player-status-brand strong { font-size: 28px; }
.player-status-brand small { color: #55d5cb; font-size: 10px; font-weight: 800; }
.player-status > strong { color: #c9e5f5; font-size: 12px; font-weight: 650; }
.player-dialog.is-unavailable .player-controls { display: none; }
.player-status.is-unavailable { padding: 28px; text-align: center; background: radial-gradient(circle at 50% 45%, #142d3d, #03080d 68%); }
.player-status.is-unavailable .player-status-brand,.player-status.is-unavailable .player-status-channel,.player-status.is-unavailable .player-status-program,.player-status.is-unavailable .spinner { display: none; }
.player-status.is-unavailable > strong { color: #fff; font-size: clamp(24px, 4vw, 36px); font-weight: 800; }
.player-status-reason { max-width: 520px; margin: 0; color: #c4d5df; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.5; }
.spinner { width: 34px; height: 34px; border: 3px solid #313833; border-top-color: var(--accent); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.context-menu { position: fixed; z-index: 180; width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #191e1a; box-shadow: 0 18px 50px rgba(0,0,0,0.52); }
.context-menu button { width: 100%; min-height: 36px; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 9px; padding: 0 9px; border: 0; border-radius: 4px; color: var(--muted-strong); background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
.context-menu button:hover { color: var(--text); background: var(--surface-strong); }
.context-menu svg { width: 16px; }

.toast-region { position: fixed; z-index: 220; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { max-width: 340px; padding: 11px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 5px; color: var(--text); background: #1b211d; box-shadow: 0 12px 38px rgba(0,0,0,0.42); font-size: 11px; }
.toast.error { border-left-color: var(--danger); }

@media (max-width: 1080px) {
  :root { --sidebar-width: 200px; --sidebar-expanded-width: 200px; --poster-width: 142px; --poster-height: 213px; }
  .topbar { grid-template-columns: var(--sidebar-width) minmax(220px, 1fr) auto; gap: 12px; padding: 0 14px; }
  .server-status, .profile-copy, .profile-button > svg { display: none; }
  .profile-button { width: 42px; grid-template-columns: 32px; padding: 0 5px; }
  .content { padding-right: 24px; padding-left: 24px; }
}

@media (max-width: 760px) {
  :root { --topbar-height: 60px; --poster-width: 128px; --poster-height: 192px; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 10px; }
  .mobile-menu-button { display: grid; }
  .media-brand span { display: none; }
  .media-brand img { width: 30px; height: 30px; }
  .search-box { min-width: 0; }
  .search-box kbd { display: none; }
  .topbar-actions .icon-button:first-of-type { display: none; }
  .sidebar { z-index: 110; width: min(280px, 84vw); transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 12px 0 40px rgba(0,0,0,0.4); }
  .sidebar-collapsed .sidebar:hover { width: min(280px, 84vw); }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left: 0; padding: calc(var(--topbar-height) + 25px) 16px 48px; }
  .page-heading { align-items: start; margin-bottom: 24px; }
  .page-heading h1 { font-size: 30px; }
  .page-actions { padding-top: 4px; }
  .secondary-button { min-width: 38px; padding: 0 10px; }
  .collection-heading { display: grid; }
  .collection-controls { width: 100%; justify-content: space-between; }
  .library-filter-bar { margin-top:-8px; }
  .alpha-filter { flex-grow:0; }
  .library-filter-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-filter-selects label,.person-filter-button,.clear-library-filters { width:100%; min-width:0; margin:0; }
  .library-filter-selects select { min-width:0; flex:1; }
  #liveView > .page-heading { display:grid; gap:12px; margin-bottom:12px; }
  .live-heading-copy { display:grid; gap:10px; }
  .live-heading-copy > div:first-child { min-width:0; }
  .live-dvr-tabs { width:100%; }
  .guide-toolbar { align-items:stretch; flex-direction:column; gap:0; }
  .guide-tools { width:100%; }
  .guide-theme-picker { flex:0 0 auto; }
  .guide-date-filter { flex:0 0 auto; }
  .guide-epg-search { min-width:0; width:auto; flex:1; }
  .shelf { margin-bottom: 30px; }
  .shelf-heading span { display: none; }
  .channel-row { grid-auto-columns: 220px; }
  .channel-card { width: 195px; }
  .poster-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 22px 12px; }
  .live-grid { grid-template-columns: 1fr; }
  .inline-search { width: 100%; }
  .detail-dialog { grid-template-columns: 112px minmax(0,1fr); gap: 16px; min-height: 0; padding: 18px; }
  .detail-poster-wrap { width: 112px; align-self: start; }
  .detail-copy h2 { padding-right: 30px; font-size: 23px; }
  .detail-overview { grid-column: 1 / -1; font-size: 12px; }
  .detail-actions .primary-button, .detail-actions .secondary-button { flex: 1; }
  .player-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .player-controls { right: 8px; bottom: 8px; left: 8px; grid-template-columns: 40px 40px minmax(0,1fr) 40px 40px 40px; }
  .player-volume, #playerPipButton { display: none; }
  .player-skip-intro { right:12px; bottom:82px; }
  .player-timeline { grid-template-columns: minmax(0,1fr); gap: 5px; }
  #playerTimeText { min-width: 0; text-align: left; }
}

@media (max-width: 480px) {
  .topbar-actions > a { display: none; }
  .search-box { height: 38px; }
  .page-heading { gap: 10px; }
  .page-heading h1 { font-size: 27px; }
  .shelf-heading h2 { font-size: 16px; }
  .text-button { font-size: 0; }
  .text-button svg { width: 19px; }
  .detail-dialog[open] { display: block; max-height: calc(100vh - 18px); overflow-y: auto; }
  .detail-poster-wrap { width: 118px; float: left; margin: 0 15px 10px 0; }
  .detail-actions { clear: both; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Keep the Roku-derived Tide Blue skin last in the cascade. */
.brand-tide { color: #ff8f2f; }
.brand-view { color: #35d6e7; }
.topbar { border-bottom-color: #0f4d7b; background: rgba(0, 14, 49, 0.97); }
.search-box { border-color: #1b5e8c; background: #052a55; }
.search-box:focus-within { border-color: #75d8ff; background: #073866; box-shadow: 0 0 0 2px rgba(117,216,255,.14); }
.search-box kbd { border-color: #25678f; background: #001b43; }
.sidebar { border-right-color: #0d4b78; background: #001b4d; }
.nav-item:hover, .library-navigation button:hover, .sidebar-more-button:hover { background: #06345f; }
.nav-item.active { background: #054177; box-shadow: inset 3px 0 0 #6bc0e8; }
.library-navigation button.active { color: #9ceeff; background: rgba(62,198,255,.1); }
.sidebar-heading { color: #97bdd6; }
.primary-button { border-color: #3ec6ff; color: #001633; background: #3ec6ff; }
.primary-button:hover { background: #75d8ff; }
.secondary-button { border-color: #23658e; background: #05325e; }
.secondary-button:hover { border-color: #6fc4e8; background: #0a4978; }
.context-menu, .toast { border-color: #23658e; background: #00234f; }
.activity-item > span { color: #9ceeff; background: #064a78; }
.detail-poster-wrap { width: 250px; border: 1px solid #6fc4e8; background: #073b6b; }
.detail-overview { max-width: 720px; min-height: 0; margin: 22px 0 0; color: #e0eff8; font-size: 14px; }
.detail-provider { max-width: 720px; margin-top: 17px; padding-top: 12px; border-top-color: rgba(111,196,232,.36); color: #97bdd6; }
.player-dialog { border-color: #23658e; background: #000; }
.player-topbar { background: #001b43; }
.player-status { background: #000; }
.spinner { border-color: #124a76; border-top-color: #3ec6ff; }

@media (max-width: 900px) {
  .detail-poster-wrap { width: 190px; }
}

@media (max-width: 760px) {
  .detail-poster-wrap { width: 118px; float: none; margin: 0; }
  .detail-overview, .detail-provider { grid-column: 1 / -1; }
  .detail-overview { font-size: 12px; }
  .detail-actions .primary-button, .detail-actions .secondary-button { flex: 0 1 auto; }
}

@media (max-width: 480px) {
  .detail-poster-wrap { width: 100px; float: none; margin: 0; }
}

/* Roku home card treatment: black glass, contained logos, and lower title fade. */
.poster-frame {
  border-color: rgba(120,217,245,.52);
  background: #030712;
  box-shadow: 4px 7px 18px rgba(0,0,0,.46), 0 0 16px rgba(8,124,171,.12);
}
.poster-frame::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 3px;
  border: 1px solid rgba(234,251,255,.12);
  border-radius: 3px;
  pointer-events: none;
}
.media-card-button:hover .poster-frame, .media-card-button:focus-visible .poster-frame {
  border-color: #75d8ff;
  box-shadow: 5px 9px 24px rgba(0,0,0,.52), 0 0 0 2px rgba(231,250,255,.9), 0 0 20px rgba(58,169,216,.62);
}
.card-copy {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 48px;
  padding: 17px 8px 6px;
  background: linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.84) 58%, rgba(0,0,0,0) 100%);
}
.card-copy strong { color: #f6fbff; text-shadow: 0 1px 4px #000; }
.card-copy span { margin-top: 2px; color: #cce2f2; }
.progress-track { z-index: 4; right: 8px; bottom: 37px; left: 8px; height: 5px; background: rgba(24,32,51,.86); }
.progress-track span { background: #35e8f7; }
.poster-badges { gap: 6px; }
.quality-badge {
  min-width: 34px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgba(216,246,255,.78);
  border-radius: 4px;
  color: #fff;
  background: rgba(9,21,32,.94);
  box-shadow: 2px 3px 7px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.14);
  font-size: 9px;
  font-weight: 850;
}
.channel-card {
  position: relative;
  width: 215px;
  height: 121px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(120,217,245,.34);
  border-radius: 5px;
  color: #f6fbff;
  background: #030712;
  box-shadow: 4px 7px 18px rgba(0,0,0,.45), 0 0 13px rgba(8,124,171,.14);
  text-align: center;
}
.channel-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(234,251,255,.1);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(110,201,246,.08), rgba(183,236,255,.025));
  pointer-events: none;
}
.channel-card:hover, .channel-card:focus-visible {
  border-color: #75d8ff;
  outline: 0;
  background: #050914;
  box-shadow: 0 0 0 2px #e7faff, 0 0 20px rgba(58,169,216,.66);
}
.channel-logo-plate {
  position: absolute;
  top: 7px;
  left: 9%;
  width: 82%;
  height: 49%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(188,239,255,.13);
  border-radius: 4px;
  background: rgba(0,27,73,.62);
}
.channel-logo { width: 78%; height: 70%; display: grid; place-items: center; background: transparent; }
.channel-logo > * { grid-area: 1 / 1; }
.channel-logo img { z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.channel-logo img[data-failed="true"] { display: none; }
.channel-logo span { color: #cce2f2; font-size: 12px; font-weight: 850; }
.channel-number { position: absolute; right: 9px; bottom: 29px; left: 9px; overflow: hidden; color: #f6fbff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.channel-name { position: absolute; right: 9px; bottom: 12px; left: 9px; overflow: hidden; color: #cce2f2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.channel-live { position: absolute; z-index: 3; top: 6px; right: 6px; display: inline-flex; padding: 3px 5px; border-radius: 3px; color: #fff; background: rgba(229,9,20,.94); font-size: 7px; }
.channel-live::before { display: none; }
.guide-logo { border: 1px solid rgba(188,239,255,.14); background: #001b49; }
.guide-logo > * { grid-area: 1 / 1; }
.guide-logo b { color: #cce2f2; }
.guide-logo img { z-index: 1; width: 78%; height: 74%; object-fit: contain; }
.guide-logo img[data-failed="true"] { display: none; }

/* PC home hero: resume first, then recommendations/server picks. */
#homeView {
  --home-hero-tint: #064a78;
  --home-hero-tint-soft: #032f58;
  --home-hero-accent: #35d6e7;
  --home-hero-warm: #ff8f2f;
  --home-hero-deep: #00143f;
  --home-hero-height: clamp(690px, 71vh, 790px);
  min-height: calc(100vh - var(--topbar-height));
  margin: calc(-1 * (var(--topbar-height) + 34px)) -34px -60px;
  padding: 0 34px 60px;
  background: #00143f;
}
#homeView.home-basic-continue,
#homeView.home-without-hero {
  padding-top: calc(var(--topbar-height) + 34px);
}
.library-setup-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(99, 212, 238, .38);
  border-radius: 999px;
  color: #d8faff;
  background: rgba(5, 58, 89, .78);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.home-setup-hero {
  position: relative;
  min-height: 260px;
  margin: 0 -34px 34px;
  padding: calc(var(--topbar-height) + 30px) clamp(34px, 6vw, 100px) 38px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 85% 80%, rgba(36, 145, 198, .35), transparent 55%), linear-gradient(125deg, #001b43, #082b48);
}
.home-setup-hero h1 { margin: 8px 0 10px; color: #fff; font-size: clamp(30px, 3.4vw, 52px); }
.home-setup-hero p:not(.eyebrow) { margin: 0 0 16px; color: #c9e3f1; line-height: 1.5; }
.home-setup-hero > span { color: #8eeaff; font-size: 13px; font-weight: 750; }
@media (max-width: 720px) {
  .library-setup-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .home-setup-hero { margin-right: -16px; margin-left: -16px; padding-right: 20px; padding-left: 20px; }
}
#homeView.home-basic-continue > .home-first-visible-shelf,
#homeView.home-without-hero > .home-first-visible-shelf {
  padding-top: 0;
}
.home-hidden-by-order { display: none !important; }
.home-shelf-reorderable { position: relative; padding-left: 0; cursor: grab; }
.home-shelf-reorderable > :not(.home-shelf-drag-bar) { pointer-events: none; user-select: none; }
.home-shelf-drag-bar {
  position: absolute;
  z-index: 12;
  inset: 0;
  width: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px;
  border: 2px dashed rgba(117,216,255,.62);
  border-radius: 10px;
  color: #e9fbff;
  background: rgba(0,20,63,.10);
  cursor: grab;
  opacity: 1;
}
.home-shelf-drag-bar span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(117,216,255,.55); border-radius: 6px; background: rgba(0,24,69,.90); box-shadow: 0 8px 24px rgba(0,0,0,.32); font-size: 11px; font-weight: 850; letter-spacing: .02em; }
.home-shelf-drag-bar:hover, .home-shelf-drag-bar:focus-visible { outline: 0; border-color: #9ceeff; background: rgba(53,214,231,.08); box-shadow: inset 0 0 30px rgba(53,214,231,.08), 0 0 16px rgba(53,214,231,.34); }
.home-shelf-drag-bar:active { cursor: grabbing; }
.home-shelf-drag-bar svg { width: 16px; height: 16px; }
.home-shelf-locked { padding-left: 0; }
.home-shelf-locked .home-shelf-drag-bar { display: none; }
#homeView:not(.home-layout-unlocked) [data-home-shelf] { padding-left: 0 !important; outline: 0; }
#homeView:not(.home-layout-unlocked) .home-shelf-drag-bar { display: none !important; }
.home-shelf-dragging { opacity: .58; cursor: grabbing; }
.home-shelf-drop-target { outline: 1px solid rgba(117,216,255,.9); outline-offset: 5px; background: rgba(117,216,255,.07); }
.home-hero {
  position: relative;
  height: var(--home-hero-height);
  min-height: 0;
  margin: 0 -34px -34px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 20% 88%, color-mix(in srgb, var(--home-hero-warm) 34%, transparent 66%) 0%, transparent 42%),
    radial-gradient(ellipse at 72% 92%, color-mix(in srgb, var(--home-hero-accent) 30%, transparent 70%) 0%, transparent 46%),
    linear-gradient(180deg, var(--home-hero-tint-soft) 0%, color-mix(in srgb, var(--home-hero-tint) 72%, var(--home-hero-deep) 28%) 100%);
  box-shadow: none;
  cursor: pointer;
}
.home-hero-backdrop {
  position: absolute;
  inset: 0 0 0 calc(-1 * var(--sidebar-width));
  background-position: center top;
  background-size: cover;
  opacity: 1;
  filter: saturate(1.36) contrast(1.06) brightness(1.06);
}
.home-hero-artwork { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.home-hero-feather {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,14,36,.44) 0%, rgba(0,20,52,.22) 18%, rgba(0,20,52,.06) 38%, rgba(0,20,52,0) 66%),
    radial-gradient(ellipse at 19% 44%, rgba(0,14,36,.50) 0%, rgba(0,14,36,.24) 34%, rgba(0,14,36,0) 64%);
}
.home-hero-content {
  position: relative;
  z-index: 2;
  width: min(860px, max(320px, calc(100vw - var(--sidebar-width) - clamp(340px, 30vw, 720px))));
  max-width: calc(100vw - var(--sidebar-width) - 40px);
  height: var(--home-hero-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--topbar-height) + 24px) 48px 126px calc(var(--sidebar-width) + 56px);
  text-shadow: none;
}
.home-hero-content #homeHeading {
  margin: 3px 0 34px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.06;
  color: #ffffff;
}
.home-hero-content h2 {
  margin: 7px 0 12px;
  color: #fff;
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: 1.02;
}
.home-hero-title-logo {
  display: block;
  width: auto;
  max-width: min(560px, 100%);
  max-height: clamp(100px, 10vw, 168px);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 16px rgba(0, 12, 28, .45));
}
.home-hero-title-logo[hidden] { display: none; }
.home-hero-content h2 .is-logo-active {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.home-hero[data-title-size="long"] .home-hero-content h2 { font-size: clamp(38px, 4.2vw, 66px); }
.home-hero[data-title-size="wide"] .home-hero-content h2 { font-size: clamp(34px, 3.8vw, 58px); }
.home-hero-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.home-hero-meta span {
  padding: 4px 8px;
  border: 1px solid rgba(218,246,255,.54);
  border-radius: 4px;
  color: #e7faff;
  background: rgba(0,16,42,.58);
  font-size: 11px;
  font-weight: 750;
}
.home-hero-content p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  display: -webkit-box;
  flex-shrink: 0;
  overflow: hidden;
  color: #e2f3fb;
  font-size: 15px;
  line-height: 1.56;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.home-hero-progress {
  width: min(420px, 100%);
  height: 6px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(232,249,255,.22);
}
.home-hero-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff8f2f, #35d6e7);
}
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.home-hero-actions button { min-width: 124px; justify-content: center; }
.home-hero-poster {
  position: absolute;
  z-index: 2;
  right: clamp(72px, 8vw, 180px);
  bottom: 124px;
  width: clamp(172px, 11.5vw, 242px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(220,248,255,.62);
  border-radius: 7px;
  background: #001b43;
  box-shadow: 0 28px 80px rgba(0,0,0,.46);
}
.home-hero-poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-hero-poster img[hidden] { display: none; }
.home-hero-rail {
  position: absolute;
  z-index: 5;
  right: 40px;
  bottom: 12px;
  left: calc(var(--sidebar-width) + 56px);
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 7px 3px 10px;
  scrollbar-width: none;
}
.home-hero-rail::-webkit-scrollbar { display: none; }
.home-hero-thumb {
  position: relative;
  width: clamp(144px, 9.4vw, 196px);
  height: auto;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  border: 1px solid rgba(208,244,255,.50);
  border-radius: 11px;
  color: #fff;
  background: rgba(1,18,45,.90);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 16px 38px rgba(0,0,0,.38);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-hero-thumb::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,12,30,0) 34%, rgba(0,12,30,.28) 58%, rgba(0,12,30,.94) 100%);
}
.home-hero-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.015);
  transition: filter .18s ease, transform .24s ease;
}
.home-hero-thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #9ceeff;
  background: radial-gradient(circle at 32% 24%, rgba(53,214,231,.24), transparent 42%), #001b43;
  font-weight: 850;
}
.home-hero-thumb-copy {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 9px;
  left: 10px;
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.home-hero-thumb-copy b {
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero-thumb-copy small {
  flex: 0 0 auto;
  color: #bdefff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
}
.home-hero-thumb-progress {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  background: rgba(227,248,255,.18);
}
.home-hero-thumb-progress em {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--home-hero-warm), var(--home-hero-accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--home-hero-accent) 72%, transparent 28%);
}
.home-hero-card-preview {
  position: absolute;
  z-index: 18;
  top: 50%;
  left: 50%;
  width: clamp(250px, 14vw, 302px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  border: 2px solid rgba(231,250,255,.96);
  border-radius: 14px;
  background: #001b43;
  box-shadow: 0 34px 100px rgba(0,0,0,.72), 0 0 0 4px color-mix(in srgb, var(--home-hero-accent) 55%, transparent 45%);
  transform: translate(42vw, -50%) scale(.68);
  transform-origin: center;
  transition: opacity .18s ease, transform .28s cubic-bezier(.2,.78,.2,1);
}
.home-hero-card-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.home-hero-card-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-hero-card-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,10,28,.34) 65%, rgba(0,10,28,.98) 100%);
}
.home-hero-card-preview-copy {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 18px;
  left: 18px;
  text-shadow: 0 3px 14px rgba(0,0,0,.92);
}
.home-hero-card-preview-copy strong { display: block; font-size: 22px; line-height: 1.1; }
.home-hero-card-preview-copy span { display: block; margin-top: 7px; color: #bdefff; font-size: 12px; font-weight: 800; }
.home-hero-thumb:hover, .home-hero-thumb:focus-visible, .home-hero-thumb.active {
  outline: 0;
  border-color: rgba(231,250,255,.96);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--home-hero-accent) 68%, transparent 32%), 0 20px 48px rgba(0,0,0,.48);
  transform: translateY(-4px);
}
.home-hero-thumb:hover img, .home-hero-thumb:focus-visible img, .home-hero-thumb.active img { filter: saturate(1.18) contrast(1.06) brightness(1.04); transform: scale(1.055); }
#homeView > .shelf { position: relative; z-index: 4; }
.home-first-visible-shelf { padding-top: 46px; }
.home-first-visible-shelf > .shelf-heading { align-items: flex-start; }
.home-layout-lock {
  position: fixed;
  z-index: 30;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(117,216,255,.45);
  border-radius: 6px;
  color: #dff9ff;
  background: rgba(0,18,52,.84);
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
  cursor: pointer;
}
.home-layout-lock.unlocked {
  color: #001633;
  border-color: #75d8ff;
  background: #75d8ff;
}
.home-layout-lock svg { width: 20px; }

/* Only use the deep ultrawide inset when the hero truly has ultrawide room.
   A 4K desktop snapped to half-width is still a normal-width layout. */
@media (min-width: 2400px) {
  .home-hero-poster {
    right: clamp(214px, 13vw, 374px);
    bottom: 124px;
    width: clamp(202px, 10.6vw, 246px);
  }
}

/* Wide-screen hero stack: overlap the right-side cards and bring only focus forward. */
@media (min-width: 1600px) {
  .home-hero-rail {
    top: calc(var(--topbar-height) + 10px);
    right: 0;
    bottom: 0;
    left: auto;
    width: calc(var(--home-hero-thumb-width, 196px) + 82px);
    height: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    padding: 0 0 10px 70px;
    transform: none;
  }
  .home-hero-rail .home-hero-thumb {
    width: var(--home-hero-thumb-width, 196px);
    margin-top: var(--home-hero-stack-overlap, -45px);
    margin-left: 0;
    transform: translateX(0);
    transform-origin: right center;
  }
  .home-hero-rail .home-hero-thumb:first-child { margin-top: 0; }
  .home-hero-rail .home-hero-thumb:hover,
  .home-hero-rail .home-hero-thumb:focus-visible {
    z-index: 20;
    border-color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-hero-accent) 76%, transparent 24%), 0 30px 70px rgba(0,0,0,.62);
    transform: translateX(-18px) scale(1.04);
  }
  .home-hero-rail .home-hero-thumb.active {
    z-index: 19;
    border-color: #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--home-hero-accent) 68%, transparent 32%), 0 20px 48px rgba(0,0,0,.48);
    transform: translateX(0);
  }
}
@media (min-width: 1600px) and (max-width: 2399px) {
  .home-hero-poster { right: clamp(150px, 12vw, 260px); }
}

/* Keep the full-height hero balanced when the desktop window is narrower. */
@media (min-width: 901px) and (max-width: 1399px) {
  .home-hero-backdrop { background-position: 54% top; }
  .home-hero-poster {
    right: clamp(84px, 9vw, 126px);
    bottom: 130px;
    width: clamp(154px, 14vw, 174px);
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .home-hero-content {
    width: min(480px, calc(100vw - var(--sidebar-width) - 170px));
    padding-right: 20px;
    padding-left: calc(var(--sidebar-width) + 30px);
  }
  .home-hero-poster {
    right: 22px;
    bottom: 124px;
    width: 132px;
  }
  .home-hero-backdrop { background-position: 58% top; }
}

@media (max-width: 760px) {
  #homeView { --home-hero-height: clamp(560px, 78vh, 680px); }
  .home-hero-content {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    padding: calc(var(--topbar-height) + 20px) 16px 118px;
  }
  .home-hero-poster { display: none; }
  .home-hero-backdrop { inset: 0; background-position: 60% top; }
  .home-hero-feather {
    background: linear-gradient(90deg, rgba(0,14,36,.66) 0%, rgba(0,20,52,.26) 64%, rgba(0,20,52,.08) 100%);
  }
  .home-hero-rail { right: 12px; left: 16px; }
}

/* Desktop media guide: fill the work area while time scrolls independently. */
#liveView { width: 100%; }
.content:has(#liveView.active #liveGuidePanel:not(.is-hidden)) { height:100vh; min-height:0; overflow:hidden; padding-bottom:0; }
#liveView.active:has(#liveGuidePanel:not(.is-hidden)) { height:100%; min-height:0; display:flex; flex-direction:column; }
#liveView.active #liveGuidePanel:not(.is-hidden) { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; }
#liveView.active #liveGuidePanel:not(.is-hidden) .guide-shell { min-height:0; height:auto; flex:1 1 auto; }
.guide-shell {
  --guide-channel-width: 190px;
  --guide-slot-count: 16;
  --guide-slot-width: 180px;
  --guide-lane-width: 2880px;
  width: calc(100% + 34px);
  height: calc(100vh - 248px);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(117,216,255,.34);
  border-radius: 0;
  background: #00315f;
  box-shadow: none;
}
.guide-scroll { width: 100%; height: 100%; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; scrollbar-color: #35a9dc #002052; }
.guide-scroll-controls { position:absolute; z-index:28; top:7px; right:18px; display:flex; gap:5px; padding:3px; border:1px solid rgba(117,216,255,.34); border-radius:6px; background:rgba(0,31,72,.94); box-shadow:0 5px 16px rgba(0,0,0,.28); }
.guide-scroll-controls .icon-button { width:32px; height:32px; color:#e7faff; background:#053f70; }
.guide-scroll-controls .icon-button:hover, .guide-scroll-controls .icon-button:focus-visible { color: #fff; border-color: #75d8ff; background: #0a4978; }
.guide-scroll-controls .icon-button:disabled { opacity:.38; cursor:not-allowed; border-color:#23658e; color:#8fb7d2; background:#042b53; }
.guide-time-row, .guide-row {
  width: calc(var(--guide-channel-width) + var(--guide-lane-width));
  grid-template-columns: var(--guide-channel-width) var(--guide-lane-width);
}
.guide-time-lane {
  width: var(--guide-lane-width);
  grid-template-columns: repeat(var(--guide-slot-count), var(--guide-slot-width));
}
.guide-program-lane { width: var(--guide-lane-width); background: rgba(5,60,104,.72); }
.guide-channel { width: var(--guide-channel-width); background: #00315f; }
.guide-channel-heading, .guide-time-row { background: #003966; }
.guide-row { border-bottom: 0; }
.guide-row + .guide-row .guide-channel, .guide-row + .guide-row .guide-program-lane { border-top: 1px solid rgba(111,196,232,.24); }
.guide-body > .empty-state { width: calc(100vw - var(--sidebar-width) - 70px); }

@media (max-width: 1080px) {
  #liveView .guide-shell { width:calc(100% + 24px); }
}

@media (max-width: 760px) {
  #liveView .guide-shell { width:calc(100% + 16px); }
}

/* Roku-style black-glass channel tiles. */
.channel-card {
  height: 164px;
  border-color: rgba(102,190,226,.48);
  background:
    linear-gradient(152deg, rgba(14,39,68,.96) 0%, rgba(3,15,36,.98) 52%, rgba(1,8,24,.99) 100%);
  box-shadow:
    4px 7px 18px rgba(0,0,0,.5),
    0 0 14px rgba(8,124,171,.16),
    inset 0 1px 0 rgba(222,248,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.78);
}
.channel-card::before {
  border-color: rgba(219,247,255,.16);
  background:
    linear-gradient(180deg, rgba(96,181,224,.1) 0%, rgba(7,30,59,.04) 46%, rgba(0,4,15,.2) 100%);
  box-shadow: inset 0 0 15px rgba(41,142,190,.08);
}
.channel-card:hover, .channel-card:focus-visible {
  background: linear-gradient(152deg, rgba(18,51,85,.98), rgba(2,13,32,.99));
  box-shadow: 0 0 0 2px #e7faff, 0 0 22px rgba(58,169,216,.72), inset 0 1px 0 rgba(255,255,255,.16);
}
.channel-logo-plate {
  top: 10px;
  height: 50%;
  overflow: visible;
  border-color: rgba(185,232,249,.28);
  background:
    linear-gradient(166deg, rgba(20,48,79,.96) 0%, rgba(5,18,39,.98) 72%, rgba(1,8,24,.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(233,251,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.92),
    0 5px 12px rgba(0,0,0,.34);
}
.channel-logo-plate::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(103,185,223,.08), rgba(1,8,22,.02) 56%);
  pointer-events: none;
}
.channel-logo-plate::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -11px;
  width: 58%;
  height: 12px;
  background: linear-gradient(165deg, rgba(28,66,100,.52), rgba(2,12,29,.08));
  clip-path: polygon(0 0, 100% 0, 88% 100%, 18% 100%);
  pointer-events: none;
}
/* A zero-minimum track prevents intrinsic image sizes from stretching the row
   beyond the fixed artwork plate and shifting/clipping square or tall logos. */
.channel-logo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; margin: 0; }
.channel-logo img { width: 72%; height: 64%; min-width: 0; min-height: 0; display: block; place-self: center; margin: auto; object-fit: contain; object-position: 50% 50%; }
.channel-logo.logo-optical-up img { transform: none; }
.guide-logo.logo-optical-up img { transform: translateY(-2px); }
.channel-number { bottom: 51px; font-size: 14px; }
.channel-name { bottom: 34px; }
.channel-live {
  top: auto;
  right: auto;
  bottom: 8px;
  left: 50%;
  min-width: 42px;
  justify-content: center;
  padding: 4px 8px;
  transform: translateX(-50%);
}

.part-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.part-card {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 20px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid #15527c;
  border-radius: 6px;
  color: #f6fbff;
  background: #052c57;
  cursor: pointer;
  text-align: left;
}
.part-card:hover, .part-card:focus-visible, .part-card.active { outline: 0; border-color: #75d8ff; background: #094474; }
.part-card.watched, .episode-card.watched { border-color: rgba(182, 245, 93, .5); }
.part-play { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #001633; background: #75d8ff; }
.part-play svg { width: 16px; fill: currentColor; }
.part-card > span:nth-child(2) { min-width: 0; }
.part-card strong, .part-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-card strong { font-size: 12px; }
.part-card small { margin-top: 5px; color: #cce2f2; font-size: 9px; }
.part-card > svg { width: 17px; color: #9ceeff; }
.watched-check-badge {
  position: absolute;
  z-index: 5;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 22, 51, .24);
  border-radius: 4px;
  color: #001633;
  background: #b6f55d;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .34);
  pointer-events: none;
}
.watched-check-badge svg { width: 13px; height: 13px; stroke-width: 3; }

.media-scroll-sentinel {
  grid-column: 1 / -1;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #97bdd6;
  font-size: 11px;
}
.series-count-badge {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 4px;
  color: #f6fbff;
  background: rgba(0, 18, 48, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .34);
  font-size: 10px;
  font-weight: 850;
}
.cast-loading { opacity: .62; }
.cast-loading .cast-avatar { animation: media-pulse 1.2s ease-in-out infinite; }

.season-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 164px));
  gap: 18px;
  align-items: start;
}
.season-card {
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  color: #f6fbff;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.season-art {
  position: relative;
  aspect-ratio: 2 / 3;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(117, 216, 255, .28);
  border-radius: 6px;
  background: #031b3d;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.season-art img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; }
.season-art b {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 4px;
  color: #f6fbff;
  background: rgba(0, 18, 48, .9);
  font-size: 10px;
}
.season-card:hover .season-art, .season-card:focus-visible .season-art { transform: translateY(-3px); border-color: #75d8ff; box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 0 1px rgba(117, 216, 255, .32); }
.season-card:focus-visible { outline: 0; }
.season-card > strong, .season-card > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-card > strong { margin-top: 9px; font-size: 13px; }
.season-card > small { margin-top: 3px; color: #97bdd6; font-size: 10px; }

.episode-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.episode-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 0 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(117, 216, 255, .18);
  border-bottom: 1px solid rgba(117, 216, 255, .18);
}
.episode-details-copy { min-width: 0; }
.episode-details .eyebrow { margin: 0 0 4px; }
.episode-details h3 { margin: 0; color: #f6fbff; font-size: 18px; line-height: 1.25; }
.episode-detail-meta { margin-top: 5px; color: #9ceeff; font-size: 10px; }
.episode-details p:last-child { max-width: 900px; margin: 7px 0 0; color: #cce2f2; font-size: 11px; line-height: 1.5; }
.episode-details .primary-button { display: none; }
.resume-progress-button {
  position: relative;
  min-width: 154px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 9px;
}
.resume-button-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.resume-button-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: rgba(0, 22, 51, .34);
  border-top: 1px solid rgba(255, 255, 255, .38);
}
.resume-button-progress > span {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #001633, #0a4772);
  box-shadow: 0 0 10px rgba(0, 22, 51, .55);
}
.episode-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(124px, 42%) minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(117, 216, 255, .24);
  border-radius: 6px;
  color: #f6fbff;
  background: rgba(3, 35, 76, .88);
  cursor: pointer;
  text-align: left;
}
.episode-card-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
}
.episode-card:hover, .episode-card:focus-visible { border-color: #75d8ff; background: #094474; outline: 0; }
.episode-card.is-selected { border-color: #75d8ff; background: #0a4c80; box-shadow: 0 0 0 1px rgba(117, 216, 255, .36); }
.episode-art { position: relative; aspect-ratio: 16 / 9; display: block; overflow: hidden; background: #031b3d; }
.episode-art img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; }
.episode-art > svg { position: absolute; z-index: 2; left: 50%; top: 50%; width: 30px; height: 30px; padding: 8px; border-radius: 50%; color: #001633; background: rgba(117, 216, 255, .94); fill: currentColor; transform: translate(-50%, -50%); }
.episode-card > span:last-child { min-width: 0; padding: 10px 12px 10px 0; }
.episode-card.watched > span:last-child { padding-right: 34px; }
.episode-card strong, .episode-card small { display: block; overflow: hidden; text-overflow: ellipsis; }
.episode-card strong { max-height: 34px; font-size: 12px; line-height: 17px; }
.episode-card small { margin-top: 6px; color: #97bdd6; font-size: 9px; white-space: nowrap; }
.episode-watch-toggle {
  position: absolute;
  z-index: 7;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(182, 245, 93, .95);
  border-radius: 999px;
  color: #001633;
  background: #b6f55d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  cursor: pointer;
  opacity: 1;
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.episode-watch-toggle svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}
.episode-watch-toggle:hover, .episode-watch-toggle:focus-visible {
  outline: 0;
  opacity: 1;
  transform: translateY(-1px);
  color: #001633;
  border-color: #75d8ff;
  background: #75d8ff;
}
.episode-card-shell .episode-menu-button {
  top: auto;
  right: 7px;
  bottom: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(156, 238, 255, .28);
  border-radius: 999px;
  color: rgba(218, 246, 255, .86);
  background: rgba(2, 18, 43, .58);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.episode-card-shell .episode-menu-button svg {
  width: 13px;
  height: 13px;
}
.episode-card-shell:hover .episode-menu-button, .episode-card-shell:focus-within .episode-menu-button {
  opacity: .88;
  transform: translateY(0);
}
.episode-card-shell .episode-menu-button:hover, .episode-card-shell .episode-menu-button:focus-visible {
  opacity: 1;
  outline: 0;
  color: #001633;
  border-color: #75d8ff;
  background: #75d8ff;
}
.season-back-card {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(117, 216, 255, .3);
  border-radius: 6px;
  color: #f6fbff;
  background: rgba(3, 35, 76, .72);
  cursor: pointer;
  text-align: left;
}
.season-back-card:hover, .season-back-card:focus-visible { border-color: #75d8ff; background: #094474; outline: 0; }
.season-back-card svg { width: 22px; color: #75d8ff; }
.season-back-card strong, .season-back-card small { display: block; }
.season-back-card small { margin-top: 4px; color: #97bdd6; font-size: 9px; }

@keyframes media-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.selection-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 8px 10px 8px 15px;
  border: 1px solid rgba(117,216,255,.34);
  border-radius: 6px;
  background: rgba(3,35,76,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.selection-toolbar strong { color: #f6fbff; font-size: 13px; }
.selection-toolbar-spacer { flex: 1; }
.collection-controls > .icon-button.active { color: #001633; border-color: #75d8ff; background: #75d8ff; }
.poster-grid.selecting .media-card-button { cursor: pointer; }
.poster-grid.selecting .card-play, .poster-grid.selecting .card-menu-button { display: none; }
.media-card.selected .poster-frame {
  border-color: #75d8ff;
  box-shadow: 0 0 0 2px #e7faff, 0 0 22px rgba(58,169,216,.72), 4px 7px 18px rgba(0,0,0,.5);
}
.card-select-indicator {
  position: absolute;
  z-index: 8;
  top: 8px;
  left: 8px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(222,248,255,.84);
  border-radius: 4px;
  color: #001633;
  background: rgba(2,18,43,.82);
  box-shadow: 0 3px 8px rgba(0,0,0,.42);
}
.media-card.selected .card-select-indicator { border-color: #75d8ff; background: #75d8ff; }
.card-select-indicator svg { width: 17px; height: 17px; stroke-width: 3; }
.move-media-dialog { width: min(560px, calc(100vw - 28px)); }
.move-media-form { display: grid; gap: 16px; padding: 18px; }
.move-media-form select {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 11px;
  border: 1px solid #23658e;
  border-radius: 5px;
  color: #f6fbff;
  background: #05325e;
}
.move-media-form option { color: #f6fbff; background: #05325e; }
.move-media-warning { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 12px; border: 1px solid rgba(117,216,255,.22); border-radius: 5px; color: #cce2f2; background: rgba(0,20,52,.66); font-size: 11px; }
.move-media-warning svg { width: 19px; flex: 0 0 auto; color: #75d8ff; }

@media (max-width: 760px) {
  .episode-details { grid-template-columns: 1fr; gap: 12px; }
  .episode-details .primary-button { width: max-content; }
  .guide-shell { --guide-channel-width: 150px; height: calc(100vh - 225px); min-height: 360px; }
  .guide-channel { grid-template-columns: 42px minmax(0,1fr); padding: 8px; }
  .part-row { grid-template-columns: 1fr; }
  .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .episode-grid { grid-template-columns: 1fr; }
  .selection-toolbar { flex-wrap: wrap; }
  .selection-toolbar-spacer { display: none; }
  .selection-toolbar strong { flex: 1 0 100%; }
}

/* Final media-side polish from live QA. */
.primary-nav { padding-bottom: 2px; }
.sidebar-section { padding-top: 0; }
.home-nav-row { margin-bottom: 0; }

.detail-section:first-of-type {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(117, 216, 255, .2);
  background: #00194a;
}
.detail-section:first-of-type .shelf-heading {
  min-height: 34px;
  align-items: center;
}

/* Rich title context and artwork controls. */
.detail-facts-section { padding-top: 22px; padding-bottom: 30px; border-top: 1px solid rgba(117,216,255,.18); }
.detail-facts { max-width: 1180px; }
.detail-tagline { margin: 0 0 17px; color: #d9effa; font-size: 15px; font-style: italic; line-height: 1.5; }
.detail-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--line-soft); }
.detail-fact-grid > div { min-height: 72px; padding: 14px 16px; background: rgba(0,28,67,.94); }
.detail-fact-grid small, .detail-fact-grid strong { display: block; }
.detail-fact-grid small { color: #83abc3; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.detail-fact-grid strong { margin-top: 7px; color: #f1faff; font-size: 13px; line-height: 1.35; }

.cast-card { color: inherit; text-decoration: none; }
.cast-card small { display: block; margin-top: 4px; overflow: hidden; color: #97bdd6; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; }
.cast-card:hover strong, .cast-card:focus-visible strong { color: #75d8ff; }
.cast-card:focus-visible { border-radius: 5px; outline: 2px solid #75d8ff; outline-offset: 4px; }
.cast-person-button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.person-dialog { width: min(880px, calc(100vw - 28px)); }
.person-content { min-height: 180px; overflow-y: auto; padding: 24px; overscroll-behavior: contain; }
.person-overview { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
.person-portrait { height: 255px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.person-portrait img { width: 100%; height: 100%; object-fit: cover; }
.person-portrait > span { font-size: 48px; color: var(--accent); }
.person-content h3 { margin: 18px 0 10px; font-size: 16px; }
.person-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.person-facts dt { color: var(--muted); font-size: 11px; }
.person-facts dd { margin: 4px 0 0; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.person-biography { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.person-message { color: var(--muted-strong); }
.person-title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px; }
.person-title-card { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; text-align: left; color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.person-title-card img, .person-title-placeholder { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.person-title-placeholder { display: grid; place-items: center; color: var(--accent); }
.person-title-card strong { font-size: 11px; }
.person-title-card small { color: var(--muted); font-size: 10px; }
.person-title-card:focus-visible, .cast-person-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.person-title-card:hover strong { color: var(--accent); }
.person-dialog .dialog-footer { justify-content: flex-start; }
.award-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.award-card { min-width: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); }
.award-logo { width: 88px; height: 88px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; color: var(--accent); background: #fff; font-size: 36px; }
.award-logo img { width: 100%; height: 100%; object-fit: contain; }
.award-logo svg { width: 36px; height: 36px; }
.award-info { min-width: 0; }
.award-info > strong { display: block; margin-bottom: 12px; font-size: 15px; overflow-wrap: anywhere; }
.award-year-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.award-years { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.award-year { color: var(--text); font-weight: 650; font-size: 14px; white-space: nowrap; }
.award-year small { color: var(--muted); font-weight: 400; font-size: 10px; }
.award-result { padding: 4px 7px; border-radius: 5px; color: var(--muted-strong); background: var(--bg-soft); font-size: 11px; white-space: nowrap; }
.award-result.is-win { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-soft)); }
@media (min-width: 2200px) { .award-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1199px) {
  .award-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .award-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .award-logo { width: 64px; height: 64px; }
}
@media (min-width: 900px) {
  .detail-section .cast-card img, .detail-section .cast-avatar { width: 126px; height: 126px; }
  .detail-section .cast-card strong { font-size: 13px; }
  .detail-section .cast-card small { font-size: 11px; }
}
@media (max-width: 600px) {
  .person-content { padding: 16px; }
  .person-overview { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .person-portrait { height: 150px; }
  .person-facts { grid-template-columns: 1fr; }
  .person-biography { font-size: 13px; }
  .award-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .award-logo { width: 64px; height: 64px; }
}

.availability-list { display: grid; gap: 20px; }
.availability-server { width: min(440px, 100%); min-height: 94px; display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid rgba(117,216,255,.58); border-radius: 6px; color: #f6fbff; background: linear-gradient(120deg, rgba(4,73,126,.96), rgba(0,31,72,.96)); cursor: pointer; text-align: left; }
.availability-server:hover, .availability-server:focus-visible { border-color: #75d8ff; outline: 0; background: linear-gradient(120deg, rgba(5,91,153,.98), rgba(0,40,88,.98)); }
.availability-server > img { width: 70px; height: 70px; border-radius: 6px; object-fit: contain; background: #001736; }
.availability-server span, .availability-server small, .availability-server strong, .availability-server b { display: block; }
.availability-server small { color: #75d8ff; font-size: 9px; font-weight: 850; }
.availability-server strong { margin-top: 5px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.availability-server b { margin-top: 9px; color: #bfeeff; font-size: 10px; font-weight: 700; }
.availability-server b svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.availability-group { min-width: 0; }
.availability-group h3 { margin: 0 0 8px; color: #d9effa; font-size: 13px; }
.availability-group > div { display: flex; flex-wrap: wrap; gap: 9px; }
.availability-item { position: relative; min-width: 190px; color: inherit; text-decoration: none; }
.availability-item > svg { width: 14px; color: #75d8ff; }
.availability-item:hover, .availability-item:focus-visible { border-color: #75d8ff; outline: 0; background: var(--surface-strong); }

.review-row, .extra-row { display: grid; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.review-row { grid-auto-columns: minmax(280px, 360px); gap: 12px; padding-bottom: 8px; }
.review-card { min-height: 190px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(0,25,60,.88); }
.review-card header { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 10px; }
.review-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #001633; background: #75d8ff; font-size: 11px; font-weight: 850; }
.review-card header strong, .review-card header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-card header small { margin-top: 3px; color: #97bdd6; font-size: 9px; }
.review-card p { max-height: 112px; margin: 14px 0 0; overflow: hidden; color: #d1e4ef; font-size: 11px; line-height: 1.55; }
.extra-row { grid-auto-columns: 260px; gap: 13px; padding-bottom: 8px; }
.extra-card { min-width: 0; padding: 0 0 11px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 6px; color: #f6fbff; background: rgba(0,25,60,.88); cursor: pointer; text-align: left; }
.extra-card:hover, .extra-card:focus-visible { border-color: #75d8ff; outline: 0; }
.extra-image { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #001631; }
.extra-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.extra-image svg { position: absolute; width: 38px; height: 38px; padding: 9px; border-radius: 50%; color: #001633; background: rgba(117,216,255,.92); }
.extra-card > strong, .extra-card > small { display: block; margin-right: 12px; margin-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-card > strong { margin-top: 10px; font-size: 11px; }
.extra-card > small { margin-top: 4px; color: #97bdd6; font-size: 9px; }

.artwork-dialog { width: min(1120px, calc(100vw - 28px)); }
.artwork-editor { min-height: 360px; overflow-y: auto; padding: 16px 18px 22px; }
.artwork-tabs { width: max-content; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); margin-bottom: 16px; overflow: hidden; border: 1px solid #23658e; border-radius: 5px; }
.artwork-tabs button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 0; color: #a8c6d9; background: #002653; cursor: pointer; }
.artwork-tabs button + button { border-left: 1px solid #23658e; }
.artwork-tabs button.active { color: #001633; background: #75d8ff; }
.artwork-tabs svg { width: 15px; }
.artwork-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 15px; }
.artwork-grid.backdrops { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.artwork-option { min-width: 0; display: grid; gap: 7px; padding: 0; border: 0; color: #b8d4e4; background: transparent; cursor: pointer; text-align: left; }
.artwork-option > span { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: #00152e; }
.artwork-grid.backdrops .artwork-option > span { aspect-ratio: 16 / 9; }
.artwork-option img { width: 100%; height: 100%; display: block; object-fit: cover; }
.artwork-option i, .artwork-option svg { display: none; }
.artwork-quality, .artwork-source { position: absolute; top: 7px; z-index: 2; padding: 4px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: #f5fbff; background: rgba(0,15,35,.88); box-shadow: 0 2px 8px rgba(0,0,0,.24); font-size: 8px; font-weight: 900; letter-spacing: .07em; line-height: 1; }
.artwork-quality { left: 7px; }
.artwork-source { right: 7px; color: #bfeaff; }
.artwork-quality-best { color: #071e18; border-color: #7ff0c4; background: #7ff0c4; }
.artwork-quality-great { color: #001a2a; border-color: #75d8ff; background: #75d8ff; }
.artwork-quality-good { color: #fff; border-color: #3d8db9; background: rgba(10,76,112,.94); }
.artwork-quality-low { color: #ffe2a8; border-color: rgba(255,190,74,.65); }
.artwork-quality-unknown { color: #cad9e2; }
.artwork-option.selected > span { border-color: #75d8ff; box-shadow: 0 0 0 3px rgba(117,216,255,.18); }
.artwork-option.selected svg { position: absolute; right: 7px; bottom: 7px; width: 25px; height: 25px; display: block; padding: 5px; border-radius: 50%; color: #001633; background: #75d8ff; }
.artwork-option small { overflow: hidden; color: #8eb3c9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.artwork-option small strong { color: #e9f7ff; font-size: 10px; }
.artwork-empty { margin: 70px 0; color: #97bdd6; text-align: center; }

@media (max-width: 760px) {
  .detail-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .availability-server { grid-template-columns: 54px minmax(0,1fr); }
  .availability-server > img { width: 54px; height: 54px; }
  .review-row { grid-auto-columns: minmax(250px, 82vw); }
  .extra-row { grid-auto-columns: minmax(230px, 76vw); }
  .artwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artwork-grid.backdrops { grid-template-columns: 1fr; }
}

.channel-card {
  width: 245px;
  height: 178px;
}
.channel-logo-plate {
  top: 10px;
  height: 82px;
}
.channel-number {
  bottom: 58px;
  font-size: 14px;
}
.channel-name {
  bottom: 41px;
  font-size: 11px;
  font-weight: 760;
}
.channel-now {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: -webkit-box;
  overflow: hidden;
  color: #9ceeff;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.22;
  text-shadow: 0 1px 3px rgba(0,0,0,.78);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.channel-live {
  top: 6px;
  right: auto;
  bottom: auto;
  left: 6px;
  transform: none;
}
.channel-live-news,
.channel-live-sports,
.channel-live-new,
.channel-live-live { color: #fff; background: rgba(229, 9, 20, .94); }
@media (max-width: 760px) {
  .channel-card { width: 220px; }
}

/* Title details: visible technical facts, direct artwork editing, and button-driven shelves. */
.detail-technical { max-width: 760px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.detail-technical span { min-width: 0; display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 7px; border: 1px solid rgba(117,216,255,.28); border-radius: 4px; color: #cce8f7; background: rgba(0,26,61,.62); font-size: 9px; font-weight: 700; }
.detail-technical span.file-name { max-width: min(100%, 390px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-technical svg { width: 12px; height: 12px; flex: 0 0 auto; color: #75d8ff; }
.artwork-edit-button { position: absolute; z-index: 6; border-color: rgba(117,216,255,.72); color: #e9f9ff; background: rgba(0,17,43,.9); box-shadow: 0 5px 16px rgba(0,0,0,.35); }
.artwork-edit-button:hover, .artwork-edit-button:focus-visible { border-color: #75d8ff; color: #001633; background: #75d8ff; }
.artwork-edit-button.poster-edit { right: 8px; bottom: 8px; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.artwork-edit-button.backdrop-edit { top: 17px; right: 18px; }
.shelf-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.shelf-nav .icon-button { width: 32px; height: 32px; }
.shelf-nav svg { width: 16px; height: 16px; }
.detail-section .poster-row,
.detail-section .review-row,
.detail-section .extra-row,
.detail-section .cast-row { scrollbar-width: none; scroll-behavior: smooth; }
.detail-section .poster-row::-webkit-scrollbar,
.detail-section .review-row::-webkit-scrollbar,
.detail-section .extra-row::-webkit-scrollbar,
.detail-section .cast-row::-webkit-scrollbar { display: none; }
.detail-section .cast-row { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; justify-content: start; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px; overscroll-behavior-inline: contain; }
@media (min-width: 900px) { .detail-section .cast-row { grid-auto-columns: 154px; } }
.review-card { align-self: start; }
.review-card.expanded { min-height: 100%; }
.review-card.expanded p { max-height: none; overflow: visible; }
.review-expand { margin-top: 10px; color: #75d8ff; font-weight: 750; }

@media (max-width: 760px) {
  .detail-technical { max-height: 62px; overflow: hidden; }
  .detail-technical span.file-name { max-width: 100%; }
  .artwork-edit-button.backdrop-edit { top: 13px; right: 13px; }
  .shelf-nav .icon-button { width: 30px; height: 30px; }
}

/* Music is its own listening workspace, not a poster library. */
.music-view {
  min-height: 100%;
  color: #f5fbfa;
  background: var(--music-ink);
}
.content.music-workspace { padding: var(--topbar-height) 0 60px; background: var(--music-ink); }
.music-player {
  position: sticky;
  top: var(--topbar-height);
  z-index: 18;
  min-height: 132px;
  display: grid;
  grid-template-columns: 92px minmax(220px, 340px) minmax(420px, 1fr) 170px;
  align-items: center;
  gap: 22px;
  padding: 18px 26px;
  border-top: 2px solid var(--music-accent);
  border-bottom: 1px solid var(--music-line);
  background: var(--music-player-bg);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .42), inset 0 -1px 0 color-mix(in srgb, var(--music-accent) 20%, transparent);
}
.music-now-art { position: relative; width: 92px; height: 92px; overflow: hidden; border: 2px solid var(--music-warm); border-radius: 6px; background: var(--music-surface); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.music-now-art[role="button"], .music-now-copy[role="button"] { cursor: pointer; }
.music-now-art[role="button"]:focus-visible, .music-now-copy[role="button"]:focus-visible { outline: 2px solid var(--music-accent); outline-offset: 2px; }
.music-now-art img { width: 100%; height: 100%; display: none; object-fit: cover; }
.music-now-art img.has-image { display: block; }
.music-now-art span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--music-accent); }
.music-now-art span.is-hidden { display: none; }
.music-now-art svg { width: 34px; height: 34px; }
.music-now-copy { min-width: 0; display: grid; gap: 5px; padding-right: 8px; }
.music-now-copy small { width: fit-content; padding: 3px 6px; border-radius: 2px; color: var(--music-ink); background: var(--music-warm); font-size: 10px; font-weight: 850; letter-spacing: 0; }
.music-now-copy strong, .music-now-copy span, .music-now-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-now-copy strong { font-size: 19px; }
.music-now-copy span { color: color-mix(in srgb, var(--music-copy) 82%, var(--music-warm)); font-size: 12px; }
.music-now-copy em { color: color-mix(in srgb, var(--music-copy) 56%, var(--music-warm)); font-size: 10px; font-style: normal; }
.music-transport { min-width: 0; display: grid; gap: 10px; padding: 8px 12px 10px; border: 0; background: transparent; }
.music-transport-buttons { display: flex; align-items: center; justify-content: center; gap: 9px; }
.music-transport-buttons .icon-button { width: 38px; height: 38px; }
.music-transport-buttons .icon-button { color: var(--music-accent); }
.music-transport-buttons .icon-button { border: 0; background: transparent; }
.music-transport-buttons .icon-button:nth-child(1) { color: var(--music-control-a); }
.music-transport-buttons .icon-button:nth-child(2) { color: var(--music-control-b); }
.music-transport-buttons .icon-button:nth-child(4) { color: var(--music-control-c); }
.music-transport-buttons .icon-button:nth-child(5) { color: var(--music-control-d); }
.music-transport-buttons .icon-button.active { color: var(--music-warm); background: transparent; }
.music-transport-buttons .music-stop-button { color: var(--music-stop); background: transparent; }
.music-transport-buttons .icon-button:hover, .music-transport-buttons .icon-button:focus-visible { color: var(--music-warm); background: transparent; outline: 0; transform: scale(1.1); }
.music-transport-buttons .icon-button svg { filter: drop-shadow(0 0 5px currentColor); }
.music-play-button { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid var(--music-control-a); border-radius: 50%; color: var(--music-ink); background: var(--music-accent); box-shadow: 0 0 16px color-mix(in srgb, var(--music-accent) 58%, transparent); cursor: pointer; }
.music-play-button:hover, .music-play-button:focus-visible { outline: 2px solid var(--music-copy); outline-offset: 2px; }
.music-play-button svg { width: 24px; height: 24px; }
.music-timeline { position: relative; min-width: 0; display: grid; grid-template-columns: 42px minmax(120px, 1fr) 42px; align-items: center; gap: 10px; color: color-mix(in srgb, var(--music-copy) 58%, var(--music-warm)); font-size: 10px; }
.music-wave { position: relative; height: 42px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.music-wave span { width: 4px; height: var(--wave-height, 40%); flex: 1 1 auto; border-radius: 2px; background: var(--music-wave-idle); transform-origin: center; }
.music-wave span.played { background: var(--music-wave-a); }
.music-wave span.played:nth-child(5n) { background: var(--music-wave-b); }
.music-wave span.played:nth-child(7n) { background: var(--music-wave-c); }
.music-wave span.played:has(+ span:not(.played)) { background: var(--music-copy); }
.music-player.is-playing .music-wave span { animation: musicPulse .72s ease-in-out infinite alternate; animation-delay: var(--wave-delay, 0ms); }
.music-timeline input { position: absolute; inset: 0 52px; width: auto; height: 36px; margin: 0; opacity: 0; cursor: pointer; }
.music-volume { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.music-volume svg { width: 19px; color: var(--music-warm); }
.music-volume input { width: 128px; accent-color: var(--music-accent); }
.music-player.is-preparing .music-now-art { border-color: var(--music-accent); }
@keyframes musicPulse { from { transform: scaleY(.7); } to { transform: scaleY(1.08); } }

.topbar:has(.music-player.is-mini) { grid-template-columns: minmax(220px, var(--sidebar-width)) minmax(260px, 590px) minmax(420px, 1fr) auto; gap: 14px; }
.sidebar-collapsed .topbar:has(.music-player.is-mini) { grid-template-columns: minmax(160px, 220px) minmax(260px, 590px) minmax(420px, 1fr) auto; }
.topbar:has(.music-player.is-mini) .search-box { display: flex; grid-column: 2; grid-row: 1; }
.topbar:has(.music-player.is-mini) .topbar-actions { grid-column: 4; grid-row: 1; min-width: max-content; }
.topbar .music-player.is-mini {
  position: static;
  z-index: auto;
  box-sizing: border-box;
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  min-height: 0;
  grid-template-columns: 44px minmax(120px, 190px) minmax(280px, 1fr);
  gap: 9px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.music-player.is-mini .music-now-art { width: 44px; height: 44px; border-width: 1px; }
.music-player.is-mini .music-now-art svg { width: 24px; height: 24px; }
.music-player.is-mini .music-now-copy { gap: 2px; }
.music-player.is-mini .music-now-copy small { display: none; }
.music-player.is-mini .music-now-copy strong { font-size: 15px; }
.music-player.is-mini .music-now-copy span { font-size: 10px; }
.music-player.is-mini .music-now-copy em { display: none; }
.music-player.is-mini .music-transport { gap: 1px; padding: 0; }
.music-player.is-mini .music-transport-buttons { gap: 5px; }
.music-player.is-mini .music-transport-buttons .icon-button { width: 25px; height: 25px; }
.music-player.is-mini .music-play-button { width: 30px; height: 30px; }
.music-player.is-mini .music-play-button svg { width: 15px; height: 15px; }
.music-player.is-mini .music-timeline { grid-template-columns: 28px minmax(100px, 1fr) 28px; gap: 4px; font-size: 8px; }
.music-player.is-mini .music-wave { height: 17px; }
.music-player.is-mini .music-timeline input { right: 32px; left: 32px; height: 17px; }
.music-player.is-mini .music-volume { display: none; }

@media (min-width: 1201px) and (max-width: 1800px) {
  .topbar .music-player.is-mini { grid-template-columns: 36px minmax(76px, 110px) minmax(0, 1fr); gap: 6px; overflow: hidden; }
  .topbar .music-player.is-mini .music-now-art { width: 36px; height: 36px; }
  .topbar .music-player.is-mini .music-transport-buttons .icon-button:nth-child(1),
  .topbar .music-player.is-mini .music-transport-buttons .icon-button:nth-child(n+5) { display: none; }
  .topbar .music-player.is-mini .music-timeline { grid-template-columns: minmax(0, 1fr); }
  .topbar .music-player.is-mini .music-timeline > span { display: none; }
  .topbar .music-player.is-mini .music-timeline input { right: 0; left: 0; }
}

@media (max-width: 1400px) {
  .topbar:has(.music-player.is-mini) { grid-template-columns: var(--sidebar-width) minmax(220px, 340px) minmax(300px, 1fr) auto; gap: 9px; }
  .sidebar-collapsed .topbar:has(.music-player.is-mini) { grid-template-columns: minmax(150px, 180px) minmax(220px, 340px) minmax(300px, 1fr) auto; }
  .topbar .music-player.is-mini { min-width: 0; grid-template-columns: 36px minmax(76px, 110px) minmax(170px, 1fr); gap: 6px; overflow: hidden; }
  .music-player.is-mini .music-now-art { width: 36px; height: 36px; }
  .music-player.is-mini .music-now-copy strong { font-size: 12px; }
  .music-player.is-mini .music-now-copy span { font-size: 9px; }
  .music-player.is-mini .music-timeline { grid-template-columns: minmax(90px, 1fr); }
  .music-player.is-mini .music-timeline > span { display: none; }
  .music-player.is-mini .music-timeline input { right: 0; left: 0; }
}

.music-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 30px 20px 18px; }
.music-heading-row h1 { margin: 2px 0 4px; font-size: 32px; }
.music-browse-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.music-search { min-width: 280px; flex: 1 1 280px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--music-line); border-radius: 5px; background: var(--music-surface); }
.music-search svg { width: 16px; color: var(--music-accent); }
.music-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: inherit; background: transparent; }
.music-mode { width: auto; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(76px, 1fr)); border-color: var(--music-line); }
.music-mode button { min-width: 76px; padding: 0 12px; color: color-mix(in srgb, var(--music-copy) 72%, var(--music-warm)); background: var(--music-surface); }
.music-mode button.active { color: var(--music-ink); background: var(--music-accent); }
.music-my-toggle { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--music-line); border-radius: 5px; color: color-mix(in srgb, var(--music-copy) 72%, var(--music-warm)); background: var(--music-surface); cursor: pointer; }
.music-my-toggle:hover, .music-my-toggle:focus-visible, .music-my-toggle.active { border-color: var(--music-accent); outline: 0; color: var(--music-ink); background: var(--music-accent); }
.music-my-toggle svg { width: 17px; height: 17px; }
.music-my-button { min-width: 112px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--music-accent) 72%, var(--music-line)); border-radius: 7px; color: var(--music-copy); background: linear-gradient(135deg, color-mix(in srgb, var(--music-accent) 22%, var(--music-surface)), var(--music-surface)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 4px 14px color-mix(in srgb, var(--music-player-bg) 50%, transparent); cursor: pointer; font-size: 12px; font-weight: 850; letter-spacing: .01em; }
.music-my-button:hover, .music-my-button:focus-visible, .music-my-button.active { border-color: var(--music-accent); outline: 0; color: var(--music-ink); background: var(--music-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--music-accent) 20%, transparent), 0 6px 18px color-mix(in srgb, var(--music-player-bg) 55%, transparent); }
.music-my-button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.music-picks-toggle { height: 40px; flex: 0 0 auto; border-color: var(--music-line); color: color-mix(in srgb, var(--music-copy) 82%, var(--music-warm)); background: var(--music-surface); }
.music-picks-toggle:hover, .music-picks-toggle:focus-visible, .music-picks-toggle.active { border-color: var(--music-accent); outline: 0; color: var(--music-ink); background: var(--music-accent); }
.music-browse-controls .select-control { flex: 0 0 auto; }
.music-sort-control { min-width: 190px; height: 40px; gap: 9px; padding: 0 12px; border-color: var(--music-line); background: var(--music-surface); cursor: pointer; }
.music-sort-control:hover, .music-sort-control:focus-within { border-color: var(--music-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--music-accent) 20%, transparent); }
.music-sort-control svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--music-accent); pointer-events: none; }
.music-sort-control span { flex: 0 0 auto; color: color-mix(in srgb, var(--music-copy) 60%, var(--music-warm)); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.music-sort-control select { min-width: 118px; height: 100%; flex: 1 1 auto; color: var(--music-copy); font-size: 12px; font-weight: 720; cursor: pointer; }
.music-scan-button, .music-theme-button { flex: 0 0 auto; color: var(--music-warm); border-color: var(--music-line); background: var(--music-surface); }
.music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 22px 16px; padding: 6px 20px 28px; }
.music-album-card, .music-artist-card { min-width: 0; display: grid; gap: 8px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.music-album-art, .music-artist-art { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--music-line); border-radius: 6px; background: var(--music-surface); }
.music-album-art img, .music-artist-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.music-album-art span, .music-artist-art span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--music-accent); }
.music-album-art span svg, .music-artist-art span svg { width: 34px; height: 34px; }
.music-album-card:hover .music-album-art, .music-album-card:focus-visible .music-album-art,
.music-artist-card:hover .music-artist-art, .music-artist-card:focus-visible .music-artist-art { border-color: var(--music-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--music-accent) 24%, transparent); }
.music-album-card:focus-visible, .music-artist-card:focus-visible { outline: 0; }
.music-album-card strong, .music-album-card small, .music-artist-card strong, .music-artist-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-album-card strong, .music-artist-card strong { font-size: 12px; }
.music-album-card small, .music-artist-card small { color: color-mix(in srgb, var(--music-copy) 56%, var(--music-warm)); font-size: 9px; }
.music-song-list, .music-track-list { margin: 0 20px 28px; border-top: 1px solid var(--music-line); }
.music-song-row, .music-track-row { width: 100%; min-height: 54px; display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(100px, 220px) 58px; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--music-line) 72%, transparent); color: inherit; background: transparent; cursor: pointer; text-align: left; }
.music-song-row { grid-template-columns:38px minmax(0, 1fr) minmax(100px, 220px) 58px 34px; }
.music-match-button { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:4px; color:color-mix(in srgb, var(--music-copy) 70%, var(--music-warm)); background:transparent; cursor:pointer; }
.music-match-button:hover, .music-match-button:focus-visible { border-color:var(--music-accent); outline:0; color:var(--music-ink); background:var(--music-accent); }
.music-match-button svg { width:15px; height:15px; }
.music-album-card, .music-artist-card { position:relative; }
.music-save-button { position:absolute; top:10px; right:10px; width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid color-mix(in srgb, var(--music-copy) 28%, transparent); border-radius:4px; color:var(--music-copy); background:color-mix(in srgb, var(--music-player-bg) 88%, transparent); cursor:pointer; z-index:2; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .16s ease, transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease; }
.music-album-card:hover .music-save-button, .music-album-card:focus-within .music-save-button, .music-artist-card:hover .music-save-button, .music-artist-card:focus-within .music-save-button, .music-save-button.active { opacity:1; transform:translateY(0); pointer-events:auto; }
.music-save-button:hover, .music-save-button:focus-visible, .music-save-button.active { border-color:var(--music-accent); outline:0; color:var(--music-ink); background:var(--music-accent); }
.music-save-button svg { width:17px; height:17px; }
.music-my-list { display:grid; gap:28px; margin:0 20px 28px; }
.music-my-list > section { min-width:0; }
.music-my-list h2 { margin:0 0 12px; font-size:18px; }
.music-transport-buttons .icon-button.active { color:var(--music-ink); background:var(--music-accent); }
.music-song-row:hover, .music-song-row:focus-visible, .music-track-row:hover, .music-track-row:focus-visible { outline: 0; background: var(--music-surface); }
.music-song-row.is-current, .music-track-row.is-current { color:var(--music-copy); background:color-mix(in srgb, var(--music-accent) 30%, var(--music-surface)); box-shadow:inset 4px 0 0 var(--music-accent), inset 0 1px 0 color-mix(in srgb, var(--music-accent) 45%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--music-accent) 45%, transparent); }
.music-song-row.is-current .music-track-copy strong, .music-track-row.is-current .music-track-copy strong { color:var(--music-warm); }
.music-song-row.is-current .music-track-copy strong::after, .music-track-row.is-current .music-track-copy strong::after { content:"PLAYING"; display:inline-block; margin-left:9px; padding:2px 5px; border-radius:2px; color:var(--music-ink); background:var(--music-accent); font-size:7px; font-weight:900; vertical-align:middle; }
.music-song-row > span:first-child, .music-track-row > span:first-child { color: color-mix(in srgb, var(--music-copy) 48%, var(--music-warm)); font-size: 10px; text-align: center; }
.music-track-copy { min-width: 0; display: grid; gap: 3px; }
.music-track-copy strong, .music-track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-copy strong { font-size: 11px; }
.music-track-copy small, .music-song-row > small, .music-track-row > small { color: color-mix(in srgb, var(--music-copy) 52%, var(--music-warm)); font-size: 9px; }
.music-load-more { padding: 0 20px 30px; text-align: center; }
.music-album-detail { padding: 2px 20px 36px; }
.music-detail-back { margin-bottom: 16px; color: var(--music-accent); }
.music-album-header { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); align-items: end; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--music-line); }
.music-album-header > img { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; background: var(--music-surface); }
.music-album-header h2 { margin: 5px 0 6px; font-size: clamp(28px, 5vw, 58px); letter-spacing: 0; }
.music-artist-link { padding: 0; border: 0; color: var(--music-accent); background: transparent; cursor: pointer; font-weight: 750; }
.music-album-header p { color: color-mix(in srgb, var(--music-copy) 56%, var(--music-warm)); }
.music-album-actions { display: flex; gap: 8px; margin-top: 18px; }
.music-track-list.music-artist-collection { display: grid; gap: 22px; margin-top: 22px; border-top: 0; }
.music-artist-album { overflow: hidden; border: 1px solid var(--music-line); border-radius: 8px; background: color-mix(in srgb, var(--music-surface) 74%, transparent); }
.music-artist-album > header { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--music-line); background: color-mix(in srgb, var(--music-player-bg) 72%, transparent); }
.music-artist-album-art { width: 72px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--music-line); border-radius: 5px; background: var(--music-surface); }
.music-artist-album-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.music-artist-album-art span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--music-accent); }
.music-artist-album > header p { margin: 0 0 3px; }
.music-artist-album > header h3 { margin: 0 0 4px; color: var(--music-copy); font-size: 19px; }
.music-artist-album > header small { color: color-mix(in srgb, var(--music-copy) 58%, var(--music-warm)); }
.music-artist-album-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.music-artist-album-actions button { min-width: 118px; justify-content: center; }
.music-artist-album-tracks .music-track-row:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .music-player { min-height: 112px; grid-template-columns: 72px minmax(150px, 220px) minmax(260px, 1fr); gap: 14px; padding: 14px 16px; }
  .music-volume { display: none; }
  .music-now-art { width: 72px; height: 72px; }
  .music-heading-row { align-items: stretch; flex-direction: column; }
  .music-browse-controls { justify-content: flex-start; }
  .topbar:has(.music-player.is-mini) { grid-template-columns: var(--sidebar-width) minmax(200px, 300px) minmax(280px, 1fr) auto; gap: 8px; }
  .topbar .music-player.is-mini { grid-template-columns: 36px minmax(80px, 120px) minmax(180px, 1fr); }
}
@media (max-width: 1200px) {
  html:has(.topbar .music-player.is-mini) { --topbar-height: 116px; }
  .topbar:has(.music-player.is-mini),
  .sidebar-collapsed .topbar:has(.music-player.is-mini) {
    grid-template-columns: max(150px, var(--sidebar-width)) minmax(0, 1fr) auto;
    grid-template-rows: 60px 56px;
    gap: 0 12px;
    padding: 0 14px;
  }
  .topbar:has(.music-player.is-mini) .topbar-start { grid-column: 1; grid-row: 1; min-width: 0; }
  .topbar:has(.music-player.is-mini) .search-box {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .topbar:has(.music-player.is-mini) .search-box input { min-width: 0; }
  .topbar:has(.music-player.is-mini) .topbar-actions { grid-column: 3; grid-row: 1; }
  .topbar .music-player.is-mini {
    position: static;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 760px);
    max-width: 100%;
    transform: none;
  }
}
@media (max-width: 760px) {
  .topbar:has(.music-player.is-mini),
  .sidebar-collapsed .topbar:has(.music-player.is-mini) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 8px;
    padding: 0 8px;
  }
  .topbar:has(.music-player.is-mini) .topbar-start { display: flex; }
  .topbar:has(.music-player.is-mini) .topbar-actions { display: flex; }
  .topbar .music-player.is-mini .music-transport-buttons .icon-button:nth-child(1),
  .topbar .music-player.is-mini .music-transport-buttons .icon-button:nth-child(n+5) { display: none; }
}
@media (max-width: 520px) {
  html:has(.topbar .music-player.is-mini) { --topbar-height: 160px; }
  .topbar:has(.music-player.is-mini),
  .sidebar-collapsed .topbar:has(.music-player.is-mini) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 50px 52px 58px;
  }
  .topbar:has(.music-player.is-mini) .topbar-start { grid-column: 1; grid-row: 1; }
  .topbar:has(.music-player.is-mini) .search-box { grid-column: 1 / -1; grid-row: 2; }
  .topbar:has(.music-player.is-mini) .topbar-actions { grid-column: 2; grid-row: 1; }
  .topbar .music-player.is-mini { grid-row: 3; }
}
@media (max-width: 620px) {
  .music-player { min-height: 0; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; }
  .music-now-art { width: 62px; height: 62px; }
  .music-transport { grid-column: 1 / -1; }
  .music-transport-buttons { position: absolute; top: 13px; right: 10px; justify-content: flex-end; }
  .music-transport-buttons .icon-button:first-child, .music-transport-buttons .icon-button:last-child { display: none; }
  .music-play-button { width: 42px; height: 42px; }
  .music-transport { padding: 7px 9px 9px; }
  .music-wave { height: 30px; }
  .music-timeline input { height: 30px; }
  .music-heading-row { padding: 22px 12px 14px; }
  .music-heading-row h1 { font-size: 28px; }
  .music-browse-controls { display: grid; grid-template-columns: 1fr; }
  .music-search { min-width: 0; }
  .music-mode { display: grid; grid-template-columns: repeat(2, 1fr); }
  .music-my-toggle, .music-my-button, .music-scan-button, .music-theme-button { width: 100%; }
  .music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; padding: 4px 12px 24px; }
  .music-song-list, .music-track-list { margin-right: 0; margin-left: 0; }
  .music-song-row { grid-template-columns:30px minmax(0, 1fr) 44px 34px; }
  .music-track-row { grid-template-columns: 30px minmax(0, 1fr) 44px; }
  .music-song-row > small:nth-of-type(1), .music-track-row > small:nth-last-child(2) { display: none; }
  .music-album-detail { padding-right: 12px; padding-left: 12px; }
  .music-album-header { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
  .music-album-header h2 { font-size: 24px; }
  .music-artist-album > header { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 11px; }
  .music-artist-album-art { width: 56px; }
  .music-artist-album-actions { grid-column: 1 / -1; justify-content: stretch; }
  .music-artist-album-actions button { min-width: 0; flex: 1; }
  .topbar .music-player.is-mini { min-height: 0; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; padding: 4px 0; }
  .music-player.is-mini .music-now-art { width: 40px; height: 40px; }
  .music-player.is-mini .music-now-copy small, .music-player.is-mini .music-now-copy em { display: none; }
  .music-player.is-mini .music-now-copy strong { font-size: 13px; }
  .music-player.is-mini .music-now-copy span { font-size: 9px; }
  .music-player.is-mini .music-transport { grid-column: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .music-player.is-mini .music-transport-buttons { position: static; gap: 5px; }
  .music-player.is-mini .music-transport-buttons .icon-button { display: grid; width: 32px; height: 32px; }
  .music-player.is-mini .music-transport-buttons .icon-button:nth-child(1), .music-player.is-mini .music-transport-buttons .icon-button:nth-child(5) { display: none; }
  .music-player.is-mini .music-play-button { width: 38px; height: 38px; }
  .music-player.is-mini .music-timeline, .music-player.is-mini .music-volume { display: none; }
}

/* Persistent app and music appearance themes. */
html[data-app-theme="tide"] { --theme-bg:#00143f; --theme-header:#000e31; --theme-sidebar:#001b4d; --theme-surface:#05325e; --theme-strong:#054177; --theme-line:#14527e; --theme-accent:#3ec6ff; --theme-text:#f6fbff; --theme-muted:#9bbbd0; }
html[data-app-theme="midnight"] { --theme-bg:#080b14; --theme-header:#060811; --theme-sidebar:#101525; --theme-surface:#171e30; --theme-strong:#202a43; --theme-line:#2e4162; --theme-accent:#24e8ff; --theme-text:#f4fbff; --theme-muted:#a8b7cc; }
html[data-app-theme="cinema"] { --theme-bg:#13090c; --theme-header:#090506; --theme-sidebar:#221014; --theme-surface:#35181e; --theme-strong:#492029; --theme-line:#65303a; --theme-accent:#ff536f; --theme-text:#fff7f3; --theme-muted:#d1aaa9; }
html[data-app-theme="emerald"] { --theme-bg:#06140f; --theme-header:#04100c; --theme-sidebar:#0b2118; --theme-surface:#123326; --theme-strong:#194832; --theme-line:#286247; --theme-accent:#55e69c; --theme-text:#f2fff8; --theme-muted:#a2c8b4; }
html[data-app-theme="ocean"] { --theme-bg:#031823; --theme-header:#02111a; --theme-sidebar:#082b39; --theme-surface:#0c3c4b; --theme-strong:#105267; --theme-line:#1d6a78; --theme-accent:#45d7d0; --theme-text:#f2ffff; --theme-muted:#a4c8cf; }
html[data-app-theme="violet"] { --theme-bg:#100d20; --theme-header:#090712; --theme-sidebar:#1c1734; --theme-surface:#2a2248; --theme-strong:#392d61; --theme-line:#57437d; --theme-accent:#bd7aff; --theme-text:#fbf7ff; --theme-muted:#c1afd5; }
html[data-app-theme="graphite"] { --theme-bg:#111315; --theme-header:#0b0d0f; --theme-sidebar:#1c2024; --theme-surface:#282e33; --theme-strong:#353c42; --theme-line:#4a555d; --theme-accent:#d2dde7; --theme-text:#ffffff; --theme-muted:#b4bec6; }
html[data-app-theme="daylight"] { --theme-bg:#edf5f8; --theme-header:#ffffff; --theme-sidebar:#dcebf0; --theme-surface:#c8e0e8; --theme-strong:#b4d3dd; --theme-line:#91b8c5; --theme-accent:#007ea7; --theme-text:#102831; --theme-muted:#466873; }
html[data-app-theme] body, html[data-app-theme] .content { color:var(--theme-text); background:var(--theme-bg); }
html[data-app-theme] .topbar { color:var(--theme-text); border-bottom-color:var(--theme-line); background:var(--theme-header); }
html[data-app-theme] .sidebar { color:var(--theme-text); border-right-color:var(--theme-line); background:var(--theme-sidebar); }
html[data-app-theme] .search-box, html[data-app-theme] .secondary-button, html[data-app-theme] .select-control, html[data-app-theme] .segmented-control { border-color:var(--theme-line); background:var(--theme-surface); }
html[data-app-theme] .nav-item:hover, html[data-app-theme] .library-navigation button:hover { background:var(--theme-surface); }
html[data-app-theme] .nav-item.active, html[data-app-theme] .library-navigation button.active { color:var(--theme-text); background:var(--theme-strong); box-shadow:inset 3px 0 0 var(--theme-accent); }
html[data-app-theme] .eyebrow, html[data-app-theme] .text-button { color:var(--theme-accent); }
html[data-app-theme] .content.music-workspace { background:var(--music-ink); }

:is(html,.music-player,.theme-dialog)[data-music-theme="original"] { --music-ink:#00143f; --music-player-bg:#001033; --music-surface:#052a55; --music-line:#14527e; --music-accent:#35d6e7; --music-warm:#ff8f2f; }
:is(html,.music-player,.theme-dialog)[data-music-theme="studio"] { --music-ink:#071419; --music-player-bg:#0a1c21; --music-surface:#10252a; --music-line:#275158; --music-accent:#38cfff; --music-warm:#72efc3; }
:is(html,.music-player,.theme-dialog)[data-music-theme="electric"] { --music-ink:#120d1d; --music-player-bg:#1b112a; --music-surface:#26183a; --music-line:#593d78; --music-accent:#bd70ff; --music-warm:#44e7ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="miami"] { --music-ink:#071525; --music-player-bg:#0b2035; --music-surface:#102d43; --music-line:#28566b; --music-accent:#ff4fd8; --music-warm:#35f2df; }
:is(html,.music-player,.theme-dialog)[data-music-theme="crimson"] { --music-ink:#160b0e; --music-player-bg:#211014; --music-surface:#30171c; --music-line:#65323b; --music-accent:#ff4f68; --music-warm:#ffc857; }
:is(html,.music-player,.theme-dialog)[data-music-theme="pulse"] { --music-ink:#07150f; --music-player-bg:#0b2118; --music-surface:#123326; --music-line:#2a6148; --music-accent:#55f29a; --music-warm:#55d8ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="cobalt"] { --music-ink:#071228; --music-player-bg:#0a1b38; --music-surface:#11284c; --music-line:#31598c; --music-accent:#4e8cff; --music-warm:#47e6ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="vinyl"] { --music-ink:#101112; --music-player-bg:#191b1d; --music-surface:#24272a; --music-line:#50565b; --music-accent:#f2f4f5; --music-warm:#aab1b7; }
:is(html,.music-player,.theme-dialog)[data-music-theme="pop"] { --music-ink:#edf5f3; --music-player-bg:#dcebe8; --music-surface:#c7dfdc; --music-line:#83aaa6; --music-accent:#007f8f; --music-warm:#e84393; }
:is(html,.music-player,.theme-dialog)[data-music-theme="sunset"] { --music-ink:#1a1014; --music-player-bg:#27171b; --music-surface:#352027; --music-line:#70404a; --music-accent:#ff7a59; --music-warm:#ffc857; }
:is(html,.music-player,.theme-dialog)[data-music-theme="arctic"] { --music-ink:#071820; --music-player-bg:#0b252f; --music-surface:#12343f; --music-line:#397080; --music-accent:#7be7ff; --music-warm:#d6fbff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="gold"] { --music-ink:#151109; --music-player-bg:#211b0e; --music-surface:#302715; --music-line:#6c5826; --music-accent:#e8b84a; --music-warm:#fff0a8; }
:is(html,.music-player,.theme-dialog)[data-music-theme="rose"] { --music-ink:#1a1018; --music-player-bg:#291725; --music-surface:#382133; --music-line:#75496c; --music-accent:#ff79b8; --music-warm:#e8b8ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="laser"] { --music-ink:#0b1508; --music-player-bg:#12220d; --music-surface:#1b3014; --music-line:#466f31; --music-accent:#adff45; --music-warm:#3fffd7; }
:is(html,.music-player,.theme-dialog)[data-music-theme="blue-note"] { --music-ink:#07111c; --music-player-bg:#0b1b2c; --music-surface:#11273d; --music-line:#315a7b; --music-accent:#2fa4ff; --music-warm:#f2d16b; }
:is(html,.music-player,.theme-dialog)[data-music-theme="copper"] { --music-ink:#17100c; --music-player-bg:#241812; --music-surface:#32231b; --music-line:#6c4a37; --music-accent:#d78b55; --music-warm:#72d4c6; }
:is(html,.music-player,.theme-dialog)[data-music-theme="aurora"] { --music-ink:#09131b; --music-player-bg:#0e202a; --music-surface:#17303a; --music-line:#3d6570; --music-accent:#56f0c4; --music-warm:#8b79ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="retro"] { --music-ink:#160d25; --music-player-bg:#221437; --music-surface:#301d49; --music-line:#684887; --music-accent:#ff4fc8; --music-warm:#2ce8ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="coral"] { --music-ink:#07191a; --music-player-bg:#0c2728; --music-surface:#133637; --music-line:#397071; --music-accent:#ff776f; --music-warm:#55e7d8; }
:is(html,.music-player,.theme-dialog)[data-music-theme="blackout"] { --music-ink:#000000; --music-player-bg:#000000; --music-surface:#111214; --music-line:#34373b; --music-accent:#ffffff; --music-warm:#8d949c; }
:is(html,.music-player,.theme-dialog)[data-music-theme="modern-mono"] { --music-ink:#0a0b0d; --music-player-bg:#101215; --music-surface:#1a1d21; --music-line:#3b4047; --music-accent:#f5f7fa; --music-warm:#b3bbc6; }
:is(html,.music-player,.theme-dialog)[data-music-theme="modern-color"] { --music-ink:#0b0e13; --music-player-bg:#111722; --music-surface:#192332; --music-line:#34465d; --music-accent:#4cc9ff; --music-warm:#ffcc4d; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-cyan"] { --music-ink:#02090d; --music-player-bg:#041318; --music-surface:#08242a; --music-line:#11606a; --music-accent:#00efff; --music-warm:#53ff9b; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-pink"] { --music-ink:#0d0310; --music-player-bg:#190720; --music-surface:#2a0c31; --music-line:#6e246f; --music-accent:#ff36d1; --music-warm:#8d62ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-orange"] { --music-ink:#100704; --music-player-bg:#1d0c06; --music-surface:#2d160c; --music-line:#713919; --music-accent:#ff6a21; --music-warm:#ffe14f; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-lime"] { --music-ink:#071208; --music-player-bg:#0b1f0d; --music-surface:#15301a; --music-line:#497929; --music-accent:#aaff20; --music-warm:#35ffd1; }
:is(html,.music-player,.theme-dialog)[data-music-theme="lime-blue"] { --music-ink:#071124; --music-player-bg:#0a1730; --music-surface:#11264a; --music-line:#31598c; --music-accent:#aaff20; --music-warm:#3e8cff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="black-cyan"] { --music-ink:#000000; --music-player-bg:#000000; --music-surface:#07181c; --music-line:#14606a; --music-accent:#00f5ff; --music-warm:#f5ffff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="black-pink"] { --music-ink:#000000; --music-player-bg:#000000; --music-surface:#1b071b; --music-line:#661f5d; --music-accent:#ff27d8; --music-warm:#9d5cff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="black-lime"] { --music-ink:#000000; --music-player-bg:#000000; --music-surface:#0c1806; --music-line:#486d19; --music-accent:#aaff20; --music-warm:#35ffd1; }
:is(html,.music-player,.theme-dialog)[data-music-theme] {
  --music-copy:#f6fbff;
  --music-control-a:var(--music-warm);
  --music-control-b:color-mix(in srgb, var(--music-warm) 68%, var(--music-accent));
  --music-control-c:var(--music-accent);
  --music-control-d:color-mix(in srgb, var(--music-accent) 62%, var(--music-warm));
  --music-stop:color-mix(in srgb, #ff405f 76%, var(--music-warm));
  --music-wave-idle:color-mix(in srgb, var(--music-line) 78%, var(--music-accent));
  --music-wave-a:var(--music-accent);
  --music-wave-b:var(--music-warm);
  --music-wave-c:color-mix(in srgb, var(--music-accent) 52%, var(--music-warm));
}
:is(html,.music-player,.theme-dialog)[data-music-theme="pop"] { --music-copy:#102c31; }
:is(html,.music-player,.theme-dialog)[data-music-theme="blackout"] { --music-stop:#ffffff; --music-wave-c:#70757b; }
:is(html,.music-player,.theme-dialog)[data-music-theme="modern-mono"] { --music-stop:#f5f7fa; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-pink"] { --music-control-b:#54f7ff; --music-control-d:#ff8ce7; --music-wave-c:#54f7ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-orange"] { --music-control-b:#ffb126; --music-control-d:#ff3f77; --music-wave-c:#ff3f77; }
:is(html,.music-player,.theme-dialog)[data-music-theme="neon-lime"] { --music-control-d:#f4ff9b; --music-wave-c:#f4ff9b; }
:is(html,.music-player,.theme-dialog)[data-music-theme="lime-blue"] { --music-control-b:#55d6ff; --music-control-d:#7a9fff; --music-wave-c:#55d6ff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="black-pink"] { --music-control-b:#51ecff; --music-wave-c:#51ecff; }
:is(html,.music-player,.theme-dialog)[data-music-theme="black-lime"] { --music-control-d:#ffffff; --music-wave-c:#ffffff; }
html[data-music-theme] .music-view { color:var(--music-copy); background:var(--music-ink); }
html[data-music-theme] .music-player, html[data-music-theme] .theme-dialog { color:var(--music-copy); }
html[data-music-theme] .music-player { border-color:var(--music-line); background:var(--music-player-bg); }
.topbar .music-player.is-mini,
html[data-music-theme] .topbar .music-player.is-mini {
  border:0;
  border-radius:10px;
  padding:3px 8px;
  background:rgba(0,0,0,.38);
}
html[data-music-theme] .music-mode button.active, html[data-music-theme] .music-play-button { background:var(--music-accent); }

.music-playlist-dialog { width:min(560px,calc(100vw - 32px)); padding:0; overflow:hidden; color:var(--music-copy,#e8f8ff); background:linear-gradient(145deg,#061b35 0%,#031126 68%,#071b32 100%); border:1px solid rgba(53,214,231,.42); border-radius:18px; box-shadow:0 28px 90px rgba(0,0,0,.68),0 0 40px rgba(53,214,231,.10); }
.music-playlist-dialog::backdrop { background:rgba(0,7,18,.76); backdrop-filter:blur(8px); }
.music-playlist-dialog-accent { height:4px; background:linear-gradient(90deg,#35d6e7 0 68%,#ff9a3d 68%); }
.music-playlist-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px 28px 18px; }
.music-playlist-dialog h2 { margin:3px 0 6px; font-size:27px; }
.music-playlist-dialog header p:last-child { margin:0; color:#9bb9c9; }
.music-playlist-dialog form { padding:8px 28px 28px; }
.music-playlist-dialog form>label { display:block; margin-bottom:8px; color:#bfeaf2; font-size:13px; font-weight:700; }
.music-playlist-name-wrap { display:flex; align-items:center; gap:10px; padding:0 14px; height:52px; background:#0a2848; border:1px solid rgba(53,214,231,.34); border-radius:11px; }
.music-playlist-name-wrap:focus-within { border-color:#35d6e7; box-shadow:0 0 0 3px rgba(53,214,231,.13); }
.music-playlist-name-wrap svg { width:20px; color:#35d6e7; }
.music-playlist-name-wrap input { width:100%; color:#fff; background:transparent; border:0; outline:0; font:inherit; font-size:16px; }
.music-playlist-dialog .dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.music-playlist-choices { display:grid; gap:8px; max-height:360px; overflow:auto; padding:4px 28px 26px; }
.music-playlist-choice { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:10px 14px; color:#e8f8ff; text-align:left; background:#0a2848; border:1px solid rgba(155,216,235,.20); border-radius:11px; cursor:pointer; }
.music-playlist-choice:hover,.music-playlist-choice:focus-visible { border-color:#35d6e7; background:#0d355b; transform:translateX(3px); }
.music-playlist-choice svg { color:#ff9a3d; }
.music-playlist-choice span { display:grid; gap:2px; }
.music-playlist-choice small { color:#8eb5c7; }
.music-playlist-error { margin:12px 0 0; padding:10px 12px; color:#ffd5ce; background:rgba(196,54,42,.18); border:1px solid rgba(255,112,91,.42); border-radius:9px; font-size:13px; }

.theme-dialog { width:min(980px, calc(100vw - 28px)); height:min(760px, 82vh); max-height:82vh; padding:0 22px 22px; overflow:hidden; border-color:var(--music-line); color:#f6fbff; background:var(--music-player-bg); }
.theme-dialog::backdrop { background:rgba(0, 0, 0, .24); backdrop-filter:none; }
.theme-dialog[open] { display:grid; grid-template-rows:auto auto minmax(0, 1fr); gap:18px; }
.theme-dialog .dialog-heading { margin:0 -22px; padding-right:22px; padding-left:22px; border-bottom-color:var(--music-line); background:var(--music-surface); }
.theme-dialog .dialog-heading small { color:color-mix(in srgb, var(--music-copy) 60%, var(--music-warm)); }
.theme-dialog .eyebrow, .theme-dialog .dialog-heading .icon-button { color:var(--music-accent); }
.theme-dialog .dialog-heading .icon-button:hover, .theme-dialog .dialog-heading .icon-button:focus-visible { color:var(--music-ink); background:var(--music-warm); }
.theme-scope-tabs { width:fit-content; grid-template-columns:repeat(2, minmax(150px, 1fr)); border-color:var(--music-line); background:var(--music-surface); }
.theme-scope-tabs button { min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; color:color-mix(in srgb, var(--music-copy) 64%, var(--music-warm)); background:transparent; }
.theme-scope-tabs button svg { width:16px; }
.theme-scope-tabs button.active { color:var(--music-ink); background:var(--music-accent); }
.theme-option-grid { min-height:0; display:grid; grid-template-columns:repeat(6, minmax(120px, 1fr)); align-content:start; gap:10px; padding-right:6px; overflow-y:auto; }
.theme-option { position:relative; min-height:88px; display:grid; align-content:center; gap:10px; padding:12px; border:1px solid var(--music-line); border-radius:6px; color:inherit; background:var(--music-surface); cursor:pointer; text-align:left; }
.theme-option:hover, .theme-option:focus-visible { border-color:var(--music-accent); outline:0; }
.theme-option.active { border-color:var(--music-accent); box-shadow:inset 0 -3px 0 var(--music-accent); }
.theme-option > svg { position:absolute; top:9px; right:9px; width:15px; opacity:0; color:var(--music-accent); }
.theme-option.active > svg { opacity:1; }
.theme-swatches { display:grid; grid-template-columns:repeat(3, 1fr); height:24px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:4px; }
.theme-swatches i { background:var(--theme-swatch); }
.theme-option strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
@media (max-width:900px) { .theme-option-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:620px) { .theme-option-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.music-genre-dialog { width:min(620px, calc(100vw - 32px)); }
.music-genre-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; max-height:52vh; overflow:auto; padding:8px 2px; }
.music-genre-list label { display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.music-genre-list input { accent-color:var(--accent); width:18px; height:18px; }
.music-picks-reset-dialog { width:min(560px, calc(100vw - 32px)); }
.music-picks-range { display:grid; gap:9px; margin:18px 2px 4px; color:var(--text-muted); font-size:13px; font-weight:700; }
.music-picks-range select { min-height:48px; padding:0 12px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; font:inherit; }

/* Keep poster art unobstructed and place readable title information below it. */
.media-card-button > .card-copy {
  position:static;
  min-height:44px;
  padding:10px 3px 0;
  background:transparent;
}
.media-card-button > .card-copy strong {
  color:#f6fbff;
  font-size:13px;
  font-weight:730;
  line-height:1.25;
  text-shadow:none;
}
.media-card-button > .card-copy span {
  margin-top:4px;
  color:#aac9dc;
  font-size:11px;
  line-height:1.2;
}
.media-card-button > .card-copy .availability-meta {
  display:grid;
  gap:2px;
  min-height:28px;
  white-space:normal;
}
.media-card-button > .card-copy .availability-meta > span { margin-top:0; }
.poster-frame .progress-track { right:7px; bottom:7px; left:7px; }
.continue-card .card-copy {
  min-height:48px;
  padding:10px 3px 0;
  background:transparent;
}
.continue-card .card-copy strong { font-size:13px; }
.continue-card .card-copy span { font-size:11px; }
.poster-grid.compact .media-card-button > .card-copy { display:none; }

/* Libraries: separate source management, discovery, and PC home into clear workspaces. */
.library-dialog {
  width:min(1080px, calc(100vw - 36px));
  border-color:rgba(82,196,235,.52);
  border-radius:18px;
  background:#031c3e;
  box-shadow:0 34px 110px rgba(0,0,0,.72), 0 0 44px rgba(36,172,224,.12);
}
.library-dialog::backdrop { background:rgba(0,8,25,.74); backdrop-filter:blur(7px); }
.library-dialog[open] { height:min(820px, calc(100vh - 36px)); grid-template-rows:auto auto minmax(0,1fr) auto; }
.library-dialog-heading { min-height:88px; padding:16px 20px 16px 24px; background:linear-gradient(110deg,#031734,#062c56); }
.library-dialog-title { min-width:0; display:flex; align-items:center; gap:14px; }
.library-dialog-mark { width:48px; height:48px; flex:none; display:grid; place-items:center; border:1px solid rgba(85,218,255,.42); border-radius:14px; color:#7de7ff; background:linear-gradient(145deg,rgba(15,110,157,.72),rgba(3,31,69,.8)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.library-dialog-mark svg { width:23px; height:23px; }
.library-dialog-heading h2 { font-size:24px; letter-spacing:-.02em; }
.library-dialog-heading small { max-width:none; font-size:11px; }
.library-dialog-heading > .icon-button { width:40px; height:40px; border:1px solid rgba(91,181,219,.24); border-radius:11px; background:rgba(2,20,48,.56); }
.library-manager-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:22px; padding:14px 22px; border-bottom:1px solid rgba(49,137,178,.34); background:rgba(3,31,66,.94); }
.library-manager-summary { min-width:0; display:flex; align-items:center; gap:8px; }
.library-manager-summary > span { min-width:112px; display:grid; grid-template-columns:26px auto; grid-template-rows:auto auto; align-items:center; column-gap:8px; padding:7px 11px; border:1px solid rgba(66,150,189,.28); border-radius:10px; background:rgba(8,54,91,.54); }
.library-manager-summary svg { grid-row:1 / 3; width:19px; color:#58d8f7; }
.library-manager-summary strong { font-size:14px; line-height:1.15; }
.library-manager-summary small { color:#88aec5; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.library-manager-tabs { display:flex; align-items:center; gap:5px; padding:4px; border:1px solid rgba(66,150,189,.28); border-radius:11px; background:#02182f; }
.library-manager-tabs button { min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 13px; border:0; border-radius:8px; color:#9fc2d7; background:transparent; cursor:pointer; font-size:11px; font-weight:720; }
.library-manager-tabs button svg { width:16px; }
.library-manager-tabs button:hover,.library-manager-tabs button:focus-visible { outline:0; color:#fff; background:#0b3d68; }
.library-manager-tabs button.active { color:#00162f; background:linear-gradient(135deg,#75e4ff,#49bfe9); box-shadow:0 5px 16px rgba(30,178,226,.22); }
.library-manager-scroll { background:radial-gradient(circle at 85% 0,rgba(26,117,160,.12),transparent 32%),#031c3e; }
.library-manager-panel[hidden] { display:none; }
.library-manager-panel .dialog-section-heading { padding:18px 22px 8px; }
.library-manager-panel .dialog-section-heading strong { font-size:14px; }
.library-manager-panel .dialog-section-heading small { margin-top:5px; color:#86aabf; font-size:10px; }
.library-manager-panel > .library-manager-list { min-height:0; max-height:none; display:grid; gap:10px; padding:8px 22px 22px; overflow:visible; }
.library-dialog .library-manager-row {
  min-height:0;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid rgba(48,129,168,.34);
  border-radius:13px;
  background:linear-gradient(115deg,rgba(8,52,91,.86),rgba(4,36,73,.88));
  box-shadow:0 8px 22px rgba(0,8,24,.2);
}
.library-dialog .library-manager-row:hover { border-color:rgba(95,207,240,.54); background:linear-gradient(115deg,rgba(10,64,106,.9),rgba(5,42,82,.92)); }
.library-dialog .library-source-card { grid-template-columns:50px minmax(280px,1fr) minmax(250px,auto); }
.library-dialog .library-manager-icon { width:48px; height:48px; align-self:start; border:1px solid rgba(84,205,240,.24); border-radius:12px; color:#67e3ff; background:linear-gradient(145deg,#0a6793,#07365e); }
.library-dialog .library-manager-icon svg { width:21px; height:21px; }
.library-dialog .library-kind-music { color:#ffb16a; background:linear-gradient(145deg,#824a18,#173b60); }
.library-dialog .library-kind-series { color:#a9a1ff; background:linear-gradient(145deg,#4e4a9a,#173b60); }
.library-manager-title { min-width:0; display:flex; align-items:center; gap:9px; }
.library-manager-title > strong { min-width:0; font-size:14px; }
.library-availability { flex:none; display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border-radius:999px; font-size:8px; font-weight:760; text-transform:uppercase; letter-spacing:.04em; }
.library-availability svg { width:11px; height:11px; }
.library-availability.available { color:#97f6d1; background:rgba(22,135,104,.2); }
.library-availability.offline { color:#ffb5ad; background:rgba(179,58,56,.22); }
.library-dialog .library-manager-copy > em { margin-top:5px; color:#83cfe7; font-size:10px; }
.library-dialog .library-manager-copy > em b { padding:0 3px; color:#5a8da8; font-weight:400; }
.library-dialog .library-path-list { gap:6px; margin-top:10px; }
.library-dialog .library-path-row { grid-template-columns:16px minmax(0,1fr) 24px; min-height:32px; padding:4px 5px 4px 9px; border-color:rgba(71,144,178,.28); border-radius:7px; background:rgba(1,21,48,.62); }
.library-dialog .library-path-row > svg { width:13px; color:#5fbddc; }
.library-dialog .library-path-row > span { font-size:10px; }
.library-dialog .library-manager-actions { display:grid; grid-template-columns:repeat(2,minmax(96px,1fr)); gap:6px; padding:0; }
.library-action-button { min-height:33px; display:flex; align-items:center; justify-content:flex-start; gap:7px; padding:0 10px; border:1px solid rgba(82,164,199,.34); border-radius:8px; color:#c6e2ef; background:rgba(2,27,58,.62); cursor:pointer; font-size:10px; font-weight:690; }
.library-action-button svg { width:15px; height:15px; color:#63d7f5; }
.library-action-button:hover,.library-action-button:focus-visible { outline:0; border-color:#68d8f5; color:#fff; background:#0b4775; }
.library-action-button.pin-action.active { border-color:#6bdcf7; color:#00172e; background:#72dff9; }
.library-action-button.pin-action.active svg { color:#00172e; }
.library-dialog .discovery-manager,.library-dialog .home-order-manager { border-top:0; }
.library-dialog .discovery-manager .library-manager-row { grid-template-columns:48px minmax(0,1fr) auto; }
.library-dialog .discovery-manager .library-manager-actions,.library-dialog .home-order-manager .library-manager-actions { display:flex; }
.library-dialog .discovery-manager .icon-button,.library-dialog .home-order-manager .icon-button { border-radius:9px; }
.library-dialog .home-order-row { grid-template-columns:28px 48px minmax(0,1fr); cursor:grab; }
.library-dialog .drag-handle { height:44px; border-left:2px solid #62d6f5; border-radius:5px; }
.continue-watching-mode-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; margin:8px 22px 4px; padding:13px 14px; border:1px solid rgba(84,190,225,.36); border-radius:13px; background:linear-gradient(115deg,rgba(8,57,97,.94),rgba(5,38,77,.92)); }
.continue-watching-mode-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; color:#ffba6d; background:linear-gradient(145deg,#82501d,#174369); }
.continue-watching-mode-icon svg { width:20px; }
.continue-watching-mode-copy strong,.continue-watching-mode-copy small { display:block; }
.continue-watching-mode-copy strong { font-size:13px; }
.continue-watching-mode-copy small { max-width:520px; margin-top:4px; color:#91b7cb; font-size:9px; line-height:1.35; }
.continue-watching-mode-switch { display:flex; gap:4px; padding:4px; border:1px solid rgba(72,153,189,.3); border-radius:10px; background:#021a35; }
.continue-watching-mode-switch button { min-height:34px; display:flex; align-items:center; gap:6px; padding:0 11px; border:0; border-radius:7px; color:#9dbfd2; background:transparent; cursor:pointer; font-size:10px; font-weight:720; }
.continue-watching-mode-switch button svg { width:14px; }
.continue-watching-mode-switch button:hover,.continue-watching-mode-switch button:focus-visible { outline:0; color:#fff; background:#0a426e; }
.continue-watching-mode-switch button.active { color:#00172f; background:#70def8; }
.library-dialog .home-order-fixed { cursor:default; border-color:rgba(255,177,95,.38); background:linear-gradient(115deg,rgba(67,55,64,.9),rgba(10,45,78,.92)); }
.library-dialog .home-order-fixed .drag-handle.fixed { border-left-color:#f0ad62; color:#f0ad62; background:rgba(128,75,27,.2); }
.library-dialog .dialog-footer { padding:13px 20px; background:#031832; }
.library-dialog .dialog-footer .primary-button { min-height:40px; padding:0 18px; border-radius:9px; font-size:11px; }
@media (max-width:860px) {
  .library-manager-toolbar { grid-template-columns:1fr; gap:10px; }
  .library-manager-tabs { width:100%; }
  .library-manager-tabs button { flex:1; }
  .library-dialog .library-source-card { grid-template-columns:48px minmax(0,1fr); }
  .library-dialog .library-source-card .library-manager-actions { grid-column:2; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .continue-watching-mode-card { grid-template-columns:42px minmax(0,1fr); }
  .continue-watching-mode-switch { grid-column:2; width:fit-content; }
}
@media (max-width:600px) {
  .library-dialog { width:calc(100vw - 16px); }
  .library-dialog[open] { height:calc(100vh - 16px); }
  .library-dialog-mark { display:none; }
  .library-manager-summary > span { min-width:0; flex:1; padding:6px 7px; }
  .library-manager-tabs button span { display:none; }
  .library-dialog .library-source-card { grid-template-columns:40px minmax(0,1fr); padding:11px; }
  .library-dialog .library-manager-icon { width:40px; height:40px; }
  .library-dialog .library-source-card .library-manager-actions { grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-manager-title { align-items:flex-start; flex-direction:column; gap:5px; }
}

/* Home hero: carry the artwork beneath the header and center the wheel below the feature. */
.app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar {
  border-bottom-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar .search-box {
  border-color:rgba(255,255,255,.28);
  background:rgba(0,0,0,.28);
  backdrop-filter:none;
}
@media (min-width:1081px) {
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar {
    left:var(--sidebar-width);
    grid-template-columns:minmax(170px,210px) minmax(260px,590px) 1fr;
    transition:left 170ms ease;
  }
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar:has(.music-player.is-mini) {
    grid-template-columns:minmax(170px,210px) minmax(260px,590px) minmax(420px,1fr) auto;
  }
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .sidebar { top:0; }
  html.sidebar-collapsed .app-shell:has(#homeView.active .home-hero:not(.is-hidden)):has(> .sidebar:hover:not(.sidebar-hover-suppressed)) > .topbar {
    left:var(--sidebar-expanded-width);
  }
}
#homeView .home-hero-dock {
  position:absolute;
  z-index:5;
  top:auto;
  right:auto;
  bottom:0;
  left:50%;
  width:max-content;
  max-width:calc(100% - var(--sidebar-width) - clamp(48px,5vw,96px));
  transform:translateX(-50%);
  pointer-events:none;
}
#homeView .home-hero-dock.is-open .home-hero-rail {
  clip-path:inset(0);
  opacity:1;
  pointer-events:auto;
  transform:none;
}
#homeView .home-hero-dock-handle {
  position:absolute;
  z-index:6;
  top:auto;
  bottom:-24px;
  left:50%;
  width:70px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(225,240,246,.38);
  border-top:0;
  border-radius:0 0 7px 7px;
  color:#fff;
  background:#0b1019;
  box-shadow:0 10px 22px rgba(0,0,0,.46);
  transform:translateX(-50%);
  pointer-events:auto;
  cursor:pointer;
}
#homeView .home-hero-dock-handle:hover,
#homeView .home-hero-dock-handle:focus-visible { color:var(--home-hero-accent); background:#171e2a; }
#homeView .home-hero-dock-handle svg {
  width:16px;
  height:16px;
  transition:transform .2s ease;
}
#homeView .home-hero-dock.is-open .home-hero-dock-handle svg { transform:rotate(180deg); }
#homeView .home-hero-rail {
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  width:max-content;
  max-width:100%;
  height:auto;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:11px;
  border:1px solid rgba(225,240,246,.38);
  border-top-color:color-mix(in srgb,var(--home-hero-accent) 54%,rgba(225,240,246,.38));
  border-radius:8px 8px 5px 5px;
  background:linear-gradient(180deg,rgba(14,19,29,.97),rgba(6,9,16,.96));
  box-shadow:0 24px 56px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 color-mix(in srgb,var(--home-hero-accent) 22%,transparent);
  clip-path:inset(100% 0 0 0);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:clip-path .26s ease,opacity .2s ease,transform .26s ease;
  scroll-padding-inline:12px;
  scroll-snap-type:x proximity;
}
#homeView .home-hero-rail-arrow {
  position:absolute;
  z-index:7;
  top:50%;
  width:34px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(225,240,246,.55);
  border-radius:7px;
  color:#fff;
  background:rgba(8,18,33,.94);
  transform:translateY(-50%);
  pointer-events:auto;
  cursor:pointer;
  opacity:0;
}
#homeView .home-hero-dock.is-open .home-hero-rail-arrow:not(.is-hidden) { opacity:1; }
#homeView .home-hero-rail-arrow.previous { left:-16px; }
#homeView .home-hero-rail-arrow.next { right:-16px; }
#homeView .home-hero-rail-arrow:disabled { opacity:.35 !important; cursor:default; }
#homeView .home-hero-rail-arrow svg { width:18px; height:18px; }
#homeView .home-hero {
  margin-bottom:10px;
  overflow:visible;
  transition:margin-bottom .26s ease;
}
#homeView .home-hero-poster { bottom:172px; }
@media (min-width:761px) {
  #homeView .home-hero-card-preview { top:calc(50% - 44px); }
}
#homeView > .home-first-visible-shelf { padding-top:8px; }
#homeView .home-hero:has(.home-hero-dock.is-open) {
  margin-bottom:36px;
}
#homeView .home-hero-rail .home-hero-thumb {
  width:clamp(142px,9vw,var(--home-hero-thumb-width,196px));
  margin:0;
  transform:none;
  transform-origin:center bottom;
  scroll-snap-align:center;
}
#homeView .home-hero-rail .home-hero-thumb:hover,
#homeView .home-hero-rail .home-hero-thumb:focus-visible {
  z-index:20;
  transform:translateY(-6px) scale(1.03);
}
#homeView .home-hero-rail .home-hero-thumb.active {
  z-index:19;
  transform:translateY(-3px);
}
@media (max-width:760px) {
  #homeView { margin-right:-16px; margin-left:-16px; padding-right:16px; padding-left:16px; }
  #homeView .home-hero { margin-right:-16px; margin-left:-16px; }
  #homeView .home-hero-dock {
    right:auto;
    left:50%;
    width:calc(100% - 24px);
    max-width:none;
  }
  #homeView .home-hero-rail {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    justify-content:flex-start;
    gap:10px;
  }
  #homeView .home-hero-rail-arrow.previous { left:6px; }
  #homeView .home-hero-rail-arrow.next { right:6px; }
  #homeView .home-hero { margin-bottom:10px; }
  #homeView .home-hero:has(.home-hero-dock.is-open) { margin-bottom:32px; }
  #homeView .home-hero-rail .home-hero-thumb { width:134px; }
}
@media (prefers-reduced-motion:reduce) {
  #homeView .home-hero-rail { transition:none; }
  #homeView .home-hero { transition:none; }
}
/* TideView Sports */
.sports-view{padding-bottom:56px}.sports-titlebar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px}.sports-titlebar h1{margin:0;font-size:34px}.sports-titlebar p{margin:4px 0 0;color:var(--muted)}.sports-title-actions{display:flex;align-items:center;gap:10px}.sports-hero{position:relative;min-height:310px;border:1px solid rgba(100,157,210,.24);border-radius:22px;overflow:hidden;background:#020914;box-shadow:0 18px 54px rgba(0,0,0,.24)}.sports-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.sports-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,8,18,.97) 0%,rgba(1,8,18,.84) 29%,rgba(1,8,18,.12) 67%,rgba(1,8,18,.42) 100%),linear-gradient(0deg,rgba(1,7,16,.72),transparent 58%)}.sports-hero-copy{position:relative;z-index:2;width:min(430px,48%);padding:44px 40px}.sports-hero-copy h2{margin:6px 0 10px;font-size:34px}.sports-hero-copy>p:not(.eyebrow){margin:0 0 22px;color:#c9d8e9;line-height:1.55}.sports-favorites-panel{position:absolute;z-index:3;right:18px;top:18px;width:270px;max-height:274px;padding:18px;border-radius:16px;background:rgba(3,12,25,.9);border:1px solid rgba(124,173,219,.24);backdrop-filter:blur(16px)}.sports-favorites-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.sports-favorites-panel .text-button{padding:0;color:#b980ff}.sports-favorite-teams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 8px}.sports-favorite-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}.sports-favorite-team small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c9d4df;font-size:10px}.sports-team-crest{--team:#4b7cff;--team-alt:#eef4ff;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--team-alt);font-size:16px;font-weight:900;letter-spacing:.02em;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.22),transparent 27%),linear-gradient(145deg,var(--team),color-mix(in srgb,var(--team) 52%,#030a15));border:2px solid color-mix(in srgb,var(--team-alt) 62%,transparent);box-shadow:0 7px 20px color-mix(in srgb,var(--team) 33%,transparent),inset 0 0 0 3px rgba(0,0,0,.18)}.sports-team-crest.large{width:76px;height:76px;border-radius:22px;font-size:20px}.sports-team-crest.tiny{width:42px;height:42px;font-size:12px;border-width:1px}.sports-favorites-empty{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.45}.sports-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 14px}.sports-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.sports-filter{border:1px solid rgba(139,175,213,.22);border-radius:999px;background:rgba(10,25,43,.78);color:#b8c9da;padding:9px 15px;white-space:nowrap}.sports-filter.active{background:linear-gradient(135deg,#7138e7,#914bff);border-color:#a26cff;color:white;box-shadow:0 6px 22px rgba(119,57,230,.3)}.sports-source-summary{color:var(--muted);font-size:12px;text-align:right}.sports-loading{display:flex;align-items:center;gap:12px;min-height:130px;justify-content:center;color:var(--muted)}.sports-error{padding:18px;border:1px solid rgba(255,103,121,.4);background:rgba(92,11,27,.25);border-radius:14px;color:#ffb7c1}.sports-section{margin-top:24px}.sports-game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}.sports-game-card{position:relative;display:flex;flex-direction:column;min-height:248px;padding:16px;border-radius:17px;background:linear-gradient(155deg,rgba(17,32,51,.97),rgba(5,14,27,.97));border:1px solid rgba(124,164,204,.2);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.18)}.sports-game-card.favorite{border-color:rgba(154,89,255,.52);box-shadow:0 12px 34px rgba(69,25,142,.24)}.sports-game-card.live{border-color:rgba(255,82,106,.6)}.sports-game-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--away,#4879db),var(--home,#8f4ef2));opacity:.86}.sports-card-header,.sports-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.sports-card-header{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}.sports-live-pill{color:#ff6d81;font-weight:900}.sports-matchup{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:8px;margin:16px 0 12px}.sports-team{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center}.sports-team strong{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.sports-team-score{font-size:24px;color:white}.sports-vs{color:#7f93a8;text-align:center;font-weight:800}.sports-game-status{text-align:center;color:#c8d4df;font-size:12px;min-height:18px}.sports-availability{display:flex;align-items:flex-start;gap:8px;margin:13px 0;padding:10px;border-radius:10px;background:rgba(0,0,0,.2);color:#aebfd0;font-size:11px;line-height:1.35}.sports-availability.available{color:#c9fff1;background:rgba(5,94,74,.2)}.sports-availability i{width:15px;height:15px;flex:0 0 auto}.sports-card-actions{display:flex;gap:8px;margin-top:auto}.sports-card-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;min-height:36px;border:0;border-radius:9px;background:rgba(113,63,209,.22);color:#eee5ff;font-weight:750}.sports-card-actions button.primary{background:linear-gradient(135deg,#7138e7,#914bff);color:white}.sports-card-actions button:disabled{opacity:.42}.sports-card-actions button.active{color:#9effe3;background:rgba(21,119,92,.28)}.sports-setup-dialog{width:min(760px,calc(100vw - 28px));max-height:min(820px,calc(100vh - 28px))}.sports-setup-progress{display:flex;gap:8px;padding:0 22px 14px}.sports-setup-progress span{flex:1;padding:8px;border-radius:999px;text-align:center;background:rgba(78,104,131,.15);color:var(--muted);font-size:12px}.sports-setup-progress span.active{background:rgba(125,72,230,.32);color:#efe5ff}.sports-team-search{display:flex;align-items:center;gap:9px;margin:0 22px 12px;padding:9px 12px;border-radius:10px;background:rgba(7,19,34,.75);border:1px solid rgba(121,163,202,.2)}.sports-team-search input{flex:1;border:0;outline:0;background:transparent;color:var(--text)}.sports-setup-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 22px 20px;max-height:480px;overflow:auto}.sports-choice{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border:1px solid rgba(124,164,204,.2);border-radius:12px;background:rgba(9,23,40,.8);color:var(--text);text-align:left}.sports-choice.selected{border-color:#9c69f5;background:rgba(104,56,194,.22)}.sports-choice span:not(.sports-team-crest){display:flex;flex-direction:column;min-width:0}.sports-choice strong,.sports-choice small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sports-choice small{color:var(--muted)}.sports-choice i:last-child{margin-left:auto}.sports-setup-dialog .dialog-footer{display:grid;grid-template-columns:auto 1fr auto}.sports-setup-dialog .dialog-footer>span{display:block}
@media(max-width:1050px){.sports-favorites-panel{display:none}.sports-hero-copy{width:min(500px,68%)}.sports-hero>img{object-position:62% center}}@media(max-width:720px){.sports-titlebar{align-items:flex-start}.sports-title-actions .secondary-button{display:none}.sports-hero{min-height:390px}.sports-hero>img{object-position:66% center}.sports-hero-shade{background:linear-gradient(0deg,rgba(1,8,18,.98) 3%,rgba(1,8,18,.84) 45%,rgba(1,8,18,.18) 100%)}.sports-hero-copy{position:absolute;left:0;right:0;bottom:0;width:auto;padding:24px}.sports-hero-copy h2{font-size:28px}.sports-toolbar{align-items:flex-start;flex-direction:column}.sports-source-summary{text-align:left}.sports-game-grid{grid-template-columns:1fr}.sports-setup-list{grid-template-columns:1fr}.sports-team-crest.large{width:68px;height:68px}}

/* Sports hero follows Home: artwork sits beneath the transparent app header. */
#sportsView {
  min-height:calc(100vh - var(--topbar-height));
  margin:calc(-1 * (var(--topbar-height) + 34px)) -34px -60px;
  padding:0 34px 60px;
}
#sportsView .sports-hero {
  min-height:440px;
  margin:0 -34px;
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* Keep more headroom when the wide desktop hero crops the artwork. */
@media (min-width:1051px) {
  #sportsView .sports-hero > img { object-position:center 20%; }
}
#sportsView .sports-titlebar {
  position:absolute;
  z-index:5;
  top:calc(var(--topbar-height) + 22px);
  right:34px;
  left:34px;
  margin:0;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.72);
}
#sportsView .sports-titlebar p { color:#cfe5f5; }
#sportsView .sports-title-actions .secondary-button,
#sportsView .sports-title-actions .icon-button {
  border-color:rgba(255,255,255,.28);
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
}
#sportsView .sports-hero-copy {
  padding:calc(var(--topbar-height) + 118px) 40px 52px;
}
#sportsView .sports-favorite-teams {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:48px;
  max-height:150px;
  overflow-y:auto;
}
#sportsView .sports-favorite-team { width:64px; flex:0 0 64px; gap:6px; padding:6px 3px; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; }
#sportsView .sports-favorite-team:hover, #sportsView .sports-favorite-team:focus-visible { background:rgba(113,63,209,.2); border-color:#a26cff; }
#sportsView .sports-favorite-team.active { background:rgba(113,63,209,.35); border-color:#a26cff; }
#sportsView .sports-favorites-empty { margin:0; }
#sportsView .sports-matchup { grid-template-columns:1fr 44px 1fr; }
#sportsView .sports-vs { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; letter-spacing:.12em; }
#sportsView .sports-vs-icon { width:40px; height:40px; filter:drop-shadow(0 3px 6px #0008); }
#sportsView .sports-card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#sportsView .sports-card-actions button { min-width:0; padding:9px 6px; font-size:12px; line-height:1.25; }
#sportsView .sports-card-actions button:only-child { grid-column:1/-1; }
#sportsView .sports-card-actions svg { width:16px; height:16px; flex-shrink:0; }
.app-shell:has(#sportsView.active .sports-hero) > .topbar {
  border-bottom-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.app-shell:has(#sportsView.active .sports-hero) > .topbar .search-box {
  border-color:rgba(255,255,255,.28);
  background:rgba(0,0,0,.28);
  backdrop-filter:none;
}
@media (min-width:1081px) {
  .app-shell:has(#sportsView.active .sports-hero) > .topbar {
    left:var(--sidebar-width);
    grid-template-columns:minmax(170px,210px) minmax(260px,590px) 1fr;
    transition:left 170ms ease;
  }
  .app-shell:has(#sportsView.active .sports-hero) > .topbar:has(.music-player.is-mini) {
    grid-template-columns:minmax(170px,210px) minmax(260px,590px) minmax(420px,1fr) auto;
  }
  .app-shell:has(#sportsView.active .sports-hero) > .sidebar { top:0; }
  html.sidebar-collapsed .app-shell:has(#sportsView.active .sports-hero):has(> .sidebar:hover:not(.sidebar-hover-suppressed)) > .topbar {
    left:var(--sidebar-expanded-width);
  }
}
@media (min-width:1081px) and (max-width:1200px) {
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar:has(.music-player.is-mini),
  .app-shell:has(#sportsView.active .sports-hero) > .topbar:has(.music-player.is-mini) {
    grid-template-columns:max(150px,var(--sidebar-width)) minmax(0,1fr) auto;
  }
}
@media (max-width:720px) {
  #sportsView {
    margin:calc(-1 * (var(--topbar-height) + 25px)) -16px -48px;
    padding:0 16px 48px;
  }
  #sportsView .sports-hero { min-height:500px; margin:0 -16px; }
  #sportsView .sports-titlebar { top:calc(var(--topbar-height) + 14px); right:16px; left:16px; }
  #sportsView .sports-hero-copy { padding:24px; }
}
/* TideView Picks is a two-column gallery of adaptive stations. */
.music-picks-home { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; min-width:0; padding:10px 20px 38px; }
.picks-home-card { position:relative; isolation:isolate; min-width:0; min-height:310px; display:grid; grid-template-columns:minmax(130px,210px) minmax(0,1fr); align-items:center; gap:clamp(20px,3vw,42px); overflow:hidden; padding:clamp(26px,3vw,42px); border:1px solid color-mix(in srgb,var(--music-accent) 30%,var(--music-line)); border-radius:24px; background:linear-gradient(135deg,color-mix(in srgb,var(--music-surface) 96%,black),color-mix(in srgb,var(--music-player-bg) 91%,var(--music-accent) 9%)); box-shadow:0 22px 54px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07); }
.picks-home-card-backdrop { position:absolute; inset:0; z-index:-2; overflow:hidden; opacity:.13; }
.picks-home-card-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--music-player-bg),color-mix(in srgb,var(--music-player-bg) 70%,transparent),var(--music-player-bg)); }
.picks-home-card-backdrop img { width:100%; height:100%; object-fit:cover; filter:blur(28px) saturate(1.25); transform:scale(1.2); }
.picks-home-card-art { position:relative; width:100%; max-width:210px; justify-self:center; }
.picks-home-card-album { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid color-mix(in srgb,var(--music-accent) 52%,white 10%); border-radius:16px; background:var(--music-surface); box-shadow:0 22px 42px rgba(0,0,0,.5); }
.picks-home-card-artist { position:absolute; right:-14px; bottom:-14px; width:70px; aspect-ratio:1; overflow:hidden; border:5px solid var(--music-player-bg); border-radius:50%; background:var(--music-surface); box-shadow:0 10px 24px rgba(0,0,0,.5); }
.picks-home-card-album img,.picks-home-card-artist img { position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:cover; }
.picks-card-art-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--music-accent); background:linear-gradient(145deg,color-mix(in srgb,var(--music-accent) 12%,var(--music-surface)),var(--music-player-bg)); }
.picks-card-art-fallback svg { width:34%; height:34%; filter:drop-shadow(0 0 14px color-mix(in srgb,var(--music-accent) 48%,transparent)); }
.picks-home-card-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.picks-home-card-kicker { display:flex; align-items:center; gap:7px; margin:0 0 18px; color:var(--music-accent); font-size:9px; font-weight:900; letter-spacing:.15em; }
.picks-home-card-kicker svg { width:14px; height:14px; }
.picks-home-card-label { margin:0 0 4px; color:color-mix(in srgb,var(--music-copy) 72%,var(--music-warm)); font-size:13px; font-weight:750; }
.picks-home-card h2 { max-width:100%; margin:0; overflow-wrap:anywhere; color:var(--music-copy); font-size:clamp(25px,2.4vw,42px); line-height:1; letter-spacing:-.035em; text-wrap:balance; }
.picks-home-card-album-name { max-width:100%; margin:12px 0 20px; overflow:hidden; color:color-mix(in srgb,var(--music-copy) 58%,var(--music-warm)); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.picks-home-card-play { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:108px; min-height:42px; padding:0 18px; border:0; border-radius:999px; color:var(--music-ink); background:var(--music-accent); box-shadow:0 9px 22px color-mix(in srgb,var(--music-accent) 30%,transparent); cursor:pointer; font:inherit; font-size:13px; font-weight:900; }
.picks-home-card-play:hover,.picks-home-card-play:focus-visible { outline:2px solid color-mix(in srgb,var(--music-copy) 75%,transparent); outline-offset:3px; transform:translateY(-2px); }
.picks-home-card-play svg { width:17px; height:17px; fill:currentColor; }
@media(max-width:1000px) { .music-picks-home { grid-template-columns:1fr; } }
@media(max-width:600px) { .music-picks-home { gap:14px; padding:8px 12px 26px; } .picks-home-card { min-height:0; grid-template-columns:112px minmax(0,1fr); gap:20px; padding:24px 20px; border-radius:19px; } .picks-home-card-artist { width:54px; right:-8px; bottom:-8px; border-width:4px; } .picks-home-card-kicker { margin-bottom:12px; } .picks-home-card h2 { font-size:clamp(22px,8vw,34px); } }
.music-view:has(#musicBrowse.is-picks-station) .music-heading-row { display:none; }
#musicBrowse.is-picks-station { min-height:calc(100vh - var(--topbar-height) - 132px); }
.music-picks-station { min-width:0; min-height:inherit; display:grid; place-items:center; padding:clamp(28px,5vw,76px); overflow:hidden; }
.picks-station-hero {
  position:relative; isolation:isolate; width:min(1120px,100%); min-height:520px; display:grid;
  grid-template-columns:minmax(260px,390px) minmax(0,1fr); align-items:center; gap:clamp(38px,6vw,86px);
  overflow:hidden; padding:clamp(36px,5vw,72px); border:1px solid color-mix(in srgb,var(--music-accent) 34%,var(--music-line));
  border-radius:30px; background:linear-gradient(135deg,color-mix(in srgb,var(--music-surface) 96%,black),color-mix(in srgb,var(--music-player-bg) 90%,var(--music-accent) 10%));
  box-shadow:0 34px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
}
.picks-station-backdrop { position:absolute; inset:0; z-index:-2; overflow:hidden; opacity:.18; }
.picks-station-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--music-player-bg) 5%,color-mix(in srgb,var(--music-player-bg) 76%,transparent) 52%,var(--music-player-bg)); }
.picks-station-backdrop img { width:100%; height:100%; object-fit:cover; filter:blur(34px) saturate(1.3); transform:scale(1.18); }
.picks-station-back { position:absolute; top:22px; left:24px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:0; border-radius:999px; color:color-mix(in srgb,var(--music-copy) 72%,var(--music-warm)); background:rgba(0,0,0,.22); cursor:pointer; font:inherit; font-size:12px; font-weight:750; }
.picks-station-back:hover,.picks-station-back:focus-visible { color:var(--music-copy); outline:1px solid var(--music-accent); background:rgba(0,0,0,.4); }
.picks-station-back svg { width:16px; height:16px; }
.picks-station-artwork { position:relative; width:min(100%,360px); justify-self:center; }
.picks-station-album-art { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid color-mix(in srgb,var(--music-accent) 55%,white 12%); border-radius:22px; background:var(--music-surface); box-shadow:0 30px 60px rgba(0,0,0,.54); }
.picks-station-album-art img,.picks-station-artist-art img { position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:cover; }
.picks-station-art-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--music-accent); background:linear-gradient(145deg,color-mix(in srgb,var(--music-accent) 12%,var(--music-surface)),var(--music-player-bg)); }
.picks-station-art-fallback svg { width:32%; height:32%; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--music-accent) 50%,transparent)); }
.picks-station-artist-art { position:absolute; right:-24px; bottom:-24px; width:116px; aspect-ratio:1; overflow:hidden; border:6px solid var(--music-player-bg); border-radius:50%; background:var(--music-surface); box-shadow:0 14px 34px rgba(0,0,0,.55); }
.picks-station-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.picks-station-kicker { display:flex; align-items:center; gap:8px; margin:0 0 30px; color:var(--music-accent); font-size:12px; font-weight:900; letter-spacing:.17em; }
.picks-station-kicker svg { width:18px; height:18px; }
.picks-station-because { margin:0 0 5px; color:color-mix(in srgb,var(--music-copy) 72%,var(--music-warm)); font-size:clamp(18px,2vw,26px); font-weight:700; }
.picks-station-copy h2 { max-width:100%; margin:0; overflow-wrap:anywhere; color:var(--music-copy); font-size:clamp(42px,5.3vw,78px); line-height:.98; letter-spacing:-.045em; text-wrap:balance; text-shadow:0 7px 30px rgba(0,0,0,.45); }
.picks-station-album { margin:20px 0 28px; color:color-mix(in srgb,var(--music-copy) 64%,var(--music-warm)); font-size:15px; }
.picks-station-album strong { color:var(--music-copy); }
.picks-station-play { display:inline-flex; align-items:center; gap:12px; min-width:150px; min-height:58px; justify-content:center; padding:0 25px; border:0; border-radius:999px; color:var(--music-ink); background:var(--music-accent); box-shadow:0 12px 30px color-mix(in srgb,var(--music-accent) 35%,transparent); cursor:pointer; font:inherit; font-size:17px; font-weight:900; }
.picks-station-play:hover,.picks-station-play:focus-visible { outline:3px solid color-mix(in srgb,var(--music-copy) 72%,transparent); outline-offset:4px; transform:translateY(-2px); }
.picks-station-play svg { width:22px; height:22px; fill:currentColor; }
.picks-station-adaptive { display:flex; align-items:center; gap:9px; margin:24px 0 0; color:color-mix(in srgb,var(--music-copy) 58%,var(--music-warm)); font-size:12px; line-height:1.5; }
.picks-station-adaptive svg { width:16px; height:16px; flex:0 0 auto; color:var(--music-accent); }
@media(max-width:760px) {
  #musicBrowse.is-picks-station { min-height:auto; }
  .music-picks-station { padding:16px 12px 30px; }
  .picks-station-hero { min-height:0; grid-template-columns:1fr; gap:42px; padding:70px 24px 38px; border-radius:22px; text-align:center; }
  .picks-station-artwork { width:min(74vw,300px); }
  .picks-station-artist-art { right:-10px; bottom:-18px; width:92px; }
  .picks-station-copy { align-items:center; }
  .picks-station-kicker { margin-bottom:16px; }
  .picks-station-copy h2 { font-size:clamp(38px,12vw,60px); }
  .picks-station-adaptive { justify-content:center; }
}
.poster-grid .media-card {
  content-visibility: auto;
  contain-intrinsic-size: var(--poster-width) calc(var(--poster-height) + 54px);
}
/* Keep PC cards painted without needing :hover to unskip their descendants.
   Requests remain deferred/paginated; retain iPad's existing rendering path. */
.is-pc-media-browser .poster-grid .media-card {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.search-title-results { min-width:0; }
.search-title-results + .search-title-results { margin-top:30px; }
.search-source-heading {
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid color-mix(in srgb, var(--accent, #24b7ef) 30%, transparent);
  border-radius:14px;
  background:color-mix(in srgb, var(--surface, #082544) 92%, var(--accent, #24b7ef) 8%);
}
.search-source-heading h2 { margin:0; }
.search-source-heading span { display:block; margin-top:4px; color:var(--muted, #9cb4c8); }
#searchDiscoverySection { padding-top:2px; }
#searchDiscoverySection .metadata-credit { margin-top:18px; }
:root .problem-dialog { width: min(620px, calc(100vw - 32px)); max-height: 88vh; overflow: auto; color: #eaf4ff; background: #091d32; border: 1px solid #285777; border-radius: 18px; padding: 28px; box-shadow: 0 24px 80px #0009; }
.problem-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.problem-dialog h2 { margin: 0 0 12px; }
.problem-dialog label { display: grid; gap: 8px; margin: 18px 0; }
.problem-dialog textarea, .problem-dialog select { box-sizing: border-box; width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #38617c; background: #041323; color: #edf6ff; font: inherit; }
.problem-dialog textarea { resize: vertical; }
.problem-note, .problem-dialog small { color: #b2c8d9; font-size: .9rem; line-height: 1.5; }
.problem-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.problem-status { color: #ffd389; }
.problem-inbox article { padding: 18px 0; border-bottom: 1px solid #345069; overflow-wrap: anywhere; }
.problem-inbox > button { margin-top: 20px; }

/* PC/web Cinema player: a dedicated full-window surface that can collapse
   into a movable corner player without replacing the active video element. */
.player-dialog {
  position:fixed;
  z-index:1000;
  inset:0;
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:none;
  margin:0;
  box-sizing:border-box;
  color:var(--text);
  border:0;
  border-radius:0;
  background:radial-gradient(circle at 50% 35%,#101820 0,#030609 42%,#000 76%);
  box-shadow:none;
}
.player-dialog[open] { display:grid; grid-template-rows:68px minmax(0,1fr); }
.player-dialog::backdrop { display:none; background:transparent; backdrop-filter:none; }
.player-dialog .player-topbar { min-width:0; padding:0 22px; border-bottom:1px solid rgba(117,216,255,.18); background:linear-gradient(180deg,#0c151e 0,#070d13 100%); }
.player-cinema-title { min-width:0; display:flex!important; align-items:center; gap:16px; }
.player-cinema-title > span:last-child { min-width:0; display:grid; }
.player-cinema-mark { display:flex; align-items:center; gap:9px; padding-right:16px; border-right:1px solid rgba(117,216,255,.2); color:#75d8ff; font-size:9px; letter-spacing:.16em; }
.player-cinema-mark img { width:34px; height:34px; object-fit:contain; }
.player-mode-button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 13px; border:1px solid rgba(117,216,255,.3); border-radius:8px; color:#e8f8ff; background:rgba(20,55,78,.62); font:750 11px/1 inherit; cursor:pointer; }
.player-mode-button:hover,.player-mode-button:focus-visible { color:#001633; border-color:#75d8ff; background:#75d8ff; outline:0; }
.player-mode-button svg { width:17px; height:17px; }
.player-topbar-actions { display:flex; align-items:center; gap:7px; }
.player-topbar-actions .icon-button { flex:0 0 auto; }
.player-track-controls { min-width:0; display:flex; align-items:center; gap:7px; }
.player-track-field { min-width:0; display:grid; gap:3px; color:#9bb8ca; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.player-track-field select { width:clamp(128px,14vw,220px); height:32px; padding:0 28px 0 9px; overflow:hidden; border:1px solid rgba(117,216,255,.3); border-radius:7px; color:#e8f8ff; background:#112b3d; font:700 10px/1 inherit; text-overflow:ellipsis; }
.player-track-field select:hover,.player-track-field select:focus-visible { border-color:#75d8ff; outline:0; }
.player-track-field select:disabled { opacity:.48; cursor:default; }
.player-dialog:not(.is-mini) .player-stage { border-top:0; padding:0 clamp(0px,2vw,36px) clamp(0px,1.5vw,24px); }
.player-dialog:not(.is-mini) video { border-radius:0 0 12px 12px; }
.player-dialog:not(.is-mini) .player-controls { right:clamp(20px,4vw,72px); bottom:clamp(18px,3vw,42px); left:clamp(20px,4vw,72px); grid-template-columns:44px 44px minmax(160px,1fr) 44px 44px minmax(90px,140px) auto; min-height:66px; padding:10px 12px; border-radius:12px; background:linear-gradient(180deg,rgba(5,19,31,.72),rgba(2,11,20,.94)); backdrop-filter:blur(18px); }
.player-dialog:not(.is-mini) .player-status { inset:68px 0 0; }
html.video-player-open:not(.video-player-mini-open),html.video-player-open:not(.video-player-mini-open) body { overflow:hidden; }

.player-dialog.is-mini {
  top:auto;
  right:18px;
  bottom:18px;
  left:auto;
  width:min(460px,calc(100vw - 24px));
  height:min(310px,calc(100vh - var(--topbar-height) - 24px));
  min-height:246px;
  overflow:hidden;
  border:1px solid rgba(117,216,255,.52);
  border-radius:14px;
  background:#000;
  box-shadow:0 24px 74px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.05);
  grid-template-rows:48px minmax(0,1fr);
}
.player-dialog.is-mini .player-topbar {
  min-height:48px;
  padding-left:14px;
  border-bottom-color:rgba(117,216,255,.28);
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.player-dialog.is-mini.is-dragging .player-topbar { cursor:grabbing; }
.player-dialog.is-mini .player-topbar strong { font-size:12px; }
.player-dialog.is-mini .player-topbar small { margin-top:1px; font-size:9px; }
.player-dialog.is-mini .player-cinema-mark { display:none; }
.player-dialog.is-mini .player-cinema-title { gap:0; }
.player-dialog.is-mini .player-track-controls { display:none; }
.player-dialog.is-mini .player-mode-button { width:36px; min-height:36px; padding:0; }
.player-dialog.is-mini .player-mode-button span { display:none; }
.player-dialog.is-mini .player-controls {
  right:8px;
  bottom:8px;
  left:8px;
  min-height:48px;
  grid-template-columns:36px minmax(0,1fr) 36px;
  gap:6px;
  padding:6px;
  border-radius:9px;
}
.player-dialog.is-mini .player-control-button { width:36px; height:36px; }
.player-dialog.is-mini #playerBackButton,
.player-dialog.is-mini #playerForwardButton,
.player-dialog.is-mini #playerPipButton,
.player-dialog.is-mini .player-volume,
.player-dialog.is-mini .player-sports-next { display:none; }
.player-dialog.is-mini .player-timeline { gap:7px; }
.player-dialog.is-mini #playerTimeText { min-width:70px; font-size:9px; }
.player-dialog.is-mini .player-status { inset:48px 0 0; gap:10px; }
.player-dialog.is-mini .player-status-brand img { width:42px; height:42px; }
.player-dialog.is-mini .player-status-brand strong { font-size:20px; }
.player-dialog.is-mini .player-skip-intro { right:10px; bottom:68px; min-width:112px; height:36px; font-size:11px; }

@media(max-width:760px) {
  .player-dialog:not(.is-mini) { inset:0; width:100vw; height:100dvh; }
  .player-dialog:not(.is-mini) .player-topbar { padding:0 12px; }
  .player-dialog:not(.is-mini) .player-cinema-mark b { display:none; }
  .player-dialog:not(.is-mini) .player-cinema-title { display:none!important; }
  .player-dialog:not(.is-mini) .player-track-field > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .player-dialog:not(.is-mini) .player-track-field select { width:min(34vw,150px); }
  .player-dialog:not(.is-mini) .player-controls { right:8px; bottom:8px; left:8px; grid-template-columns:40px minmax(0,1fr) 40px; gap:6px; }
  .player-dialog:not(.is-mini) #playerBackButton,.player-dialog:not(.is-mini) #playerForwardButton,.player-dialog:not(.is-mini) .player-volume { display:none; }
  .player-dialog:not(.is-mini) #playerMuteButton { grid-column:3; }
  .player-dialog.is-mini { right:10px; bottom:10px; width:min(420px,calc(100vw - 20px)); height:min(282px,calc(100vh - var(--topbar-height) - 18px)); min-height:220px; }
  .player-dialog.is-mini #playerTimeText { display:none; }
}

/* Web player OSD: the timeline, program information, and mini guide live on
   the video surface, with the same video element in cinema and mini modes. */
.player-dialog:fullscreen { inset:0; width:100vw; height:100vh; max-width:none; max-height:none; border:0; border-radius:0; }
.player-dialog .player-stage { overflow:hidden; }
.player-dialog .player-stage > video { min-width:0; min-height:0; object-fit:contain; }
.player-dialog:not(.is-mini) .player-program-panel { position:absolute; z-index:4; top:clamp(20px,3vw,48px); left:clamp(22px,4vw,76px); width:min(540px,38vw); max-height:40%; overflow:hidden; padding:20px 23px; border:1px solid rgba(136,207,255,.22); border-radius:16px; background:linear-gradient(115deg,rgba(1,16,35,.92),rgba(0,16,35,.58)); box-shadow:0 18px 48px rgba(0,0,0,.38); backdrop-filter:blur(14px); }
.player-program-eyebrow { color:#64d8ff; font-size:10px; font-weight:900; letter-spacing:.16em; }
.player-program-panel h2 { margin:9px 0 5px; color:#fff; font-size:clamp(22px,2vw,34px); line-height:1.08; text-wrap:balance; }
.player-program-meta { margin:0; color:#b9dcf4; font-size:12px; font-weight:750; line-height:1.5; }
.player-program-description { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; margin:12px 0 0; color:#d4e6f2; font-size:13px; line-height:1.48; }
.player-program-description:empty,.player-program-meta:empty { display:none; }
.player-dialog:not(.is-mini) .player-guide-panel { position:absolute; z-index:8; top:22px; right:clamp(22px,4vw,76px); bottom:clamp(155px,13vh,205px); width:clamp(340px,28vw,500px); display:flex; flex-direction:column; padding:16px; border:1px solid rgba(117,216,255,.4); border-radius:18px; background:linear-gradient(150deg,rgba(3,28,57,.97),rgba(2,12,29,.97)); box-shadow:0 25px 80px rgba(0,0,0,.65); backdrop-filter:blur(22px); }
.player-guide-panel.is-hidden,.player-program-panel.is-hidden { display:none!important; }
.player-guide-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.player-guide-heading > span { display:grid; gap:2px; }
.player-guide-heading b { color:#f2fbff; font-size:18px; letter-spacing:.06em; }
.player-guide-heading small { color:#8db9d0; font-size:11px; }
.player-guide-panel input { min-height:39px; padding:0 12px; border:1px solid rgba(119,201,255,.3); border-radius:9px; color:#effaff; background:#091d35; font:inherit; outline:0; }
.player-guide-panel input:focus { border-color:#71dfff; }
.player-guide-list { min-height:0; overflow-y:auto; display:grid; align-content:start; gap:6px; margin-top:11px; padding-right:3px; scrollbar-color:#3c7599 transparent; }
.player-guide-channel { width:100%; min-height:66px; display:flex; align-items:center; gap:11px; padding:9px 10px; border:1px solid rgba(96,166,208,.18); border-radius:10px; color:#ecf7ff; background:rgba(17,51,82,.55); text-align:left; cursor:pointer; }
.player-guide-channel:hover,.player-guide-channel:focus-visible,.player-guide-channel.is-current { border-color:#6cd8ff; background:rgba(22,94,143,.72); outline:0; }
.player-guide-channel-number { min-width:49px; color:#67d8ff; font-size:17px; font-weight:900; }
.player-guide-channel-copy { min-width:0; flex:1; display:grid; gap:4px; }
.player-guide-channel-copy strong,.player-guide-channel-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-guide-channel-copy strong { font-size:12px; }
.player-guide-channel-copy small { color:#bad3e3; font-size:11px; }
.player-guide-channel-time { color:#86bfd8; font-size:9px; font-weight:850; white-space:nowrap; }
.player-guide-channel.is-current .player-guide-channel-time { color:#6ef5e7; }
.player-guide-empty { margin:20px 4px; color:#b9d0e0; font-size:12px; }
.player-dialog:not(.is-mini) .player-controls { right:clamp(20px,4vw,76px); bottom:clamp(16px,3vw,48px); left:clamp(20px,4vw,76px); display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-height:100px; padding:16px 20px; border-radius:18px; background:linear-gradient(180deg,rgba(7,28,49,.8),rgba(2,12,27,.97)); box-shadow:0 25px 65px rgba(0,0,0,.58); }
.player-dialog .player-timeline { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:15px; align-items:center; }
.player-timeline input { height:20px; margin:0; background:transparent; }
.player-timeline input::-webkit-slider-runnable-track { height:6px; border-radius:99px; background:linear-gradient(to right,#55d8ff var(--player-seek-progress,0%),rgba(207,230,247,.28) var(--player-seek-progress,0%)); }
.player-timeline input::-webkit-slider-thumb { width:16px; height:16px; margin-top:-5px; border:3px solid #f4fcff; border-radius:50%; background:#25c9f8; box-shadow:0 0 0 4px rgba(48,177,230,.2); appearance:none; }
.player-timeline input::-moz-range-track { height:6px; border-radius:99px; background:#48728b; }
.player-timeline input::-moz-range-progress { height:6px; border-radius:99px; background:#55d8ff; }
.player-timeline input::-moz-range-thumb { width:12px; height:12px; border:3px solid #f4fcff; border-radius:50%; background:#25c9f8; }
#playerTimeText { min-width:90px; color:#d8edfa; font-size:12px; font-weight:800; text-align:right; white-space:nowrap; }
.player-control-row { min-width:0; display:flex; align-items:center; gap:16px; }
.player-transport,.player-control-tools { display:flex; align-items:center; gap:7px; }
.player-control-tools { margin-left:auto; }
.player-control-context { min-width:0; overflow:hidden; color:#d6e8f6; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.player-dialog .player-control-button { width:40px; height:40px; border-radius:10px; }
.player-dialog .player-primary-control { width:48px; height:48px; border-color:#7ee8ff; color:#052035; background:#68d9fb; }
.player-dialog .player-primary-control:hover { background:#b2efff; }
.player-tool-button,.player-live-button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 11px; border:1px solid rgba(112,201,247,.28); border-radius:9px; color:#dceefa; background:rgba(22,65,100,.58); font:800 11px/1 inherit; cursor:pointer; white-space:nowrap; }
.player-tool-button svg { width:16px; height:16px; }
.player-tool-button:hover,.player-tool-button:focus-visible,.player-tool-button.is-active { border-color:#62d9ff; color:#fff; background:#135685; outline:0; }
.player-live-button { border-color:rgba(255,91,105,.38); color:#ffb2bc; background:rgba(104,26,40,.34); }
.player-live-button.is-behind-live { border-color:#ff5869; color:#fff; background:#b81f38; }
.player-live-button:disabled { opacity:.65; cursor:default; }
.player-dialog .player-volume { width:clamp(65px,7vw,105px); }
.player-skip-button { position:relative; }
.player-skip-button small { position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); font-size:8px; font-weight:900; pointer-events:none; }
.media-install-button { width:auto; min-width:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; color:#c5f5ff!important; font-size:10px; font-weight:800; white-space:nowrap; }
.media-install-button.is-hidden { display:none!important; }
.media-install-button svg { width:16px; height:16px; }
.player-dialog.is-mini .player-program-panel,.player-dialog.is-mini .player-guide-panel { display:none!important; }
.player-dialog.is-mini .player-controls { right:8px; bottom:8px; left:8px; display:grid; grid-template-columns:1fr; gap:4px; min-height:64px; padding:8px; }
.player-dialog.is-mini .player-control-row { gap:5px; }
.player-dialog.is-mini .player-transport { gap:0; }
.player-dialog.is-mini .player-control-context,.player-dialog.is-mini .player-tool-button,.player-dialog.is-mini .player-live-button { display:none!important; }
.player-dialog.is-mini .player-control-tools { margin-left:auto; }
.player-dialog.is-mini .player-primary-control { width:34px; height:34px; }
.player-dialog.is-mini .player-timeline { grid-template-columns:minmax(0,1fr) auto; }
.player-dialog.is-mini #playerTimeText { min-width:54px; }
@media(max-width:900px) {
  .player-dialog:not(.is-mini) .player-program-panel { top:12px; left:12px; width:min(420px,calc(100vw - 24px)); padding:12px 14px; }
  .player-dialog:not(.is-mini) .player-guide-panel { top:10px; right:10px; bottom:140px; width:min(390px,calc(100vw - 20px)); }
  .player-dialog:not(.is-mini) .player-controls { right:10px; bottom:10px; left:10px; gap:8px; padding:10px 12px; }
  .player-control-context,.player-dialog:not(.is-mini) .player-volume { display:none; }
  .player-tool-button span { display:none; }
  .player-tool-button { width:36px; padding:0; }
}
@media(max-width:1100px) {
  .player-dialog:not(.is-mini) .player-fullscreen-button,.player-dialog:not(.is-mini) #playerMiniButton { width:42px; padding:0; }
  .player-dialog:not(.is-mini) .player-fullscreen-button span,.player-dialog:not(.is-mini) #playerMiniButton span,.media-install-button span { display:none; }
  .player-dialog:not(.is-mini) .player-track-field select { width:clamp(90px,12vw,135px); }
}
@media(max-width:760px) {
  .topbar-actions .media-install-button:not(.is-hidden) { display:inline-flex!important; }
  .topbar-actions #activityButton { display:none; }
}
@media(pointer:coarse) {
  button, a[href], [role="button"] { touch-action:manipulation; }
  .player-dialog .player-control-button,.player-dialog .player-tool-button,.player-dialog .player-live-button,.player-dialog .player-mode-button,.player-dialog .player-topbar-actions .icon-button { min-width:44px; min-height:44px; }
  .player-dialog .player-timeline input { height:32px; touch-action:pan-x; }
  .player-dialog .player-guide-channel { min-height:74px; }
  .player-dialog .player-guide-panel input { min-height:44px; font-size:16px; }
  .player-dialog:not(.is-mini) .player-controls { bottom:max(16px,env(safe-area-inset-bottom)); }
}
@media(pointer:coarse) and (max-width:1400px) {
  :root,html.sidebar-collapsed { --topbar-height:64px; --sidebar-width:0px; }
  .topbar,.sidebar-collapsed .topbar { grid-template-columns:auto minmax(180px,1fr) auto; gap:12px; padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar,
  .app-shell:has(#sportsView.active .sports-hero) > .topbar { left:0 !important; grid-template-columns:auto minmax(180px,1fr) auto; }
  .edge-navigation-hint {
    position:fixed;
    z-index:85;
    top:50%;
    left:max(0px,env(safe-area-inset-left));
    display:grid;
    place-items:center;
    width:28px;
    height:82px;
    padding:0;
    border:1px solid rgba(146,226,255,.3);
    border-left:0;
    border-radius:0 12px 12px 0;
    background:rgba(14,57,85,.48);
    box-shadow:2px 0 12px rgba(0,10,32,.3);
    transform:translateY(-50%);
    touch-action:none;
    cursor:pointer;
  }
  .edge-navigation-hint::before { content:""; width:4px; height:46px; border-radius:999px; background:#90eaff; box-shadow:0 0 9px rgba(99,218,255,.75); }
  .edge-navigation-hint:is(:hover,:focus-visible) { outline:2px solid #6cddff; outline-offset:2px; background:rgba(30,99,132,.82); }
  .mobile-menu-button { display:grid; width:44px; height:44px; }
  .topbar-start .mobile-menu-button {
    width:46px;
    height:46px;
    transform:translateY(-2px);
    border:1px solid rgba(150,226,255,.7);
    border-radius:12px;
    color:#f5fcff;
    background:rgba(30,79,109,.84);
    box-shadow:0 5px 18px rgba(0,8,26,.38),inset 0 1px rgba(255,255,255,.12);
  }
  .topbar-start .mobile-menu-button svg { width:24px; height:24px; stroke-width:2.6; }
  .topbar-start .mobile-menu-button:is(:hover,:focus-visible,[aria-expanded="true"]) {
    outline:2px solid #6cddff;
    outline-offset:2px;
    background:#32789d;
  }
  .topbar-start .media-brand { display:none; }
  .sidebar,.sidebar-collapsed .sidebar,.sidebar-collapsed .sidebar:hover,.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover { z-index:110; width:min(320px,84vw); transform:translateX(-100%); box-shadow:14px 0 40px rgba(0,0,0,.45); }
  .sidebar.open,.sidebar-collapsed .sidebar.open,.sidebar-collapsed .sidebar.sidebar-hover-suppressed.open:hover { transform:translateX(0); }
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .sidebar,
  .app-shell:has(#sportsView.active .sports-hero) > .sidebar { top:calc(env(safe-area-inset-top) + 56px); }
  .sidebar-collapsed .nav-item span,.sidebar-collapsed .library-navigation button span { display:block; }
  .sidebar-collapsed .primary-nav,.sidebar-collapsed .sidebar-section { padding-left:12px; padding-right:12px; }
  .sidebar-collapsed .nav-item,.sidebar-collapsed .library-navigation button,.sidebar-collapsed .sidebar:hover .nav-item,.sidebar-collapsed .sidebar:hover .library-navigation button { grid-template-columns:20px minmax(0,1fr); justify-items:stretch; gap:11px; padding:0 11px; }
  .sidebar-collapsed .nav-item,.sidebar-collapsed .library-navigation button { min-height:46px; }
  .content { margin-left:0; padding:calc(var(--topbar-height) + 24px) 22px 50px; }
  .search-box { min-width:0; }
  .topbar .topbar-actions { min-width:max-content; }
  .player-dialog:not(.is-mini) .player-topbar { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
  .player-dialog:not(.is-mini) .player-program-panel { width:min(410px,43vw); }
  .player-dialog:not(.is-mini) .player-control-context,.player-dialog:not(.is-mini) .player-volume { display:none; }
  .player-dialog:not(.is-mini) .player-control-row { justify-content:space-between; }
  .player-dialog:not(.is-mini) .player-tool-button span { display:none; }
  .player-dialog:not(.is-mini) .player-tool-button { padding:0; }
}
@media(pointer:coarse) and (orientation:portrait) and (max-width:900px) {
  .player-dialog:not(.is-mini) .player-program-panel { width:min(410px,calc(100vw - 32px)); max-height:24%; }
  .player-dialog:not(.is-mini) .player-guide-panel { top:12px; right:12px; bottom:130px; width:min(430px,calc(100vw - 24px)); }
  .player-dialog:not(.is-mini) .player-controls { left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); }
}
@media(max-width:600px) {
  .player-dialog:not(.is-mini) .player-program-description { display:none; }
  .player-dialog:not(.is-mini) .player-controls { min-height:90px; }
  .player-dialog:not(.is-mini) #playerBackButton,.player-dialog:not(.is-mini) #playerForwardButton { display:inline-flex; }
  .player-dialog:not(.is-mini) .player-control-row { gap:5px; }
  .player-dialog:not(.is-mini) .player-control-button { width:32px; height:32px; }
  .player-dialog:not(.is-mini) .player-primary-control { width:38px; height:38px; }
  .player-dialog:not(.is-mini) .player-tool-button { width:32px; min-height:32px; }
  .player-dialog:not(.is-mini) .player-live-button { min-height:32px; padding:0 6px; font-size:9px; }
  .player-dialog:not(.is-mini) .player-guide-panel { bottom:115px; }
  .player-dialog:not(.is-mini) #playerMuteButton { grid-column:auto; }
}

/* Tablet navigation, touch guide and player details. */
.tablet-sidebar-heading { display:none; }
.mobile-search-button { display:none; }
.player-diagnostics-button { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 10px; border:1px solid rgba(105,211,246,.4); border-radius:9px; color:#d8f7ff; background:rgba(4,37,58,.88); font:700 11px/1 inherit; cursor:pointer; }
.player-diagnostics-button svg { width:18px; height:18px; color:#54e4b7; }
.player-diagnostics-button[data-status="buffering"] svg,.player-diagnostics-button[data-status="playback-error"] svg { color:#ffb65d; }
.player-diagnostics-panel { position:absolute; z-index:32; top:66px; right:max(16px,env(safe-area-inset-right)); width:min(350px,calc(100vw - 32px)); box-sizing:border-box; padding:15px; border:1px solid rgba(105,211,246,.44); border-radius:14px; color:#eefaff; background:linear-gradient(145deg,#0a2e49,#061628); box-shadow:0 20px 50px rgba(0,0,0,.6); }
.player-diagnostics-panel header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.player-diagnostics-panel header strong { font-size:15px; }
.player-diagnostics-panel header button { width:36px; height:36px; }
.player-diagnostics-panel dl { display:grid; gap:0; margin:0; }
.player-diagnostics-panel dl div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(133,208,241,.16); font-size:12px; }
.player-diagnostics-panel dt { color:#9fbfd0; }
.player-diagnostics-panel dd { margin:0; text-align:right; font-weight:700; }
.player-diagnostics-panel p { margin:12px 0 0; color:#a6c3d2; font-size:11px; line-height:1.45; }
.player-dialog:not(.is-mini):not(.has-wide-wings):has(.player-guide-panel:not(.is-hidden)) .player-topbar-actions { visibility:hidden; pointer-events:none; }
.player-dialog:not(.is-mini) .player-guide-panel { z-index:30; }
.player-dialog:not(.is-mini).osd-hidden:has(.player-diagnostics-panel.is-hidden) .player-topbar { opacity:1; pointer-events:none; background:none; }
.player-dialog:not(.is-mini).osd-hidden .player-cinema-title,
.player-dialog:not(.is-mini).osd-hidden .player-topbar-actions > :not(.player-diagnostics-button) { opacity:0; pointer-events:none; }
.player-dialog:not(.is-mini).osd-hidden .player-diagnostics-button { pointer-events:auto; }
.player-status-channel,.player-status-program { display:none; }
.player-status.is-live { z-index:11; gap:12px; padding:30px; text-align:center; background:radial-gradient(circle at 50% 34%,rgba(13,69,106,.9),rgba(2,17,39,.98) 43%,#020915 83%); }
.player-status.is-live .player-status-brand { display:none; }
.player-dialog.is-live:has(.player-status.is-live:not(.is-hidden)) .player-cinema-title { visibility:hidden; }
.player-status.is-live .player-status-channel { width:112px; height:112px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(113,218,251,.5); border-radius:24px; background:linear-gradient(140deg,#0a3659,#03182e); box-shadow:0 16px 50px rgba(0,0,0,.5),0 0 38px rgba(17,179,223,.16); }
.player-status-channel img { width:85%; height:85%; object-fit:contain; }
.player-status-channel img[hidden],.player-status-channel span[hidden] { display:none; }
.player-status-channel span { color:#e7faff; font-size:36px; font-weight:900; }
.player-status.is-live .player-status-program { display:grid; gap:5px; max-width:min(520px,85vw); }
.player-status-program small { color:#69dafa; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.player-status-program strong { color:#fff; font-size:clamp(22px,3vw,35px); line-height:1.15; }
.player-status.is-live .spinner { width:23px; height:23px; border-width:2px; margin-top:8px; }
.live-start-dialog { position:fixed; inset:0; width:min(520px,calc(100vw - 28px)); max-width:none; max-height:min(80dvh,680px); box-sizing:border-box; padding:22px; overflow:auto; border:1px solid rgba(100,219,251,.58); border-radius:22px; color:#eefaff; background:linear-gradient(145deg,#0d3758,#06172c 75%); box-shadow:0 24px 80px #000b; }
.live-start-dialog::backdrop { background:rgba(0,5,18,.76); backdrop-filter:blur(9px); }
.live-start-heading { display:grid; grid-template-columns:72px minmax(0,1fr) 40px; align-items:start; gap:15px; }
.live-start-channel-art { display:grid; place-items:center; width:72px; height:72px; border:1px solid #277398; border-radius:15px; background:#08253e; font-size:22px; font-weight:900; }
.live-start-channel-art img { width:86%; height:86%; object-fit:contain; }
.live-start-heading small { color:#61d8f5; font-size:10px; font-weight:900; letter-spacing:.16em; }
.live-start-heading h2 { margin:4px 0 5px; font-size:24px; line-height:1.1; }
.live-start-heading p { margin:0; color:#acc8d9; font-size:13px; line-height:1.4; }
.live-start-heading .icon-button { width:40px; height:40px; }
.live-start-choices { display:grid; gap:9px; margin-top:22px; }
.live-start-choices button { display:grid; grid-template-columns:34px minmax(0,1fr) 22px; align-items:center; gap:11px; width:100%; min-height:65px; padding:11px 14px; border:1px solid rgba(107,196,229,.28); border-radius:12px; color:#effaff; background:rgba(9,46,75,.78); text-align:left; cursor:pointer; }
.live-start-choices button:hover,.live-start-choices button:focus-visible { border-color:#65dfff; background:#125479; outline:0; }
.live-start-choices button[data-live-start="live"] { border-color:#50d3ee; background:linear-gradient(110deg,#0d526c,#102d57); }
.live-start-choices button > svg { width:24px; height:24px; color:#70ddf8; }
.live-start-choices button span { display:grid; gap:3px; }
.live-start-choices button strong { font-size:15px; }
.live-start-choices button small { color:#a7c7d8; font-size:11px; }
.live-start-choices button > svg:last-child { width:19px; height:19px; }
.web-quality-menu { position:fixed; z-index:200; top:calc(72px + env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); max-height:calc(100dvh - 88px - env(safe-area-inset-top)); box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch; }
@media(pointer:coarse) and (max-width:1400px) {
  .topbar,.sidebar-collapsed .topbar,
  .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar,
  .app-shell:has(#sportsView.active .sports-hero) > .topbar { width:100vw; max-width:100vw; box-sizing:border-box; grid-template-columns:auto minmax(0,1fr) auto; }
  .tablet-sidebar-heading { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:0 14px 0 18px; border-bottom:1px solid rgba(117,216,255,.26); color:#e9f9ff; background:#061d37; }
  .tablet-sidebar-heading button { width:44px; height:44px; }
  .topbar .mobile-search-button { display:grid; width:44px; height:44px; }
  .topbar .search-box,.topbar:has(.music-player.is-mini) .search-box { display:none; }
  .topbar .search-box.is-mobile-open,.topbar:has(.music-player.is-mini) .search-box.is-mobile-open {
    position:absolute; z-index:90; top:calc(var(--topbar-height) - 2px); right:max(12px,env(safe-area-inset-right)); left:auto;
    display:flex; width:min(480px,calc(100vw - 24px)); max-width:none; min-height:48px; box-sizing:border-box;
    grid-column:auto; grid-row:auto; border:1px solid #55ccec; border-radius:11px; background:#092c49; box-shadow:0 12px 28px rgba(0,0,0,.5);
  }
  .topbar .search-box.is-mobile-open input { min-width:0; width:100%; font-size:16px; }
  html:has(.topbar .music-player.is-mini) { --topbar-height:64px; }
  .topbar:has(.music-player.is-mini) { grid-template-rows:1fr; }
  .topbar:has(.music-player.is-mini) .topbar-start { grid-column:1; grid-row:1; }
  .topbar:has(.music-player.is-mini) .topbar-actions { grid-column:3; grid-row:1; }
  .topbar:has(.music-player.is-mini) .music-player.is-mini { grid-column:2; grid-row:1; justify-self:stretch; width:100%; max-width:100%; }
  .profile-popover { top:calc(var(--topbar-height) + 4px); right:max(12px,env(safe-area-inset-right)); width:min(350px,calc(100vw - 24px)); max-height:calc(100dvh - var(--topbar-height) - 16px); box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #homeView { margin-right:-22px; margin-left:-22px; }
  #homeView .home-hero-card-preview { display:none; }
  #homeView .home-hero-rail { -webkit-overflow-scrolling:touch; touch-action:pan-x; }
  .guide-scroll { -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }
  .guide-row { content-visibility:auto; contain-intrinsic-size:auto 74px; }
  .guide-program > strong,.guide-program > span { margin-left:0; }
}
@media(pointer:coarse) and (max-width:700px) {
  html:has(.topbar .music-player.is-mini) { --topbar-height:64px; }
  #homeView { margin-right:-16px; margin-left:-16px; }
  .topbar-start .media-brand span,.topbar .server-status,.topbar .profile-copy { display:none; }
  .topbar,.sidebar-collapsed .topbar { gap:7px; }
  .topbar .topbar-actions { padding:4px; }
}
@media(display-mode:standalone) and (pointer:coarse) and (max-width:1400px) {
  :root,html.sidebar-collapsed { --topbar-height:calc(64px + env(safe-area-inset-top)); }
  .topbar,.sidebar-collapsed .topbar { padding-top:env(safe-area-inset-top); }
  html:has(.topbar .music-player.is-mini) { --topbar-height:calc(64px + env(safe-area-inset-top)); }
}

/* Final cinema OSD: keep controls aligned with the picture on ultrawide PCs,
   while using the same touch-friendly surface on tablet browsers. */
.player-dialog:not(.is-mini)[open] { display:block; }
.player-dialog:not(.is-mini) .player-stage { position:absolute; inset:0; display:block; padding:0; }
.player-dialog:not(.is-mini) .player-stage > video { display:block; width:100%; height:100%; border-radius:0; }
.player-dialog:not(.is-mini) .player-topbar {
  position:absolute; z-index:12; top:0; left:var(--player-osd-left,3vw); width:var(--player-osd-width,94vw);
  height:76px; box-sizing:border-box; padding:0 16px; border:0;
  background:linear-gradient(180deg,rgba(0,0,0,.78),transparent);
}
.player-dialog:not(.is-mini) .player-cinema-mark { border:0; }
.player-dialog:not(.is-mini) .player-cinema-mark b { display:inline; color:#e7faff; font-size:18px; letter-spacing:-.04em; text-transform:none; }
.player-dialog:not(.is-mini) .player-cinema-title > span:last-child { display:none; }
.player-dialog:not(.is-mini) .player-topbar-actions { margin-left:auto; }
.player-dialog:not(.is-mini) .player-track-field { color:#d4e8f3; }
.player-dialog:not(.is-mini) .player-program-panel {
  z-index:7; left:calc(var(--player-osd-left,3vw) + 20px); width:min(660px,calc(var(--player-osd-width,94vw) - 40px));
  box-sizing:border-box; max-height:34%; padding:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; backdrop-filter:none; text-shadow:0 2px 12px #000,0 2px 28px #000;
}
.player-dialog:not(.is-mini):not(.is-live) .player-program-panel { top:clamp(82px,9vh,138px); }
.player-dialog:not(.is-mini).is-live .player-program-panel { top:auto; bottom:clamp(190px,20vh,250px); }
.player-dialog:not(.is-mini) .player-program-eyebrow { color:#62d9fa; font-size:11px; }
.player-dialog:not(.is-mini).is-live .player-program-eyebrow { color:#ff7186; }
.player-dialog:not(.is-mini) .player-program-panel h2 { margin:5px 0; font-size:clamp(26px,2.2vw,44px); }
.player-dialog:not(.is-mini) .player-program-meta { font-size:clamp(12px,1.05vw,17px); color:#e3ecf4; }
.player-dialog:not(.is-mini) .player-program-description { display:none; max-width:540px; font-size:13px; }
.player-dialog:not(.is-mini) .player-program-panel.is-expanded .player-program-description:not(:empty) { display:-webkit-box; }
.player-dialog:not(.is-mini) .player-controls {
  z-index:8; left:var(--player-osd-left,3vw); right:auto; bottom:max(20px,env(safe-area-inset-bottom));
  width:var(--player-osd-width,94vw); max-width:none; min-height:0; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:36px 20px 10px;
  border:0; border-radius:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.52) 25%,rgba(0,0,0,.82));
  box-shadow:none; backdrop-filter:none;
}
.player-dialog:not(.is-mini) .player-timeline { grid-template-columns:auto minmax(0,1fr) auto auto; gap:12px; }
.player-dialog:not(.is-mini) .player-timeline input { height:30px; }
.player-dialog:not(.is-mini) .player-timeline input::-webkit-slider-runnable-track { height:8px; }
.player-dialog:not(.is-mini) .player-timeline input::-webkit-slider-thumb { width:20px; height:20px; margin-top:-6px; }
.player-seek-bound { color:#d5e7f3; font-size:12px; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; text-shadow:0 2px 7px #000; }
.player-timeline input.is-program-timeline::-webkit-slider-runnable-track {
  background:linear-gradient(to right,
    #28516b 0 var(--player-seek-buffer-start,0%),
    #42d3f4 var(--player-seek-buffer-start,0%) var(--player-seek-progress,0%),
    #f9ac42 var(--player-seek-progress,0%) var(--player-seek-buffered,0%),
    rgba(212,231,241,.32) var(--player-seek-buffered,0%) 100%);
}
.player-timeline input.is-program-timeline::-moz-range-track { background:#647b8b; }
.player-dialog:not(.is-mini) #playerTimeText { min-width:150px; font-variant-numeric:tabular-nums; }
.player-dialog:not(.is-mini) .player-control-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; }
.player-dialog:not(.is-mini) .player-transport { grid-column:2; gap:7px; }
.player-dialog:not(.is-mini) .player-control-context { display:none; }
.player-dialog:not(.is-mini) .player-control-tools { grid-column:3; justify-content:flex-end; gap:6px; margin:0; }
.player-dialog:not(.is-mini) .player-transport .player-control-button,
.player-dialog:not(.is-mini) .player-control-tools .player-tool-button,
.player-dialog:not(.is-mini) .player-live-button {
  width:clamp(78px,6vw,104px); height:clamp(74px,5.4vw,90px); min-height:74px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:7px; padding:8px 5px;
  border:1px solid rgba(90,160,194,.28); border-radius:9px;
  color:#eff8ff; background:linear-gradient(180deg,rgba(16,29,43,.89),rgba(5,14,25,.94));
  font-size:clamp(12px,.86vw,15px); font-weight:650;
}
.player-dialog:not(.is-mini) .player-control-button svg,
.player-dialog:not(.is-mini) .player-tool-button svg { width:28px; height:28px; }
.player-dialog:not(.is-mini) .player-skip-button small { top:27px; font-size:9px; }
.player-dialog:not(.is-mini) .player-primary-control { border-color:#b557ff; box-shadow:inset 0 0 0 1px #b557ff; }
.player-dialog:not(.is-mini) .player-primary-control:hover { color:#fff; background:#144c70; }
.player-dialog:not(.is-mini) .player-transport .player-control-button:hover,
.player-dialog:not(.is-mini) .player-control-tools .player-tool-button:hover,
.player-dialog:not(.is-mini) .player-transport .player-control-button:focus-visible,
.player-dialog:not(.is-mini) .player-control-tools .player-tool-button:focus-visible {
  border-color:#62dfff; color:#fff; background:linear-gradient(180deg,#15496d,#0b2947);
  box-shadow:0 0 20px rgba(30,180,235,.22); outline:0; transform:translateY(-2px);
}
.player-dialog:not(.is-mini) .player-transport .player-control-button,
.player-dialog:not(.is-mini) .player-control-tools .player-tool-button { transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.player-dialog:not(.is-mini) .player-transport .player-primary-control { background:linear-gradient(180deg,rgba(54,44,88,.97),rgba(15,27,51,.97)); box-shadow:inset 0 0 0 1px #b557ff,0 0 20px rgba(129,67,230,.16); }
.player-dialog:not(.is-mini) .player-live-button { color:#f8c4cc; border-color:rgba(255,91,105,.38); }
.player-dialog:not(.is-mini) .player-live-button.is-behind-live { color:#fff; background:#ae2840; }
.player-dialog:not(.is-mini) #playerMuteButton { width:40px; height:40px; }
.player-dialog:not(.is-mini) .player-volume { width:70px; }
.player-dialog:not(.is-mini) .player-guide-panel { right:var(--player-osd-left,3vw); top:78px; bottom:clamp(145px,17vh,205px); width:min(460px,calc(var(--player-osd-width,94vw) - 24px)); }
.player-dialog.is-mini .player-seek-bound { display:none; }
.player-guide-window { display:flex; align-items:center; justify-content:space-between; gap:9px; margin:0 0 8px; color:#d6ebf9; font-size:12px; font-weight:750; }
.player-guide-window button { min-width:30px; min-height:30px; border:1px solid #326481; border-radius:7px; color:#d8f4ff; background:#0c3451; cursor:pointer; }
.player-guide-window button:disabled { opacity:.35; cursor:default; }
.player-guide-window svg { width:15px; height:15px; }
.player-guide-next { color:#83cce6!important; }
.player-full-guide-button { width:100%; min-height:40px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; border:1px solid #58c9ef; border-radius:9px; color:#e9faff; background:#0d476a; cursor:pointer; }
.player-full-guide-button svg { width:17px; height:17px; }
.player-dialog:not(.is-mini) .player-status { inset:0; }
.player-dialog:not(.is-mini).osd-hidden .player-topbar,
.player-dialog:not(.is-mini).osd-hidden .player-program-panel,
.player-dialog:not(.is-mini).osd-hidden .player-controls { opacity:0; pointer-events:none; }
.player-dialog:not(.is-mini) .player-topbar,
.player-dialog:not(.is-mini) .player-program-panel,
.player-dialog:not(.is-mini) .player-controls { transition:opacity .25s ease; }
.player-airplay-actions {
  display:inline-flex; flex:0 0 auto; align-items:center; gap:6px;
}
.player-airplay-launch {
  min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid color-mix(in srgb,var(--accent,#3ec6ff) 65%,transparent); border-radius:8px;
  color:var(--text,#fff); background:color-mix(in srgb,var(--app-popover,#051b32) 88%,transparent);
  font-family:inherit; font-size:11px; font-weight:800; line-height:1; cursor:pointer;
}
.player-airplay-launch { padding:0 13px; }
.player-airplay-launch svg { width:17px; height:17px; color:var(--accent,#3ec6ff); }
.player-airplay-launch:where(:hover,:focus-visible) { outline:2px solid var(--accent,#3ec6ff); outline-offset:2px; }
.player-airplay-launch:disabled { opacity:.55; cursor:wait; }
.player-dialog.is-mini .player-airplay-actions { display:none!important; }
@media(pointer:coarse) {
  .player-airplay-launch { min-height:44px; }
}
@media(max-width:1000px) {
  .player-airplay-launch { width:44px; padding:0; }
  .player-airplay-launch span { display:none; }
}
@media(max-width:1100px) {
  .player-dialog:not(.is-mini) .player-control-tools .player-tool-button { width:48px; height:48px; min-height:48px; }
  .player-dialog:not(.is-mini) .player-tool-button span { display:none; }
  .player-dialog:not(.is-mini) .player-control-row { grid-template-columns:auto minmax(0,1fr); }
  .player-dialog:not(.is-mini) .player-transport { grid-column:1; }
  .player-dialog:not(.is-mini) .player-control-tools { grid-column:2; }
  .player-dialog:not(.is-mini) .player-volume { display:none; }
}
@media(max-width:700px) {
  .player-dialog:not(.is-mini) .player-topbar { height:60px; }
  .player-dialog:not(.is-mini) .player-program-panel { left:calc(var(--player-osd-left,3vw) + 10px); width:min(440px,calc(var(--player-osd-width,94vw) - 20px)); }
  .player-dialog:not(.is-mini).is-live .player-program-panel { bottom:155px; }
  .player-dialog:not(.is-mini) .player-controls { padding:20px 8px 6px; }
  .player-dialog:not(.is-mini) .player-timeline { grid-template-columns:auto minmax(0,1fr) auto; gap:6px; }
  .player-dialog:not(.is-mini) #playerTimeText { display:none; }
  .player-dialog:not(.is-mini) .player-seek-bound { font-size:10px; }
  .player-dialog:not(.is-mini) .player-control-row { display:flex; justify-content:space-between; gap:5px; }
  .player-dialog:not(.is-mini) .player-transport { gap:4px; }
  .player-dialog:not(.is-mini) .player-transport .player-control-button { width:45px; height:48px; min-height:48px; gap:2px; font-size:9px; }
  .player-dialog:not(.is-mini) .player-control-button svg { width:18px; height:18px; }
  .player-dialog:not(.is-mini) .player-skip-button small { top:18px; }
  .player-dialog:not(.is-mini) .player-control-tools .player-tool-button { width:44px; height:44px; min-height:44px; }
  .player-dialog:not(.is-mini) #playerMuteButton,.player-dialog:not(.is-mini) .player-live-button { display:none!important; }
  .player-dialog:not(.is-mini) .player-guide-panel { top:64px; bottom:130px; }
}
@media(max-width:600px) {
  .player-dialog:not(.is-mini) .player-track-field:nth-child(2) { display:none; }
  .player-dialog:not(.is-mini) .player-track-field select { width:min(32vw,140px); }
}

/* Use the otherwise empty pillarboxes on wide desktop displays. */
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-panel {
  top:clamp(88px,12vh,155px); bottom:auto;
  left:calc((var(--player-video-left) - var(--player-side-panel-width))/2);
  width:var(--player-side-panel-width); max-height:calc(100% - 220px);
  padding:18px 20px; border:1px solid rgba(102,191,229,.18); border-radius:16px;
  background:linear-gradient(145deg,rgba(9,28,46,.9),rgba(4,14,29,.72));
  box-shadow:0 18px 50px rgba(0,0,0,.26); text-shadow:none;
}
.player-dialog.has-wide-wings:not(.is-mini) .player-stage > video {
  position:absolute; inset:0 auto 0 var(--player-video-left);
  width:var(--player-video-width); height:100%;
}
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-panel h2 { font-size:clamp(24px,1.55vw,34px); }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-description:not(:empty) {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden;
  max-width:none; margin-top:16px; color:#c5d8e6; line-height:1.5;
}
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-panel {
  top:80px; bottom:28px; right:auto;
  left:calc(var(--player-video-left) + var(--player-video-width) + (var(--player-video-left) - var(--player-side-panel-width))/2);
  width:var(--player-side-panel-width);
  padding:15px; border-color:rgba(96,178,218,.2); border-radius:16px;
  background:linear-gradient(155deg,rgba(9,29,49,.96),rgba(4,16,32,.96));
  box-shadow:0 16px 48px rgba(0,0,0,.32);
}
.player-dialog.has-wide-wings:not(.is-mini).osd-hidden .player-program-panel { opacity:1; pointer-events:auto; }
.player-guide-channel { align-items:flex-start; }
.player-guide-channel-copy { overflow:hidden; }
.player-guide-schedule { display:flex; gap:5px; width:100%; overflow-x:auto; padding:3px 0 5px; scrollbar-width:thin; scrollbar-color:#39708c transparent; }
.player-guide-slot { flex:0 0 136px; min-width:0; padding:6px 8px; border:1px solid rgba(112,201,247,.15); border-radius:7px; background:rgba(0,15,32,.48); }
.player-guide-slot time,.player-guide-slot b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-guide-slot time { color:#73d9f4; font-size:10px; font-weight:800; }
.player-guide-slot b { margin-top:3px; color:#e7f4fd; font-size:10px; font-weight:650; }
.player-dialog:not(.is-mini) .player-guide-channel-time { align-self:flex-start; padding-top:2px; }

/* Compact, legible playback actions instead of oversized TV tiles. */
.player-dialog:not(.is-mini) .player-transport .player-control-button,
.player-dialog:not(.is-mini) .player-control-tools .player-tool-button,
.player-dialog:not(.is-mini) .player-live-button {
  width:clamp(58px,4.4vw,72px); height:clamp(54px,4vw,64px); min-height:54px;
  gap:3px; padding:6px 4px; border-radius:11px;
  border-color:rgba(128,200,232,.2);
  background:linear-gradient(155deg,rgba(19,42,65,.86),rgba(5,19,35,.88));
  font-size:10px; letter-spacing:.01em;
}
.player-dialog:not(.is-mini) .player-control-button svg,
.player-dialog:not(.is-mini) .player-tool-button svg { width:21px; height:21px; }
.player-dialog:not(.is-mini) .player-skip-button small { top:17px; font-size:8px; }
.player-dialog:not(.is-mini) .player-primary-control,
.player-dialog:not(.is-mini) .player-transport .player-primary-control { border-color:#69d5f5; box-shadow:inset 0 0 0 1px rgba(105,213,245,.42); background:linear-gradient(155deg,#155578,#0b2e50); }
.player-dialog:not(.is-mini) .player-live-button { color:#ffc3cc; background:rgba(70,30,45,.55); }
.player-dialog:not(.is-mini) .player-live-button:disabled { opacity:.45; }
.player-dialog:not(.is-mini) .player-control-tools .player-tool-button.is-active { border-color:#69d5f5; color:#e6faff; background:#195b78; }
.player-dialog:not(.is-mini) .player-controls { padding-top:28px; }
.player-dialog:not(.is-mini) .player-timeline input::-webkit-slider-runnable-track { height:6px; }
.player-dialog:not(.is-mini) .player-timeline input::-webkit-slider-thumb { width:16px; height:16px; margin-top:-5px; }
.player-previous-preview { position:absolute; z-index:12; right:140px; bottom:calc(100% + 12px); width:min(300px,80vw); display:grid; gap:8px; padding:16px; border:1px solid rgba(107,208,245,.38); border-radius:14px; color:#e8f7ff; background:linear-gradient(145deg,#103e61,#081b34); box-shadow:0 20px 56px rgba(0,0,0,.55); }
.player-previous-preview.is-hidden { display:none!important; }
.player-previous-kicker { color:#69d6f4; font-size:10px; font-weight:850; letter-spacing:.13em; }
.player-previous-preview strong { font-size:17px; }
.player-previous-preview small { color:#bed5e7; font-size:12px; line-height:1.4; }
.player-previous-preview button { display:flex; align-items:center; justify-content:space-between; min-height:36px; padding:0 10px; border:1px solid #65cfef; border-radius:8px; color:#eafdff; background:#145a7a; font:750 11px/1 inherit; cursor:pointer; }
.player-previous-preview button svg { width:16px; height:16px; }
.player-dialog:not(.is-mini) .player-controls:has(.player-previous-preview:not(.is-hidden)) { z-index:11; }
@media(max-width:1100px) {
  .player-dialog:not(.is-mini) .player-control-tools .player-tool-button { width:42px; height:44px; min-height:44px; }
  .player-dialog:not(.is-mini) .player-control-tools .player-tool-button span { display:none; }
  .player-previous-preview { right:8px; }
}
@media(max-width:700px) {
  .player-dialog:not(.is-mini) .player-transport .player-control-button { width:43px; height:45px; min-height:45px; }
  .player-dialog:not(.is-mini) .player-transport .player-control-button svg { width:18px; height:18px; }
  .player-dialog:not(.is-mini) .player-transport .player-live-button { min-width:52px; height:45px; min-height:45px; font-size:9px; }
}

/* Program art and the six-hour channel preview fill the wide-screen side wings. */
.player-program-artwork { display:none; }
.player-program-station { display:flex; align-items:center; gap:12px; }
.player-program-station img { display:none; }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-panel {
  top:50%; bottom:auto; left:calc((var(--player-video-left) - var(--player-info-width))/2);
  width:var(--player-info-width); max-height:calc(100% - 32px); overflow:auto; padding:0;
  transform:translateY(-50%);
  background:#081c31; border-color:rgba(104,201,238,.26); text-shadow:none;
}
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-artwork {
  display:block; height:clamp(210px,35vh,350px); overflow:hidden;
  background:radial-gradient(circle at 75% 20%,#174c68,#081b30 70%);
}
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-artwork img { width:100%; height:100%; object-fit:contain; }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-artwork img.is-hidden { display:none; }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-content { padding:18px clamp(18px,1.6vw,28px) 25px; }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-station { min-height:40px; margin-bottom:10px; }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-station img:not(.is-hidden) {
  display:block; width:64px; height:40px; object-fit:contain; padding:4px 7px;
  border:1px solid rgba(113,205,241,.2); border-radius:8px; background:rgba(5,16,31,.75);
}
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-panel h2 { font-size:clamp(26px,2vw,39px); }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-meta { margin:9px 0 0; font-size:clamp(12px,.95vw,16px); line-height:1.45; }
.player-dialog.has-wide-wings:not(.is-mini).is-live .player-program-description:not(:empty) {
  margin:16px 0 0; color:#c9dce9; font-size:clamp(12px,.95vw,15px); line-height:1.55; -webkit-line-clamp:9;
}
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-panel {
  top:12px; bottom:12px; left:calc(var(--player-video-left) + var(--player-video-width) + 12px);
  right:12px; width:auto; padding:12px;
}
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-heading { margin-bottom:5px; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-heading b { font-size:16px; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-heading small { display:none; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-window { margin-bottom:5px; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-window button { min-width:28px; min-height:28px; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-panel input { min-height:34px; }
.player-guide-preview { flex:0 0 auto; margin-top:7px; padding:9px; border:1px solid rgba(106,191,228,.22); border-radius:11px; background:linear-gradient(145deg,rgba(19,61,91,.85),rgba(8,32,56,.88)); }
.player-guide-preview.is-hidden { display:none!important; }
.player-guide-preview-heading { display:flex; align-items:center; gap:10px; min-width:0; padding-bottom:8px; }
.player-guide-preview-heading img { width:54px; height:38px; flex:0 0 auto; object-fit:contain; padding:3px; border-radius:6px; background:rgba(0,13,27,.65); }
.player-guide-preview-heading img.is-hidden { display:none; }
.player-guide-preview-heading span { min-width:0; display:grid; gap:3px; }
.player-guide-preview-heading small { color:#6bddfa; font-size:10px; font-weight:850; letter-spacing:.12em; }
.player-guide-preview-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f1fbff; font-size:15px; }
.player-guide-preview-schedule { display:flex; gap:6px; max-width:100%; overflow-x:auto; overflow-y:hidden; padding:2px 0 5px; scrollbar-width:thin; scrollbar-color:#376c8a transparent; }
.player-guide-preview-program { flex:0 0 clamp(230px,22vw,360px); min-height:104px; display:grid; align-content:start; gap:6px; padding:10px 12px; border:1px solid rgba(119,195,228,.16); border-radius:7px; color:#e3f4ff; background:rgba(5,25,47,.42); }
.player-guide-preview-program.is-current { border-left:2px solid #54d6f5; background:rgba(31,99,132,.3); }
.player-guide-preview-program time { color:#8fd6ed; font-size:10px; font-weight:800; white-space:nowrap; }
.player-guide-preview-program time span { margin:0 3px; color:#658aa3; }
.player-guide-preview-program > span { min-width:0; display:grid; gap:2px; }
.player-guide-preview-program strong,.player-guide-preview-program small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-guide-preview-program strong { font-size:12px; }
.player-guide-preview-program small { color:#aacbda; font-size:10px; }
.player-guide-preview-program em { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; color:#b9d5e5; font-size:11px; font-style:normal; line-height:1.35; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-preview-program {
  flex:0 0 clamp(310px,20vw,440px); min-height:122px; padding:12px 14px; gap:7px;
}
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-preview-program strong {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; line-height:1.3;
}
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-preview-program em {
  -webkit-line-clamp:3;
}
.player-guide-preview-empty { margin:5px 0; color:#adc7d8; font-size:11px; }
.player-guide-list { flex:1 1 auto; margin-top:7px; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.player-guide-channel { min-height:50px; align-items:center; gap:10px; padding:5px 9px; }
.player-guide-channel.is-preview { border-color:rgba(101,206,240,.65); }
.player-guide-row-logo { width:49px; height:34px; flex:0 0 auto; object-fit:contain; padding:3px; border-radius:6px; background:rgba(0,13,27,.65); }
.player-guide-channel-copy { gap:2px; }
.player-guide-channel-copy strong { font-size:13px; }
.player-guide-channel-copy small { font-size:11px; }
.player-guide-channel-copy em { overflow:hidden; color:#72c6df; font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.player-guide-channel-programs { display:none; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-channel { min-height:112px; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-channel-copy { flex:0 0 clamp(96px,10vw,145px); align-self:flex-start; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-channel-copy small,
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-channel-copy em { display:none; }
.player-dialog.has-wide-wings:not(.is-mini) .player-guide-channel-programs {
  min-width:0; flex:1; display:flex; align-self:stretch; gap:6px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#3c7599 transparent;
}
.player-guide-channel-program { min-width:0; min-height:98px; flex:1 0 150px; display:flex; flex-direction:column; gap:4px; padding:9px 10px; border:1px solid rgba(115,199,235,.2); border-radius:8px; background:rgba(2,18,35,.55); }
.player-guide-channel-program time { color:#70d9f4; font-size:10px; font-weight:850; white-space:nowrap; }
.player-guide-channel-program time span { color:#9ebfd0; font-weight:650; }
.player-guide-channel-program strong { overflow:hidden; color:#f0faff; font-size:12px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.player-guide-channel-program small { overflow:hidden; color:#bed8e5; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.player-guide-channel-program em { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#a5c2d1; font-size:10px; font-style:normal; line-height:1.25; }
.player-guide-list-nav { display:none; align-items:center; justify-content:space-between; margin-top:7px; color:#90bfd5; font-size:10px; letter-spacing:.1em; }
.player-guide-list-nav span { display:flex; gap:5px; }
.player-guide-list-nav button { width:28px; height:25px; display:grid; place-items:center; border:1px solid #386986; border-radius:6px; color:#e5f9ff; background:#0b3551; cursor:pointer; }
.player-guide-list-nav button:disabled { opacity:.35; cursor:default; }
.player-guide-list-nav svg { width:14px; height:14px; }
.player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-list-nav { display:flex; }
.player-dialog:not(.is-mini) .player-guide-channel-number { min-width:42px; font-size:15px; }
@media (max-height:1100px) and (min-width:701px) {
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-panel { top:8px; right:8px; bottom:8px; width:min(460px,42vw); padding:10px; }
  .player-dialog:not(.has-wide-wings):not(.is-mini):has(.player-guide-panel:not(.is-hidden)) .player-controls { left:8px; right:auto; width:calc(100% - min(460px,42vw) - 24px); bottom:8px; min-height:0; padding:8px; }
  .player-dialog:not(.has-wide-wings):not(.is-mini):has(.player-guide-panel:not(.is-hidden)) .player-control-row { display:flex; justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; }
  .player-dialog:not(.has-wide-wings):not(.is-mini):has(.player-guide-panel:not(.is-hidden)) .player-control-tools { flex-shrink:0; margin-left:0; }
}
@media (max-height:700px) and (min-width:701px) {
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-preview { padding:5px; }
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-preview-heading { display:none; }
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-preview-program { flex-basis:220px; min-height:90px; padding:8px; }
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-heading { margin-bottom:4px; }
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-guide-window { margin-bottom:4px; }
  .player-dialog:not(.has-wide-wings):not(.is-mini) .player-full-guide-button { min-height:32px; margin-top:5px; }
}
@media (max-width:700px) and (max-height:700px) {
  .player-dialog:not(.is-mini) .player-guide-panel { top:8px; right:8px; bottom:8px; left:8px; width:auto; padding:10px; }
}
@media (pointer:coarse) and (min-width:701px) and (max-width:1400px) {
  .player-guide-preview-schedule { touch-action:pan-x; -webkit-overflow-scrolling:touch; }
  .player-dialog:not(.is-mini) .player-guide-preview-heading { display:flex; }
  .player-dialog:not(.is-mini) .player-guide-preview-program {
    flex:0 0 clamp(240px,32vw,340px); min-height:118px; padding:10px 12px; gap:6px;
  }
  .player-dialog:not(.is-mini) .player-guide-preview-program strong {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; line-height:1.3;
  }
  .player-dialog:not(.is-mini) .player-guide-preview-program small { display:block; }
  .player-dialog:not(.is-mini) .player-guide-preview-program em {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
}
@media(max-width:700px) {
  .player-dialog:not(.is-mini) .player-control-row { overflow-x:auto; scrollbar-width:none; }
  .player-dialog:not(.is-mini) .player-control-row::-webkit-scrollbar { display:none; }
}

/* Provider attribution appears only for titles whose stored metadata provider
   is TheTVDB. Keep it overlaid so existing PC hero and card geometry does not move. */
.home-hero-attribution {
  align-self:flex-start;
  margin-top:10px;
  color:#dff8ff;
  font-size:10px;
  font-weight:750;
  text-decoration:none;
}
.home-hero-attribution:hover,
.home-hero-attribution:focus-visible { color:#75d8ff; text-decoration:underline; outline:0; }
.home-hero-attribution[hidden] { display:none; }
.media-metadata-attribution {
  position:absolute;
  z-index:4;
  right:7px;
  bottom:62px;
  padding:3px 6px;
  border:1px solid rgba(117,216,255,.62);
  border-radius:4px;
  color:#dff8ff;
  background:rgba(0,20,54,.82);
  font-size:8px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}
.media-metadata-attribution:hover,
.media-metadata-attribution:focus-visible { color:#001633; background:#75d8ff; outline:0; }
.poster-grid.compact .media-metadata-attribution { top:8px; right:40px; bottom:auto; }

/* Tablet Home Screen chrome stays attached to the iPad status area while the
   hero artwork remains visible behind that system-owned strip. */
@media(pointer:coarse) and (max-width:1400px) {
  :root,html.sidebar-collapsed,html:has(.topbar .music-player.is-mini) { --topbar-height:54px; }
  .topbar,.sidebar-collapsed .topbar { gap:7px; padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }
  .topbar .topbar-actions { align-self:center; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
  .topbar .topbar-actions .icon-button,.topbar .topbar-actions .profile-button { background:rgba(3,18,41,.42); }
  .topbar:has(.music-player.is-mini) { grid-template-rows:minmax(0,1fr); }
  .topbar:has(.music-player.is-mini) .music-player.is-mini { align-self:center; min-width:0; }
  .web-quality-menu { top:calc(62px + env(safe-area-inset-top)); }
}
@media(display-mode:standalone) and (pointer:coarse) and (max-width:1400px) {
  :root,html.sidebar-collapsed,html:has(.topbar .music-player.is-mini) { --topbar-height:calc(54px + env(safe-area-inset-top)); }
  .topbar,.sidebar-collapsed .topbar { padding-top:env(safe-area-inset-top); }
}
@media(pointer:coarse) and (max-width:600px) {
  html:has(.topbar .music-player.is-mini) { --topbar-height:108px; }
  .topbar:has(.music-player.is-mini) { grid-template-rows:54px 54px; }
  .topbar:has(.music-player.is-mini) .music-player.is-mini { grid-column:1 / -1; grid-row:2; justify-self:center; width:min(100%,520px); }
}
@media(display-mode:standalone) and (pointer:coarse) and (max-width:600px) {
  html:has(.topbar .music-player.is-mini) { --topbar-height:calc(108px + env(safe-area-inset-top)); }
}
/* iPad Home Screen: the avatar visually rises alongside the system indicators,
   while the account menu remains tappable below the untappable status strip. */
.music-mini-close { display:none; }
.topbar .music-player.is-mini { position:relative; padding-right:40px; }
/* PC header mini-player must not inherit the full player's sticky header offset. */
html.is-pc-media-browser .topbar .music-player.is-mini { top:auto; }
.topbar .music-player.is-mini .music-mini-close {
  position:absolute;
  top:50%;
  right:7px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--music-accent) 35%,var(--music-line));
  border-radius:9px;
  color:var(--music-copy);
  background:color-mix(in srgb,var(--music-player-bg) 82%,transparent);
  transform:translateY(-50%);
  cursor:pointer;
}
.topbar .music-player.is-mini .music-mini-close svg { width:16px; height:16px; }
.topbar .music-player.is-mini .music-mini-close:where(:hover,:focus-visible) { border-color:var(--music-accent); color:var(--music-accent); outline:0; }
@media(pointer:coarse) and (min-width:701px) and (max-width:1400px) {
  html.ios-standalone { --topbar-height:max(76px,calc(58px + env(safe-area-inset-top))); }
  html.ios-standalone .topbar::before { display:none; }
  html.ios-standalone .topbar .topbar-start { transform:translateY(10px); }
  html.ios-standalone .topbar .topbar-actions {
    position:absolute;
    z-index:2;
    top:max(40px,env(safe-area-inset-top));
    right:max(10px,env(safe-area-inset-right));
    height:34px;
    padding:0;
    border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
    border-radius:14px;
    background:linear-gradient(145deg,color-mix(in srgb,var(--app-popover) 80%,var(--surface-strong)),color-mix(in srgb,var(--app-header) 80%,var(--surface)));
    box-shadow:0 8px 22px rgba(0,12,27,.24);
    backdrop-filter:blur(10px);
  }
  html.ios-standalone .topbar .topbar-actions > :not(#profileButton) { display:none!important; }
  html.ios-standalone .topbar .topbar-actions .profile-button {
    position:relative;
    display:block;
    width:160px;
    max-width:160px;
    height:33px;
    margin:0;
    padding:0;
    border:0;
    border-radius:14px;
    background:transparent;
  }
  html.ios-standalone .topbar .topbar-actions .profile-button .avatar {
    position:absolute;
    top:-36px;
    right:95px;
    width:50px;
    height:50px;
    font-size:14px;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 48%,transparent),0 7px 18px rgba(0,0,0,.42);
  }
  html.ios-standalone .topbar .topbar-actions .profile-copy small { display:none; }
  html.ios-standalone .topbar .topbar-actions .profile-copy { position:absolute; right:28px; bottom:6px; left:8px; display:block; text-align:right; }
  html.ios-standalone .topbar .topbar-actions .profile-copy strong { font-size:14px; }
  html.ios-standalone .topbar .topbar-actions .profile-button > svg { position:absolute; right:8px; bottom:8px; display:block; }
  html.ios-standalone[data-app-theme] .profile-popover {
    top:calc(max(40px,env(safe-area-inset-top)) + 42px);
    right:max(10px,env(safe-area-inset-right));
    width:min(340px,calc(100vw - 20px));
    max-height:calc(100dvh - max(100px,env(safe-area-inset-top)));
    padding:12px;
    border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));
    border-radius:18px;
    color:var(--text);
    background:linear-gradient(150deg,color-mix(in srgb,var(--app-popover) 72%,var(--surface-strong)),var(--app-popover) 56%,color-mix(in srgb,var(--app-popover) 72%,var(--app-header)));
    box-shadow:0 22px 55px rgba(0,10,25,.56);
  }
  html.ios-standalone .profile-popover > .popover-heading { display:none; }
  html.ios-standalone .profile-quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:12px 0; }
  html.ios-standalone .profile-quick-actions button {
    position:relative;
    min-width:0;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    padding:6px 9px;
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line-soft));
    border-radius:12px;
    color:var(--text);
    background:color-mix(in srgb,var(--surface) 72%,transparent);
    cursor:pointer;
    font-size:12px;
    font-weight:700;
  }
  html.ios-standalone .profile-quick-actions button:where(:hover,:focus-visible) { border-color:var(--accent); background:var(--surface-strong); outline:0; }
  html.ios-standalone .profile-action-glyph { position:relative; flex:0 0 29px; width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:var(--text); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--surface)),var(--surface)); }
  html.ios-standalone .profile-action-glyph svg { position:relative; z-index:1; width:18px; height:18px; color:var(--text); }
  html.ios-standalone #profileActivityAction.has-activity .profile-action-glyph { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,var(--surface)),color-mix(in srgb,var(--coral) 30%,var(--surface))); }
  html.ios-standalone #profileActivityAction.has-activity .profile-action-glyph::before,
  html.ios-standalone #profileActivityAction.has-activity .profile-action-glyph::after { content:""; position:absolute; inset:2px; border:1px solid transparent; border-top-color:var(--accent); border-bottom-color:var(--coral); border-radius:50%; animation:activity-ring-spin 3.2s linear infinite; }
  html.ios-standalone #profileActivityAction.has-activity .profile-action-glyph::after { inset:5px; border-top-color:var(--coral); border-bottom-color:var(--accent); animation:activity-ring-spin-reverse 2.4s linear infinite; }
  html.ios-standalone #profileActivityAction .activity-core { position:relative; z-index:1; display:grid; place-items:center; width:18px; height:18px; transform-origin:center; }
  html.ios-standalone #profileActivityAction.has-activity .activity-core { color:var(--text); animation:activity-orbit 1.8s linear infinite; filter:drop-shadow(0 0 3px var(--accent)); }
  @media(prefers-reduced-motion:reduce) {
    html.ios-standalone #profileActivityAction.has-activity .profile-action-glyph::before,
    html.ios-standalone #profileActivityAction.has-activity .profile-action-glyph::after,
    html.ios-standalone #profileActivityAction.has-activity .activity-core { animation:none; }
  }
  html.ios-standalone .profile-quick-actions button small { position:absolute; top:3px; right:5px; min-width:15px; border-radius:10px; color:var(--app-header); background:var(--accent); font-size:9px; }
  html.ios-standalone[data-app-theme] .profile-list button,
  html.ios-standalone[data-app-theme] .app-theme-grid button,
  html.ios-standalone[data-app-theme] .profile-sign-out { border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line-soft)); border-radius:12px; color:var(--text); background:color-mix(in srgb,var(--surface) 72%,transparent); }
  html.ios-standalone[data-app-theme] .profile-list button:where(:hover,:focus-visible),
  html.ios-standalone[data-app-theme] .app-theme-grid button:where(:hover,:focus-visible),
  html.ios-standalone[data-app-theme] .profile-sign-out:where(:hover,:focus-visible) { border-color:var(--accent); background:var(--surface-strong); outline:0; }
  html.ios-standalone .profile-appearance { border-color:color-mix(in srgb,var(--accent) 22%,var(--line-soft)); }
  html.ios-standalone .profile-list { max-height:min(245px,34vh); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html.ios-standalone[data-app-theme] .activity-drawer {
    top:calc(max(40px,env(safe-area-inset-top)) + 42px);
    right:max(10px,env(safe-area-inset-right));
    bottom:auto;
    width:min(340px,calc(100vw - 20px));
    height:auto;
    max-height:calc(100dvh - max(100px,env(safe-area-inset-top)));
    padding:12px;
    border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));
    border-radius:18px;
    color:var(--text);
    background:linear-gradient(150deg,color-mix(in srgb,var(--app-popover) 72%,var(--surface-strong)),var(--app-popover) 56%,color-mix(in srgb,var(--app-popover) 72%,var(--app-header)));
    box-shadow:0 22px 55px rgba(0,10,25,.56);
    transform:translateX(calc(100% + 22px));
  }
  html.ios-standalone[data-app-theme] .activity-drawer.open { transform:translateX(0); }
  html.ios-standalone .activity-drawer .drawer-heading { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; gap:9px; margin:0 0 9px; padding:2px 0 11px; border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line-soft)); }
  html.ios-standalone .activity-drawer .drawer-heading h2 { margin:0; color:var(--text); font-size:16px; line-height:1.1; }
  html.ios-standalone .activity-drawer .drawer-heading .eyebrow { margin:0 0 3px; color:var(--accent); font-size:9px; letter-spacing:.12em; }
  html.ios-standalone .activity-drawer .drawer-heading .icon-button { width:32px; height:32px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line-soft)); border-radius:10px; color:var(--text); background:color-mix(in srgb,var(--surface) 72%,transparent); }
  html.ios-standalone .activity-drawer .drawer-heading .icon-button:where(:hover,:focus-visible) { border-color:var(--accent); background:var(--surface-strong); outline:0; }
  html.ios-standalone .activity-drawer > .activity-list { max-height:min(520px,calc(100dvh - max(180px,env(safe-area-inset-top)))); padding-right:3px; -webkit-overflow-scrolling:touch; }
  html.ios-standalone .activity-drawer .activity-item { margin-bottom:7px; padding:10px; border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line-soft)); border-radius:12px; color:var(--text); background:color-mix(in srgb,var(--surface) 72%,transparent); }
  html.ios-standalone .activity-drawer .activity-item > span { border-radius:9px; color:var(--text); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--surface)),var(--surface)); }
  html.ios-standalone .activity-drawer .activity-item strong { font-size:12px; line-height:1.3; }
  html.ios-standalone .activity-drawer .activity-item small { color:var(--muted); line-height:1.4; }
  html.ios-standalone .activity-drawer .activity-item .activity-stop-button { border-color:color-mix(in srgb,var(--accent) 20%,var(--line-soft)); border-radius:9px; color:var(--text); background:color-mix(in srgb,var(--surface) 72%,transparent); }
  html.ios-standalone .activity-drawer .empty-state { padding:22px 10px; color:var(--text); }
  html.ios-standalone:has(.topbar .music-player.is-mini) { --topbar-height:calc(96px + env(safe-area-inset-top)); }
  html.ios-standalone .topbar:has(.music-player.is-mini) {
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:minmax(0,1fr);
  }
  html.ios-standalone .topbar:has(.music-player.is-mini) .topbar-start { grid-column:1; grid-row:1; }
  html.ios-standalone .topbar:has(.music-player.is-mini) .music-player.is-mini {
    position:absolute;
    top:max(42px,env(safe-area-inset-top));
    right:calc(max(10px,env(safe-area-inset-right)) + 174px);
    grid-column:auto;
    grid-row:auto;
    width:min(360px,calc(100vw - 275px));
    max-width:none;
    min-width:0;
    grid-template-columns:36px minmax(75px,1fr) auto;
    gap:6px;
    padding:4px 38px 4px 6px;
    border:1px solid color-mix(in srgb,var(--music-accent) 28%,transparent);
    border-radius:13px;
    background:color-mix(in srgb,var(--music-player-bg) 78%,transparent);
    backdrop-filter:blur(12px);
  }
  html.ios-standalone .topbar .music-player.is-mini .music-transport-buttons .icon-button:nth-child(1),
  html.ios-standalone .topbar .music-player.is-mini .music-transport-buttons .icon-button:nth-child(n+5) { display:none; }
  html.ios-standalone .sidebar,
  html.ios-standalone.sidebar-collapsed .sidebar,
  html.ios-standalone .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .sidebar,
  html.ios-standalone .app-shell:has(#sportsView.active .sports-hero) > .sidebar { top:var(--topbar-height) !important; }
}

.player-status.sports-backup-failed .spinner { display:none; }
.player-status.has-sports-backup .player-status-reason { max-width:min(540px,85vw); }
.player-sports-backup-offer {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:9px 18px;
  border:1px solid color-mix(in srgb,var(--accent) 70%,white);
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 35%,#082538);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
}
.player-sports-backup-offer svg { width:18px; height:18px; }
.player-sports-backup-offer:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.player-sports-next:disabled,.player-sports-backup-offer:disabled { opacity:.65; cursor:wait; }
@media(pointer:coarse) and (min-width:701px) and (max-width:1400px) {
  .profile-popover .music-player.is-profile-mini {
    position:relative;
    top:auto;
    z-index:auto;
    box-sizing:border-box;
    width:100%;
    min-height:0;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 28px;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
    padding:10px;
    border:1px solid color-mix(in srgb,var(--accent) 24%,var(--music-line));
    border-radius:14px;
    color:var(--music-copy);
    background:linear-gradient(140deg,color-mix(in srgb,var(--music-player-bg) 86%,var(--app-popover)),color-mix(in srgb,var(--music-player-bg) 72%,var(--surface)));
    box-shadow:0 8px 22px rgba(0,0,0,.22);
  }
  .profile-popover .music-player.is-profile-mini .music-now-art { width:44px; height:44px; }
  .profile-popover .music-player.is-profile-mini .music-now-copy { min-width:0; padding:0; }
  .profile-popover .music-player.is-profile-mini .music-now-copy strong { font-size:13px; }
  .profile-popover .music-player.is-profile-mini .music-now-copy span { font-size:11px; }
  .profile-popover .music-player.is-profile-mini .music-transport { grid-column:1 / -1; gap:3px; padding:3px 0 0; }
  .profile-popover .music-player.is-profile-mini .music-transport-buttons { justify-content:center; gap:14px; }
  .profile-popover .music-player.is-profile-mini .music-transport-buttons .icon-button { display:grid; width:34px; height:34px; }
  .profile-popover .music-player.is-profile-mini .music-transport-buttons .icon-button:nth-child(1),
  .profile-popover .music-player.is-profile-mini .music-transport-buttons .icon-button:nth-child(n+5) { display:none; }
  .profile-popover .music-player.is-profile-mini .music-play-button { width:38px; height:38px; }
  .profile-popover .music-player.is-profile-mini .music-timeline { grid-template-columns:30px minmax(0,1fr) 30px; gap:6px; }
  .profile-popover .music-player.is-profile-mini .music-timeline > span { display:block; }
  .profile-popover .music-player.is-profile-mini .music-timeline input { left:36px; right:36px; }
  .profile-popover .music-player.is-profile-mini .music-volume { display:none; }
  .profile-popover .music-player.is-profile-mini .music-mini-close { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--music-line)); border-radius:9px; color:var(--music-copy); background:color-mix(in srgb,var(--music-player-bg) 80%,transparent); }
  .profile-popover .music-player.is-profile-mini .music-mini-close svg { width:16px; height:16px; }
}
.player-diagnostics-button[data-status="excellent"] svg { color:#3beaaf; }
.player-diagnostics-button[data-status="good"] svg { color:#60d9f9; }
.player-diagnostics-button[data-status="fair"] svg { color:#ffbf5c; }
.player-diagnostics-button[data-status="poor"] svg { color:#ff6479; }
.player-diagnostics-button[data-status="checking"] svg { color:#adbdc9; }
.player-dialog:not(.is-mini).osd-hidden .player-diagnostics-button,
.player-dialog:not(.is-mini).osd-hidden .player-diagnostics-panel { visibility:hidden!important; pointer-events:none!important; }
.player-diagnostics-panel { max-height:calc(100dvh - 82px); overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* The mini player is picture-first: tap the picture to expand; only Close floats
   above the video. The invisible upper strip remains a drag handle. */
.player-dialog.is-mini[open] { display:block; grid-template-rows:none; height:auto; min-height:0; aspect-ratio:16/9; }
.player-dialog.is-mini .player-stage { position:absolute; inset:0; z-index:1; display:block; padding:0; cursor:pointer; }
.player-dialog.is-mini .player-stage > video { width:100%; height:100%; object-fit:contain; }
.player-dialog.is-mini .player-topbar { position:absolute; z-index:12; inset:0 0 auto; height:44px; min-height:0; padding:0; border:0; background:transparent; }
.player-dialog.is-mini .player-cinema-title,
.player-dialog.is-mini .player-topbar-actions > :not(#closePlayerButton),
.player-dialog.is-mini .player-controls,
.player-dialog.is-mini .player-status,
.player-dialog.is-mini .player-skip-intro,
.player-dialog.is-mini .player-previous-preview,
.player-dialog.is-mini .player-diagnostics-panel { display:none!important; }
.player-dialog.is-mini .player-topbar-actions { position:absolute; top:5px; right:5px; }
.player-dialog.is-mini #closePlayerButton { display:grid; width:34px; height:34px; color:#fff; background:rgba(2,14,31,.76); border:1px solid rgba(185,231,249,.56); border-radius:50%; }

/* Show more of Recent Channels on iPad without changing PC hero proportions. */
@media(pointer:coarse) and (min-width:701px) and (max-width:1400px) {
  #homeView { --home-hero-height:clamp(570px,65vh,680px); }
}
@media(pointer:coarse) and (max-width:700px) {
  #homeView { --home-hero-height:clamp(540px,62vh,625px); }
}

/* Sports setup must not reflow smaller as each iPad step changes its content.
   Only the choices scroll; the step tabs and actions stay reachable. */
.sports-setup-progress [data-sports-step] {
  flex:1;
  min-width:0;
  min-height:40px;
  padding:8px;
  border:1px solid transparent;
  border-radius:999px;
  text-align:center;
  background:rgba(78,104,131,.15);
  color:var(--muted);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  touch-action:manipulation;
}
.sports-setup-progress [data-sports-step].active {
  border-color:color-mix(in srgb,var(--accent) 48%,transparent);
  background:color-mix(in srgb,var(--accent) 30%,transparent);
  color:var(--text);
}
.sports-setup-progress [data-sports-step].complete { color:var(--text); }
.sports-setup-progress [data-sports-step]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(pointer:coarse) and (min-width:701px) and (max-width:1400px) {
  .sports-setup-dialog[open] {
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    width:min(760px,calc(100vw - 28px));
    height:min(740px,calc(100svh - 70px));
    max-height:calc(100svh - 70px);
    overflow:hidden;
  }
  .sports-setup-dialog[open]:has(.sports-team-search:not(.is-hidden)) {
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
  }
  .sports-setup-dialog .sports-setup-list {
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .sports-setup-dialog .sports-choice { min-height:72px; touch-action:manipulation; }
}

/* Library actions live beside the library name, without changing drag ordering. */
.library-nav-row.has-library-actions { display:grid; grid-template-columns:minmax(0,1fr) 30px; align-items:center; gap:2px; }
.library-nav-row.has-library-actions > button:first-child { min-width:0; }
.library-navigation .library-nav-more { width:28px; height:28px; min-height:28px; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:8px; color:var(--muted-strong); background:transparent; opacity:0; cursor:pointer; }
.library-navigation .library-nav-more svg { width:17px; height:17px; }
.library-nav-row.has-library-actions:hover .library-nav-more,
.library-navigation .library-nav-more:focus-visible,
.library-navigation .library-nav-more[aria-expanded="true"] { opacity:1; }
.library-navigation .library-nav-more:hover,
.library-navigation .library-nav-more:focus-visible,
.library-navigation .library-nav-more[aria-expanded="true"] { outline:0; border-color:var(--line); color:var(--accent); background:var(--surface); }
.library-navigation #manageLibrariesButton { width:32px; height:32px; min-height:32px; grid-template-columns:1fr; justify-items:center; gap:0; padding:0; opacity:1; }
.sidebar-collapsed .sidebar:not(:hover) .library-nav-row.has-library-actions,
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .library-nav-row.has-library-actions { grid-template-columns:minmax(0,1fr); }
.sidebar-collapsed .sidebar:not(:hover) .library-nav-more,
.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover .library-nav-more { display:none; }
.sidebar-collapsed .sidebar:hover .library-navigation .library-nav-more { grid-template-columns:1fr; justify-items:center; padding:0; }
.library-nav-actions-menu[hidden] { display:none; }
.library-nav-actions-menu { position:fixed; z-index:1200; width:232px; display:grid; gap:3px; padding:7px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:var(--app-popover); box-shadow:0 18px 42px var(--app-shadow); }
.library-nav-actions-title { min-width:0; padding:9px 10px 10px; border-bottom:1px solid var(--line-soft); overflow:hidden; color:var(--text); font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.library-nav-actions-title small { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:500; }
.library-nav-actions-menu > button { width:100%; min-height:46px; display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:10px; padding:7px 9px; border:1px solid transparent; border-radius:9px; color:var(--text); background:transparent; cursor:pointer; text-align:left; }
.library-nav-actions-menu > button:hover,.library-nav-actions-menu > button:focus-visible { outline:0; border-color:var(--line); background:var(--surface-strong); }
.library-nav-actions-menu > button > svg { width:17px; height:17px; color:var(--accent); }
.library-nav-actions-menu > button span { min-width:0; }
.library-nav-actions-menu > button strong,.library-nav-actions-menu > button small { display:block; }
.library-nav-actions-menu > button strong { font-size:11px; }
.library-nav-actions-menu > button small { margin-top:2px; color:var(--muted); font-size:9px; }
@media(pointer:coarse) and (max-width:1400px) {
  .library-navigation .library-nav-more { opacity:1; }
  .sidebar-collapsed .sidebar.open .library-nav-row.has-library-actions { grid-template-columns:minmax(0,1fr) 30px; }
  .sidebar-collapsed .sidebar.open .library-nav-more { display:grid; }
}

/* Tablet navigation floats above Media instead of becoming a full-height rail. */
.sidebar-account-row,.sidebar-search-button,.sidebar-profile-menu,.sidebar-libraries-label { display:none; }
@media(pointer:coarse) and (max-width:1400px) {
  .sidebar,.sidebar-collapsed .sidebar,.sidebar-collapsed .sidebar:hover,.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover {
    top:calc(env(safe-area-inset-top) + 56px);
    bottom:calc(env(safe-area-inset-bottom) + 12px);
    left:calc(env(safe-area-inset-left) + 12px);
    width:min(328px,calc(100vw - 34px));
    border:1px solid rgba(148,195,224,.27);
    border-radius:20px;
    background:linear-gradient(160deg,rgba(10,24,42,.98),rgba(6,16,30,.98));
    box-shadow:0 22px 64px rgba(0,7,21,.7),inset 0 1px rgba(255,255,255,.06);
    transform:translateX(calc(-100% - 28px));
    overflow:visible;
  }
  .sidebar.open,.sidebar-collapsed .sidebar.open,.sidebar-collapsed .sidebar.sidebar-hover-suppressed.open:hover { transform:translateX(0); }
  html.ios-standalone .app-shell > .sidebar,
  html.ios-standalone .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .sidebar,
  html.ios-standalone .app-shell:has(#sportsView.active .sports-hero) > .sidebar { top:calc(env(safe-area-inset-top) + 56px) !important; }
  .tablet-sidebar-heading { display:none; }
  .sidebar-account-row { display:block; flex:none; padding:13px 12px 3px; }
  .sidebar-profile-trigger { width:100%; min-height:58px; display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:11px; padding:6px 9px; border:1px solid transparent; border-radius:14px; color:#f0f7fc; background:transparent; text-align:left; cursor:pointer; }
  .sidebar-profile-trigger:hover,.sidebar-profile-trigger:focus-visible,.sidebar-profile-trigger[aria-expanded="true"] { outline:0; border-color:rgba(134,211,243,.32); background:rgba(121,186,218,.12); }
  .sidebar-profile-trigger .avatar { width:40px; height:40px; font-size:14px; }
  .sidebar-profile-trigger strong { min-width:0; overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-profile-trigger > svg { width:18px; color:#a9c9d9; }
  .topbar .profile-button .profile-copy,
  html.ios-standalone .topbar .topbar-actions .profile-button .profile-copy { display:none!important; }
  /* The floating sidebar owns account controls on iPad, including standalone Safari. */
  .topbar .topbar-actions > #profileButton,
  html.ios-standalone .topbar .topbar-actions { display:none!important; }
  .sidebar-search-button { display:grid; flex:none; width:calc(100% - 24px); min-height:42px; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:12px; margin:2px 12px 0; padding:0 12px; border:0; border-radius:12px; color:#dbeaf3; background:transparent; text-align:left; cursor:pointer; }
  .sidebar-search-button svg { width:18px; height:18px; }
  .sidebar-search-button:hover,.sidebar-search-button:focus-visible { outline:0; background:rgba(130,191,219,.14); }
  .sidebar .primary-nav,.sidebar-collapsed .sidebar .primary-nav { flex:none; padding:5px 12px 9px; }
  .sidebar #manageLibrariesButton { display:none!important; }
  .sidebar .home-nav-row,.sidebar-collapsed .sidebar .home-nav-row { grid-template-columns:minmax(0,1fr); }
  .sidebar .nav-item,.sidebar .library-navigation button { min-height:43px; border-radius:11px; color:#e1edf5; font-size:14px; }
  .sidebar .nav-item.active { color:#092339; background:#e4f5fa; box-shadow:0 4px 16px rgba(123,203,233,.13); }
  .sidebar .nav-item.active svg { color:#163a53; }
  .sidebar-section,.sidebar-collapsed .sidebar-section { flex:1; padding:0 12px 16px; overscroll-behavior:contain; }
  .sidebar-libraries-label { display:block; margin:0 9px 7px; padding-top:11px; border-top:1px solid rgba(176,216,238,.2); color:#a9bfd0; font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
  .sidebar-profile-menu { position:absolute; z-index:3; top:10px; left:calc(100% + 10px); display:block; width:min(285px,calc(100vw - 370px)); max-height:calc(100% - 20px); overflow-y:auto; padding:11px; border:1px solid rgba(148,195,224,.31); border-radius:17px; color:#eef8ff; background:rgba(7,20,36,.98); box-shadow:0 18px 45px rgba(0,7,21,.63); }
  .sidebar-profile-menu[hidden],.sidebar-profile-choices[hidden],.sidebar-profile-detail[hidden],.sidebar-profile-section[hidden],.sidebar-profile-menu button[hidden] { display:none!important; }
  .sidebar-flyout-heading { display:block; padding:7px 10px 12px; font-size:13px; }
  .sidebar-profile-choices > button,.sidebar-profile-back,.sidebar-detail-action { width:100%; min-height:44px; display:grid; grid-template-columns:18px minmax(0,1fr) 17px; align-items:center; gap:11px; padding:8px 10px; border:0; border-radius:10px; color:#e7f3fa; background:transparent; text-align:left; cursor:pointer; }
  .sidebar-profile-choices > button svg,.sidebar-profile-back svg,.sidebar-detail-action svg { width:18px; height:18px; }
  .sidebar-profile-choices > button svg:last-child { width:15px; color:#91adbf; }
  .sidebar-profile-choices > button:hover,.sidebar-profile-choices > button:focus-visible,.sidebar-profile-back:hover,.sidebar-profile-back:focus-visible,.sidebar-detail-action:hover,.sidebar-detail-action:focus-visible { outline:0; background:rgba(119,190,221,.15); }
  .sidebar-profile-signout { margin-top:10px; border-top:1px solid rgba(176,216,238,.17)!important; color:#ffc0bd!important; }
  .sidebar-profile-back { display:flex; margin-bottom:7px; color:#bdd5e4; }
  .sidebar-profile-label { display:block; padding:7px 10px 9px; color:#a9bfd0; font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
  .sidebar-profile-users { display:grid; gap:4px; }
  .sidebar-profile-users button { width:100%; min-height:49px; display:grid; grid-template-columns:32px minmax(0,1fr) 16px; align-items:center; gap:9px; padding:5px 8px; border:0; border-radius:10px; color:#ebf5fa; background:transparent; text-align:left; cursor:pointer; }
  .sidebar-profile-users button:hover,.sidebar-profile-users button:focus-visible { outline:0; background:rgba(119,190,221,.15); }
  .sidebar-profile-users .avatar { width:30px; height:30px; font-size:10px; }
  .sidebar-profile-users button > span:nth-child(2) { min-width:0; }
  .sidebar-profile-users strong,.sidebar-profile-users small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-profile-users strong { font-size:12px; }
  .sidebar-profile-users small { margin-top:2px; color:#9fb9ca; font-size:10px; }
  .sidebar-theme-options { display:grid; gap:5px; }
  .sidebar-theme-options button { width:100%; min-height:41px; display:grid; grid-template-columns:25px minmax(0,1fr) 17px; align-items:center; gap:9px; padding:5px 8px; border:1px solid transparent; border-radius:10px; color:#e7f3fa; background:transparent; text-align:left; cursor:pointer; }
  .sidebar-theme-options button:hover,.sidebar-theme-options button:focus-visible,.sidebar-theme-options button.active { outline:0; border-color:rgba(135,213,239,.32); background:rgba(116,190,223,.14); }
  .sidebar-theme-options .app-theme-swatch { width:22px; height:22px; border-radius:6px; }
  .sidebar-theme-options strong { font-size:12px; }
  .sidebar-theme-options button > svg { width:15px; height:15px; color:#80e3ed; opacity:0; }
  .sidebar-theme-options button.active > svg { opacity:1; }
}
@media(pointer:coarse) and (max-width:680px) {
  .sidebar-profile-menu { top:0; left:0; width:100%; max-height:100%; box-sizing:border-box; border-radius:18px; }
}

/* iPad guide: native vertical scrolling, separate time controls and more rows. */
html.is-ipad-browser #liveView .guide-scroll {
  overflow-x:hidden;
  overflow-y:auto;
  touch-action:pan-y;
  overflow-anchor:none;
  -webkit-overflow-scrolling:touch;
}
html.is-ipad-browser #liveView .guide-shell { width:100%; display:flex; flex-direction:column; }
html.is-ipad-browser #liveView .guide-scroll { flex:1 1 auto; height:auto; }
/* Clip each row to the viewport; time arrows move the lanes independently of
   Safari's vertical scroll view, preserving fast flicks and their momentum. */
html.is-ipad-browser #liveView :is(.guide-row,.guide-time-row) {
  width:100%;
  grid-template-columns:var(--guide-channel-width) minmax(0,1fr);
  overflow:hidden;
}
html.is-ipad-browser #liveView :is(.guide-channel-cell,.guide-channel-heading) { position:relative; left:auto; }
html.is-ipad-browser #liveView :is(.guide-program-lane,.guide-time-lane) {
  transform:translateX(calc(-1 * var(--guide-time-offset,0px)));
}
html.is-ipad-browser #liveView .guide-scroll-controls {
  position:static;
  flex:0 0 auto;
  align-self:stretch;
  justify-content:flex-end;
  gap:8px;
  min-height:44px;
  padding:3px 8px;
  border-width:0 0 1px;
  border-radius:0;
  box-shadow:none;
}
html.is-ipad-browser #liveView .guide-scroll-controls .icon-button { width:44px; height:44px; }
html.is-ipad-browser #liveView .guide-loading { top:51px; }
html.is-ipad-browser .content:has(#liveView.active #liveGuidePanel:not(.is-hidden)) {
  height:100dvh;
  margin-left:0;
  padding-top:calc(var(--topbar-height) + 8px);
  padding-right:max(12px,env(safe-area-inset-right));
  padding-left:max(12px,env(safe-area-inset-left));
}
html.is-ipad-browser:not(:has(.topbar .music-player.is-mini)):has(#liveView.active #liveGuidePanel:not(.is-hidden)) .topbar { display:none; }
html.is-ipad-browser:not(:has(.topbar .music-player.is-mini)) .content:has(#liveView.active #liveGuidePanel:not(.is-hidden)) {
  padding-top:max(12px,calc(env(safe-area-inset-top) + 8px));
}
html.is-ipad-browser #liveView > .page-heading { margin-bottom:8px; }
html.is-ipad-browser #liveView .live-heading-copy { width:100%; display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; gap:8px 14px; }
html.is-ipad-browser #liveView .live-heading-copy > div:first-child { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-items:center; }
html.is-ipad-browser #liveView .live-heading-copy .ipad-home-return { grid-row:1 / 3; margin:0; }
html.is-ipad-browser #liveView .live-heading-copy .eyebrow { display:none; }
html.is-ipad-browser #liveView .page-heading h1 { margin:0; font-size:26px; }
html.is-ipad-browser #liveView .collection-count { grid-column:2; margin:3px 0 0; font-size:11px; }
html.is-ipad-browser #liveView .guide-tabs { padding-bottom:0; }
html.is-ipad-browser #liveView .guide-toolbar { margin-bottom:8px; }
html.is-ipad-browser #liveView .guide-day-strip { margin-bottom:8px; }
html.is-ipad-browser #liveView .guide-category-filters { margin-top:0; margin-bottom:8px; }
html.is-ipad-browser #liveView .live-heading-copy > .guide-tools { min-width:0; width:auto; max-width:100%; justify-self:end; margin:0; }
html.is-ipad-browser #liveView .live-heading-copy > .live-dvr-tabs { grid-column:1 / -1; justify-self:start; }
html.is-ipad-browser #liveView .live-heading-copy .guide-epg-search { width:clamp(180px,24vw,300px); min-width:0; height:44px; }
html.is-ipad-browser #liveView .live-heading-copy .guide-theme-picker { min-height:44px; }
html.is-ipad-browser #liveView .guide-tools :is(.guide-epg-search,.guide-theme-picker) { border-color:var(--guide-line); color:var(--guide-muted); background:var(--guide-surface); }
html.is-ipad-browser #liveView .guide-tools svg { color:var(--guide-accent); }
html.is-ipad-browser #liveView .guide-tools :is(input,select) { color:var(--guide-text); }
html.is-ipad-browser #liveView .guide-epg-search input::placeholder { color:var(--guide-muted); opacity:.72; }
html.is-ipad-browser #dvrProgramDialog {
  width:min(600px,calc(100vw - 32px));
  height:fit-content;
  min-height:0;
  max-height:min(80dvh,560px);
  padding:0;
  overflow:hidden;
}
html.is-ipad-browser #dvrProgramDialog[open] { display:flex; flex-direction:column; }
html.is-ipad-browser #dvrProgramDialog .dialog-heading { flex:0 0 auto; min-height:0; padding:12px 14px 12px 18px; }
html.is-ipad-browser #dvrProgramDialog .dialog-heading h2 { font-size:21px; }
html.is-ipad-browser #dvrProgramDialog .dialog-heading > .icon-button { width:44px; height:44px; flex:0 0 44px; }
html.is-ipad-browser #dvrProgramDialog .dvr-program-details { flex:0 1 auto; min-height:0; padding:14px 18px 0; overflow:auto; -webkit-overflow-scrolling:touch; }
html.is-ipad-browser #dvrProgramDialog .dvr-program-overview { min-height:0; margin:12px 0 0; }
html.is-ipad-browser #dvrProgramDialog .dvr-program-actions { flex:0 0 auto; flex-wrap:wrap; padding:16px 18px; }
html.is-ipad-browser #dvrProgramDialog .dvr-program-actions button { min-height:44px; }
@media(max-width:700px) {
  html.is-ipad-browser #liveView .live-heading-copy { grid-template-columns:minmax(0,1fr); }
  html.is-ipad-browser #liveView .live-heading-copy > .guide-tools { grid-column:1; width:100%; justify-self:stretch; }
  html.is-ipad-browser #liveView .live-heading-copy .guide-epg-search { width:auto; flex:1 1 auto; }
}

/* Library tools: audio edits preserve the original and run outside playback. */
#editThemeMusicButton[hidden], #fileDetailsThemeMusicButton[hidden], #themeMusicEditorDialog audio { display: none; }
.theme-music-dialog .theme-music-section { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.theme-music-dialog h3 { margin: 0 0 8px; font-size: 14px; }
.theme-music-enabled { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.theme-music-enabled input { width: 18px; height: 18px; accent-color: var(--accent); }
.theme-music-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.theme-music-fields label { display: grid; gap: 6px; font-size: 12px; color: var(--muted-strong); }
.theme-music-fields .wide { grid-column: 1 / -1; }
.theme-music-fields input, .theme-music-fields select, .theme-music-upload { width: 100%; min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--surface); }
.theme-music-section .dialog-footer { justify-content: flex-start; flex-wrap: wrap; padding: 0; border: 0; background: transparent; }
.theme-music-upload { margin: 0 0 12px; }
@media (max-width: 600px) { .theme-music-fields { grid-template-columns: minmax(0, 1fr); } .theme-music-fields .wide { grid-column: auto; } }
#editAudioTracksButton[hidden], #applyAudioTracksButton[hidden], #cancelAudioEditButton[hidden], #restoreAudioEditButton[hidden], #contextMenu [data-action="scan-changes"][hidden] { display: none; }
.audio-tracks-content { min-height: 180px; overflow-y: auto; padding: 18px; }
.audio-edit-title { margin: 0 0 10px; color: #f6fbff; font-weight: 700; overflow-wrap: anywhere; }
.audio-edit-note, .audio-edit-progress-note { margin: 0 0 18px; color: #a7c5db; font-size: 12px; line-height: 1.6; }
.audio-track-choices { display: grid; gap: 9px; }
.audio-track-choice { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid #15527c; border-radius: 6px; background: #052c57; }
.audio-track-choice input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #63d7ff; }
.audio-track-choice > span:first-of-type { display: grid; gap: 5px; min-width: 0; flex: 1; }
.audio-track-choice strong { font-size: 13px; }
.audio-track-choice small { color: #a7c5db; font-size: 11px; overflow-wrap: anywhere; }
.audio-track-badge { flex: 0 0 auto; padding: 3px 6px; border-radius: 4px; color: #001633; background: #9ceeff; font-size: 9px; font-weight: 700; }
.audio-default-choice { display: grid; gap: 7px; margin-top: 18px; font-size: 12px; color: #a7c5db; }
.audio-default-choice select { min-height: 40px; width: 100%; padding: 8px; border: 1px solid #23658e; border-radius: 5px; color: #f6fbff; background: #052c57; }
.audio-edit-footer { border-top: 1px solid #124a76; background: #001b43; }
.audio-edit-footer > p { margin: 0; padding: 12px 18px 0; color: #a7c5db; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.audio-edit-footer .dialog-footer { border-top: 0; flex-wrap: wrap; }
.audio-edit-progress { display: grid; justify-items: center; gap: 12px; padding: 22px 8px; text-align: center; }
.audio-edit-progress h3 { margin: 0; }
.audio-edit-progress > svg { width: 32px; height: 32px; color: #63d7ff; }
.audio-edit-progress progress { width: min(100%, 400px); accent-color: #63d7ff; }
@media (max-width: 500px) { .audio-track-choice { align-items: flex-start; } .audio-track-badge { max-width: 72px; text-align: center; } }

.audio-default-note { margin-top: 12px; margin-bottom: 0; }

/* Subtitle visibility changes client choices without editing embedded tracks. */
#editSubtitleChoicesButton[hidden] { display: none; }
.subtitle-track-choices { display: grid; gap: 9px; }
.subtitle-choice-warning { padding: 10px 12px; border: 1px solid #735b21; border-radius: 5px; color: #ffe4a4; background: #403214; font-size: 12px; line-height: 1.5; }
#fileDetailsDialog > .dialog-footer { flex-wrap: wrap; }
@media (max-width: 500px) { .subtitle-track-choice { flex-wrap: wrap; } .subtitle-track-choice > span:first-of-type { flex-basis: calc(100% - 42px); } .subtitle-track-choice .audio-track-badge { margin-left: 30px; } }
/* Watch Together: scoped to the new opt-in, capability-gated player UI. */
.wt-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 52px;max-width:none;width:52px;height:52px;padding:6px;cursor:pointer}
.wt-button img{display:block;width:38px;height:38px;object-fit:contain;pointer-events:none}
.player-dialog:not(.is-mini) .player-control-tools .wt-button{width:52px;height:52px;min-height:52px;flex:0 0 52px;padding:6px}
.player-dialog.is-mini .wt-button{display:inline-flex;width:38px;height:38px;min-height:38px;flex-basis:38px;padding:4px}
.player-dialog.is-mini .wt-button img{width:28px;height:28px}
.wt-button:focus-visible,.wt-panel button:focus-visible,.wt-inbox-dialog button:focus-visible{outline:2px solid var(--accent,#54d6ed);outline-offset:3px}
.wt-button[hidden],.wt-room-badge[hidden],.wt-panel[hidden],.wt-inbox-button[hidden],.wt-panel button[hidden]{display:none!important}
.wt-room-badge{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(83,218,240,.35);border-radius:18px;padding:5px 9px;background:rgba(12,34,50,.88);color:#e5faff;font-size:11px}
.wt-inbox-count{right:-2px}.wt-inbox-count[hidden]{display:none!important}
.wt-panel{position:absolute;z-index:70;right:12px;top:78px;width:min(420px,calc(100% - 24px));max-height:calc(100% - 172px);overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid var(--border,rgba(109,194,226,.3));border-radius:16px;background:var(--panel,#102338);color:var(--text,#ecf5ff);box-shadow:0 20px 70px rgba(0,0,0,.5);font-size:14px;line-height:1.5}
.wt-panel header,.wt-inbox-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wt-panel h2,.wt-inbox-dialog h2{font-size:20px;margin:3px 0 10px}.wt-panel h3{font-size:14px;margin:18px 0 8px}.wt-panel small{font-size:10px;letter-spacing:.06em;color:var(--muted,#aabbd0)}
.wt-panel button,.wt-inbox-dialog button{border:1px solid var(--border,rgba(103,168,196,.35));border-radius:9px;background:var(--button-bg,#1b3c53);color:var(--text,#edf7ff);padding:9px 12px;margin:5px 6px 5px 0;cursor:pointer;font:inherit;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.wt-panel button:disabled,.wt-inbox-dialog button:disabled{opacity:.5;cursor:default}.wt-panel .wt-primary,.wt-inbox-dialog .wt-primary{background:var(--accent,#40c9e5);color:var(--accent-text,#061f2d);font-weight:700}
.wt-panel header>button,.wt-inbox-dialog header>button{margin:0;min-width:36px;font-size:23px;padding:2px 8px}.wt-panel p{margin:10px 0}.wt-status{min-height:1.5em;color:var(--muted,#b9c9db);overflow-wrap:anywhere}.wt-status.is-error{color:#ffc6b7}
.wt-consent,.wt-candidate{display:flex;align-items:flex-start;gap:10px;padding:10px 0}.wt-consent input,.wt-candidate input{margin-top:5px;flex:0 0 auto}.wt-candidate{border-bottom:1px solid var(--border,rgba(100,157,193,.25))}.wt-track-field{display:grid;gap:6px;margin:12px 0}.wt-track-field select{width:100%;min-width:0;padding:8px;background:var(--field-bg,#0a1a2b);color:var(--text,#e8f4ff);border:1px solid var(--border,rgba(100,157,193,.35));border-radius:8px}.wt-note{font-size:12px;color:var(--muted,#b9c9db)}
.wt-roster,.wt-candidates{display:grid;gap:7px}.wt-person{display:grid;padding:9px;border:1px solid var(--border,rgba(100,157,193,.25));border-radius:9px}.wt-person small{letter-spacing:normal}.wt-inbox-dialog{width:min(560px,calc(100vw - 28px));max-height:85dvh;overflow:auto;border:1px solid var(--border,rgba(100,157,193,.3));border-radius:18px;padding:20px;background:var(--panel,#102338);color:var(--text,#edf7ff);line-height:1.5}.wt-inbox-dialog::backdrop{background:rgba(0,0,0,.6)}.wt-invitation{padding:12px 0;border-top:1px solid var(--border,rgba(100,157,193,.25));overflow-wrap:anywhere}
@media(max-width:700px){.player-dialog:not(.is-mini) .player-control-tools .wt-button{width:44px;height:44px;min-height:44px;flex-basis:44px;padding:5px}.wt-button img{width:32px;height:32px}.wt-room-badge{max-width:88px;font-size:10px}.wt-panel{top:78px;max-height:calc(100% - 162px);padding:12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.wt-panel,.wt-button{scroll-behavior:auto;transition:none}}

/* Theme editor uses the selected page palette, independently of music-player themes. */
html[data-app-theme] #themeMusicEditorDialog { color:var(--text); border-color:var(--line); background:var(--app-popover,var(--bg-soft)); }
html[data-app-theme] #themeMusicEditorDialog :is(.dialog-heading,.audio-edit-footer,.audio-edit-footer .dialog-footer) { color:var(--text); border-color:var(--line-soft); background:var(--app-header,var(--bg-soft)); }
html[data-app-theme] #themeMusicEditorDialog :is(.dialog-loading,.audio-edit-title,h3) { color:var(--text); }
html[data-app-theme] #themeMusicEditorDialog :is(.audio-edit-note,.audio-edit-footer > p,.theme-music-fields label) { color:var(--muted-strong); }
html[data-app-theme] #themeMusicEditorDialog :is(.eyebrow,.dialog-heading .icon-button) { color:var(--accent); }
html[data-app-theme] #themeMusicEditorDialog .theme-music-section { border-color:var(--line-soft); }
html[data-app-theme] #themeMusicEditorDialog .theme-music-enabled input { accent-color:var(--accent); }
html[data-app-theme] #themeMusicEditorDialog :is(.theme-music-fields input,.theme-music-fields select,.theme-music-upload) { border-color:var(--line); color:var(--text); background:var(--surface); }
html[data-app-theme] #themeMusicEditorDialog :is(.theme-music-fields input,.theme-music-fields select,.theme-music-upload):focus-visible { border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px; }
html[data-app-theme] #themeMusicEditorDialog .theme-music-section .dialog-footer { background:transparent; }

#themeMusicEditorDialog .theme-music-section:first-of-type { margin-top:0; padding-top:0; border-top:0; }
#themeMusicEditorDialog .theme-music-saved-file { padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
#themeMusicEditorDialog .theme-music-saved-file .audio-edit-note { margin:7px 0 0; }
#themeMusicEditorDialog .theme-music-file-path { display:block; margin-top:6px; overflow-wrap:anywhere; white-space:normal; color:var(--muted-strong); font-size:11px; line-height:1.5; }
#themeMusicEditorDialog :is(.theme-music-file-path,#previewThemeMusicButton)[hidden] { display:none; }

/* TideView movie collections: original covers, scoped library navigation. */
.movie-collections-view,.movie-collection-detail-view { color:var(--text); background:var(--bg); }
.movie-collections-view { padding:30px 40px 54px; background:radial-gradient(ellipse at 88% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 55%),var(--bg); }
.movie-collections-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.movie-collections-heading h1 { margin:7px 0 9px; font-size:clamp(28px,3vw,42px); line-height:1.12; }
.movie-collections-heading p:last-child { margin:0; color:var(--muted-strong); font-size:13px; }
.movie-collections-heading-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.movie-collections-heading-actions > button { display:inline-flex; align-items:center; gap:7px; }
.movie-collections-heading-actions > button[hidden],.movie-collection-edit-button[hidden] { display:none; }
.movie-collection-edit-button { display:inline-flex; align-items:center; gap:7px; margin-top:20px; }
.movie-collections-empty-editable { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.movie-collections-empty-editable > p { margin:0 0 12px; color:var(--muted-strong); font-size:12px; }
.movie-collections-empty-editable > div { display:flex; flex-wrap:wrap; gap:10px; }
.movie-collections-empty-editable button { font-size:12px; }
.movie-collections-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:25px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:color-mix(in srgb,var(--surface) 72%,transparent); font:inherit; font-size:12px; cursor:pointer; }
.movie-collections-back svg { width:17px; height:17px; }
.movie-collections-back:hover { background:var(--surface-strong); border-color:var(--accent); }
.movie-collections-back:focus-visible,.movie-collection-button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.movie-collections-count { flex:none; margin-bottom:2px; padding:9px 13px; border:1px solid var(--line); border-radius:20px; color:var(--muted-strong); background:var(--surface); font-size:12px; }
.movie-collections-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:30px 24px; align-items:start; }
.movie-collection-card { min-width:0; }
.movie-collection-button { display:block; width:100%; padding:0; border:0; border-radius:12px; text-align:left; color:var(--text); background:transparent; cursor:pointer; font:inherit; }
.movie-collection-cover { position:relative; width:100%; aspect-ratio:2 / 3; border-radius:10px; box-shadow:0 18px 32px color-mix(in srgb,var(--bg) 70%,transparent); transition:transform 180ms ease,box-shadow 180ms ease; }
.movie-collection-button:hover .movie-collection-cover { transform:translateY(-5px); box-shadow:0 23px 34px color-mix(in srgb,var(--bg) 85%,transparent),0 0 0 2px color-mix(in srgb,var(--accent) 65%,transparent); }
.movie-collection-card-copy { display:block; padding:13px 2px 0; min-height:73px; }
.movie-collection-card-copy strong { display:-webkit-box; min-height:2.8em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; color:var(--text); font-size:14px; line-height:1.4; font-weight:750; text-overflow:ellipsis; }
.movie-collection-card-copy small { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:5px; color:var(--muted); font-size:11px; }
.movie-collection-card-copy svg { width:15px; height:15px; color:var(--accent); }
.movie-collection-art-fallback { display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:20px; border:1px solid var(--line); border-radius:10px; color:var(--accent); background:linear-gradient(145deg,var(--surface-strong),var(--bg-soft)); }
.movie-collection-art-fallback svg { width:70px; height:70px; }
.movie-collection-art-fallback span { font-size:11px; font-weight:800; letter-spacing:.12em; }
.movie-collections-state { max-width:620px; margin:35px auto; padding:35px 25px; border:1px solid var(--line); border-radius:16px; text-align:center; color:var(--text); background:var(--surface); }
.movie-collections-state > svg { width:36px; height:36px; color:var(--accent); }
.movie-collections-state h2 { margin:15px 0 10px; font-size:20px; }
.movie-collections-state p { margin:0 0 20px; color:var(--muted-strong); font-size:14px; line-height:1.6; }
.movie-collections-enriching { margin:0 0 22px; color:var(--muted-strong); font-size:13px; }
.movie-collections-more { display:flex; justify-content:center; margin-top:30px; }
.movie-collection-skeleton { aspect-ratio:2 / 3; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.movie-collection-skeleton span { display:block; width:100%; height:100%; background:linear-gradient(110deg,transparent 25%,color-mix(in srgb,var(--accent) 12%,transparent) 45%,transparent 65%); background-size:240% 100%; animation:collection-skeleton 1.5s linear infinite; }
.movie-collection-hero { position:relative; padding:30px 40px 35px; overflow:hidden; background:radial-gradient(ellipse at 90% 40%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 58%),linear-gradient(145deg,var(--bg-soft),var(--bg)); border-bottom:1px solid var(--line-soft); }
.movie-collection-hero-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,48%); gap:35px; align-items:center; max-width:1600px; margin:0 auto; }
.movie-collection-hero-copy h1 { margin:9px 0 16px; font-size:clamp(30px,4vw,64px); line-height:1.1; letter-spacing:-.025em; overflow-wrap:anywhere; }
.movie-collection-meta { margin:0 0 20px; color:var(--muted-strong); font-size:13px; line-height:1.7; }
.movie-collection-overview { max-width:700px; margin:0; color:var(--muted-strong); font-size:15px; line-height:1.7; }
.movie-collection-hero-art { width:100%; aspect-ratio:16 / 9; min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:18px; box-shadow:0 25px 50px color-mix(in srgb,var(--bg) 75%,transparent); }
.movie-collection-members-section { padding:30px 40px 48px; }
.movie-collection-members-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr)); gap:22px; width:100%; max-width:1800px; margin:0 auto; }
.movie-collection-member { display:grid; grid-template-columns:138px minmax(0,1fr); gap:20px; min-width:0; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.movie-collection-member-poster { min-width:0; }
.movie-collection-member-poster .media-card { width:100%; min-width:0; }
.movie-collection-member-poster .poster-frame { aspect-ratio:2 / 3; }
.movie-collection-member-poster .card-copy,.movie-collection-member-poster .list-card-copy,.movie-collection-member-poster .list-chevron { display:none; }
.movie-collection-member-poster .card-menu-button { display:none; }
.movie-collection-member-copy { min-width:0; }
.movie-collection-member-credit { grid-column:1 / -1; justify-self:end; align-self:end; color:var(--muted-strong); font-size:10px; line-height:1.4; text-decoration:none; }
.movie-collection-member-credit:hover { color:var(--accent); text-decoration:underline; }
.movie-collection-member-credit:focus-visible { color:var(--accent); outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.library-nav-row.youtube-nav-row { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.library-nav-row.youtube-nav-row:has(> .youtube-nav[hidden]) { display:none; }
.movie-collection-member-copy h3 { margin:0 0 10px; font-size:20px; line-height:1.25; }
.movie-collection-member-copy .movie-collection-member-title { display:inline; width:auto; padding:0; border:0; border-radius:3px; color:var(--text); background:transparent; font:inherit; text-align:left; overflow-wrap:anywhere; }
.movie-collection-member-title:hover { color:var(--accent); }
.movie-collection-member-title:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.movie-collection-member-meta { display:flex; flex-wrap:wrap; gap:6px 10px; margin-bottom:8px; color:var(--muted-strong); font-size:12px; line-height:1.5; }
.movie-collection-member-meta span:not(:first-child)::before { content:'·'; display:inline-block; margin-right:10px; color:var(--muted); }
.movie-collection-member-genres { margin:0 0 10px; color:var(--muted); font-size:12px; line-height:1.5; }
.movie-collection-member-overview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; margin:0 0 15px; color:var(--muted-strong); font-size:13px; line-height:1.65; }
.movie-collection-member-actions { display:flex; flex-wrap:wrap; gap:8px; }
.movie-collection-member-actions button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:37px; padding:8px 10px; font-size:11px; white-space:normal; text-align:left; }
.movie-collection-member-actions svg { flex:none; width:15px; height:15px; }
.movie-collection-member-actions button[aria-pressed=true] { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.movie-collection-member .community-rating { gap:7px; margin:14px 0 0; color:var(--text); font-size:11px; }
.movie-collection-member .community-brand { width:22px; height:22px; }
.movie-collection-member .community-totals { gap:6px; }
.movie-collection-member .community-totals > span,.movie-collection-member .community-status { color:var(--muted-strong); font-size:11px; }
.movie-collection-member .community-totals img { width:20px; height:20px; }
.movie-collection-member .community-open { padding:5px 0; color:var(--accent); font-size:11px; }
@keyframes collection-skeleton { to { background-position:-240% 0; } }
@media (min-width:1600px) { .movie-collections-grid { grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:34px 28px; } }
@media (max-width:1000px) { .movie-collections-view,.movie-collection-hero,.movie-collection-members-section { padding-right:24px; padding-left:24px; } .movie-collection-hero-layout { grid-template-columns:minmax(0,1fr) minmax(260px,45%); gap:24px; } }
@media (max-width:700px) { .movie-collections-view { padding:20px 18px 35px; } .movie-collections-heading { align-items:flex-start; gap:12px; flex-direction:column; margin-bottom:22px; } .movie-collections-back { margin-bottom:20px; } .movie-collections-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } .movie-collection-card-copy strong { font-size:13px; } .movie-collection-hero { padding:20px 18px 28px; } .movie-collection-hero-layout { grid-template-columns:minmax(0,1fr); gap:22px; } .movie-collection-hero-art { grid-row:1; } .movie-collection-hero-copy h1 { font-size:32px; } .movie-collection-overview { font-size:14px; } .movie-collection-members-section { padding:25px 18px 35px; } .movie-collection-members-section .shelf-heading { gap:10px; } .movie-collection-members-section .shelf-heading h2 { font-size:17px; } }
@media (max-width:540px) { .movie-collection-member { grid-template-columns:105px minmax(0,1fr); gap:14px; padding:14px; } .movie-collection-member-copy h3 { font-size:17px; } .movie-collection-member-meta { font-size:11px; gap:4px 6px; } .movie-collection-member-meta span:not(:first-child)::before { margin-right:6px; } .movie-collection-member-overview { font-size:12px; } .movie-collection-member-actions { gap:6px; } .movie-collection-member-actions button { min-height:35px; padding:7px 8px; } .movie-collection-member .community-totals { gap:4px; } }
@media (max-width:370px) { .movie-collection-member { grid-template-columns:82px minmax(0,1fr); gap:11px; padding:11px; } .movie-collection-member-copy h3 { font-size:15px; } .movie-collection-member-actions svg { display:none; } }
@media (prefers-reduced-motion:reduce) { .movie-collection-skeleton span { animation:none; } .movie-collection-cover { transition:none; } .movie-collection-button:hover .movie-collection-cover { transform:none; } }

/* Movie collection editor shares the selected Media theme. */
.movie-collection-editor-dialog { width:min(900px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border-color:var(--line); color:var(--text); background:var(--surface); }
.movie-collection-editor-dialog > .dialog-heading { position:sticky; z-index:3; top:0; padding:22px 24px 18px; border-bottom:1px solid var(--line); background:var(--surface); }
.movie-collection-editor-dialog .dialog-heading small { color:var(--muted-strong); font-size:13px; line-height:1.5; }
.movie-collection-editor-body { padding:22px 24px 24px; }
.movie-collection-editor-dialog label > span { display:block; margin-bottom:8px; color:var(--muted-strong); font-size:12px; font-weight:650; }
.movie-collection-editor-dialog input:not([type=checkbox]),.movie-collection-editor-dialog select { box-sizing:border-box; width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--bg-soft); font:inherit; font-size:13px; }
.movie-collection-editor-dialog input:focus-visible,.movie-collection-editor-dialog select:focus-visible,.movie-collection-editor-dialog button:focus-visible,.movie-collection-editor-dialog summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.movie-collection-editor-name { display:block; }
.movie-collection-editor-tabs { display:flex; flex-wrap:wrap; gap:22px; margin:24px 0 18px; border-bottom:1px solid var(--line); }
.movie-collection-editor-tabs button { display:inline-flex; align-items:center; gap:7px; min-height:43px; padding:0 0 12px; border:0; border-bottom:2px solid transparent; color:var(--muted-strong); background:transparent; font:inherit; font-size:13px; cursor:pointer; }
.movie-collection-editor-tabs button[aria-pressed=true] { border-bottom-color:var(--accent); color:var(--text); font-weight:700; }
.movie-collection-editor-tabs button > span { padding:3px 7px; border-radius:99px; color:var(--muted-strong); background:var(--bg-soft); font-size:11px; }
.movie-collection-editor-tabs svg { width:15px; height:15px; }
.movie-collection-editor-selection { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 15px; }
.movie-collection-editor-selection > span { color:var(--muted-strong); font-size:12px; line-height:1.5; }
.movie-collection-editor-selection > div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.movie-collection-editor-selection button,.movie-collection-editor-move button,.movie-collection-editor-more { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.movie-collection-editor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(114px,1fr)); align-items:start; gap:18px 15px; }
.movie-collection-editor-movie { position:relative; display:block; min-width:0; cursor:pointer; }
.movie-collection-editor-movie > input { position:absolute; z-index:2; top:8px; left:8px; width:20px; height:20px; margin:0; accent-color:var(--accent); cursor:pointer; }
.movie-collection-editor-movie .poster-frame { display:block; position:relative; box-sizing:border-box; width:100%; height:auto; aspect-ratio:2 / 3; border:2px solid transparent; border-radius:8px; }
.movie-collection-editor-movie .poster-frame img { width:100%; height:100%; object-fit:cover; }
.movie-collection-editor-dialog [hidden] { display:none; }
.movie-collection-editor-movie:has(input:checked) .poster-frame { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
.movie-collection-editor-movie > strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; margin-top:9px; color:var(--text); font-size:12px; line-height:1.4; }
.movie-collection-editor-movie > small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.movie-collection-editor-movie.is-member > small { color:var(--accent); }
.movie-collection-editor-movie:has(input:disabled) { cursor:default; opacity:.75; }
.movie-collection-editor-empty { padding:32px 14px; border:1px dashed var(--line); border-radius:10px; color:var(--muted-strong); text-align:center; font-size:13px; line-height:1.6; }
.movie-collection-editor-move { margin-top:24px; border-top:1px solid var(--line); }
.movie-collection-editor-move summary { display:flex; align-items:center; gap:8px; padding:17px 0; color:var(--muted-strong); font-size:13px; cursor:pointer; }
.movie-collection-editor-move summary::after { content:'⌄'; margin-left:auto; }
.movie-collection-editor-move[open] summary::after { content:'⌃'; }
.movie-collection-editor-move summary svg { width:17px; height:17px; }
.movie-collection-editor-move-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:12px; }
.movie-collection-editor-move-fields > button { min-height:42px; }
.movie-collection-editor-move > p { margin:12px 0 0; color:var(--muted-strong); font-size:12px; line-height:1.5; }
.movie-collection-editor-search { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,32%); align-items:end; gap:15px; margin-bottom:18px; }
.movie-collection-editor-more { margin-top:22px; }
.movie-collection-editor-footer { position:sticky; z-index:3; bottom:0; padding:15px 24px 20px; border-top:1px solid var(--line); background:var(--surface); }
.movie-collection-editor-footer > p { margin:0 0 12px; color:var(--muted-strong); font-size:12px; line-height:1.5; }
.movie-collection-editor-footer > p:empty { display:none; }
.movie-collection-editor-footer > p.is-error { color:var(--danger,#d75d65); }
.movie-collection-editor-dialog button:disabled { opacity:.55; cursor:default; }
@media (max-width:600px) { .movie-collection-editor-dialog > .dialog-heading { padding:18px; } .movie-collection-editor-body { padding:18px; } .movie-collection-editor-dialog .dialog-heading h2 { font-size:23px; } .movie-collection-editor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 11px; } .movie-collection-editor-selection { align-items:flex-start; flex-direction:column; } .movie-collection-editor-selection > div { width:100%; justify-content:space-between; } .movie-collection-editor-search,.movie-collection-editor-move-fields { grid-template-columns:minmax(0,1fr); } .movie-collection-editor-footer { padding:14px 18px 18px; } }
@media (max-width:370px) { .movie-collection-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* PC branding belongs to the navigation rail; touch/tablet chrome is unchanged. */
.sidebar-brand { display:none; }
@media (min-width:761px) and (hover:hover) and (pointer:fine) {
  html.is-pc-media-browser .app-shell > .sidebar { top:0; }
  html.is-pc-media-browser .sidebar > .sidebar-brand {
    display:flex; flex:0 0 60px; min-height:60px;
    align-items:center; justify-content:flex-start; gap:9px; padding:0 18px;
  }
  html.is-pc-media-browser .sidebar > .primary-nav { padding-top:0; }
  html.is-pc-media-browser .sidebar-brand strong { display:inline-flex; align-items:baseline; font-weight:800; letter-spacing:-.5px; }
  html.is-pc-media-browser .sidebar-brand .brand-tide { color:#f5f8ff; text-shadow:0 0 6px rgba(70,125,255,.55); }
  html.is-pc-media-browser .sidebar-brand .brand-view { color:#ffd32b; font-size:1.28em; line-height:1.1; filter:drop-shadow(0 0 4px rgba(255,178,0,.35)); }
  @supports ((background-clip:text) or (-webkit-background-clip:text)) {
    html.is-pc-media-browser .sidebar-brand .brand-view {
      background:linear-gradient(180deg,#fff7a0 0%,#ffe737 36%,#ffba00 72%,#fff06a 100%);
      background-clip:text; -webkit-background-clip:text; color:transparent;
    }
  }
  html.is-pc-media-browser .sidebar > .sidebar-brand span { white-space:nowrap; }
  html.is-pc-media-browser.sidebar-collapsed .sidebar:not(:hover) > .sidebar-brand,
  html.is-pc-media-browser.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover > .sidebar-brand { justify-content:center; padding:0; }
  html.is-pc-media-browser.sidebar-collapsed .sidebar:not(:hover) > .sidebar-brand span,
  html.is-pc-media-browser.sidebar-collapsed .sidebar.sidebar-hover-suppressed:hover > .sidebar-brand span { display:none; }
  html.is-pc-media-browser .app-shell > .topbar .topbar-start { display:none; }
  html.is-pc-media-browser .app-shell > .topbar,
  html.is-pc-media-browser .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar,
  html.is-pc-media-browser .app-shell:has(#sportsView.active .sports-hero) > .topbar {
    left:var(--sidebar-width); grid-template-columns:minmax(180px,590px) auto;
    transition:left 170ms ease;
  }
  html.is-pc-media-browser .app-shell > .topbar .search-box { grid-column:1; grid-row:1; }
  html.is-pc-media-browser .app-shell > .topbar .topbar-actions { grid-column:2; grid-row:1; }
  html.is-pc-media-browser.sidebar-collapsed .app-shell:has(> .sidebar:hover:not(.sidebar-hover-suppressed)) > .topbar,
  html.is-pc-media-browser.sidebar-collapsed .app-shell:has(#homeView.active .home-hero:not(.is-hidden)):has(> .sidebar:hover:not(.sidebar-hover-suppressed)) > .topbar,
  html.is-pc-media-browser.sidebar-collapsed .app-shell:has(#sportsView.active .sports-hero):has(> .sidebar:hover:not(.sidebar-hover-suppressed)) > .topbar { left:var(--sidebar-expanded-width); }
  html.is-pc-media-browser .app-shell > .topbar:has(.music-player.is-mini),
  html.is-pc-media-browser .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar:has(.music-player.is-mini),
  html.is-pc-media-browser .app-shell:has(#sportsView.active .sports-hero) > .topbar:has(.music-player.is-mini) {
    grid-template-columns:minmax(160px,min(32vw,590px)) minmax(0,1fr) auto;
  }
  html.is-pc-media-browser .app-shell > .topbar:has(.music-player.is-mini) .music-player.is-mini { grid-column:2; grid-row:1; min-width:0; }
  html.is-pc-media-browser .app-shell > .topbar:has(.music-player.is-mini) .topbar-actions { grid-column:3; }
}
@media (min-width:761px) and (max-width:1100px) and (hover:hover) and (pointer:fine) {
  html.is-pc-media-browser .app-shell:has(#sportsView.active .sports-hero) > .topbar { left:var(--sidebar-width) !important; }
  html.is-pc-media-browser.sidebar-collapsed .app-shell:has(#sportsView.active .sports-hero):has(> .sidebar:hover:not(.sidebar-hover-suppressed)) > .topbar { left:var(--sidebar-expanded-width) !important; }
}
@media (min-width:761px) and (max-width:1200px) and (hover:hover) and (pointer:fine) {
  html.is-pc-media-browser .app-shell > .topbar:has(.music-player.is-mini),
  html.is-pc-media-browser .app-shell:has(#homeView.active .home-hero:not(.is-hidden)) > .topbar:has(.music-player.is-mini),
  html.is-pc-media-browser .app-shell:has(#sportsView.active .sports-hero) > .topbar:has(.music-player.is-mini) { grid-template-columns:minmax(180px,1fr) auto; }
  html.is-pc-media-browser .app-shell > .topbar:has(.music-player.is-mini) .topbar-actions { grid-column:2; }
  html.is-pc-media-browser .app-shell > .topbar:has(.music-player.is-mini) .music-player.is-mini { grid-column:1 / -1; grid-row:2; }
}


/* Theme editor: saved file and the selected episode are separate sources. */
#themeMusicEditorDialog .theme-music-detection { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
#themeMusicEditorDialog .theme-music-detection p { margin:0; font-size:12px; line-height:1.6; color:var(--muted-strong); }
#themeMusicEditorDialog .theme-music-detection button { flex-shrink:0; }
#themeMusicEditorDialog .theme-music-timeline { margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
#themeMusicEditorDialog .theme-music-timeline-heading, #themeMusicEditorDialog .theme-music-timeline-labels { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
#themeMusicEditorDialog .theme-music-timeline-heading output { font-variant-numeric:tabular-nums; color:var(--accent); }
#themeMusicEditorDialog #themeMusicPlayhead { display:block; width:100%; margin:14px 0 5px; accent-color:var(--accent); cursor:pointer; }
#themeMusicEditorDialog .theme-music-timeline-labels { margin-bottom:12px; color:var(--muted-strong); }
#themeMusicEditorDialog .theme-music-timeline .audio-edit-note { margin-bottom:0; }
#themeMusicEditorDialog .theme-music-automatic-note { margin:16px 0 0; }
#themeMusicEditorDialog .theme-music-upload-section summary { cursor:pointer; color:var(--text); font-size:14px; font-weight:700; }
#themeMusicEditorDialog .theme-music-upload-section[open] summary { margin-bottom:12px; }
#themeMusicEditorDialog #themeMusicClipSummary { min-height:1.5em; }
#themeMusicEditorDialog button:disabled { opacity:.45; cursor:default; }
@media (max-width:600px) { #themeMusicEditorDialog .theme-music-detection { flex-direction:column; } }

#themeMusicEditorDialog #previewThemeMusicClipButton[hidden] { display:none; }

/* Home layout controls follow the selected viewer theme. */
html[data-app-theme] .home-layout-lock { border-color:var(--line); color:var(--text); background:var(--app-popover,var(--surface)); box-shadow:0 18px 42px var(--app-shadow); }
html[data-app-theme] .home-layout-lock:where(:hover,:focus-visible) { border-color:var(--accent); color:var(--accent); }
html[data-app-theme] .home-layout-lock.unlocked { border-color:var(--accent); color:var(--bg); background:var(--accent); }