:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: rgba(255, 255, 255, .9);
  --panel-strong: #ffffff;
  --text: #17191d;
  --muted: #626975;
  --line: rgba(17, 24, 39, .11);
  --accent: #e87d25;
  --accent-strong: #b9570b;
  --accent-rgb: 232,125,37;
  --art-rgb: var(--accent-rgb);
  --green: rgb(var(--art-rgb));
  --shadow: 0 22px 55px rgba(28, 39, 55, .11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; overflow-y: scroll; scrollbar-gutter: stable; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -12%, rgba(var(--art-rgb), .15), transparent 38rem),
    radial-gradient(circle at 100% 15%, rgba(var(--art-rgb), .08), transparent 34rem),
    var(--bg);
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 8px 16px rgba(var(--art-rgb), .2)); }
.brand span { display: grid; gap: 1px; }
.brand strong { font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
.brand small, .card-copy small { color: var(--muted); }
.quiet, .refresh {
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; color: var(--muted); background: rgba(255,255,255,.035);
}
.quiet:hover, .refresh:hover { color: var(--text); border-color: rgba(166,196,232,.35); }
.account-actions { display: flex; align-items: center; gap: 8px; }
html.nav-pending .account-actions { visibility: hidden; }
.account-actions a { display: inline-flex; align-items: center; text-decoration: none; }

.hero { max-width: 770px; padding: clamp(70px, 11vw, 126px) 0 clamp(54px, 8vw, 90px); }
.eyebrow { margin: 0 0 12px; color: color-mix(in srgb, rgb(var(--art-rgb)) 72%, var(--muted)); font-weight: 750; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(var(--art-rgb),.11); }
.hero h1, .login-card h1 { margin: 0; font-size: clamp(2.65rem, 7vw, 5.5rem); line-height: .98; letter-spacing: -.055em; }
.hero > p:not(.eyebrow) { max-width: 650px; margin: 26px 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.install { display: inline-flex; align-items: center; border: 0; border-radius: 14px; padding: 13px 18px; color: #271506; background: var(--green); font-weight: 800; text-decoration: none; }
.install.secondary { color: var(--text); background: rgba(255,255,255,.08); }

.services { padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -.035em; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card {
  position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px;
  min-height: 88px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; color: inherit; background: rgba(255,255,255,.025); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: rgba(255,255,255,.05); }
.service-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #07111f; background: var(--accent); font-weight: 900; box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 20%, transparent); }
.card-copy { display: grid; gap: 4px; min-width: 0; }
.card-copy strong { font-size: 1.02rem; }
.state { position: relative; padding-left: 14px; color: var(--muted); font-size: .76rem; }
.state::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #74849a; transform: translateY(-50%); }
.card.available .state { color: var(--green); }
.card.available .state::before { background: var(--green); }
.card.unavailable .state { color: #f5a3a8; }
.card.unavailable .state::before { background: #f06b76; }
.sonarr { --accent: #63b9e9; } .radarr { --accent: #ffc857; } .lidarr { --accent: #b58af1; }
.prowlarr { --accent: #55d0ae; } .qbittorrent { --accent: #78a6ff; } .spotify { --accent: #48df81; }
.kijken { --accent: #a8d7ff; }
.automation { margin-top: 18px; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.home-personal { display: grid; width: 100%; min-width: 0; gap: 14px; margin-bottom: 18px; }
.home-recent-panel, .home-quick-player { width: 100%; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); }
.home-recent-panel h2 { margin: 0; font-size: clamp(1.35rem,3vw,1.85rem); }
.home-recent-list { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 9px; }
.home-recent-list { scrollbar-width: none; }
.home-recent-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.home-recent-card { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 9px; border: 1px solid rgba(166,196,232,.11); border-radius: 14px; color: inherit; background: rgba(255,255,255,.025); text-decoration: none; }
.home-recent-card:hover { border-color: rgba(var(--art-rgb),.4); background: rgba(255,255,255,.05); }
.home-recent-cover { position: relative; display: grid; flex: 0 0 52px; width: 52px; aspect-ratio: 2/3; place-items: center; overflow: hidden; border-radius: 8px; color: color-mix(in srgb,rgb(var(--art-rgb)) 72%,white); background: linear-gradient(145deg,#1d3553,#102035); font-weight: 900; }
.home-recent-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-recent-copy { display: grid; min-width: 0; gap: 4px; }
.home-recent-copy strong, .home-recent-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-recent-copy small { color: var(--muted); font-size: .72rem; }
.home-watch-bar { display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(166,196,232,.15); }
.home-watch-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.home-quick-player { position: relative; display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(260px,1.2fr); align-items: center; gap: 18px; }
.home-quick-player { scrollbar-width: none; }
.home-quick-player::-webkit-scrollbar { display: none; width: 0; height: 0; }
.quick-now-playing { display: flex; min-width: 0; align-items: center; gap: 11px; }
.quick-now-playing > .quick-copy { display: grid; min-width: 0; gap: 4px; }
.quick-now-playing strong, .quick-now-playing small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-now-playing small { color: var(--muted); font-size: .72rem; }
.quick-cover { position: relative; display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; overflow: hidden; border: 0; border-radius: 9px; padding: 0; color: color-mix(in srgb,rgb(var(--art-rgb)) 58%,white); background: linear-gradient(145deg,#1d3553,#102035); cursor: pointer; }
.quick-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quick-player-controls { display: flex; align-items: center; justify-content: center; gap: 7px; }
.quick-player-controls button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #b6c5d7; background: transparent; line-height: 1; }
.quick-player-controls button:hover, .quick-player-controls button.active { color: var(--green); background: rgba(255,255,255,.05); }
.quick-player-controls .quick-play { width: 52px; height: 52px; border-radius: 17px; color: #271506; background: var(--green); box-shadow: 0 10px 26px rgba(var(--art-rgb),.24); }
.quick-player-right { display: grid; min-width: 0; gap: 8px; }
.quick-source-label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.quick-source-label select { width: 100%; min-width: 0; height: 32px; border: 1px solid rgba(166,196,232,.16); border-radius: 9px; padding: 0 8px; color: var(--text); background: #0a1726; text-overflow: ellipsis; }
.quick-progress { display: grid; grid-template-columns: 38px minmax(100px,1fr) 38px; align-items: center; gap: 7px; color: #788ca5; font-size: .67rem; font-variant-numeric: tabular-nums; }
.quick-progress input { width: 100%; accent-color: var(--green); }
.quick-focus-close { display: none; }
body.quick-focus-open { overflow: hidden; }
body.quick-focus-open::before { content: ""; position: fixed; z-index: 129; inset: 0; background: color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter: blur(22px) saturate(1.2); }
body.quick-focus-open .home-quick-player { position: fixed; z-index: 130; top: 8vh; right: 50%; width: min(760px,calc(100% - 40px)); min-height: min(700px,84vh); grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto auto; justify-items: center; gap: 24px; padding: 42px; border: 1px solid var(--line); border-radius: 28px; transform: translateX(50%); color: var(--text); background: linear-gradient(145deg,rgba(var(--art-rgb),.12),transparent 48%),var(--glass-strong); box-shadow: 0 32px 100px rgba(0,0,0,.35); }
body.quick-focus-open .quick-focus-close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; padding: 0; color: var(--text); background: rgba(255,255,255,.03); font-size: 0; }
body.quick-focus-open .quick-focus-close::before, body.quick-focus-open .quick-focus-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
body.quick-focus-open .quick-focus-close::before { transform: translate(-50%,-50%) rotate(45deg); }
body.quick-focus-open .quick-focus-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
body.quick-focus-open .quick-now-playing { align-self: end; flex-direction: column; text-align: center; }
body.quick-focus-open .quick-cover { flex: 0 0 auto; width: min(310px,44vh); height: min(310px,44vh); border-radius: 20px; }
body.quick-focus-open .quick-now-playing > .quick-copy { justify-items: center; }
body.quick-focus-open .quick-now-playing strong { margin-top: 14px; font-size: clamp(1.35rem,3vw,2rem); }
body.quick-focus-open .quick-player-controls button { width: 48px; height: 48px; font-size: 1.1rem; }
body.quick-focus-open .quick-player-right { width: min(560px,100%); }
.focus-lyrics { display: grid; width: min(580px,100%); min-width: 0; gap: 7px; margin-top: 12px; text-align: center; }
.focus-lyrics[role="button"] { border-radius: 14px; padding: 7px 9px; cursor: pointer; transition: background .18s ease,transform .18s ease; }
.focus-lyrics[role="button"]:hover,.focus-lyrics[role="button"]:focus-visible { background: rgba(var(--art-rgb),.08); outline: none; transform: translateY(-1px); }
.focus-lyrics[hidden] { display: none !important; }
.focus-lyrics > span, .focus-lyrics > strong { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; text-wrap: balance; }
.focus-lyrics > span { color: var(--muted); font-size: clamp(.76rem,1.5vw,.92rem); line-height: 1.35; opacity: .72; -webkit-line-clamp: 1; }
.focus-lyrics > strong { color: rgb(var(--art-rgb)); font-size: clamp(1rem,2.2vw,1.35rem); line-height: 1.4; -webkit-line-clamp: 2; }
.focus-lyrics.line-change > strong { animation: focus-lyric-change .42s cubic-bezier(.2,.8,.2,1); }
@keyframes focus-lyric-change { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
body.quick-focus-open::before, body.music-focus-open::before { background: radial-gradient(circle at 50% 8%,rgba(var(--art-rgb),.34),transparent 42%),color-mix(in srgb,var(--bg) 76%,transparent); backdrop-filter: blur(30px) saturate(1.35); }
body.quick-focus-open .home-quick-player { background-color: var(--glass-strong); background-image: radial-gradient(circle at 50% 0,rgba(var(--art-rgb),.24),transparent 48%),linear-gradient(150deg,rgba(var(--art-rgb),.10),transparent 58%); box-shadow: 0 34px 110px rgba(var(--art-rgb),.22),0 28px 90px rgba(20,28,42,.28),inset 0 1px 0 rgba(255,255,255,.58); backdrop-filter: blur(30px) saturate(1.4); }
body.quick-focus-open .quick-now-playing { width: 100%; min-width: 0; }
body.quick-focus-open .quick-now-playing > .quick-copy { width: min(620px,100%); justify-items: center; }
body.quick-focus-open .quick-now-playing strong, body.quick-focus-open .quick-now-playing small { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; text-wrap: balance; }
body.quick-focus-open .quick-now-playing strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.quick-focus-open .quick-now-playing small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; }
body.quick-focus-open .quick-cover { box-shadow: 0 28px 75px rgba(var(--art-rgb),.32); }
body.quick-focus-open #quick-lyrics.active { color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.13); }
.accounts { margin-top: 18px; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); scroll-margin-top: 18px; }
.automation-intro { max-width: 720px; margin: -8px 0 16px; color: var(--muted); line-height: 1.55; }
.automation-status { min-height: 24px; margin: 0 0 18px; color: var(--green); font-size: .9rem; }
.automation-status.error { color: #ffc0c5; }
.primary-action, .save-settings { border: 0; border-radius: 13px; padding: 11px 16px; color: #271506; background: var(--green); font-weight: 850; }
.primary-action:disabled, .save-settings:disabled { cursor: wait; opacity: .55; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-grid label { display: grid; gap: 7px; color: #b9c8da; font-size: .82rem; font-weight: 700; }
.settings-grid input, .settings-grid select { width: 100%; border: 1px solid rgba(166,196,232,.2); border-radius: 12px; padding: 12px; color: var(--text); outline: none; background: rgba(3,10,19,.55); }
.settings-grid input:focus, .settings-grid select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.settings-grid .toggle { display: flex; align-items: center; gap: 10px; }
.settings-grid .toggle input { width: 20px; height: 20px; accent-color: var(--green); }
.settings-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.activity-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.activity-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(3,10,19,.32); }
.activity-panel-wide { grid-column: 1 / -1; }
.activity-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.activity-heading .eyebrow { margin-bottom: 4px; }
.activity-heading h3 { margin: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.activity-time { color: var(--muted); font-size: .74rem; }
.media-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.media-columns h4 { margin: 0 0 9px; color: #b9c8da; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.activity-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.activity-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 11px; border: 1px solid rgba(166,196,232,.1); border-radius: 12px; background: rgba(255,255,255,.025); }
.activity-copy { display: grid; gap: 3px; min-width: 0; }
.activity-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: .85rem; white-space: nowrap; }
.activity-copy small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-badge { flex: 0 0 auto; border-radius: 999px; padding: 5px 8px; color: #b9c8da; background: rgba(166,196,232,.09); font-size: .68rem; font-weight: 800; }
.activity-badge.pending { color: #cbd6e4; }
.activity-badge.working { color: var(--green); background: rgba(var(--art-rgb),.11); }
.activity-badge.error { color: #ffc0c5; background: rgba(240,107,118,.12); }
.activity-badge.removed { color: #ffc987; background: rgba(255,174,72,.12); }
.activity-empty { padding: 11px; border: 1px dashed rgba(166,196,232,.13); border-radius: 12px; color: var(--muted); font-size: .78rem; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-card { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(3,10,19,.32); }
.account-card h3 { margin: 0 0 2px; font-size: 1.08rem; }
.account-card label, .account-form label { display: grid; gap: 7px; color: #b9c8da; font-size: .82rem; font-weight: 700; }
.account-card input { width: 100%; border: 1px solid rgba(166,196,232,.2); border-radius: 12px; padding: 12px; color: var(--text); outline: none; background: rgba(3,10,19,.55); }
.account-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.account-form { display: grid; gap: 12px; }
.account-list-panel { margin-top: 14px; }
.account-row-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.quiet.compact { padding: 6px 9px; font-size: .68rem; }
.quiet.danger { color: #ffc0c5; }
.subpage-shell { padding-bottom: 50px; }
.standalone-panel { margin-top: clamp(48px, 8vw, 90px); }
.page-title { margin: 0; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1; letter-spacing: -.045em; }
.search-page { padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.media-search-form { display: grid; grid-template-columns: minmax(0, 1fr) 210px auto; align-items: end; gap: 12px; margin: 22px 0 14px; }
.media-search-form label { display: grid; gap: 7px; color: #b9c8da; font-size: .82rem; font-weight: 700; }
.media-search-form input, .media-search-form select { width: 100%; border: 1px solid rgba(166,196,232,.2); border-radius: 13px; padding: 13px; color: var(--text); outline: none; background: rgba(3,10,19,.55); }
.media-search-form input:focus, .media-search-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.top-media-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin: 2px 0 14px; color: var(--muted); font-size: .8rem; }
.top-media-intro { flex: 0 0 100%; }
.top-media-filters { display: flex; flex: 1 1 520px; align-items: end; gap: 9px; }
.top-media-filters label { display: grid; min-width: 150px; gap: 5px; color: var(--text); font-size: .76rem; font-weight: 700; }
.top-media-filters label[hidden] { display: none !important; }
.top-media-filters select,.top-media-filters input { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; color: var(--text); outline: none; background: var(--panel-strong); }
.top-media-filters input { max-width: 112px; }
.top-media-filters select:focus,.top-media-filters input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.top-media-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top-media-actions .quiet { color: var(--muted); }
.top-media-actions .quiet:hover { color: var(--text); border-color: rgba(var(--art-rgb),.42); }
.search-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); align-items: start; gap: 14px; }
.search-results-panel { min-height: 320px; }
.search-results { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.search-result { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px; border: 1px solid rgba(166,196,232,.11); border-radius: 14px; background: rgba(255,255,255,.025); }
.search-result-poster { display: grid; place-items: center; width: 76px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(166,196,232,.12); border-radius: 10px; color: var(--muted); background: rgba(3,10,19,.52); font-size: 1.35rem; font-weight: 900; }
.search-result-poster img { width: 100%; height: 100%; object-fit: cover; }
.search-result-poster.poster-missing { background: linear-gradient(145deg, rgba(var(--art-rgb),.18), rgba(var(--art-rgb),.1)); }
.search-result-copy { min-width: 0; }
.search-result-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.search-result-heading strong { font-size: .98rem; }
.media-type { color: var(--muted); font-size: .72rem; }
.media-type.movie, .media-type.series { color: color-mix(in srgb,rgb(var(--art-rgb)) 76%,var(--text)); }
.search-result-copy p { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.search-result-actions { display: grid; justify-items: end; gap: 8px; }
.series-download-picker { margin-top: 18px; }
.series-picker-grid { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 14px; align-items: end; }
.series-picker-grid label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.series-picker-grid select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 11px 36px 11px 12px; color: var(--text); background: var(--panel-strong); }
.compact-action { padding: 9px 11px; font-size: .75rem; }
.media-progress-panel { position: sticky; top: 18px; scroll-margin-top: 18px; }
.progress-message { min-height: 42px; margin: 0 0 14px; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.progress-track { overflow: hidden; height: 9px; border-radius: 999px; background: rgba(166,196,232,.12); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width .35s ease; }
.progress-stats { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 9px 0 16px; }
.progress-stats strong { font-size: 1.35rem; }
.progress-stats small { color: var(--muted); text-align: right; }
.recent-media-panel { margin-top: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.library-page { padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.library-heading { align-items: center; }
.library-search { width: min(340px, 100%); }
.library-search input { width: 100%; border: 1px solid rgba(166,196,232,.2); border-radius: 13px; padding: 12px 14px; color: var(--text); outline: none; background: rgba(3,10,19,.55); }
.library-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.library-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.library-refresh { margin-left: auto; }
.library-filter { border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; color: var(--muted); background: rgba(255,255,255,.025); font-weight: 800; }
.library-filter.active { border-color: rgba(var(--art-rgb),.5); color: #271506; background: var(--green); }
.library-section { margin-top: 28px; }
.library-section h2 { margin: 0; font-size: 1.35rem; }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 170px)); justify-content: start; gap: 20px 14px; }
.continue-grid { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.continue-grid .poster-card { flex: 0 0 min(170px, 43vw); scroll-snap-align: start; }
.poster-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: visible; border: 0; border-radius: 13px; color: inherit; background: transparent; text-align: left; content-visibility: auto; contain-intrinsic-size: 170px 290px; }
.poster-card:hover { transform: translateY(-2px); }
.poster-image { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(166,196,232,.16); border-radius: 13px; background: linear-gradient(145deg, rgba(var(--art-rgb),.2), rgba(var(--art-rgb),.1)); box-shadow: 0 9px 24px rgba(0,0,0,.18); }
.poster-card:hover .poster-image { border-color: rgba(168,215,255,.55); }
.poster-image img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: color-mix(in srgb,rgb(var(--art-rgb)) 72%,white); font-size: 2.4rem; font-weight: 900; }
.poster-copy { display: grid; gap: 3px; padding: 9px 2px 0; }
.poster-copy strong { display: -webkit-box; overflow: hidden; line-height: 1.22; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.poster-copy small { color: var(--muted); }
.watch-bar { position: absolute; z-index: 2; right: 8px; bottom: 8px; left: 8px; overflow: hidden; height: 5px; border-radius: 999px; background: rgba(4,10,18,.72); }
.watch-bar span { display: block; height: 100%; background: var(--green); }
.watched-badge { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #271506; background: var(--green); font-weight: 900; }
.media-dialog, .player-dialog { position: fixed; z-index: 120; inset: 0; }
.media-dialog-backdrop { position: absolute; inset: 0; background: rgba(1,7,14,.82); backdrop-filter: blur(10px); }
.media-dialog-card { position: relative; z-index: 1; width: min(900px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: 12px auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 24px; background: var(--panel-strong); box-shadow: var(--shadow); }
.media-dialog-close { position: sticky; z-index: 2; top: 12px; float: right; display: grid; place-items: center; width: 40px; height: 40px; margin: 12px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: rgba(7,17,31,.92); font-size: 0; line-height: 0; }
.media-dialog-close::before, .media-dialog-close::after { content: ""; position: absolute; width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
.media-dialog-close::before { transform: rotate(45deg); }
.media-dialog-close::after { transform: rotate(-45deg); }
.detail-hero { display: grid; grid-template-columns: minmax(160px, 230px) 1fr; gap: 24px; padding: 28px; }
.detail-poster { width: 100%; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 16px; background: rgba(255,255,255,.04); cursor: pointer; }
.detail-poster { position: relative; }
.detail-poster img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-copy h2 { margin: 4px 0 10px; font-size: clamp(2rem,5vw,3.5rem); line-height: 1; }
.detail-meta { color: color-mix(in srgb,rgb(var(--art-rgb)) 76%,var(--text)); font-weight: 800; }
.detail-overview { color: var(--muted); line-height: 1.65; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.season-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 0 28px 18px; }
.season-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: .76rem; font-weight: 800; }
.season-toolbar select { min-width: 170px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 34px 9px 10px; color: var(--text); background: var(--panel-strong); }
.season-list { display: grid; gap: 18px; padding: 0 28px 30px; }
.season-block h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 9px; }
.season-block h3 small { color: var(--muted); font-size: .76rem; font-weight: 750; }
.episode-list { display: grid; gap: 8px; }
.episode-row { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid rgba(166,196,232,.11); border-radius: 12px; background: rgba(255,255,255,.025); content-visibility: auto; contain-intrinsic-size: 150px 88px; }
.episode-visual { display: grid; gap: 5px; min-width: 0; }
.episode-visual small { color: var(--muted); font-size: .7rem; font-weight: 800; text-align: right; }
.episode-thumbnail { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; color: color-mix(in srgb, rgb(var(--art-rgb)) 70%, var(--text)); background: linear-gradient(145deg,rgba(var(--art-rgb),.22),rgba(var(--art-rgb),.1)); font-size: .76rem; font-weight: 900; }
.episode-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.episode-copy { display: grid; min-width: 0; gap: 5px; }
.episode-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-state { color: color-mix(in srgb,rgb(var(--art-rgb)) 76%,var(--text)); font-size: .76rem; font-weight: 850; }
.episode-state.watched { color: var(--green); }
.episode-overview { display: block; overflow: visible; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.episode-watch-bar { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(166,196,232,.15); }
.episode-watch-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.episode-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.player-dialog { display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); background: #02060b; }
.player-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 10px; }
.player-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 14px; background: #000; }
.player-dialog video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; cursor: pointer; }
.player-dialog p { min-height: 20px; margin: 8px 0 0; color: var(--muted); text-align: center; }
.player-center-toggle { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(3,9,16,.72); font-size: 1.55rem; backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.player-stage.paused .player-center-toggle { opacity: 1; pointer-events: auto; }
.custom-video-controls { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: auto auto auto auto minmax(110px,145px) minmax(120px,165px) minmax(84px,105px) minmax(100px,145px) auto auto; gap: 8px; align-items: end; padding: 50px 12px 12px; background: linear-gradient(transparent,rgba(1,5,10,.94)); opacity: 1; transition: opacity .22s ease; }
.custom-video-controls > :not(.player-seek) { grid-row: 2; }
.custom-video-controls .player-seek { grid-row: 1; grid-column: 1 / -1; height: 22px; align-self: center; }
.player-stage.controls-hidden { cursor: none; }
.player-stage.controls-hidden .custom-video-controls { opacity: 0; pointer-events: none; }
.player-stage:fullscreen { width: 100vw; height: 100dvh; border-radius: 0; background: #000; }
.player-stage.pseudo-fullscreen { position: fixed; z-index: 160; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; background: #000; }
body.video-pseudo-fullscreen { overflow: hidden; }
.player-stage:fullscreen .custom-video-controls { padding-right: max(12px,env(safe-area-inset-right)); padding-bottom: max(12px,env(safe-area-inset-bottom)); padding-left: max(12px,env(safe-area-inset-left)); }
.custom-video-controls button { display: grid; place-items: center; min-width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 0 9px; color: #fff; background: rgba(255,255,255,.08); font: inherit; font-weight: 850; cursor: pointer; }
.custom-video-controls button:hover { background: rgba(255,255,255,.16); }
.player-utility-controls { display: flex; align-items: center; gap: 5px; min-width: 124px; }
#player-mute, #player-sync, #player-cast { justify-self: center; width: 38px; min-width: 38px; padding: 0; }
.player-time { align-self: end; display: flex; align-items: center; height: 38px; color: #d8e3ef; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-seek { align-self: end; width: 100%; height: 38px; accent-color: var(--green); }
.player-seek { margin: 0; border: 0; padding: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.player-seek::-webkit-slider-runnable-track { height: 8px; border: 0; border-radius: 999px; background: linear-gradient(90deg,rgb(var(--art-rgb)) 0 var(--seek-progress,0%),rgba(174,197,224,.34) var(--seek-progress,0%) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.player-seek::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; border: 3px solid #fff; border-radius: 50%; background: rgb(var(--art-rgb)); box-shadow: 0 2px 12px rgba(0,0,0,.55); appearance: none; -webkit-appearance: none; }
.player-seek::-moz-range-track { height: 8px; border: 0; border-radius: 999px; background: rgba(174,197,224,.34); }
.player-seek::-moz-range-progress { height: 8px; border-radius: 999px; background: rgb(var(--art-rgb)); }
.player-seek::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: rgb(var(--art-rgb)); box-shadow: 0 2px 12px rgba(0,0,0,.55); }
.player-track-control, .player-volume-control { display: grid; gap: 3px; min-width: 0; color: #b7c8d9; font-size: .66rem; font-weight: 800; }
.player-track-control select {
  width: 100%; height: 38px; min-width: 0; overflow: hidden;
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
  padding: 0 28px 0 8px; color: #fff; color-scheme: dark;
  background-color: rgba(255,255,255,.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dce8f7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  box-shadow: none; text-overflow: ellipsis;
}
.player-track-control select:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.16); outline: none; }
.player-track-control select:focus { border-color: rgba(96,165,250,.72); background: rgba(255,255,255,.16); outline: none; }
.player-track-control select option { color: #f4f8ff; background: #171b21; }
.player-volume-control input { height: 38px; width: 100%; accent-color: var(--green); }
.player-sync-panel { position: absolute; z-index: 5; right: 12px; bottom: 72px; display: grid; box-sizing: border-box; width: min(420px,calc(100% - 24px)); max-height: calc(100dvh - 96px); gap: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; color: #20242b; background: linear-gradient(180deg,rgba(246,247,249,.97),rgba(218,222,228,.96)); box-shadow: 0 24px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(20px) saturate(1.15); }
.player-sync-panel::before { content: none; }
.player-sync-panel[hidden] { display: none; }
.player-sync-heading, .player-sync-panel label span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.player-sync-heading strong { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; letter-spacing: .01em; }
.player-sync-heading strong svg { width: 17px; height: 17px; color: rgb(var(--art-rgb)); }
.player-sync-heading-actions { display: flex; align-items: center; gap: 5px; }
.player-sync-heading button { display: inline-flex; height: 34px; min-width: 0; align-items: center; justify-content: center; gap: 6px; border-color: rgba(31,41,55,.13); border-radius: 10px; padding: 0 10px; color: #323842; background: rgba(255,255,255,.52); font-size: .7rem; }
.player-sync-heading button:last-child { width: 34px; padding: 0; }
.player-sync-heading button svg { width: 15px; height: 15px; }
.player-sync-panel label { display: grid; gap: 9px; padding: 11px; border: 1px solid rgba(31,41,55,.1); border-radius: 10px; background: rgba(255,255,255,.5); font-size: .76rem; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); }
.sync-title { justify-content: flex-start !important; }
.sync-title svg { width: 16px; height: 16px; color: rgb(var(--art-rgb)); }
.player-sync-panel output { padding: 4px 8px; border: 1px solid rgba(var(--art-rgb),.2); border-radius: 999px; color: var(--accent-strong); background: rgba(var(--art-rgb),.09); font-size: .68rem; font-variant-numeric: tabular-nums; }
.sync-input-row { display: grid !important; grid-template-columns: 44px 44px minmax(62px,1fr) 44px 44px; gap: 4px !important; }
.sync-input-row button { min-width: 0; height: 38px; border-color: rgba(31,41,55,.13); padding: 0 4px; border-radius: 10px; color: #29303a; background: rgba(255,255,255,.56); font-size: .65rem; }
.sync-input-row button:hover { border-color: rgba(var(--art-rgb),.42); background: rgba(var(--art-rgb),.12); }
.player-sync-panel input[type="number"] { width: 100%; min-width: 0; height: 38px; padding: 0 6px; border: 1px solid rgba(31,41,55,.14); border-radius: 10px; color: #20242b; background: rgba(255,255,255,.7); text-align: center; box-shadow: none; }
.player-sync-panel input[type="number"]:focus { border-color: rgba(96,165,250,.75); outline: none; }
.subtitle-size-row { grid-template-columns: 42px minmax(120px,1fr) 42px !important; }
.subtitle-size-row input[type="range"] { width: 100%; min-width: 0; accent-color: var(--accent); }
.subtitle-auto-setting > span:first-child { align-items: center; }
.subtitle-auto-setting input[type="checkbox"] { width: 38px; height: 22px; margin: 0; border: 0 !important; accent-color: rgb(var(--art-rgb)); background: transparent !important; box-shadow: none !important; }
.subtitle-auto-controls { display: grid !important; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px !important; }
.subtitle-auto-controls small { color: #69717c; font-size: .68rem; }
.subtitle-auto-controls select { width: 100%; height: 38px; min-width: 0; appearance: none; border: 1px solid rgba(31,41,55,.14); border-radius: 10px; padding: 0 30px 0 10px; color: #20242b; color-scheme: light; background: rgba(255,255,255,.7); box-shadow: none; }
.subtitle-auto-setting > small { color: #69717c; font-size: .66rem; font-weight: 600; line-height: 1.4; }
.player-sync-panel > small { padding: 0 3px; color: #69717c; font-size: .68rem; line-height: 1.45; }
.player-dialog video::cue { color: #fff; background: rgba(0,0,0,.72); font-size: clamp(16px,2.25vw,30px); text-shadow: 0 2px 4px #000; }
.subtitle-overlay { position: absolute; z-index: 2; right: 4%; bottom: clamp(72px,11%,132px); left: 4%; display: flex; min-height: 2.8em; flex-direction: column; align-items: center; justify-content: flex-end; gap: .18em; color: #fff; font-size: var(--subtitle-size-desktop,clamp(16px,2.25vw,30px)); line-height: 1.28; text-align: center; text-shadow: 0 2px 4px #000; pointer-events: none; transform: translateZ(0); contain: layout paint style; will-change: transform; }
.subtitle-overlay::before { position: absolute; width: 1px; height: 1px; background: rgba(0,0,0,.01); content: ""; }
.subtitle-cue { position: relative; max-width: min(92%,1100px); padding: .08em .3em .12em; border-radius: .15em; background: rgba(0,0,0,.72); white-space: pre-line; }
.track-setup { align-self: center; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; width: min(720px,100%); margin: auto; padding: clamp(22px,5vw,42px); border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }
.track-setup > div { grid-column: 1 / -1; }
.track-setup h2 { margin: 3px 0 8px; font-size: clamp(1.7rem,5vw,2.7rem); }
.track-setup p { margin: 0; text-align: left; }
.track-setup label { display: grid; gap: 7px; color: #b9c8da; font-size: .8rem; font-weight: 800; }
.track-setup select { width: 100%; min-width: 0; border: 1px solid rgba(166,196,232,.2); border-radius: 12px; padding: 12px; color: var(--text); background: #0b192b; }
.track-setup .primary-action { grid-column: 1 / -1; justify-self: start; }
.external-player-dialog { z-index: 130; display: grid; place-items: center; padding: 18px; }
.external-player-card { position: relative; z-index: 1; width: min(560px,100%); padding: clamp(24px,5vw,38px); border: 1px solid var(--line); border-radius: 24px; background: #0c1a2c; box-shadow: var(--shadow); }
.external-player-card .media-dialog-close { position: absolute; top: 0; right: 0; }
.external-player-card h2 { margin: 5px 52px 10px 0; font-size: clamp(1.7rem,5vw,2.4rem); }
.external-player-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.external-player-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.external-player-actions button { width: 100%; justify-content: center; }
.external-player-note { margin: 18px 0 0; font-size: .76rem; }
.folder-rename-card { width: min(480px,100%); }
.folder-rename-form { display: grid; gap: 9px; margin-top: 22px; }
.folder-rename-form label { color: var(--muted); font-size: .76rem; font-weight: 850; }
.folder-rename-form input { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 13px; padding: 0 14px; color: var(--text); background: color-mix(in srgb,var(--panel-strong) 82%,#fff 18%); font: inherit; }
.folder-rename-form input:focus { border-color: var(--green); outline: 3px solid color-mix(in srgb,var(--green) 18%,transparent); }
.folder-rename-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.folder-rename-actions button { justify-content: center; }
.folder-rename-actions .primary-action { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; line-height: 1; }
.folder-rename-actions .primary-action svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.cast-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0 14px; }
.cast-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cast-actions svg { width: 18px; height: 18px; }
.device-cast-media { position: absolute; left: -2px; bottom: -2px; width: 1px; height: 1px; opacity: .001; pointer-events: none; }
.cast-device-list { display: grid; gap: 8px; }
.cast-device { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb,var(--panel-strong) 86%,transparent); }
.cast-device span { min-width: 0; }
.cast-device strong, .cast-device small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-device small { margin-top: 3px; color: var(--muted); }
body.dialog-open { overflow: hidden; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 6px 0; color: #71859e; font-size: .82rem; }

.install-dialog {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px;
  background: rgba(1, 7, 14, .76); backdrop-filter: blur(12px);
}
.install-dialog-card {
  position: relative; width: min(520px, 100%); padding: clamp(24px, 6vw, 38px);
  border: 1px solid var(--line); border-radius: 26px; background: #10213a; box-shadow: var(--shadow);
}
.install-dialog-card h2 { max-width: 390px; margin: 0; font-size: clamp(1.8rem, 6vw, 2.65rem); line-height: 1.05; letter-spacing: -.04em; }
.install-dialog-intro { margin: 18px 0; color: var(--muted); line-height: 1.6; }
.install-dialog-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--line);
  border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.04); font-size: 1.4rem;
}
.install-steps { display: grid; gap: 12px; margin: 20px 0; padding-left: 25px; color: #dce7f5; line-height: 1.5; }
.install-steps li::marker { color: var(--green); font-weight: 900; }
.install-secure-link { justify-content: center; width: 100%; margin-top: 6px; text-align: center; }
.install-dialog-done { width: 100%; margin-top: 10px; }
body.install-dialog-open { overflow: hidden; }

.music-body { padding-bottom: 108px; }
.music-shell { width: min(1500px, calc(100% - 34px)); }
.music-app { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 14px; min-height: calc(100vh - 190px); margin-top: 28px; transition: grid-template-columns .2s ease; }
.music-app.music-navigation-collapsed { grid-template-columns: 76px minmax(0,1fr); }
.music-sidebar, .music-content { border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.music-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 22px 14px; }
.music-sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 16px; }
.music-sidebar-title { min-width: 0; }
.music-sidebar-toggle { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 13px; padding: 8px 10px; color: var(--text); background: var(--glass); font-weight: 780; }
.music-sidebar-toggle svg { width: 18px; height: 18px; }
.music-sidebar-toggle span { font-size: .74rem; }
.music-sidebar.collapsed { padding: 14px; }
.music-sidebar.collapsed .music-sidebar-heading { justify-content: center; padding: 0; }
.music-sidebar.collapsed .music-sidebar-title, .music-sidebar.collapsed .music-sidebar-toggle span { display: none; }
.music-sidebar.collapsed .music-sources, .music-sidebar.collapsed .playlist-create, .music-sidebar.collapsed .youtube-download-open { display: none; }
.music-sidebar.collapsed .music-sidebar-toggle { width: 46px; height: 46px; padding: 0; }
@media (min-width: 901px) {
  .music-sidebar { position: sticky; top: 86px; align-self: start; }
  .music-sidebar:not(.collapsed) { max-height: calc(100vh - 112px); }
}
.music-sidebar h1, .music-content h2, .lyrics-panel h2 { margin: 0; letter-spacing: -.035em; }
.music-sidebar h1 { font-size: 2rem; }
.music-sources { display: grid; gap: 3px; min-height: 0; overflow: auto; }
.music-source { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 10px; padding: 9px 10px; color: #b7c6da; background: transparent; font: inherit; font-size: .86rem; font-weight: 720; text-align: left; cursor: pointer; }
.music-source:hover, .music-source.active { color: #fff; background: rgba(255,255,255,.075); }
.music-source.active { box-shadow: inset 3px 0 var(--green); }
.source-count { flex: 0 0 auto; color: #7890aa; font-size: .72rem; }
.music-nav-heading { margin: 18px 10px 6px; color: #70859f; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.music-nav-empty { margin: 7px 10px; color: #70839b; font-size: .77rem; line-height: 1.45; }
.music-sidebar-heading { order: 0; }
.playlist-create { order: 1; margin-top: 0; padding: 0 8px 15px; }
.music-sources { order: 2; }
.playlist-create form { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 7px; }
.playlist-create input, .music-toolbar input, .music-toolbar select, .music-add-toolbar select { width: 100%; min-width: 0; border: 1px solid rgba(166,196,232,.2); border-radius: 10px; padding: 10px 11px; color: var(--text); outline: none; background: rgba(3,10,19,.62); font: inherit; }
.playlist-create input:focus, .music-toolbar input:focus, .music-toolbar select:focus, .music-add-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.playlist-create button { border: 0; border-radius: 10px; color: #271506; background: var(--green); font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.playlist-create .automation-status { min-height: 18px; margin: 8px 0 0; font-size: .72rem; }
.music-content { min-width: 0; padding: clamp(18px,3vw,30px); }
.music-content-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.music-content-heading h2 { font-size: clamp(2rem,4vw,3.4rem); }
.music-subtitle { margin: 8px 0 0; color: var(--muted); }
.music-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.playlist-heading-actions { display: flex; gap: 7px; }
.music-dedupe-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.music-dedupe-toggle svg { width: 15px; height: 15px; }
.music-dedupe-toggle.active { color: rgb(var(--art-rgb)); border-color: rgba(var(--art-rgb),.28); background: rgba(var(--art-rgb),.10); }
.quiet.danger, .track-action.danger { color: #ffabb2; border-color: rgba(240,107,118,.3); }
.music-controls-card { display: grid; gap: 10px; margin-top: 24px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb,var(--panel-strong) 82%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.music-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) 190px auto; gap: 8px; margin: 0; }
.music-toolbar label { min-width: 0; }
.music-sort-toggle { display: none; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.music-sort-toggle svg { width: 16px; height: 16px; }
.music-add-toolbar { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 3px 0; border-top: 1px solid var(--line); }
.music-add-toolbar label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.music-toolbar select, .music-add-toolbar select { cursor: pointer; }
.music-add-toolbar select { width: 170px; min-height: 30px; padding: 4px 27px 4px 8px; border-radius: 999px; color: var(--text); font-size: .72rem; font-weight: 700; }
.music-add-toolbar .automation-status:empty { display: none; }
.music-table-heading, .music-track { display: grid; grid-template-columns: 34px minmax(240px,1.5fr) minmax(150px,.8fr) 58px 150px; align-items: center; gap: 12px; }
.music-table-heading { margin-top: 12px; padding: 9px 11px; border-bottom: 1px solid var(--line); color: #70839b; font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.music-table-heading > span:last-child { width: 100%; justify-self: stretch; padding: 0; text-align: center; }
.music-table-heading > button:first-child, .track-number { text-align: center; }
.music-table-heading button { position: relative; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; }
.music-table-heading button:hover, .music-table-heading button.active { color: var(--green); }
.music-table-heading button.active::after { content: " ↑"; }
.music-table-heading button.active[data-direction="desc"]::after { content: " ↓"; }
.music-track-list { min-height: 280px; }
.music-track { min-height: 64px; padding: 7px 11px; border-radius: 10px; color: #adbed2; cursor: pointer; outline: none; content-visibility: auto; contain-intrinsic-size: auto 64px; }
.music-more { width: 100%; margin: 14px 0 4px; }
.music-track:hover, .music-track:focus-visible { background: rgba(255,255,255,.055); }
.music-track.playing { color: var(--green); background: rgba(var(--art-rgb),.07); }
.track-number { color: #71859d; text-align: center; font-variant-numeric: tabular-nums; }
.track-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.track-cover, .now-cover { position: relative; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 7px; color: color-mix(in srgb,rgb(var(--art-rgb)) 58%,white); background: linear-gradient(145deg, #1d3553, #102035); font-weight: 900; }
.track-cover { width: 46px; height: 46px; }
.track-cover img, .now-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track-copy { min-width: 0; }
.track-copy strong, .track-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-copy strong { color: #f0f5fc; font-size: .88rem; }
.music-track.playing .track-copy strong { color: var(--green); }
.track-copy small, .track-album { margin-top: 3px; color: #8295ad; font-size: .75rem; }
.track-album { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-duration { color: #8295ad; font-size: .75rem; font-variant-numeric: tabular-nums; }
.track-actions { display: flex; justify-content: center; gap: 4px; }
.track-action { display: grid; min-width: 31px; min-height: 31px; place-items: center; border: 1px solid rgba(166,196,232,.13); border-radius: 50%; padding: 0; color: #9db1c8; background: rgba(255,255,255,.03); font-size: 1rem; line-height: 1; cursor: pointer; }
.track-action svg { display: block; width: 18px; height: 18px; margin: 0; }
.track-action:hover { color: #fff; border-color: rgba(166,196,232,.35); }
.track-action:disabled { opacity: .35; cursor: not-allowed; }
.music-player { position: fixed; z-index: 80; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(220px,1fr) minmax(360px,1.4fr) minmax(190px,1fr); align-items: center; gap: 18px; min-height: 92px; padding: 10px max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); border-top: 1px solid rgba(166,196,232,.16); color: var(--text); background: rgba(5,14,26,.98); box-shadow: 0 -12px 40px rgba(0,0,0,.35); }
.music-player button { border: 0; color: #b6c5d7; background: transparent; cursor: pointer; }
.music-player button:hover, .music-player button.active { color: var(--green); }
.now-playing { display: flex; min-width: 0; align-items: center; gap: 11px; }
.now-cover { width: 58px; height: 58px; border-radius: 8px; }
.now-copy { min-width: 0; }
.now-copy strong, .now-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-copy strong { font-size: .88rem; }
.now-copy small { margin-top: 4px; color: #8295ad; font-size: .72rem; }
.player-center { display: grid; gap: 7px; }
.player-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; }
.player-buttons button { min-width: 34px; min-height: 34px; font-size: 1rem; }
.player-buttons .music-play-button { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; padding: 0; color: #271506; background: var(--green); font-size: .95rem; line-height: 1; }
.player-buttons .music-play-button:hover { color: #271506; transform: scale(1.04); }
.player-progress { display: grid; grid-template-columns: max-content minmax(100px,1fr) max-content; align-items: center; column-gap: 7px; color: #788ca5; font-size: .68rem; font-variant-numeric: tabular-nums; }
.player-progress #current-time { justify-self: end; }
.player-progress #total-time { justify-self: start; }
.music-player input[type="range"] { width: 100%; accent-color: var(--green); }
#music-progress,#quick-seek,#music-volume { min-height: 0; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; }
#music-progress,#quick-seek { height: 18px; margin: 0; -webkit-appearance: none; appearance: none; }
#music-progress::-webkit-slider-runnable-track,#quick-seek::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb,rgb(var(--art-rgb)) 30%,transparent); box-shadow: none; }
#music-progress::-webkit-slider-thumb,#quick-seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; -webkit-appearance: none; appearance: none; border: 0; border-radius: 50%; background: rgb(var(--art-rgb)); box-shadow: 0 2px 8px rgba(var(--art-rgb),.32); }
#music-progress::-moz-range-track,#quick-seek::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb,rgb(var(--art-rgb)) 30%,transparent); }
#music-progress::-moz-range-progress,#quick-seek::-moz-range-progress { height: 4px; border-radius: 999px; background: rgb(var(--art-rgb)); }
#music-progress::-moz-range-thumb,#quick-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: rgb(var(--art-rgb)); }
.player-extras { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.player-extras button { min-height: 34px; border: 1px solid rgba(166,196,232,.14); border-radius: 999px; padding: 6px 11px; }
.player-extras input[type="range"] { width: 82px; }
.music-download-links { display: inline-flex; align-items: center; gap: 4px; }
.music-download-links a { border-radius: 999px; padding: 5px 7px; color: var(--muted); background: rgba(var(--art-rgb),.07); font-size: .62rem; font-weight: 800; text-decoration: none; }
.music-download-links a:hover { color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.13); }
.music-volume-control { display: flex; align-items: center; gap: 7px; }
.player-focus-close { display: none; }
body.music-focus-open { overflow: hidden; }
html.music-focus-open, html.music-focus-open body { width: 100%; height: 100dvh; overflow: hidden !important; overscroll-behavior: none; }
html.music-focus-open .music-player { touch-action: none; }
body.music-focus-open::before { content: ""; position: fixed; z-index: 79; inset: 0; }
body.music-focus-open .music-player { top: 8vh; right: 50%; bottom: auto; left: auto; width: min(760px,calc(100% - 40px)); min-height: min(700px,84vh); grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; justify-items: center; gap: 24px; padding: 42px; border: 1px solid var(--line); border-radius: 28px; transform: translateX(50%); box-shadow: 0 32px 100px rgba(0,0,0,.65); }
body.music-focus-open .player-focus-close { position: absolute; top: 16px; right: 16px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; padding: 0; font-size: 0; line-height: 0; }
body.music-focus-open .player-focus-close::before, body.music-focus-open .player-focus-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
body.music-focus-open .player-focus-close::before { transform: translate(-50%,-50%) rotate(45deg); }
body.music-focus-open .player-focus-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
body.music-focus-open .now-playing { align-self: end; flex-direction: column; text-align: center; }
body.music-focus-open .now-cover { width: min(310px,44vh); height: min(310px,44vh); border-radius: 20px; cursor: pointer; }
body.music-focus-open .now-copy strong { margin-top: 14px; font-size: clamp(1.35rem,3vw,2rem); }
body.music-focus-open .now-copy small { font-size: .9rem; }
body.music-focus-open .now-playing { width: 100%; min-width: 0; }
body.music-focus-open .now-copy { width: min(620px,100%); }
body.music-focus-open .now-copy strong, body.music-focus-open .now-copy small { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; text-wrap: balance; }
body.music-focus-open .now-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.music-focus-open .now-copy small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; }
body.music-focus-open .now-cover { box-shadow: 0 28px 75px rgba(var(--art-rgb),.34); }
body.music-focus-open .player-center { width: min(560px,100%); }
body.music-focus-open .player-buttons button { min-width: 48px; min-height: 48px; font-size: 1.2rem; }
body.music-focus-open .player-buttons .music-play-button { width: 58px; height: 58px; }
body.music-focus-open .player-extras { justify-content: center; }
.lyrics-panel { position: sticky; top: 86px; display: grid; width: 100%; max-width: 100%; min-width: 0; height: calc(100vh - 204px); max-height: 760px; grid-template-rows: auto minmax(180px,1fr) auto; align-self: start; overflow: hidden; box-sizing: border-box; margin: 0; padding: clamp(18px,2vw,24px); border: 1px solid rgba(var(--art-rgb),.22); border-radius: 20px; color: var(--text); background-color: color-mix(in srgb,var(--panel-strong) 90%,rgb(var(--art-rgb)) 10%); background-image: linear-gradient(145deg,rgba(var(--art-rgb),.11),transparent 48%); box-shadow: 0 18px 55px rgba(20,28,42,.14),inset 0 1px 0 rgba(255,255,255,.5); }
.lyrics-panel[hidden] { display: none; }
.lyrics-panel header { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 12px; }
.lyrics-panel h2 { min-width: 0; overflow-wrap: anywhere; }
.lyrics-panel-controls { display: flex; flex: 0 0 auto; gap: 5px; }
.lyrics-panel .lyrics-icon-button { display: grid; width: 34px; min-width: 34px; height: 34px; min-height: 34px; place-items: center; padding: 0; border-radius: 50%; }
.lyrics-panel .lyrics-icon-button svg { width: 17px; height: 17px; margin: 0; }
.lyrics-content { display: grid; max-width: 100%; min-width: 0; align-content: start; gap: 6px; margin-top: 18px; overflow-x: hidden; overflow-y: auto; padding-right: 8px; scroll-behavior: smooth; }
.lyric-line { width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-radius: 12px; padding: 9px 10px; overflow-wrap: anywhere; color: var(--muted); background: transparent; font: inherit; font-size: 1.14rem; font-weight: 780; line-height: 1.45; text-align: left; cursor: pointer; transition: color .18s,background .18s,transform .18s; }
.lyric-line:hover { color: var(--text); background: rgba(var(--art-rgb),.07); }
.lyric-line.active { color: color-mix(in srgb,rgb(var(--art-rgb)) 82%,var(--text)); background: rgba(var(--art-rgb),.11); transform: translateX(4px); }
.plain-lyrics { max-width: 100%; min-width: 0; margin-right: 0; overflow-wrap: anywhere; color: var(--text); white-space: pre-wrap; font-size: 1rem; line-height: 1.8; }
.lyrics-credit { margin: 10px 0 0; color: var(--muted); font-size: .68rem; }

@media (min-width: 1201px) {
  .music-app.lyrics-open { grid-template-columns: 260px minmax(0,1fr) minmax(310px,370px); }
  .music-app.music-navigation-collapsed.lyrics-open { grid-template-columns: 76px minmax(0,1fr) minmax(310px,370px); }
  .music-app.lyrics-open .lyrics-panel { grid-column: 3; }
}

@media (max-width: 1200px) {
  .lyrics-panel { position: fixed; z-index: 76; top: 78px; right: 14px; bottom: 116px; width: min(390px,calc(100% - 28px)); height: auto; max-height: none; }
}

.login-page { display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.login-card { width: min(460px, 100%); padding: clamp(28px, 7vw, 48px); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.login-logo { width: 62px; height: 62px; margin-bottom: 32px; }
.login-card h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
.login-intro { margin: 20px 0 26px; color: var(--muted); line-height: 1.6; }
.login-error { padding: 12px 14px; border: 1px solid rgba(240,107,118,.35); border-radius: 12px; color: #ffc0c5; background: rgba(240,107,118,.1); }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 7px; color: #b9c8da; font-size: .85rem; font-weight: 700; }
.login-form input { width: 100%; border: 1px solid rgba(166,196,232,.2); border-radius: 13px; padding: 14px; color: var(--text); outline: none; background: rgba(3,10,19,.55); }
.login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--art-rgb),.13); }
.login-form button { margin-top: 12px; border: 0; border-radius: 13px; padding: 14px; color: #271506; background: var(--green); font-weight: 850; }
.privacy-note { display: block; margin-top: 20px; color: #70839b; text-align: center; }

@media (max-width: 720px) {
  .shell { width: 100%; padding-right: 8px; padding-left: 8px; }
  .subpage-shell { width: 100%; padding-right: 8px; padding-left: 8px; }
  .topbar { align-items: flex-start; }
  .account-actions { justify-content: flex-end; flex-wrap: wrap; }
  .account-actions .quiet { padding: 7px 10px; font-size: .72rem; }
  .hero { padding-top: 64px; }
  .hero-actions { flex-wrap: wrap; }
  /* Twee losse kaarten: laat hun ronde schaduwen buiten de ouder tekenen zodat er
     geen rechthoekige grijze hoeken ontstaan. */
  .home-personal {
    width: 100%;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
    gap: 14px;
    margin-bottom: 18px;
    overflow: visible;
  }
  .home-personal .home-recent-panel,
  .home-personal .home-quick-player { border-radius: 21px; }
  .home-recent-panel, .home-quick-player { width: 100%; min-width: 0; overflow: hidden; border-radius: 18px; padding: 16px; }
  .home-recent-list { display: flex; width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 5px; }
  .home-recent-card { min-width: 0; flex: 0 0 min(240px,76vw); }
  .home-quick-player { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .quick-now-playing, .quick-player-right, .quick-progress { width: 100%; min-width: 0; }
  .quick-progress { grid-template-columns: 34px minmax(0,1fr) 34px; }
  .quick-player-controls { grid-row: 2; }
  .quick-player-right { grid-row: 3; }
  body.quick-focus-open, body.music-focus-open { min-height: 100dvh; background: #02060b; }
  body.quick-focus-open .home-quick-player { top: 0; right: 0; bottom: 0; left: 0; width: 100%; min-height: 100dvh; height: 100dvh; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto auto; gap: 18px; overflow-y: auto; padding: max(58px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); border: 0; border-radius: 0; transform: none; background-color: var(--bg); background-image: radial-gradient(circle at 50% 0,rgba(var(--art-rgb),.28),transparent 46%),linear-gradient(150deg,rgba(var(--art-rgb),.11),transparent 60%); }
  body.quick-focus-open .quick-now-playing { grid-row: 1; align-self: center; }
  body.quick-focus-open .quick-cover { width: min(72vw,42vh); height: min(72vw,42vh); }
  body.quick-focus-open .quick-player-controls { grid-row: 2; }
  body.quick-focus-open .quick-player-right { grid-row: 3; }
  .shell:not(.subpage-shell) .services,
  .shell:not(.subpage-shell) .automation {
    padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
  }
  .accounts { padding: 18px; border-radius: 23px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-actions { justify-content: stretch; flex-direction: column; align-items: stretch; }
  .activity-dashboard, .media-columns { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .subpage-shell .standalone-panel { margin-top: 30px; }
  .subpage-shell .search-page,
  .subpage-shell .accounts.standalone-panel,
  .subpage-shell .library-page {
    padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  .library-heading { align-items: stretch; flex-direction: column; }
  .library-search { width: 100%; }
  .poster-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .poster-copy { padding: 7px 1px 0; }
  .poster-copy strong { font-size: .78rem; }
  .poster-copy small { font-size: .68rem; }
  .library-refresh { width: 100%; margin-left: 0; }
  .track-setup { grid-template-columns: 1fr; padding: 22px 16px; }
  .track-setup > div, .track-setup .primary-action { grid-column: 1; }
  .custom-video-controls { grid-template-columns: repeat(14,minmax(0,1fr)); align-items: center; gap: 5px; padding: 38px 8px 8px; }
  .custom-video-controls > button { grid-row: 3; grid-column: span 2; width: 100%; min-width: 0; height: 34px; padding: 0 3px; font-size: .74rem; }
  .player-utility-controls { grid-row: 3; grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; min-width: 0; }
  .player-utility-controls button { width: 100%; min-width: 0; height: 34px; padding: 0 3px; }
  .player-time { display: none; }
  .custom-video-controls .player-seek { grid-column: 1 / -1; grid-row: 1; height: 24px; }
  .player-track-control { grid-row: 2; }
  .player-audio-control { grid-column: 1 / 6; }
  .player-subtitle-control { grid-column: 6 / 11; }
  .player-quality-control { grid-column: 11 / 15; }
  .player-track-control select { height: 34px; padding: 0 5px; font-size: .7rem; }
  .player-volume-control { display: none; }
  .subtitle-overlay { bottom: 132px; font-size: var(--subtitle-size-mobile,clamp(16px,5vw,24px)); }
  .detail-hero { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 16px; }
  .detail-poster { width: min(170px,50vw); justify-self: start; }
  .detail-copy { min-width: 0; }
  .detail-copy h2 { font-size: 1.75rem; overflow-wrap: anywhere; }
  .detail-overview { grid-column: 1 / -1; font-size: .82rem; }
  .detail-actions { grid-column: 1 / -1; }
  .season-toolbar { justify-content: stretch; padding: 0 16px 16px; }
  .season-toolbar label { flex: 1 1 145px; }
  .season-toolbar select { width: 100%; min-width: 0; }
  .season-list { padding: 0 16px 20px; }
  .episode-row { grid-template-columns: 112px minmax(0,1fr); align-items: start; }
  .episode-actions { grid-column: 1 / -1; }
  .episode-actions { justify-content: stretch; }
  .episode-actions button { flex: 1; }
  .external-player-actions { grid-template-columns: 1fr; }
  .media-search-form, .search-layout { grid-template-columns: 1fr; }
  .top-media-toolbar { align-items: stretch; flex-direction: column; }
  .top-media-filters { display: grid; flex: none; grid-template-columns: 1fr 1fr; }
  .top-media-filters label { min-width: 0; }
  .top-media-filters input { max-width: none; }
  .top-media-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .top-media-actions .quiet { width: 100%; }
  .media-progress-panel { position: static; }
  .search-result { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 11px; padding: 11px; }
  .search-result-poster { width: 64px; border-radius: 8px; }
  .search-result-actions { grid-column: 1 / -1; justify-items: stretch; }
  .search-result-actions .primary-action { width: 100%; }
  .series-picker-grid { grid-template-columns: 1fr; }
  .series-picker-grid button { width: 100%; }
  .activity-panel-wide { grid-column: auto; }
  .grid { grid-template-columns: 1fr; }
  .state { font-size: 0; }
  .state::before { width: 9px; height: 9px; }
  footer { flex-direction: column; gap: 5px; }
  .account-item { align-items: flex-start; flex-direction: column; }
}

/* Muziekervaring */
.music-app { gap: 18px; }
.music-sidebar { overflow: hidden; }
.music-source { min-height: 45px; margin: 2px 0; border-radius: 12px; }
.music-source.active { border-left: 0; color: var(--text); background: linear-gradient(90deg,rgba(var(--art-rgb),.17),rgba(var(--art-rgb),.055)); box-shadow: inset 0 0 0 1px rgba(var(--art-rgb),.16); }
.youtube-download-open { display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 5px 12px 16px; padding: 11px; border: 1px solid rgba(var(--art-rgb),.18); border-radius: 15px; color: var(--text); background: linear-gradient(135deg,rgba(var(--art-rgb),.13),rgba(255,72,72,.08)); text-align: left; cursor: pointer; }
.youtube-download-open > svg:first-child { width: 38px; height: 38px; padding: 8px; border-radius: 11px; color: #fff; background: #ff3131; }
.youtube-download-open span { display: grid; gap: 2px; min-width: 0; }
.youtube-download-open strong { font-size: .82rem; }
.youtube-download-open small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.youtube-download-panel { margin-bottom: 20px; padding: 20px; border: 1px solid rgba(var(--art-rgb),.18); border-radius: 20px; background: linear-gradient(145deg,rgba(var(--art-rgb),.09),rgba(255,255,255,.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,.48); }
html[data-theme="dark"] .youtube-download-panel { background: linear-gradient(145deg,rgba(var(--art-rgb),.13),rgba(255,255,255,.025)); }
.youtube-download-heading { display: flex; justify-content: space-between; gap: 18px; }
.youtube-download-heading h3 { margin: 2px 0 4px; font-size: 1.55rem; letter-spacing: -.035em; }
.youtube-download-heading p { margin: 0; color: var(--muted); }
.youtube-download-form { display: grid; grid-template-columns: minmax(240px,1fr) minmax(160px,220px) auto; gap: 12px; align-items: end; margin: 18px 0 12px; }
.youtube-download-form label { display: grid; gap: 6px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.youtube-download-form input,.youtube-download-form select { width: 100%; min-height: 46px; }
.youtube-download-form button { min-height: 46px; }
.youtube-download-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.youtube-download-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.youtube-download-item > svg { width: 42px; height: 42px; padding: 10px; border-radius: 12px; color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.10); }
.youtube-download-copy { display: grid; gap: 3px; min-width: 0; }
.youtube-download-copy strong,.youtube-download-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-download-copy small { color: var(--muted); }
.youtube-progress { grid-column: 2 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(var(--art-rgb),.12); }
.youtube-progress span { display: block; height: 100%; background: rgb(var(--art-rgb)); }
.playlist-heading-actions button { display: inline-flex; align-items: center; gap: 6px; }
.music-player { left: 50%; bottom: 12px; width: min(1180px,calc(100% - 28px)); min-height: 92px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.58); border-radius: 24px; background: color-mix(in srgb,var(--glass-strong) 88%,transparent); box-shadow: 0 24px 80px rgba(20,27,40,.22),inset 0 1px 0 rgba(255,255,255,.66); backdrop-filter: blur(30px) saturate(1.45); }
body.music-focus-open .music-player { color: var(--text); background-color: var(--glass-strong); background-image: radial-gradient(circle at 50% 0,rgba(var(--art-rgb),.25),transparent 48%),linear-gradient(150deg,rgba(var(--art-rgb),.10),transparent 58%); box-shadow: 0 34px 110px rgba(var(--art-rgb),.22),0 28px 90px rgba(20,28,42,.30),inset 0 1px 0 rgba(255,255,255,.58); backdrop-filter: blur(30px) saturate(1.4); }
html[data-theme="dark"] .music-player { border-color: rgba(255,255,255,.10); box-shadow: 0 28px 90px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.07); }
.music-body { padding-bottom: 122px; }
.now-cover { width: 62px; height: 62px; border-radius: 16px; box-shadow: 0 10px 28px rgba(var(--art-rgb),.24); }
.player-buttons { gap: 7px; }
.player-buttons button,.player-extras button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; transition: color .18s ease,background .18s ease,transform .18s ease; }
.player-buttons button:hover,.player-extras button:hover,.player-buttons button.active { color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.11); transform: translateY(-1px); }
.player-buttons .music-play-button { width: 52px; height: 52px; border-radius: 17px; color: #271506; background: linear-gradient(135deg,rgb(var(--art-rgb)),color-mix(in srgb,rgb(var(--art-rgb)) 52%,var(--accent-strong))); box-shadow: 0 12px 30px rgba(var(--art-rgb),.32); }
.player-buttons .music-play-button svg { width: 24px; height: 24px; fill: currentColor; }
.player-extras button { display: inline-flex; width: auto; padding: 0 10px; gap: 6px; }
.player-progress input,.player-extras input { accent-color: rgb(var(--art-rgb)); }
@media (max-width: 820px) {
  .youtube-download-form { grid-template-columns: 1fr; }
  .music-player { bottom: 8px; width: calc(100% - 16px); border-radius: 20px; }
  .player-extras { display: none; }
  body.music-focus-open .player-extras { display: flex; }
  .now-cover { width: 50px; height: 50px; border-radius: 13px; }
}

/* Touchscreens houden :hover anders vast tot de volgende tik. Alleen echte
   actieve spelerstanden blijven daarom blauw op apparaten zonder hover. */
@media (hover: none) {
  .player-buttons button:hover,
  .player-extras button:hover,
  .quick-player-controls button:hover {
    color: var(--muted);
    background: transparent;
    transform: none;
  }
  .player-buttons button.active,
  .player-extras button.active,
  .quick-player-controls button.active {
    color: rgb(var(--art-rgb));
    background: rgba(var(--art-rgb),.11);
  }
  .player-buttons .music-play-button:hover,
  .quick-player-controls .quick-play:hover {
    color: #271506;
    background: linear-gradient(135deg,rgb(var(--art-rgb)),color-mix(in srgb,rgb(var(--art-rgb)) 52%,var(--accent-strong)));
  }
}

@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

@media (max-width: 900px) {
  .music-body { padding-bottom: 160px; }
  .music-app { grid-template-columns: 1fr; }
  .music-app.music-navigation-collapsed { grid-template-columns: 1fr; }
  .music-sidebar { max-height: none; }
  .music-sidebar.collapsed { padding: 12px 14px; }
  .music-sidebar.collapsed .music-sidebar-heading { justify-content: space-between; }
  .music-sidebar.collapsed .music-sidebar-title, .music-sidebar.collapsed .music-sidebar-toggle span { display: block; }
  .music-sidebar.collapsed .music-sidebar-title .eyebrow { display: none; }
  .music-sidebar.collapsed .music-sidebar-title h1 { font-size: 1.2rem; }
  .music-sidebar.collapsed .music-sidebar-toggle { width: auto; height: 42px; padding: 8px 11px; }
  .music-sources { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: min(52vh,520px); overflow: auto; }
  .music-nav-heading { grid-column: 1 / -1; }
  .playlist-create { margin-top: 14px; }
  .music-toolbar { grid-template-columns: minmax(0,1fr) auto auto; }
  .music-toolbar .music-search { grid-column: 1 / -1; order: 1; }
  .music-sort-toggle { display: inline-flex; order: 2; }
  .music-toolbar #music-refresh { order: 3; }
  .music-sort-control { grid-column: 1 / -1; order: 4; }
  .music-toolbar.music-sort-collapsed .music-sort-control { display: none; }
  .music-table-heading, .music-track { grid-template-columns: 28px minmax(0,1fr) 52px 108px; }
  .music-table-heading span:nth-child(3), .track-album { display: none; }
  .music-player { grid-template-columns: 1fr auto; gap: 8px; min-height: 148px; }
  .player-center { grid-column: 1 / -1; grid-row: 1; }
  .now-playing { grid-column: 1; grid-row: 2; }
  .player-extras { grid-column: 2; grid-row: 2; }
  .music-volume-control { display: none; }
  body.music-focus-open .music-player { top: 0; right: 0; bottom: 0; left: 0; width: 100%; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto auto; gap: 18px; padding: max(58px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; transform: none; }
  body.music-focus-open .now-playing { grid-column: 1; grid-row: 1; align-self: center; }
  body.music-focus-open .now-cover { width: min(72vw,42vh); height: min(72vw,42vh); }
  body.music-focus-open .player-center { grid-column: 1; grid-row: 2; width: 100%; }
  body.music-focus-open .player-extras { grid-column: 1; grid-row: 3; justify-content: center; }
  body.music-focus-open #music-replace-current:not([hidden]) { display: inline-flex; }
}

@media (max-width: 560px) {
  .music-shell { width: 100%; }
  .music-app { margin-top: 22px; }
  .music-sidebar, .music-content { border-right: 0; border-left: 0; border-radius: 0; }
  .music-content-heading { align-items: start; flex-direction: column; }
  .music-heading-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .music-dedupe-toggle { max-width: 100%; }
  .music-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .music-toolbar #music-refresh { grid-column: 1 / -1; width: 100%; }
  .music-toolbar .quiet { width: 100%; }
  .music-add-toolbar { align-items: center; flex-direction: row; gap: 8px; }
  .music-add-toolbar label { min-width: 0; align-items: center; flex: 1 1 auto; flex-direction: row; gap: 5px; white-space: nowrap; }
  .music-add-toolbar select { width: min(170px, 52vw); flex: 1 1 auto; }
  .music-table-heading { display: none; }
  .music-track-list { margin-top: 12px; }
  .music-track, .music-track.has-replace-action { grid-template-columns: minmax(0,1fr) auto; gap: 5px; padding: 8px 0 8px 3px; }
  .track-number, .track-duration { display: none; }
  .track-identity { grid-column: 1; grid-row: 1; }
  .track-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; max-width: none; }
  .track-actions-add { grid-column: 2; grid-row: 1; display: flex; align-self: center; justify-self: end; justify-content: flex-end; gap: 3px; }
  .track-action { min-height: 40px; border-radius: 9px; font-weight: 700; }
  .track-actions-add .track-action { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; line-height: 0; }
  .track-actions-add .track-action svg { width: 15px; height: 15px; }
  .track-action.move-up::after { content: ' Omhoog'; }
  .track-action.move-down::after { content: ' Omlaag'; }
  .track-action.remove-track::after { content: ' Wissen'; }
  .music-sources { grid-template-columns: 1fr; }
  .music-nav-heading { grid-column: auto; }
  .now-cover { width: 44px; height: 44px; }
  .now-copy { max-width: 44vw; }
  .player-extras span, .player-extras input { display: none; }
  .lyrics-panel { top: max(10px,env(safe-area-inset-top)); right: 8px; bottom: calc(108px + env(safe-area-inset-bottom)); width: calc(100% - 16px); max-height: none; padding: 16px; }
  .lyrics-panel header { display: grid; }
}

/* Media Hub 2026-thema: licht als standaard, bioscoopdonker als keuze. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090a0c;
  --panel: rgba(20, 22, 26, .92);
  --panel-strong: #15171b;
  --text: #f6f7f9;
  --muted: #a2a7b0;
  --line: rgba(255, 255, 255, .12);
  --accent: #e87d25;
  --accent-strong: #b9570b;
  --accent-rgb: 232,125,37;
  --green: rgb(var(--art-rgb));
  --shadow: 0 26px 75px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% -12%, rgba(var(--art-rgb), .14), transparent 38rem),
    radial-gradient(circle at 100% 15%, rgba(var(--art-rgb), .08), transparent 34rem),
    var(--bg);
}

.theme-toggle { flex: 0 0 auto; white-space: nowrap; }
body > .theme-toggle { position: fixed; z-index: 150; top: max(14px,env(safe-area-inset-top)); right: 14px; background: var(--panel-strong); box-shadow: var(--shadow); }

.topbar { position: relative; z-index: 20; padding: 10px 0; }
.services, .automation, .accounts, .search-page, .library-page, .home-recent-panel, .home-quick-player,
.music-sidebar, .music-content, .login-card {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.card, .home-recent-card, .activity-panel, .activity-item, .account-card, .search-result,
.episode-row, .music-track, .track-action {
  border-color: var(--line);
}
.card, .home-recent-card, .activity-item, .search-result, .episode-row { background: rgba(255,255,255,.64); }
.card:hover, .home-recent-card:hover, .poster-card:focus .poster-image, .poster-card:hover .poster-image {
  border-color: color-mix(in srgb,var(--green) 52%,transparent);
  box-shadow: 0 18px 38px rgba(22,31,44,.16);
}
.poster-card { border-radius: 14px; transition: transform .2s ease,filter .2s ease; }
.poster-card:hover, .poster-card:focus { z-index: 2; transform: translateY(-5px) scale(1.025); outline: none; }
.poster-card:focus-visible { outline: 3px solid color-mix(in srgb,var(--green) 72%,white); outline-offset: 5px; }
.poster-image { border-color: var(--line); box-shadow: 0 12px 28px rgba(26,36,50,.16); }
.poster-copy strong { font-weight: 760; letter-spacing: -.015em; }
.library-filter, .quiet, .refresh { color: var(--muted); background: rgba(255,255,255,.7); }
.library-filter.active { color: #fff; }
.primary-action, .save-settings, .install { color: #271506; }
.eyebrow, .detail-meta, .episode-state { color: color-mix(in srgb,var(--green) 84%,var(--text)); }
.settings-grid label, .account-card label, .account-form label, .media-search-form label,
.track-setup label, .media-columns h4 { color: var(--text); }
.settings-grid input, .settings-grid select, .account-card input, .media-search-form input,
.media-search-form select, .track-setup select, .quick-source-label select, .music-toolbar input,
.music-toolbar select, .playlist-create input, .music-add-toolbar select {
  border-color: var(--line); color: var(--text); background: var(--panel-strong);
}
.media-dialog-close { background: var(--panel-strong); }
.detail-poster, .search-result-poster, .poster-image, .track-cover, .now-cover, .quick-cover, .home-recent-cover {
  background: linear-gradient(145deg,#dfe6ef,#c9d5e3);
}
.external-player-card, .lyrics-panel { color: var(--text); background-color: var(--panel-strong); }
.music-source, .music-track, .track-copy strong, .now-copy strong { color: var(--text); }
.music-source:hover, .music-source.active, .music-track:hover, .music-track:focus-visible { color: var(--text); background: rgba(var(--art-rgb),.08); }
.music-player { border-color: var(--line); color: var(--text); background: color-mix(in srgb,var(--panel-strong) 96%,transparent); box-shadow: 0 -14px 36px rgba(28,39,55,.12); }
.music-player button, .quick-player-controls button { color: var(--muted); }
.quick-player-controls .quick-play, .player-buttons .music-play-button { color: #271506; background: var(--green); }
.track-copy small, .track-album, .track-duration, .now-copy small, .lyric-line { color: var(--muted); }
.plain-lyrics { color: var(--text); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .home-recent-card,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .search-result,
html[data-theme="dark"] .episode-row,
html[data-theme="dark"] .library-filter,
html[data-theme="dark"] .quiet,
html[data-theme="dark"] .refresh { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .detail-poster,
html[data-theme="dark"] .search-result-poster,
html[data-theme="dark"] .poster-image,
html[data-theme="dark"] .track-cover,
html[data-theme="dark"] .now-cover,
html[data-theme="dark"] .quick-cover,
html[data-theme="dark"] .home-recent-cover { background: linear-gradient(145deg,#1d2938,#111820); }
html[data-theme="dark"] .primary-action,
html[data-theme="dark"] .save-settings,
html[data-theme="dark"] .install,
html[data-theme="dark"] .library-filter.active { color: #271506; }
/* Secundaire homeknoppen mogen niet de donkere primary-knoptekst erven. */
html[data-theme="dark"] .install.secondary {
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}
/* De actieve film/serie-filter moet in dark mode dezelfde duidelijke accentknop zijn. */
html[data-theme="dark"] .library-filter.active {
  color: #271506;
  border-color: transparent;
  background: linear-gradient(135deg,color-mix(in srgb,rgb(var(--art-rgb)) 86%,white),var(--accent-strong));
}
html[data-theme="dark"] .music-source:hover,
html[data-theme="dark"] .music-source.active,
html[data-theme="dark"] .music-track:hover,
html[data-theme="dark"] .music-track:focus-visible { background: rgba(255,255,255,.07); }

/* Video.js blijft altijd filmisch donker, onafhankelijk van het paginathema. */
.player-stage .video-js { width: 100%; height: 100%; min-height: 0; background: #000; font-size: 14px; }
.player-stage .video-js .vjs-tech { object-fit: contain; }
.player-stage .video-js .vjs-control-bar { height: 4.4em; padding: 0 .6em; background: linear-gradient(transparent,rgba(0,0,0,.92)); }
.player-stage .video-js .vjs-progress-control { position: absolute; right: 1.2em; bottom: 4.25em; left: 1.2em; width: auto; height: 1.4em; }
.player-stage .video-js .vjs-play-progress, .player-stage .video-js .vjs-volume-level { background: var(--green); }
.player-stage .video-js .vjs-big-play-button { top: 50%; left: 50%; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(0,0,0,.62); line-height: 2.25em; backdrop-filter: blur(10px); }
.player-stage .custom-video-controls, .player-stage .player-center-toggle { display: none; }
.player-stage .subtitle-overlay { z-index: 3; bottom: clamp(76px,12%,138px); }
.player-stage:fullscreen, .player-stage:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }

/* De dialoog volgt het paginathema; alleen het beeldvlak blijft filmisch zwart. */
.player-dialog {
  color: var(--text);
  background:
    linear-gradient(135deg,rgba(var(--art-rgb),.12),transparent 48%),
    var(--bg);
}
.player-topbar { padding: 7px 8px 12px; }
.player-topbar .quiet { display: inline-flex; align-items: center; gap: 7px; }
.player-topbar svg { width: 17px; height: 17px; }
.track-setup { background: var(--panel-strong); box-shadow: var(--shadow); }
.track-setup label { color: var(--muted); }
.track-setup select { color: var(--text); background: var(--input-bg,var(--panel)); }
.player-dialog > #player-status { color: var(--muted); }
.player-stage .custom-video-controls { display: grid; }
.player-stage .player-center-toggle { display: grid; }
.player-stage .video-js .vjs-control-bar,
.player-stage .video-js .vjs-big-play-button,
.player-stage .video-js .vjs-live-control { display: none !important; }
.custom-video-controls button { position: relative; }
.custom-video-controls button svg { width: 19px; height: 19px; stroke-width: 2.2; }
.custom-video-controls button small { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-45%); color: #fff; font-size: .49rem; font-weight: 900; }
.player-center-toggle svg { width: 30px; height: 30px; fill: currentColor; }
.player-seek { height: 38px; cursor: pointer; }
.player-seek,
.player-volume-control input[type="range"] {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--green);
  background: transparent !important;
  box-shadow: none !important;
}
.player-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,.25); }
.player-seek::-webkit-slider-thumb { margin-top: -5px; }
.youtube-job-progress { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(var(--art-rgb),.12); }
.youtube-job-progress span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--art-rgb)); transition: width .3s ease; }
.youtube-download-item b { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.youtube-download-item.completed b { color: var(--green); }
.youtube-download-item.error b { color: #c43b4d; }
.youtube-search-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 18px; margin: 22px 0; padding: 20px; border: 1px solid rgba(var(--art-rgb),.18); border-radius: 22px; background: linear-gradient(135deg,rgba(var(--art-rgb),.11),rgba(255,255,255,.48)); }
html[data-theme="dark"] .youtube-search-card { background: linear-gradient(135deg,rgba(var(--art-rgb),.15),rgba(255,255,255,.025)); }
.youtube-search-card h2,.youtube-search-card p { margin: 0; }
.youtube-search-card h2 { letter-spacing: -.035em; }
.youtube-search-card p:not(.eyebrow) { margin-top: 5px; color: var(--muted); }
.youtube-search-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#ff3131,#e91515); box-shadow: 0 12px 28px rgba(229,21,21,.22); }
.youtube-search-icon svg { width: 29px; height: 29px; }
.youtube-search-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.youtube-search-actions a,.library-add { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; text-decoration: none; }
.youtube-search-actions svg,.library-add svg { width: 18px; height: 18px; }
.youtube-library { display: grid; gap: 20px; }
.youtube-library-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.youtube-library-heading h1 { margin: 0; }
.youtube-library-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 18px; }
.youtube-video-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); box-shadow: 0 14px 40px rgba(22,30,43,.08); }
.youtube-video-open { position: relative; display: grid; width: 100%; aspect-ratio: 16/9; place-items: center; overflow: hidden; border: 0; color: #fff; background: radial-gradient(circle at 35% 25%,rgba(var(--art-rgb),.58),transparent 50%),linear-gradient(145deg,#152238,#070b12); cursor: pointer; }
.youtube-video-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%,rgba(0,0,0,.58)); }
.youtube-video-open > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.youtube-play-badge { z-index: 1; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: #fff; background: rgba(2,8,16,.66); box-shadow: 0 12px 30px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.youtube-play-badge svg { width: 23px; height: 23px; fill: currentColor; }
.youtube-video-copy { padding: 14px 15px 16px; }
.youtube-video-copy strong { display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.youtube-video-copy small { display: block; margin-top: 5px; color: var(--muted); }
.youtube-viewer-card { width: min(1100px,calc(100vw - 28px)); }
.youtube-viewer-card video { display: block; width: 100%; max-height: 76vh; margin-top: 14px; border-radius: 16px; background: #000; }
.youtube-viewer-card iframe { display: block; width: 100%; aspect-ratio: 16/9; margin-top: 14px; border: 0; border-radius: 16px; background: #000; }
.youtube-discovery { display: grid; gap: 16px; margin: 22px 0 30px; padding: clamp(18px,3vw,28px); border: 1px solid rgba(var(--art-rgb),.18); border-radius: 24px; background: linear-gradient(145deg,rgba(var(--art-rgb),.10),rgba(255,255,255,.34)); }
html[data-theme="dark"] .youtube-discovery { background: linear-gradient(145deg,rgba(var(--art-rgb),.14),rgba(255,255,255,.025)); }
.youtube-discovery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.youtube-discovery-heading h2,.youtube-discovery-heading p { margin: 0; }
.youtube-discovery-heading h2 { font-size: clamp(1.7rem,3vw,2.35rem); letter-spacing: -.045em; }
.youtube-discovery-heading p:not(.eyebrow) { max-width: 720px; margin-top: 7px; color: var(--muted); }
.youtube-discovery-heading a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; text-decoration: none; }
.youtube-discovery-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.youtube-discovery-search input { width: 100%; min-height: 50px; }
.youtube-discovery-search button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 7px; padding-inline: 20px; }
.youtube-history { display: flex; flex-wrap: wrap; gap: 7px; }
.youtube-history:empty { display: none; }
.youtube-history button { min-height: 34px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; color: var(--muted); background: var(--glass); font-size: .76rem; font-weight: 760; }
.youtube-recommendation-heading { margin-top: 5px; }
.youtube-recommendation-heading h3 { margin: 0; font-size: 1.25rem; }
.youtube-discovery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(225px,1fr)); gap: 16px; }
.youtube-discovery-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--glass-strong); box-shadow: 0 12px 32px rgba(22,30,43,.08); }
.youtube-discovery-preview { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 0; padding: 0; background: #080b10; }
.youtube-discovery-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.youtube-discovery-preview:hover img { transform: scale(1.035); }
.youtube-discovery-preview span { position: absolute; right: 12px; bottom: 10px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.youtube-discovery-preview svg { width: 18px; height: 18px; fill: currentColor; }
.youtube-discovery-copy { display: grid; gap: 5px; padding: 13px 14px 14px; }
.youtube-discovery-copy strong { display: -webkit-box; min-height: 2.7em; overflow: hidden; color: var(--text); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.youtube-discovery-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.youtube-discovery-actions { display: flex; gap: 7px; margin-top: 5px; }
.youtube-discovery-actions button { flex: 1 1 0; justify-content: center; }
.music-replace-card { box-sizing: border-box; width: min(920px,calc(100vw - 28px)); max-height: min(900px,calc(100vh - 28px)); overflow-y: auto; padding: clamp(24px,4vw,36px); }
.music-replace-card > .media-dialog-close { top: 0; margin: 0 0 14px 18px; }
.music-replace-card > h2,.music-replace-card > p { margin-top: 0; }
.music-replace-card > h2 { padding-top: 4px; overflow-wrap: anywhere; }
.music-replace-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin: 16px 0 8px; }
.music-replace-search input { min-height: 46px; }
.music-replace-search button { display: inline-flex; align-items: center; gap: 7px; }
.music-metadata-tools { display: flex; align-items: center; gap: 10px; margin: 13px 0 5px; }
.music-metadata-tools button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; border-color: rgba(var(--art-rgb),.22); color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.07); }
.music-metadata-tools button svg { width: 15px; height: 15px; }
.music-metadata-tools small { min-width: 150px; flex: 1 1 220px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.music-metadata-results { display: grid; max-height: 278px; gap: 7px; margin: 10px 0 5px; overflow-y: auto; padding: 2px; scrollbar-gutter: stable; }
.music-metadata-results[hidden] { display: none; }
#music-replace-status { min-height: 0; margin: 6px 0 0; }
#music-replace-status:empty { display: none; }
.music-metadata-result { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 8px; color: var(--text); background: var(--glass); text-align: left; cursor: pointer; }
.music-metadata-result:hover,.music-metadata-result.selected { border-color: rgba(var(--art-rgb),.42); background: rgba(var(--art-rgb),.09); }
.music-metadata-cover { position: relative; display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border-radius: 10px; color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.12); }
.music-metadata-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-metadata-copy { display: grid; min-width: 0; gap: 2px; }
.music-metadata-copy strong,.music-metadata-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-metadata-copy strong { font-size: .8rem; }
.music-metadata-copy small { color: var(--muted); font-size: .68rem; }
.music-metadata-choice { color: rgb(var(--art-rgb)); font-size: .68rem; font-weight: 850; }
.music-replace-preview { overflow: hidden; margin: 14px 0; border-radius: 17px; background: #000; aspect-ratio: 16/9; }
.music-replace-preview iframe { width: 100%; height: 100%; border: 0; }
.music-replace-results { display: grid; gap: 9px; margin-top: 12px; }
.music-replace-result { display: grid; grid-template-columns: 116px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--glass); }
.music-replace-result img { width: 116px; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover; background: rgba(var(--art-rgb),.08); }
.music-replace-copy { min-width: 0; }
.music-replace-copy strong,.music-replace-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-replace-copy small { margin-top: 5px; color: var(--muted); }
.music-replace-actions { display: grid; gap: 6px; }
.music-replace-actions button { min-height: 36px; white-space: nowrap; }
.music-replace-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: var(--muted); line-height: 1.5; }
.music-replace-note svg { flex: 0 0 auto; width: 18px; height: 18px; color: rgb(var(--art-rgb)); }
.track-action.replace-track { width: 29px; min-width: 29px; min-height: 29px; padding: 0 0 2px; border-color: transparent; color: var(--muted); background: transparent; font-size: .88rem; opacity: .66; }
.track-action.replace-track:hover,.track-action.replace-track:focus-visible { border-color: rgba(var(--art-rgb),.18); color: rgb(var(--art-rgb)); background: rgba(var(--art-rgb),.07); opacity: 1; }
#music-replace-current { display: none; }
body.music-focus-open::before { background: radial-gradient(circle at 50% 8%,rgba(var(--art-rgb),.34),transparent 42%),color-mix(in srgb,var(--bg) 76%,transparent); backdrop-filter: blur(30px) saturate(1.35); }
body.music-focus-open .music-player { color: var(--text); background-color: color-mix(in srgb,var(--panel-strong) 92%,transparent); background-image: radial-gradient(circle at 50% 0,rgba(var(--art-rgb),.25),transparent 48%),linear-gradient(150deg,rgba(var(--art-rgb),.10),transparent 58%); }

/* Oudere LG webOS-browsers kennen dvh niet en scrollen geneste vensters niet vanzelf. */
.media-dialog { overflow: hidden; }
.media-dialog-card:focus { outline: none; }
@media (min-width: 900px) and (hover: none) {
  .poster-card, .episode-row button, .media-dialog-close { scroll-margin: 80px; }
  .poster-card:focus .poster-image, .episode-row button:focus { outline: 4px solid var(--green); outline-offset: 4px; }
}

/* Media Hub Aurora — content-reactief designsysteem */
:root {
  --accent: #e87d25;
  --accent-strong: #b9570b;
  --accent-rgb: 232,125,37;
  --art-rgb: var(--accent-rgb);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.92);
  --input-bg: rgba(255,255,255,.97);
  --input-border: rgba(var(--art-rgb),.14);
}
html[data-theme="dark"] {
  --glass: rgba(13,16,24,.76);
  --glass-strong: rgba(15,18,27,.92);
  --input-bg: rgba(255,255,255,.065);
  --input-border: rgba(255,255,255,.13);
}
* { scrollbar-width: thin; scrollbar-color: rgba(var(--art-rgb),.58) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(var(--art-rgb),.55); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--art-rgb),.82); background-clip: padding-box; }
::selection { color: #fff; background: rgb(var(--art-rgb)); }
html[data-theme="dark"] ::selection { color: #080a0f; background: color-mix(in srgb,rgb(var(--art-rgb)) 68%,white); }
body { position: relative; isolation: isolate; min-height: 100vh; background: color-mix(in srgb,var(--bg) 94%,rgb(var(--art-rgb)) 6%); }
.content-aurora { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 12% 8%,rgba(var(--art-rgb),.20),transparent 31rem),radial-gradient(circle at 86% 22%,rgba(var(--art-rgb),.12),transparent 30rem),linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--bg) 90%,rgb(var(--art-rgb)) 10%)); transition: background .6s ease; }
.content-aurora::before { content: ""; position: absolute; inset: -8%; background-image: var(--content-art); background-position: center 18%; background-size: cover; filter: blur(70px) saturate(1.45); opacity: 0; transform: scale(1.1); transition: opacity .55s ease; }
.content-aurora::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,.68),rgba(246,248,252,.90) 45%,var(--bg)); }
html[data-theme="dark"] .content-aurora::after { background: linear-gradient(180deg,rgba(7,9,14,.58),rgba(7,9,14,.90) 48%,var(--bg)); }
body.has-content-art .content-aurora::before { opacity: .42; }
.shell { position: relative; z-index: 1; width: min(1460px,calc(100% - 38px)); }
.topbar { position: sticky; z-index: 90; top: 10px; min-height: 64px; margin: 10px 0 26px; padding: 9px 10px 9px 14px; border: 1px solid rgba(255,255,255,.58); border-radius: 20px; background: color-mix(in srgb,var(--glass-strong) 88%,transparent); box-shadow: 0 16px 42px rgba(28,34,48,.10),inset 0 1px 0 rgba(255,255,255,.64); backdrop-filter: blur(24px) saturate(1.35); }
html[data-theme="dark"] .topbar { border-color: rgba(255,255,255,.09); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.brand img { width: 42px; height: 42px; filter: drop-shadow(0 8px 16px rgba(var(--art-rgb),.26)); }
.brand strong { letter-spacing: -.025em; }
.account-actions { display: flex; align-items: center; min-width: 0; }
.global-links { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.38); }
html[data-theme="dark"] .global-links { background: rgba(255,255,255,.035); }
.nav-link,.nav-menu-toggle,.nav-dropdown-item { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 760; text-decoration: none; cursor: pointer; transition: color .18s ease,background .18s ease,transform .18s ease; }
.nav-link { min-height: 39px; padding: 0 12px; border-radius: 11px; }
.nav-link svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.nav-link:hover,.nav-link.active { color: var(--text); background: var(--glass-strong); box-shadow: 0 6px 18px rgba(20,28,42,.08); }
.nav-link.active { color: rgb(var(--art-rgb)); }
.nav-menu { position: relative; margin-left: 7px; }
.nav-menu-toggle { min-height: 47px; padding: 0 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--glass-strong); box-shadow: 0 8px 22px rgba(20,28,42,.08); }
.nav-menu-toggle:hover,.nav-menu-toggle[aria-expanded="true"] { color: var(--text); transform: translateY(-1px); }
.nav-dropdown { position: absolute; z-index: 100; top: calc(100% + 10px); right: 0; width: min(260px,calc(100vw - 28px)); padding: 9px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass-strong); box-shadow: 0 26px 70px rgba(18,25,38,.22); backdrop-filter: blur(28px) saturate(1.4); }
.nav-dropdown-item { width: 100%; min-height: 46px; justify-content: flex-start; padding: 0 13px; border-radius: 11px; background: transparent; }
.nav-dropdown-item:hover,.nav-dropdown-item.active { color: var(--text); background: rgba(var(--art-rgb),.10); }
.nav-dropdown-item.active { color: rgb(var(--art-rgb)); }
.nav-mobile-primary { display: none !important; }
.nav-logout { color: #d1495b; }
.nav-dropdown form { margin: 0; }
.standalone-panel,.services,.automation,.accounts,.search-page,.library-page,.home-recent-panel,.home-quick-player,.music-sidebar,.music-content,.login-card,.activity-panel { border-color: rgba(255,255,255,.58); border-radius: var(--radius-xl); background: color-mix(in srgb,var(--glass) 92%,transparent); box-shadow: 0 22px 70px rgba(26,34,48,.10),inset 0 1px 0 rgba(255,255,255,.62); backdrop-filter: blur(24px) saturate(1.22); }
html[data-theme="dark"] .standalone-panel,html[data-theme="dark"] .services,html[data-theme="dark"] .automation,html[data-theme="dark"] .accounts,html[data-theme="dark"] .search-page,html[data-theme="dark"] .library-page,html[data-theme="dark"] .home-recent-panel,html[data-theme="dark"] .home-quick-player,html[data-theme="dark"] .music-sidebar,html[data-theme="dark"] .music-content,html[data-theme="dark"] .login-card,html[data-theme="dark"] .activity-panel { border-color: rgba(255,255,255,.075); box-shadow: 0 25px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06); }
.page-title,.hero h1,.music-content-heading h2 { letter-spacing: -.055em; text-wrap: balance; }
.eyebrow { color: color-mix(in srgb,rgb(var(--art-rgb)) 72%,var(--accent-strong)); }
input,select,textarea,.library-search input,.login-form input,.settings-grid input,.settings-grid select,.account-card input,.media-search-form input,.media-search-form select,.track-setup select,.quick-source-label select,.music-toolbar input,.music-toolbar select,.playlist-create input,.music-add-toolbar select { border: 1px solid var(--input-border); color: var(--text); background: var(--input-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.82),0 7px 20px rgba(22,30,43,.035); }
input::placeholder,textarea::placeholder { color: color-mix(in srgb,var(--muted) 72%,transparent); }
input:focus,select:focus,textarea:focus { border-color: rgba(var(--art-rgb),.62); outline: 3px solid rgba(var(--art-rgb),.14); box-shadow: 0 10px 30px rgba(var(--art-rgb),.10); }
.primary-action,.save-settings,.install,.library-filter.active { border: 0; color: #271506; background: linear-gradient(135deg,color-mix(in srgb,rgb(var(--art-rgb)) 86%,white),var(--accent-strong)); box-shadow: 0 10px 28px rgba(var(--art-rgb),.24); }
.quiet,.refresh,.library-filter { border-color: var(--line); background: color-mix(in srgb,var(--glass-strong) 88%,transparent); }
.poster-image { border-radius: 18px; }
.poster-card:hover .poster-image,.poster-card:focus .poster-image { box-shadow: 0 24px 55px rgba(var(--art-rgb),.28); }
.media-dialog-backdrop { background: rgba(5,8,14,.62); backdrop-filter: blur(18px) saturate(1.3); }
.media-dialog-card { border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: color-mix(in srgb,var(--glass-strong) 94%,transparent); box-shadow: 0 35px 110px rgba(0,0,0,.42); }
.activity-badge,.watched-badge { box-shadow: 0 5px 16px rgba(12,20,32,.12); }
button:focus-visible,a:focus-visible { outline: 3px solid color-mix(in srgb,rgb(var(--art-rgb)) 70%,white); outline-offset: 3px; }

@media (max-width: 1120px) {
  .global-links .nav-link span { display: none; }
  .nav-link { width: 42px; padding: 0; }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 20px,1460px); }
  .topbar { top: 6px; min-height: 58px; margin-top: 6px; border-radius: 17px; }
  .brand small { display: none; }
  .global-links { display: none; }
  .youtube-discovery-heading { display: grid; }
  .youtube-discovery-heading a { width: 100%; justify-content: center; }
  .youtube-discovery-search { grid-template-columns: 1fr; }
  .youtube-discovery-grid { grid-template-columns: 1fr; }
  .nav-menu-toggle { min-height: 42px; padding: 0 12px; }
  .nav-menu-toggle span { display: inline; }
  .nav-dropdown { left: auto; right: 0; width: min(300px,calc(100vw - 24px)); max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-mobile-primary { display: inline-flex !important; }
  .nav-dropdown-item { min-height: 44px; }
  .standalone-panel,.services,.automation,.accounts,.search-page,.library-page,.home-recent-panel,.home-quick-player,.music-sidebar,.music-content,.activity-panel { border-radius: 21px; }
  .settings-page { margin-top: 26px; padding: 18px 14px; }
  .settings-page .section-heading { align-items: stretch; flex-direction: column; gap: 13px; }
  .settings-page .section-heading .primary-action { width: 100%; min-height: 46px; }
  .settings-page .automation-intro { margin: 0 0 12px; font-size: .9rem; }
  .settings-page .automation-status { min-height: 20px; margin-bottom: 12px; font-size: .78rem; }
  .settings-page .settings-grid { gap: 10px; }
  .settings-page .settings-grid label { padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--glass-strong) 74%,transparent); }
  .settings-page .settings-grid input,.settings-page .settings-grid select { min-height: 44px; }
  .settings-page .settings-grid .toggle { padding: 13px 12px; }
  .settings-page .settings-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 9px; }
  .settings-page .settings-actions button { width: 100%; min-height: 46px; }
}

@media (max-width: 720px) {
  .youtube-search-card { grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 16px; }
  .youtube-search-icon { width: 48px; height: 48px; border-radius: 14px; }
  .youtube-search-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
  .search-page { padding: 20px 14px; }
  .search-page .automation-intro { margin-top: 12px; font-size: .9rem; }
  .media-search-form { gap: 10px; margin: 18px 0 12px; }
  .media-search-form input,.media-search-form select,.media-search-form .primary-action { min-height: 48px; }
  .media-search-form .primary-action { width: 100%; }
  .top-media-toolbar { gap: 9px; }
  .top-media-filters { grid-template-columns: 1fr; }
  .top-media-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .top-media-actions .quiet { justify-content: center; min-width: 0; padding-inline: 8px; }
  .search-results-panel,.media-progress-panel,.series-download-picker { padding: 15px; }
  .search-results-panel { min-height: 220px; }
  .search-result-actions { grid-template-columns: 1fr; justify-items: stretch; }
  .search-result-actions > * { width: 100%; justify-content: center; }
  .library-add { flex: 1 1 auto; }
  .custom-video-controls { grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: 24px auto 38px; align-items: center; gap: 6px; padding: 48px 8px max(8px,env(safe-area-inset-bottom)); }
  .custom-video-controls .player-time { grid-row: 1; grid-column: 1 / 4; display: flex; height: 24px; align-items: center; justify-content: flex-start; font-size: .68rem; }
  .custom-video-controls .player-seek { grid-row: 1; grid-column: 4 / -1; width: 100%; height: 24px; }
  .custom-video-controls .player-track-control { grid-row: 2; min-width: 0; }
  .custom-video-controls .player-audio-control { grid-column: 1 / 5; }
  .custom-video-controls .player-subtitle-control { grid-column: 5 / 9; }
  .custom-video-controls .player-quality-control { grid-column: 9 / 13; }
  .custom-video-controls > button { grid-row: 3; width: 100%; min-width: 0; height: 38px; padding: 0; }
  #player-toggle,#player-back,#player-forward,#player-fullscreen { grid-row: 3; }
  #player-toggle { grid-column: 1 / 3; }
  #player-back { grid-column: 3 / 5; }
  #player-forward { grid-column: 5 / 7; }
  .custom-video-controls .player-utility-controls { grid-row: 3; grid-column: 7 / 11; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; min-width: 0; }
  .custom-video-controls .player-utility-controls button { width: 100%; min-width: 0; height: 38px; padding: 0; }
  #player-fullscreen { grid-column: 11 / 13; }
  .custom-video-controls .player-track-control select { width: 100%; height: 36px; padding-right: 22px; text-overflow: ellipsis; }
  .subtitle-overlay { bottom: 178px; }
}

@media (max-width: 440px) {
  .custom-video-controls { grid-template-rows: 24px auto auto 38px; padding-top: 58px; }
  .custom-video-controls .player-audio-control { grid-row: 2; grid-column: 1 / 7; }
  .custom-video-controls .player-subtitle-control { grid-row: 2; grid-column: 7 / 13; }
  .custom-video-controls .player-quality-control { grid-row: 3; grid-column: 1 / 13; }
  .custom-video-controls > button { grid-row: 4; }
  #player-toggle,#player-back,#player-forward,#player-fullscreen { grid-row: 4; }
  .custom-video-controls .player-utility-controls { grid-row: 4; }
  .subtitle-overlay { bottom: 194px; }
  .youtube-library-grid { grid-template-columns: 1fr; }
  .search-page { padding-right: 10px; padding-left: 10px; }
  .search-result { grid-template-columns: 54px minmax(0,1fr); gap: 10px; padding: 10px; }
  .search-result-poster { width: 54px; }
  .search-result-copy p { margin-top: 5px; -webkit-line-clamp: 2; }
  .search-result-heading { gap: 5px; }
  .top-media-actions { grid-template-columns: 1fr; }
  .music-replace-search { grid-template-columns: 1fr; }
  .music-metadata-tools { align-items: flex-start; flex-direction: column; gap: 5px; margin: 8px 0 2px; }
  .music-metadata-tools small { min-width: 0; flex: 0 0 auto; }
  .music-replace-results { margin-top: 6px; }
  .music-metadata-result { grid-template-columns: 44px minmax(0,1fr); }
  .music-metadata-cover { width: 44px; height: 44px; }
  .music-metadata-choice { grid-column: 2; }
  .music-replace-card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: 8px auto; padding: 22px 16px max(24px,env(safe-area-inset-bottom)); border-radius: 22px; }
  .music-replace-card > .media-dialog-close { top: 0; margin-left: 12px; }
  .music-replace-result { grid-template-columns: 88px minmax(0,1fr); }
  .music-replace-result img { width: 88px; }
  .music-replace-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .track-actions-add { display: flex; justify-content: flex-end; }
  .track-action.replace-track { display: grid; width: 32px; min-width: 32px; min-height: 32px; justify-self: center; opacity: .72; }
}

@media (max-width: 900px) {
  body.music-focus-lyrics-open .music-shell { z-index: 170; }
  body.music-focus-open.music-focus-lyrics-open .music-player { visibility: hidden; pointer-events: none; }
  body.music-focus-open.music-focus-lyrics-open .lyrics-panel {
    position: fixed; z-index: 171; inset: 0; display: grid; width: 100vw; height: 100dvh; max-height: none;
    grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; margin: 0;
    padding: max(20px,env(safe-area-inset-top)) max(17px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(17px,env(safe-area-inset-left));
    border: 0; border-radius: 0; background-color: var(--bg);
    background-image: radial-gradient(circle at 50% 0,rgba(var(--art-rgb),.24),transparent 46%),linear-gradient(150deg,rgba(var(--art-rgb),.10),transparent 62%);
    box-shadow: none;
  }
  body.music-focus-open.music-focus-lyrics-open .lyrics-panel[hidden] { display: none; }
  body.music-focus-open.music-focus-lyrics-open .lyrics-panel header { display: flex; padding-right: 48px; }
  body.music-focus-open.music-focus-lyrics-open .lyrics-panel-controls { position: absolute; top: max(14px,env(safe-area-inset-top)); right: max(14px,env(safe-area-inset-right)); }
  body.music-focus-open.music-focus-lyrics-open #lyrics-refresh { display: none; }
  body.music-focus-open.music-focus-lyrics-open #lyrics-close { width: 42px; min-width: 42px; height: 42px; min-height: 42px; color: var(--text); background: var(--glass-strong); }
  body.music-focus-open.music-focus-lyrics-open .lyrics-content { min-height: 0; margin-top: 22px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 3px 32vh 0; }
  body.music-focus-open.music-focus-lyrics-open .lyric-line { padding: 12px 10px; font-size: clamp(1.08rem,5vw,1.45rem); line-height: 1.5; text-align: center; }
  body.music-focus-open.music-focus-lyrics-open .plain-lyrics { font-size: clamp(1.02rem,4.6vw,1.3rem); line-height: 1.9; text-align: center; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .player-dialog { padding: 0; }
  .player-dialog .player-topbar { position: absolute; z-index: 7; top: max(4px,env(safe-area-inset-top)); right: max(6px,env(safe-area-inset-right)); left: max(6px,env(safe-area-inset-left)); pointer-events: none; }
  .player-dialog .player-topbar > * { pointer-events: auto; }
  .player-dialog #player-status { display: none; }
  .player-dialog > .player-stage,.player-dialog > .track-setup { grid-row: 2; }
  .player-stage { border-radius: 0; }
  .custom-video-controls { box-sizing: border-box; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: 22px 34px 36px; align-items: center; gap: 5px; padding: 34px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .custom-video-controls .player-time { grid-row: 1; grid-column: 1 / 4; display: flex; height: 22px; align-items: center; font-size: .65rem; }
  .custom-video-controls .player-seek { grid-row: 1; grid-column: 4 / 13; width: 100%; height: 22px; }
  .custom-video-controls .player-track-control { grid-row: 2; min-width: 0; }
  .custom-video-controls .player-track-control > span { display: none; }
  .custom-video-controls .player-audio-control { grid-column: 1 / 5; }
  .custom-video-controls .player-subtitle-control { grid-column: 5 / 9; }
  .custom-video-controls .player-quality-control { grid-column: 9 / 13; }
  .custom-video-controls .player-track-control select { width: 100%; height: 32px; padding-right: 22px; font-size: .68rem; text-overflow: ellipsis; }
  .custom-video-controls > button { grid-row: 3; width: 100%; min-width: 0; height: 34px; padding: 0; }
  #player-toggle { grid-column: 1 / 3; }
  #player-back { grid-column: 3 / 5; }
  #player-forward { grid-column: 5 / 7; }
  .custom-video-controls .player-utility-controls { grid-row: 3; grid-column: 7 / 11; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; min-width: 0; }
  .custom-video-controls .player-utility-controls button { width: 100%; min-width: 0; height: 34px; padding: 0; }
  #player-fullscreen { grid-row: 3; grid-column: 11 / 13; }
  .custom-video-controls .player-volume-control { display: none; }
  .subtitle-overlay { bottom: 142px; font-size: var(--subtitle-size-landscape,clamp(15px,3.6vw,23px)); }
}

.admin-media-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 84px; padding: 11px 13px; border-radius: 17px; }
.admin-media-item .activity-copy { min-width: 0; gap: 5px; }
.admin-media-item .activity-copy strong { font-size: .94rem; }
.admin-media-item .activity-copy small { line-height: 1.45; }
.admin-media-cover { position: relative; display: grid; width: 48px; height: 64px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(var(--art-rgb),.14); border-radius: 11px; color: rgb(var(--art-rgb)); background: linear-gradient(145deg,rgba(var(--art-rgb),.15),rgba(var(--art-rgb),.04)); }
.admin-media-cover-music,.admin-media-cover-youtube,.admin-playlist-cover { width: 58px; height: 58px; border-radius: 14px; }
.admin-media-cover > svg { width: 21px; height: 21px; }
.admin-media-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-playlist-item { border-color: rgba(var(--art-rgb),.2); background: linear-gradient(100deg,rgba(var(--art-rgb),.11),rgba(var(--art-rgb),.035)); }
.admin-delete-icon { display: grid; width: 40px; min-width: 40px; height: 40px; place-items: center; border: 1px solid rgba(220,55,72,.22); border-radius: 12px; padding: 0; color: #d92f43; background: rgba(220,55,72,.08); cursor: pointer; transition: color .18s,background .18s,transform .18s; }
.admin-delete-icon:hover,.admin-delete-icon:focus-visible { color: #fff; background: #d92f43; outline: none; transform: translateY(-1px); }
.admin-delete-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.admin-delete-icon:disabled { cursor: wait; opacity: .5; transform: none; }
.admin-download-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; text-decoration: none; }
.admin-download-action svg { width: 18px; height: 18px; }
#admin-content .account-row-actions,#admin-series-dialog .account-row-actions { align-items: center; }
#admin-series-dialog .activity-heading { padding-inline: 11px; }
@media (max-width: 600px) {
  #admin-content { padding: 0; border: 0; background: transparent; box-shadow: none; }
  #admin-content .library-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  #admin-content .library-toolbar::-webkit-scrollbar { display: none; }
  #admin-content .library-filter { flex: 0 0 auto; }
  #admin-content > .activity-panel { padding: 12px; border-radius: 20px; }
  #admin-content .activity-list { gap: 8px; }
  #admin-content .admin-media-item { grid-template-columns: 48px minmax(0,1fr) auto; min-height: 76px; gap: 10px; padding: 9px; }
  #admin-content .admin-media-cover { width: 44px; height: 58px; border-radius: 10px; }
  #admin-content .admin-media-cover-music,#admin-content .admin-media-cover-youtube,#admin-content .admin-playlist-cover { width: 48px; height: 48px; border-radius: 12px; }
  #admin-content .activity-copy strong { font-size: .86rem; white-space: normal; }
  #admin-content .activity-copy small { display: -webkit-box; overflow: hidden; font-size: .7rem; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #admin-content .account-row-actions,#admin-series-dialog .account-row-actions { display: flex; width: auto; gap: 5px; }
  #admin-content .account-row-actions .quiet,#admin-series-dialog .account-row-actions .quiet { width: 38px; min-width: 38px; height: 38px; justify-content: center; padding: 0; font-size: 0; }
  #admin-content .admin-download-action,#admin-series-dialog .admin-download-action { gap: 0; line-height: 0; }
  #admin-content .admin-download-action span,#admin-series-dialog .admin-download-action span { display: none; }
  #admin-content .account-row-actions .quiet svg,#admin-series-dialog .account-row-actions .quiet svg { width: 17px; height: 17px; }
  #admin-content .admin-delete-icon { width: 38px; min-width: 38px; height: 38px; border-radius: 11px; }
  #admin-series-dialog .activity-panel { padding: 14px; }
  #admin-series-dialog .activity-heading { align-items: center; }
  #admin-series-dialog .activity-item { align-items: flex-start; }
  #admin-series-dialog .activity-copy strong { overflow-wrap: anywhere; white-space: normal; }
  #admin-series-dialog .activity-copy small { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
}

/* Eén responsieve videobediening voor ieder schermformaat. */
.player-stage { container-type: inline-size; touch-action: manipulation; }
.player-stage .custom-video-controls {
  box-sizing: border-box;
  grid-template-columns: 42px minmax(116px,max-content) 42px 42px minmax(110px,145px) minmax(120px,165px) minmax(84px,110px) minmax(100px,145px) 124px minmax(0,1fr) 42px;
  grid-template-rows: 24px 42px;
  align-items: center;
  gap: 7px;
  padding: 48px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
.player-stage .custom-video-controls .player-seek { grid-row: 1; grid-column: 1 / -1; width: 100%; height: 24px; }
.player-stage #player-toggle { grid-row: 2; grid-column: 1; width: 42px; }
.player-stage .player-time { grid-row: 2; grid-column: 2; display: flex; min-width: 0; height: 42px; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-stage.switching .player-time > * { display: none; }
.player-stage.switching .player-time::after { content: "Voorbereiden\2026"; color: color-mix(in srgb,rgb(var(--art-rgb)) 68%,white); font-weight: 850; letter-spacing: .01em; }
.player-stage .player-extra-controls { display: contents; }
.player-stage #player-back { grid-row: 2; grid-column: 3; width: 42px; }
.player-stage #player-forward { grid-row: 2; grid-column: 4; width: 42px; }
.player-stage .player-audio-control { grid-row: 2; grid-column: 5; }
.player-stage .player-subtitle-control { grid-row: 2; grid-column: 6; }
.player-stage .player-quality-control { grid-row: 2; grid-column: 7; }
.player-stage .player-volume-control { grid-row: 2; grid-column: 8; }
.player-stage .player-utility-controls { grid-row: 2; grid-column: 9; display: grid; grid-template-columns: repeat(3,38px); gap: 5px; min-width: 0; }
.player-stage #player-fullscreen { grid-row: 2; grid-column: 11; width: 42px; }
.player-stage #player-more { display: none; }
.player-stage .custom-video-controls button { min-width: 42px; height: 42px; padding: 0; }
.player-stage .player-track-control select,.player-stage .player-volume-control { min-width: 0; }
.player-stage .player-gesture-feedback { position: absolute; z-index: 4; top: 50%; left: 50%; padding: 10px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(3,9,16,.78); font-size: .82rem; font-weight: 850; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.92); backdrop-filter: blur(12px); transition: opacity .16s ease,transform .16s ease; }
.player-stage .player-gesture-feedback.visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.player-stage .player-seek { appearance: none; -webkit-appearance: none; border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important; }
.player-stage .player-seek::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg,rgb(var(--art-rgb)) 0 var(--seek-progress,0%),rgba(255,255,255,.28) var(--seek-progress,0%) 100%); }
.player-stage .player-seek::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; -webkit-appearance: none; border: 3px solid #fff; border-radius: 50%; background: rgb(var(--art-rgb)); box-shadow: 0 2px 12px rgba(0,0,0,.55); opacity: 1; }
.player-stage .player-seek::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.28); }
.player-stage .player-seek::-moz-range-progress { height: 8px; border-radius: 999px; background: rgb(var(--art-rgb)); }
.player-stage .player-seek::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: rgb(var(--art-rgb)); box-shadow: 0 2px 12px rgba(0,0,0,.55); opacity: 1; }
.player-stage .player-seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.player-stage .video-js .vjs-play-progress::before { display: none; }

.player-stage.compact-controls .custom-video-controls {
  grid-template-columns: 44px minmax(106px,max-content) minmax(0,1fr) 44px 44px;
  grid-template-rows: 24px 44px;
  align-items: center;
  gap: 6px;
  padding: 46px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.player-stage.compact-controls .custom-video-controls .player-seek { grid-row: 1; grid-column: 1 / -1; }
.player-stage.compact-controls #player-toggle { grid-row: 2; grid-column: 1; width: 44px; height: 44px; }
.player-stage.compact-controls .player-time { grid-row: 2; grid-column: 2; height: 44px; justify-content: flex-start; font-size: clamp(.62rem,2.2vw,.72rem); }
.player-stage.compact-controls #player-more { display: grid; grid-row: 2; grid-column: 4; width: 44px; height: 44px; }
.player-stage.compact-controls #player-fullscreen { grid-row: 2; grid-column: 5; width: 44px; height: 44px; }
.player-stage.compact-controls .player-extra-controls {
  position: absolute;
  z-index: 8;
  right: max(8px,env(safe-area-inset-right));
  bottom: calc(58px + env(safe-area-inset-bottom));
  display: none;
  box-sizing: border-box;
  width: min(360px,calc(100% - 16px));
  max-height: min(330px,calc(100dvh - 92px));
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  border: 1px solid rgba(137,183,255,.24);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(35,42,54,.98),rgba(10,14,21,.98));
  box-shadow: 0 22px 70px rgba(0,0,0,.52);
  backdrop-filter: blur(24px) saturate(1.2);
}
.player-stage.compact-controls .player-extra-controls.open { display: grid; }
.player-stage.compact-controls .player-extra-controls > * { grid-row: auto !important; grid-column: auto !important; width: 100%; min-width: 0; }
.player-stage.compact-controls .player-extra-controls > .player-track-control,.player-stage.compact-controls .player-extra-controls > .player-volume-control,.player-stage.compact-controls .player-extra-controls > .player-utility-controls { grid-column: 1 / -1 !important; }
.player-stage.compact-controls .player-extra-controls .player-track-control { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: 8px; }
.player-stage.compact-controls .player-extra-controls .player-track-control > span { display: block; }
.player-stage.compact-controls .player-extra-controls .player-track-control select { width: 100%; height: 38px; }
.player-stage.compact-controls .player-extra-controls .player-volume-control { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 10px; }
.player-stage.compact-controls .player-extra-controls .player-utility-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.player-stage.compact-controls .player-extra-controls .player-utility-controls button { width: 100%; height: 40px; }
.player-stage.compact-controls .subtitle-overlay { bottom: 112px; }

@media (orientation: landscape) and (max-height: 540px) {
  .player-stage.compact-controls .custom-video-controls { padding-top: 34px; }
  .player-stage.compact-controls .player-extra-controls { max-height: calc(100dvh - 78px); }
}