/* Three streaming compositions share the same account and playback controls. */
body { font-family:"Priva Inter","Segoe UI",sans-serif; }
body[data-presentation="overview"] { --bg:#101012; --surface:#1c1c20; --raised:#29292f; --line:#393940; --muted:#b6b6c0; --active:#e53749; --focus:#f9c4c9; background:var(--bg); }
body[data-variant="spotlight"] { --bg:#0b0c0e; --surface:#191b20; --raised:#272a31; --line:#353940; --muted:#bcc2cf; --active:#f5f5f7; --focus:#99c9ff; }
body[data-variant="aurora"] { --bg:#081020; --surface:#121e33; --raised:#1d3150; --line:#2a4162; --muted:#b8c9e5; --active:#287df1; --focus:#92c5ff; }
body[data-presentation="overview"] .shell { max-width:none; background:var(--bg); }
body[data-presentation="overview"] .sidebar { background:var(--bg); border-color:var(--line); gap:22px; padding:16px 4vw; }
body[data-presentation="overview"] .brand { font-size:25px; }
body[data-presentation="overview"][data-variant] .sidebar .brand { display:flex; }
body[data-presentation="overview"][data-variant] .sidebar { position:sticky; inset:auto; top:0; width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; padding:16px 4vw; background:var(--bg); z-index:40; }
body[data-presentation="overview"][data-variant] #navigation { justify-content:flex-start; gap:3px; }
body[data-presentation="overview"][data-variant] #navigation button { flex-direction:row; height:52px; font-size:14px; }
body[data-presentation="overview"] .brand img { width:34px; height:40px; transform:none; }
body[data-presentation="overview"] #navigation { gap:3px; }
body[data-presentation="overview"] #navigation button { padding:10px 13px; font-size:14px; border-radius:5px; }
body[data-presentation="overview"] #navigation .ui-icon { display:none; }
body[data-presentation="overview"] #navigation [aria-current] { background:transparent; border-color:transparent; box-shadow:none; color:#fff; font-weight:750; border-bottom:2px solid var(--active); }
body[data-presentation="overview"] main { padding:16px 4vw 48px; }
body[data-presentation="overview"] .overview-sourcebar { border:0; margin-bottom:10px; padding-bottom:0; justify-content:space-between; }
body[data-presentation="overview"] .overview-source-choice { background:var(--surface); border-color:var(--line); }
body[data-presentation="overview"] .overview-manage { color:var(--muted); font-size:13px; }
body[data-presentation="overview"] :is(.primary,[aria-pressed="true"]) { background:var(--active); border-color:var(--active); box-shadow:none; }
body[data-variant="spotlight"] :is(.primary,[aria-pressed="true"]) { color:#101115; }
body[data-variant="spotlight"] .primary .ui-icon { filter:brightness(0); }
.stream-hero { position:relative; display:flex; align-items:flex-end; min-height:540px; overflow:hidden; border-radius:10px; background:var(--surface); isolation:isolate; }
.stream-hero-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; z-index:-2; }
.stream-hero .playlist-artwork img { width:100%; height:100%; max-height:none; object-fit:cover; }
.stream-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(10,10,12,.94),rgba(10,10,12,.4) 70%,rgba(10,10,12,.1)),linear-gradient(0deg,var(--bg),transparent 45%); }
.stream-hero-copy { padding:56px 4vw; max-width:740px; }
.stream-kicker { font-size:12px; letter-spacing:.18em; font-weight:700; color:#e1e1e9; }
.stream-hero h1 { font-size:clamp(36px,4.2vw,68px); line-height:1.05; letter-spacing:-.04em; margin:14px 0 18px; overflow-wrap:anywhere; text-wrap:balance; }
.stream-description { color:#d6d6df; font-size:17px; max-width:510px; line-height:1.65; }
.stream-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.stream-actions button { display:flex; align-items:center; gap:10px; min-height:52px; border-radius:6px; font-weight:650; padding:12px 22px; background:#313136df; }
.stream-actions .primary { background:var(--active); }
.stream-shortcuts { display:flex; gap:12px; margin:22px 0 32px; }
.stream-shortcuts button { display:flex; align-items:center; gap:10px; flex:1; background:var(--surface); border-color:var(--line); border-radius:7px; }
.stream-row { margin:30px 0; }
.stream-row h2 { font-size:23px; letter-spacing:-.02em; }
.stream-row .section-head button { font-size:13px; border:0; background:transparent; color:var(--muted); }
.stream-rail { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 64px)/5); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:5px 3px 14px; }
.stream-rail .overview-card { scroll-snap-align:start; display:block; text-align:left; padding:0; background:transparent; border:0; min-width:0; transition:transform .18s; }
.stream-rail .overview-card:hover { transform:translateY(-4px); }
.stream-rail .overview-card-art { width:100%; aspect-ratio:16/10; position:relative; overflow:hidden; border-radius:7px; background:var(--surface); }
.stream-rail :is(.overview-card-art > img,.overview-card-art .playlist-artwork,.overview-card-art .playlist-artwork img) { width:100%; height:100%; object-fit:cover; max-height:none; display:block; }
.stream-rail .overview-card-art > .ui-icon { width:40px; height:40px; margin:30px auto; opacity:.55; }
.stream-rail .overview-card strong { display:block; font-size:15px; padding-top:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stream-rail .overview-card small { display:block; color:var(--muted); font-size:13px; margin-top:5px; }
.stream-rail progress { position:absolute; bottom:9px; left:10px; width:calc(100% - 20px); height:5px; }
body[data-variant="spotlight"] .stream-hero { min-height:600px; }
body[data-variant="spotlight"] .stream-hero-copy { max-width:820px; padding:70px 5vw; }
body[data-variant="spotlight"] .stream-rail { grid-auto-columns:calc((100% - 48px)/4); }
body[data-variant="aurora"] .stream-hero { border-radius:18px; min-height:490px; }
body[data-variant="aurora"] .stream-shortcuts button { justify-content:center; min-height:84px; font-weight:700; }
body[data-presentation="overview"] .card { border:0; background:var(--surface); border-radius:8px; text-align:left; }
body[data-presentation="overview"] #details { width:min(960px,calc(100vw - 36px)); background:var(--bg); padding:28px; border:1px solid var(--line); }
body[data-presentation="overview"] #detail-art { max-height:330px; width:100%; object-fit:cover; border-radius:8px; }
body[data-presentation="overview"] .profile-screen { padding-top:35px; }
body[data-presentation="overview"] .profile-welcome { background:var(--surface); border-color:var(--line); }
body[data-presentation="overview"] .reference-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(min-width:961px) { body[data-presentation="overview"] .sidebar { position:sticky; top:0; z-index:40; } }
@media(max-width:1100px) { .stream-rail { grid-auto-columns:calc((100% - 32px)/3); } body[data-presentation="overview"] .sidebar { gap:12px; } }
@media(max-width:960px) {
  body[data-presentation="overview"] main { padding:12px 18px 110px; }
  body[data-presentation="overview"] .sidebar { padding:12px 18px; }
  body[data-presentation="overview"] #navigation { display:none; }
  body[data-presentation="overview"] #mobile-navigation { background:var(--bg); border-color:var(--line); }
  body[data-presentation="overview"] #mobile-navigation button[aria-current] { color:var(--focus); }
  body[data-presentation="overview"] .overview-source-choice { min-width:0; width:100%; }
  .stream-hero,body[data-variant="spotlight"] .stream-hero,body[data-variant="aurora"] .stream-hero { min-height:440px; border-radius:10px; }
  .stream-hero-copy,body[data-variant="spotlight"] .stream-hero-copy { padding:32px 22px; }
  .stream-hero h1 { font-size:37px; }
  .stream-description { font-size:14px; line-height:1.5; }
  .stream-actions { gap:8px; }
  .stream-actions button { font-size:14px; padding:10px 14px; min-height:48px; }
  .stream-shortcuts { gap:8px; flex-wrap:wrap; margin:16px 0 26px; }
  .stream-shortcuts button { flex:1 1 40%; font-size:13px; padding:12px; }
  body[data-variant="aurora"] .stream-shortcuts button { min-height:60px; }
  .stream-row { margin:24px 0; }
  .stream-row h2 { font-size:20px; }
  .stream-rail,body[data-variant="spotlight"] .stream-rail { grid-auto-columns:calc((100% - 12px)/2.15); gap:12px; }
  .stream-rail .overview-card strong { font-size:14px; }
  body[data-presentation="overview"] .reference-presets { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .stream-rail .overview-card { transition:none; } }
body[data-motion="reduced"] .stream-rail .overview-card { transition:none; }

.content-facts{display:grid;grid-template-columns:minmax(100px,180px) 1fr;gap:8px 20px;margin:24px 0}.content-facts dt{color:#9bb0c2}.content-facts dd{margin:0;overflow-wrap:anywhere}#content-metadata{margin:20px 0}#content-metadata>button{display:block;width:100%;text-align:left;margin:8px 0}
#details[data-series="true"][data-surface] #detail-art{display:block;width:100%;max-width:900px;height:260px;object-fit:cover;margin:20px 0;border-radius:12px;overflow:hidden}
#details[data-series="true"] #detail-art img{width:100%;height:100%;object-fit:cover}
#details[data-series="true"] [aria-label="Beim Stöbern weitersehen"]{display:none}
@media(max-width:760px){#details #content-metadata{margin:20px}.content-facts{grid-template-columns:100px 1fr;gap:8px 16px}#details[data-series="true"] #detail-art{height:190px}}