/* Fresh implementation from public UI observations; Airwave brand and real data. */
:root{
  --bg:#0d1426;--panel:#17243b;--surface:#17243b;--raised:#202f49;--border:#617590;--text:#f2f5fb;--muted:#b6c2d4;--accent:#b2dfcf;--signal:#ffc1b8;--on-accent:#102920;
  --ambient:#23345166;--stroke-soft:#40516b;--input:#101c31;--veil:#050a16b8;--glass-surface:#111d33db;--glass-rim:#d7e9ff3d;--shadow:#00000040;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
  --r1:10px;--r2:16px;--r3:24px;--pill:999px;--target:44px;--nav-target:58px;--nav-gap:112px;--content-width:1080px;
  --micro:11px;--small:13px;--body:16px;--title:28px;--display:36px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
body{background:radial-gradient(ellipse at 50% 0,var(--ambient),transparent 65%),var(--bg);font-family:var(--font);font-size:var(--body);color:var(--text);min-height:100dvh}
.app-shell{display:block}.main{margin:0;width:100%;min-width:0}
.sidebar{position:fixed;z-index:45;inset:0 auto 0 0;width:min(300px,calc(100vw - var(--target)));height:100dvh;transform:translateX(-100%);background:var(--surface);border-color:var(--stroke-soft);padding:calc(var(--s6) + env(safe-area-inset-top,0px)) var(--s5) var(--s5);transition:transform .22s ease;overflow-y:auto}
.sidebar.open{transform:translateX(0)}.sidebar .brand{margin-bottom:var(--s8)}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s8)}.drawer-heading .brand{margin-bottom:0}
.sidebar-shade{display:block;position:fixed;inset:0;z-index:40;background:var(--veil);opacity:0;pointer-events:none;transition:opacity .2s}
.sidebar-shade.visible{display:block;opacity:1;pointer-events:auto;backdrop-filter:blur(var(--s2));-webkit-backdrop-filter:blur(var(--s2));background:var(--veil)}
.nav-item{color:var(--muted);font-size:var(--body);min-height:var(--target)}.nav-item svg{color:inherit}.nav-item.active{background:var(--raised);color:var(--accent)}.nav-item:hover{background:var(--raised)}
.source-prompt{background:var(--input);border-color:var(--stroke-soft)}.profile{border-color:var(--stroke-soft)}.profile strong{font-size:var(--small)}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:var(--content-width);margin:auto;height:calc(96px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--s6) 0;gap:var(--s4);border:0;background:transparent}
.breadcrumb{flex:1;gap:var(--s3);color:var(--muted);font-size:var(--small)}.breadcrumb #breadcrumb{display:none}.mobile-menu{display:flex}
.app-brand{display:flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--font);font-size:var(--title);font-weight:750;letter-spacing:-1px;min-height:var(--target);flex-shrink:0}.app-brand img{width:var(--display);height:var(--display)}.brand-dot{color:var(--accent)}
.topbar-right{flex:1;display:flex;justify-content:flex-end;gap:var(--s2)}.icon-button,.tiny-button{width:var(--target);height:var(--target);min-width:var(--target);min-height:var(--target);border-radius:var(--r1);color:var(--muted)}.icon-button:hover,.tiny-button:hover{color:var(--text);background:var(--raised)}
.page-content{width:100%;max-width:var(--content-width);margin:auto;padding:var(--s6) var(--s6) calc(var(--nav-gap) + env(safe-area-inset-bottom,0px))}
.page-heading{display:flex;gap:var(--s5);align-items:center;justify-content:space-between;margin-bottom:var(--s8)}.eyebrow,.page-heading .eyebrow{font-size:var(--micro);font-weight:650;letter-spacing:1.8px;color:var(--muted)}
.page-heading h1{font-family:var(--font);font-size:var(--display);line-height:1.2;letter-spacing:-1px;margin:var(--s2) 0 var(--s3);font-weight:700}.page-heading h1 span{color:var(--accent)}.page-heading p{font-size:var(--body);color:var(--muted);line-height:1.6;max-width:none;margin:0}
body[data-view=discover] .page-heading{justify-content:center;text-align:center;margin:var(--s3) 0 var(--s6)}body[data-view=discover] .page-heading h1{font-size:var(--display)}body[data-view=discover] .connection-badge{display:none}
.connection-badge{display:flex;color:var(--muted);font-size:var(--small);background:var(--surface);border:1px solid var(--stroke-soft);padding:var(--s2) var(--s3);border-radius:var(--pill)}
.dashboard.hero{display:block;position:relative;min-height:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;margin:0}
.dashboard-status{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);color:var(--muted);font-size:var(--small)}.dashboard-status>div{display:flex;align-items:center;gap:var(--s2);min-width:0}.dashboard-status #active-playlist-label{color:var(--text);font-weight:600;overflow-wrap:anywhere}.status-dot{width:var(--s2);height:var(--s2);background:var(--accent);border-radius:50%;flex-shrink:0;box-shadow:0 0 var(--s3) #b2dfcf33}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.launch-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);min-height:200px;border:1px solid var(--stroke-soft);border-radius:var(--r2);padding:var(--s6);background:linear-gradient(160deg,var(--raised),var(--surface));color:var(--text);box-shadow:0 var(--s2) var(--s6) var(--shadow);transition:background .2s,border-color .2s,transform .2s}
.launch-icon{display:grid;place-items:center;width:var(--s12);height:var(--s12);color:var(--accent)}.launch-icon svg{width:var(--s10);height:var(--s10);stroke-width:1.6}.launch-tile strong{font-size:var(--s5);font-weight:650;line-height:1.2}.launch-tile>span:not(.launch-icon){font-size:var(--small);color:var(--muted);line-height:1.4}.tile-arrow{position:absolute;bottom:var(--s4);right:var(--s4);width:var(--s4);height:var(--s4);color:var(--muted)}
@media(hover:hover){.launch-tile:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--raised)}}.launch-tile:active{background:var(--raised);border-color:var(--accent)}
.playlist-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin:var(--s8) 0 var(--s5)}.playlist-heading h2{font-size:var(--s5);font-weight:600;letter-spacing:-.4px;margin:0}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--target);color:var(--accent);font-size:var(--small)}.text-button svg{width:var(--s4);height:var(--s4)}
.playlist-picker{display:flex;gap:var(--s5);overflow-x:auto;overscroll-behavior-x:contain;padding:var(--s1) var(--s1) var(--s4);scrollbar-width:thin;scrollbar-color:var(--stroke-soft) transparent}
.playlist-choice{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:104px;max-width:120px;flex-shrink:0;border-radius:var(--r1);padding:var(--s1);color:var(--text)}
.playlist-circle{position:relative;display:grid;place-items:center;width:80px;height:80px;border:1px solid var(--border);border-radius:50%;background:linear-gradient(145deg,var(--raised),var(--surface));color:var(--muted);box-shadow:0 var(--s1) var(--s4) var(--shadow);transition:border-color .2s,background .2s}.playlist-circle>svg{width:var(--s8);height:var(--s8)}
.playlist-count{position:absolute;right:0;bottom:0;display:grid;place-items:center;min-width:var(--s6);height:var(--s6);padding:0 var(--s1);font-size:var(--micro);font-weight:700;color:var(--text);background:var(--raised);border:1px solid var(--stroke-soft);border-radius:var(--pill)}
.playlist-choice.selected .playlist-circle{border:2px solid var(--accent);color:var(--accent);box-shadow:0 0 0 var(--s1) #b2dfcf0d}.playlist-choice.selected .playlist-count{background:var(--accent);color:var(--on-accent)}.playlist-name{font-size:var(--small);line-height:1.4;font-weight:600;overflow-wrap:anywhere;text-align:center;max-width:100%}.playlist-selection{font-size:var(--micro);color:var(--muted)}.playlist-choice.selected .playlist-selection{color:var(--accent)}
.dashboard-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s2);border-top:1px solid var(--stroke-soft);margin-top:var(--s6);padding-top:var(--s5)}.dashboard-tools .button{font-size:var(--small);min-height:var(--target)}
.button{border-radius:var(--r1);min-height:var(--target);font-size:var(--small);font-weight:600;padding:var(--s3) var(--s4);gap:var(--s2)}.button.primary,.primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}.button.primary:hover{background:var(--accent);filter:brightness(1.05)}.button.secondary,.glass{background:var(--surface);border:1px solid var(--stroke-soft);color:var(--text)}.button.secondary:hover,.glass:hover{background:var(--raised);border-color:var(--border)}.button.danger{background:transparent;color:var(--signal);border:1px solid var(--stroke-soft)}
.bottom-note{margin-top:var(--s6);padding:var(--s5);background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r2);box-shadow:none;gap:var(--s4)}.note-logo{background:var(--raised);color:var(--accent)}.bottom-note strong{font-size:var(--body)}.bottom-note p{font-size:var(--small);line-height:1.6;color:var(--muted)}.bottom-note .text-button{margin-left:0}
footer{font-size:var(--micro);color:var(--muted);padding-top:var(--s8);gap:var(--s4)}footer>span:last-child{font-size:var(--small)}.footer-version{font-size:var(--micro)}
.library-toolbar{display:flex;align-items:flex-end;gap:var(--s4);margin:0 0 var(--s6)}.active-source-control{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--micro);color:var(--muted);flex:1;min-width:0}.active-source-control select{width:100%;max-width:100%;font-size:var(--small);height:var(--s12);padding:var(--s3);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r1)}
.search-box{display:flex;flex:1;align-items:center;gap:var(--s2);width:auto;max-width:none;min-width:0;height:var(--s12);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r1);background:var(--surface);color:var(--muted)}.search-box input{font-size:var(--body);width:100%;min-width:0;color:var(--text);background:none}.search-box kbd{display:none}
.content-section{margin-top:0}.section-heading h2{font-family:var(--font);font-size:var(--s5);font-weight:600;letter-spacing:-.4px}.section-heading p{font-size:var(--small);color:var(--muted);line-height:1.6}.count-pill,.nav-count,.small-pill{background:var(--raised);color:var(--accent)}.layout-options{background:var(--surface);border:1px solid var(--stroke-soft);padding:var(--s1);gap:var(--s1);border-radius:var(--r1)}.layout-options .icon-button{width:var(--target);height:var(--target)}.layout-options .selected{background:var(--raised);color:var(--accent)}
.filter-row{margin:var(--s6) 0;gap:var(--s2)}.filter-chip{min-height:var(--target);font-size:var(--small);background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r1);padding:var(--s2) var(--s4);color:var(--muted)}.filter-chip.active{background:var(--raised);border-color:var(--accent);color:var(--accent)}
.channels-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s4)}.channel-card{min-width:0}.card-visual{border-radius:var(--r2);border:1px solid var(--stroke-soft);background:var(--surface);aspect-ratio:1.65}.card-tint{background:linear-gradient(135deg,var(--raised),var(--surface))}.card-art{opacity:.78}.card-gradient{background:linear-gradient(0deg,var(--veil),transparent 65%)}.card-channel-logo{color:var(--accent)}.card-letter{font-size:var(--title);font-weight:600;color:var(--accent)}.card-play{width:var(--target);height:var(--target);opacity:1;color:var(--text);background:var(--veil)}.sample-badge{background:var(--input);border-color:var(--stroke-soft);font-size:var(--micro);color:var(--muted)}.card-favourite{width:var(--target);height:var(--target);min-width:var(--target);min-height:var(--target);top:var(--s2);right:var(--s2);background:var(--veil);color:var(--text);border-radius:50%}.card-favourite svg{width:var(--s5);height:var(--s5)}.card-favourite.saved{color:var(--accent);background:var(--input)}.card-body{padding-top:var(--s3)}.card-body h3{font-family:var(--font);font-size:var(--body);font-weight:600;white-space:normal}.card-body .channel-group,.card-programme,.card-more{font-size:var(--small);color:var(--muted)}.channel-mark{background:var(--raised);color:var(--accent);border-color:var(--stroke-soft)}
.list-layout{grid-template-columns:1fr}.list-layout .channel-card{background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r2);padding:var(--s3)}.list-layout .card-visual{width:140px}.list-layout .card-body{padding-top:0}
.source-item{background:var(--surface);border-color:var(--stroke-soft);border-radius:var(--r2);padding:var(--s5)}.source-icon{background:var(--raised);color:var(--accent)}.source-item h3{font-size:var(--body)}.source-item p,.source-server{font-size:var(--small);color:var(--muted)}.source-item-actions{gap:var(--s2);flex-wrap:wrap}.source-server{display:inline-block;margin-top:var(--s1)}
.guide-row{background:transparent;border-color:var(--stroke-soft)}.guide-show{background:var(--surface);border-color:var(--stroke-soft)}.guide-show.current{background:var(--raised);border-color:var(--accent)}.guide-show span{color:var(--muted)}.guide-name{font-size:var(--small)}
dialog{background:var(--surface);color:var(--text);border:1px solid var(--stroke-soft);border-radius:var(--r3);box-shadow:0 var(--s6) 80px var(--shadow);padding:var(--s8);max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--s8))}dialog::backdrop{background:var(--veil);backdrop-filter:blur(var(--s2));-webkit-backdrop-filter:blur(var(--s2))}.dialog-heading h2{font-family:var(--font);font-size:var(--title);font-weight:650;letter-spacing:-.7px}.dialog-intro{font-size:var(--body);line-height:1.6;color:var(--muted)}
form label,.settings-block strong,.setting-row strong{font-size:var(--body);font-weight:500}form input:not([type=file]),.settings-input{height:var(--s12);min-height:var(--s12);background:var(--input);border:1px solid var(--border);border-radius:var(--r1);padding:var(--s3);color:var(--text);font-size:var(--body)}form input::placeholder,.settings-input::placeholder{color:var(--muted);opacity:1;font-size:var(--small)}input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--input) inset}
.source-tabs{background:var(--input);border:1px solid var(--stroke-soft);border-radius:var(--r1);gap:var(--s1);padding:var(--s1)}.source-tabs button{font-size:var(--small);min-height:var(--target);color:var(--muted);border-radius:var(--r1)}.source-tabs button[aria-selected=true]{background:var(--raised);color:var(--accent)}.file-drop{background:var(--input);border-color:var(--border);border-radius:var(--r1)}.privacy-note,.or-divider,.settings-block p,.setting-row p{font-size:var(--small);color:var(--muted);line-height:1.7}.privacy-note svg{color:var(--muted)}.form-error{background:var(--input);border:1px solid var(--signal);border-radius:var(--r1);padding:var(--s3);color:var(--signal);font-size:var(--small)}.setting-row,.settings-block{border-color:var(--stroke-soft)}#relay-status{color:var(--muted)}.full-width{font-size:var(--body)}
.player-dialog{padding:0;background:var(--bg);border-radius:var(--r2)}.player-heading,.player-footer{background:var(--surface);border-color:var(--stroke-soft)}.player-heading h2{font-size:var(--s5);font-family:var(--font)}.player-heading p,.player-footer{color:var(--muted)}.player-footer select{background:var(--input);color:var(--text);border-color:var(--border)}.video-container{aspect-ratio:16/9}.player-message{background:var(--surface);color:var(--text)}.player-message p{color:var(--muted)}
.empty-state{padding:var(--s12) var(--s6);background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r2)}.empty-state p{color:var(--muted);font-size:var(--small)}.empty-state h3{font-family:var(--font);font-size:var(--s5)}.toast{background:var(--accent);color:var(--on-accent);font-size:var(--small);bottom:calc(var(--nav-gap) + env(safe-area-inset-bottom,0px))}
.mobile-nav{--nav-surface:var(--glass-surface);--nav-ink:var(--text);--nav-selected:var(--accent);--nav-rim:var(--glass-rim);--nav-solid:var(--surface);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;z-index:18;isolation:isolate;bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));left:max(var(--s4),env(safe-area-inset-left,0px));right:max(var(--s4),env(safe-area-inset-right,0px));max-width:480px;margin-inline:auto;padding:6px;border:1px solid var(--nav-rim);border-radius:var(--pill);background:var(--nav-surface);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);box-shadow:0 var(--s3) var(--s8) var(--shadow),inset 0 1px 0 var(--glass-rim);gap:0}
.mobile-nav-indicator{position:absolute;z-index:-1;left:6px;top:6px;bottom:6px;width:calc((100% - 12px)/4);border-radius:var(--pill);pointer-events:none;opacity:0;transform:translateX(calc(var(--tab-index,0)*100%));background:var(--raised);border:1px solid var(--stroke-soft);box-shadow:inset 0 1px 0 var(--glass-rim);transition:transform .28s ease,opacity .15s}.mobile-nav.has-selection .mobile-nav-indicator{opacity:1}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:var(--nav-target);min-width:var(--target);padding:var(--s2) var(--s1);border-radius:var(--pill);font-size:var(--micro);font-weight:550;line-height:1.2;color:var(--nav-ink)}.mobile-nav button svg{width:var(--s6);height:var(--s6)}.mobile-nav button[aria-current=page]{color:var(--accent);font-weight:700;background:none}.mobile-nav button:focus-visible{outline-offset:-3px}
.main::after{content:'';position:fixed;z-index:17;left:0;right:0;bottom:0;height:calc(var(--nav-gap) + env(safe-area-inset-bottom,0px));pointer-events:none;background:linear-gradient(0deg,var(--bg),transparent);mask-image:linear-gradient(0deg,#000,transparent 95%);-webkit-mask-image:linear-gradient(0deg,#000,transparent 95%);backdrop-filter:blur(var(--s1));-webkit-backdrop-filter:blur(var(--s1))}
@media(max-width:850px){.topbar{height:calc(84px + env(safe-area-inset-top,0px));padding-inline:var(--s5)}.page-content{padding-top:var(--s4);padding-inline:var(--s5)}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.launch-tile{min-height:160px;padding:var(--s5)}.channels-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.list-layout{grid-template-columns:1fr}.page-heading h1{font-size:var(--title)}.page-heading .connection-badge{display:none}.app-brand{font-size:var(--s6)}.dashboard-tools .button{flex:1;min-width:120px}dialog{padding:var(--s6)}.source-item-actions{width:100%;justify-content:flex-start}.card-body h3{font-size:var(--small)}.card-body .channel-group,.card-programme{font-size:var(--micro)}.sample-badge{max-width:calc(100% - 64px)}.card-title-row{gap:var(--s2)}}
@media(max-width:540px){.topbar{padding-inline:var(--s4);gap:var(--s2)}.topbar-right{gap:0}.breadcrumb{flex:1}.app-brand{font-size:var(--s6)}.app-brand img{width:var(--s8);height:var(--s8)}.page-content{padding-inline:var(--s4)}.page-heading{margin-bottom:var(--s6)}body[data-view=discover] .page-heading{margin:var(--s2) 0 var(--s6)}body[data-view=discover] .page-heading h1{font-size:var(--title)}.page-heading p{font-size:var(--small)}.page-heading .eyebrow{font-size:var(--micro)}.dashboard-grid{gap:var(--s3)}.launch-tile{min-height:150px;gap:var(--s2);padding:var(--s4)}.launch-tile strong{font-size:var(--s5)}.launch-icon svg{width:var(--display);height:var(--display)}.launch-tile>span:not(.launch-icon){font-size:var(--micro)}.playlist-heading{margin-top:var(--s6)}.playlist-picker{gap:var(--s3)}.playlist-choice{min-width:92px;max-width:104px}.dashboard-tools{gap:var(--s2)}.dashboard-tools .button{padding:var(--s3);font-size:var(--micro);min-width:0}.dashboard-tools .button svg{width:var(--s4);height:var(--s4)}.library-toolbar{flex-direction:column;align-items:stretch;gap:var(--s3)}.active-source-control select{font-size:var(--body)}.search-box{flex:auto}.section-heading{flex-wrap:nowrap;gap:var(--s3)}.section-heading>div:first-child{min-width:0}.section-heading h2{font-size:var(--body)}.section-heading p{font-size:var(--small)}.layout-options .icon-button{width:var(--s10);height:var(--target);min-width:var(--s10)}.channels-grid{gap:var(--s6) var(--s3)}.list-layout .card-visual{width:104px}.list-layout .card-programme{max-width:40vw}.bottom-note{padding:var(--s4);gap:var(--s3)}.bottom-note>div:nth-child(2){min-width:150px}.bottom-note .text-button{font-size:var(--small)}.source-item{padding:var(--s4)}.source-item h3{font-size:var(--body)}.source-tabs button{font-size:var(--small);padding:var(--s2) var(--s1)}.player-heading h2{font-size:var(--body)}.player-dialog{width:calc(100% - var(--s4))}.video-container{aspect-ratio:16/10}footer{padding-top:var(--s6)}}
@media(max-width:350px){.app-brand{font-size:var(--s5)}.topbar{padding-inline:var(--s2)}.channels-grid{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.launch-tile{min-height:140px}.launch-tile strong{font-size:var(--body)}.dashboard-tools{justify-content:stretch}.dashboard-tools .button{flex-basis:40%}}
@media(prefers-reduced-transparency:reduce){.mobile-nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}.main::after{display:none}dialog::backdrop,.sidebar-shade.visible{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--veil)}}
@media(prefers-contrast:more){:root{--muted:#d3ddeb;--stroke-soft:#9aacc5;--border:#b8c9de}.mobile-nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}.main::after{display:none}}
@media(prefers-reduced-motion:reduce){.launch-tile:hover{transform:none}*,*::before,*::after{transition:none!important;animation:none!important}}