/* Shared persistent controls. Each reference composition keeps its own grid. */
body { --nav-height:0px; --topbar-height:0px; --sourcebar-height:0px; --header-offset:calc(var(--nav-height) + var(--topbar-height)); font-family:'Priva Inter','Segoe UI',Arial,sans-serif; }
body :is(button,input,select,textarea) { font-family:inherit; }
body:not([data-presentation='overview']):not([data-package='modern']):not([data-view='profiles']) .sidebar { position:sticky; top:0; height:100dvh; overflow-y:auto; align-self:start; }
body[data-package='modern']:not([data-view='profiles']) .sidebar,
body[data-presentation='overview'] .sidebar { position:sticky; top:0; z-index:30; }
body[data-view='profiles'][data-presentation='overview'][data-home] .sidebar { position:sticky; inset:auto; top:0; width:100%; }
body .topbar { position:sticky; top:var(--nav-height); z-index:25; background:var(--bg,#020f20); }
body .overview-sourcebar { position:sticky; top:var(--header-offset); z-index:24; background:var(--bg,#020f20); padding-block:8px; }
body .category-controls { position:sticky; top:calc(var(--header-offset) + var(--sourcebar-height)); z-index:20; padding:12px 0; background:var(--bg,#020f20); border-bottom:1px solid var(--line); }
body .catalog-category-rail { top:calc(var(--header-offset) + var(--sourcebar-height) + 12px); max-height:calc(100dvh - var(--header-offset) - var(--sourcebar-height) - 24px); }
body .settings-tabs { position:sticky; top:calc(var(--header-offset) + var(--sourcebar-height)); z-index:20; background:var(--bg,#020f20); padding-block:12px; }
body .header-avatar { width:44px; height:44px; border:2px solid #12b9ff; border-radius:50%; object-fit:cover; }
body #open-account { min-height:48px; }
body .profile-row { gap:24px; flex-wrap:wrap; }
body[data-view='profiles'] .profile-choice { width:clamp(130px,12vw,200px); max-width:none; flex-shrink:0; }
body[data-view='profiles'] .profile-choice img,
body[data-view='profiles'] .add-profile .ui-icon { width:clamp(120px,11.5vw,190px); height:clamp(120px,11.5vw,190px); }
.profile-management-actions { display:flex; flex-wrap:wrap; gap:12px; }
.management-panel summary { min-height:44px; cursor:pointer; display:flex; align-items:center; font-size:18px; color:#40c9ff; }
.management-panel :is(label,fieldset) { margin-block:12px; }
.management-panel input[type='checkbox'] { width:20px; min-height:20px; margin-right:10px; }
#detail-art.playlist-artwork { display:block; width:100%; height:240px; }
#detail-art.playlist-artwork img { width:100%; height:100%; object-fit:cover; }
.profile-editor { width:min(720px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; }
.profile-editor form { display:grid; gap:16px; }
.profile-editor label { display:grid; gap:8px; }
.profile-editor input { min-height:48px; width:100%; }
.profile-editor .dialog-head h2 { font-size:26px; }
.avatar-editor-preview { width:90px; height:90px; border:2px solid #14bdff; border-radius:50%; object-fit:cover; justify-self:center; }
.avatar-categories { display:flex; flex-wrap:wrap; gap:8px; }
.avatar-categories button { min-height:44px; padding:8px 14px; }
.avatar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.avatar-grid button { flex-direction:column; padding:10px; font-size:14px; }
.avatar-grid img { width:min(90px,100%); aspect-ratio:1; border-radius:50%; object-fit:cover; }
.avatar-grid [aria-pressed='true'],.avatar-categories [aria-pressed='true'] { border-color:#27caff; background:#073d65; }
.startup-screen { max-width:1100px; margin-inline:auto; }
.startup-brand { width:100px; height:112px; object-fit:contain; }
.startup-stepper { display:flex; list-style:none; padding:0; gap:8px; counter-reset:step; }
.startup-stepper li { flex:1; padding:14px; border-bottom:2px solid var(--line); font-size:16px; color:var(--muted); counter-increment:step; }
.startup-stepper li::before { content:counter(step); display:inline-block; margin-right:12px; color:var(--accent); font-weight:700; }
.startup-stepper [aria-current] { color:white; border-color:#00bfff; }
.pairing-card { display:grid; grid-template-columns:minmax(160px,240px) minmax(0,1fr); align-items:center; gap:40px; margin:24px 0; }
.pairing-card > img { width:100%; aspect-ratio:1; background:white; border:12px solid white; border-radius:10px; }
.pairing-code { display:block; font-size:clamp(28px,4vw,48px); letter-spacing:4px; overflow-wrap:anywhere; }
.reference-hero { position:relative; }
.reference-hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.reference-hero-art img { width:100%; height:100%; object-fit:cover; }
.reference-hero-art small { display:none; }
.pin-dialog { width:min(430px,calc(100% - 32px)); }
.pin-dialog form { display:grid; gap:16px; }
.pin-dialog label { display:grid; gap:8px; }
.pin-dialog input { min-height:52px; text-align:center; font-size:26px; letter-spacing:8px; }
.reference-hero .hero-copy { position:relative; z-index:1; }
.epg-import-disclosure { margin-block:16px; }
.epg-import-disclosure summary { min-height:44px; padding:14px; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:#45ccff; }
.epg-import-disclosure .management-panel { margin-top:12px; }
.epg-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:end; position:sticky; top:calc(var(--header-offset) + var(--sourcebar-height)); padding-block:12px; background:var(--bg); z-index:20; }
.epg-toolbar label { display:grid; gap:6px; }
.epg-toolbar input { min-height:46px; padding:8px 12px; background:var(--surface); color:white; border:1px solid var(--line); border-radius:8px; font:inherit; color-scheme:dark; }
.epg-toolbar button { min-height:46px; }
.epg-viewport { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.programme-grid { min-width:850px; }
.programme-row { display:grid; grid-template-columns:180px minmax(0,1fr); border-bottom:1px solid var(--line); min-height:64px; }
.programme-row > strong { padding:16px; overflow-wrap:anywhere; display:flex; align-items:center; font-size:15px; }
.programme-scale { min-height:46px; background:#052039; }
.programme-times { display:grid; grid-template-columns:repeat(6,1fr); align-items:center; color:var(--muted); font-size:14px; }
.programme-track { position:relative; min-height:64px; background:#0b2949; }
.programme-track button { position:absolute; top:0; bottom:0; margin:0; padding:10px; overflow:hidden; justify-content:start; text-align:left; border-radius:0; border:1px solid #204868; font-size:14px; min-width:0; }
.programme-preview { padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:10px; margin-top:20px; }
.programme-preview h2 { font-size:24px; margin:0 0 12px; }
.programme-preview small { display:block; color:var(--muted); margin-top:16px; }
.programme-alert { position:fixed; right:24px; bottom:100px; z-index:60; max-width:min(400px,calc(100vw - 36px)); background:#063353; border:1px solid #2fcaff; box-shadow:0 8px 40px #0008; padding:20px; border-radius:12px; }
.programme-alert button { margin:8px 8px 0 0; }
body :is(button,a,input,select,summary) { scroll-margin-top:calc(var(--header-offset) + var(--sourcebar-height) + 130px); scroll-margin-bottom:100px; }
@media(max-width:960px) {
  body:not([data-tv='true']) .shell { display:block; }
  body:not([data-tv='true']) .sidebar,
  body:not([data-tv='true'])[data-view='profiles'] .sidebar { display:flex; align-items:center; flex-direction:row; position:sticky; top:0; left:auto; width:100%; height:auto; min-height:68px; padding:12px 18px; gap:12px; overflow:visible; z-index:30; background:#041728; }
  body:not([data-tv='true']) .sidebar :is(#navigation,.profile) { display:none; }
  body:not([data-tv='true']) .brand { padding:0; min-height:44px; font-size:24px; gap:8px; }
  body:not([data-tv='true']) .brand span { display:inline; }
  body:not([data-tv='true']) .brand img { width:36px; height:40px; }
  body:not([data-tv='true']) #open-account { margin-left:auto; padding:0; font-size:14px; background:transparent; border:0; white-space:nowrap; }
  body:not([data-tv='true']) #open-account .ui-icon { width:18px; height:18px; }
  body:not([data-tv='true']) #open-account .header-avatar { width:34px; height:34px; }
  body:not([data-tv='true']) main,
  body:not([data-tv='true'])[data-view='profiles'] main { padding:0 18px calc(94px + env(safe-area-inset-bottom,0px)); }
  body:not([data-tv='true']) .topbar { min-height:58px; height:auto; padding:12px 0; }
  body:not([data-tv='true']) .topbar h1 { font-size:24px; }
  body:not([data-tv='true']) .topbar :is(#global-search,#open-settings) { display:none; }
  body:not([data-tv='true']) #mobile-navigation { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; bottom:0; left:0; right:0; z-index:40; padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px)); border-top:1px solid #183d56; background:#031827; }
  body:not([data-tv='true']) #mobile-navigation button { display:flex; flex-direction:column; gap:5px; min-height:56px; padding:6px 2px; font-size:12px; background:transparent; border:0; }
  body:not([data-tv='true']) #mobile-navigation .ui-icon { width:26px; height:26px; }
  body:not([data-tv='true']) #mobile-navigation [aria-current] { color:#0bc3ff; }
  body:not([data-tv='true']) #mobile-navigation [aria-current] .ui-icon { filter:invert(64%) sepia(92%) saturate(3360%) hue-rotate(162deg); }
  body:not([data-tv='true']) :is(.preview-banner,footer) { display:none; }
  body:not([data-tv='true']) .catalog-browser { display:block; }
  body:not([data-tv='true']) .catalog-category-rail { display:none; }
  body:not([data-tv='true']) .category-controls { gap:10px; margin-top:0; }
  body:not([data-tv='true']) .category-controls label { flex:1 1 120px; font-size:13px; }
  body:not([data-tv='true']) .category-controls select { font-size:14px; }
  body:not([data-tv='true']) .settings-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; margin-inline:-18px; padding-inline:18px; gap:8px; }
  body:not([data-tv='true']) .settings-tabs button { flex-shrink:0; min-height:44px; font-size:14px; padding:8px 14px; }
  body:not([data-tv='true']) .profile-row { gap:16px; }
  body:not([data-tv='true']) .profile-choice,
  body:not([data-tv='true'])[data-view='profiles'] .profile-choice { width:calc((100% - 32px) / 3); font-size:16px; }
  body:not([data-tv='true']) .profile-choice img,
  body:not([data-tv='true'])[data-view='profiles'] .profile-choice img,
  body:not([data-tv='true']) .add-profile .ui-icon,
  body:not([data-tv='true'])[data-view='profiles'] .add-profile .ui-icon { width:88px; height:88px; }
  body:not([data-tv='true']) .profile-screen > h2 { font-size:32px; margin:20px 0 28px; }
  body:not([data-tv='true']) .profile-welcome { display:grid; margin:24px 0; padding:20px; }
  body:not([data-tv='true']) .profile-welcome-actions { padding:0; border:0; }
  .avatar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .startup-stepper { gap:4px; }
  .startup-stepper li { padding:10px 2px; font-size:0; text-align:center; }
  .startup-stepper li::before { font-size:18px; margin:0; }
  .pairing-card { grid-template-columns:1fr; gap:16px; text-align:center; }
  .pairing-card > img { max-width:220px; justify-self:center; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }