:root{--color-primary:#0071e3;--color-secondary:#0b6b58;--color-background:#f5f5f7;--color-surface:#fff;--color-text:#111;--color-text-secondary:#62626a;--color-border:#d8d8df;--radius-small:8px;--radius-medium:12px;--radius-large:16px;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:24px;--spacing-6:32px;--ui-sidebar:232px;--ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

body.idev4{font-family:var(--ui-font);padding-left:var(--ui-sidebar);overflow-x:clip;background:var(--color-background)}

.idev4 *, .idev4 *:before,.idev4 *:after{box-sizing:border-box}
.idev4 :focus-visible{outline:3px solid var(--color-primary);outline-offset:4px}
.idev4 img{max-width:100%}
.idev4 input,.idev4 textarea,.idev4 select{font-family:var(--ui-font);font-size:16px;max-width:100%}
.idev4 button{font-family:var(--ui-font);min-height:44px}
.idev4 main{min-width:0}
.idev4 section[id]{scroll-margin-top:90px}
.ui-sidebar{position:fixed;inset:0 auto 0 0;width:var(--ui-sidebar);z-index:40;padding:var(--spacing-5) var(--spacing-4);background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--spacing-6);overflow:auto}
.ui-brand{display:flex;gap:var(--spacing-3);align-items:center;color:var(--color-text);text-decoration:none;font-weight:700;font-size:15px}
.ui-brand img{border-radius:var(--radius-small)}
.ui-brand small{display:block;font-size:10px;color:var(--color-text-secondary);font-weight:400;margin-top:4px}
.ui-links{display:flex;flex-direction:column;gap:var(--spacing-2)}
.ui-links a{display:flex;align-items:center;gap:var(--spacing-3);padding:12px;border-radius:var(--radius-medium);font-size:15px;color:var(--color-text-secondary);text-decoration:none;min-height:48px}
.ui-links a:hover{background:var(--color-background)}
.ui-links a[aria-current]{background:#eaf3ff;color:#005bb8;font-weight:650}
.ui-links svg,.ui-bottom svg{width:22px;height:22px;flex-shrink:0}
.ui-sidebar-note{margin-top:auto;color:var(--color-text-secondary);font-size:12px}
.ui-bottom{display:none}
.ui-skip{position:fixed;top:-80px;left:16px;z-index:100;padding:12px;background:white;color:#111}
.ui-skip:focus{top:12px}
.idev4 .topbar{left:calc(var(--ui-sidebar) + 24px);right:24px;width:auto;transform:none;border-radius:var(--radius-large);top:16px}
.idev4 .topbar .nav-links{display:none}
.idev4 .wrap{width:min(var(--max,1120px),calc(100% - 48px))}
.idev4 .ui-field-label{font-size:14px;font-weight:600;margin:12px 0 6px}
.idev4 .ui-field-label[data-lang]{display:none}
.idev4 .ui-field-label.active{display:block}
.idev4 .lang-switch{flex-wrap:wrap}
.idev4 .lang-switch button{min-width:44px}
.idev4 .whatsapp-float{bottom:24px}
.ui-install{margin:32px auto;padding:24px;max-width:1120px;background:#fff;border:1px solid var(--color-border);border-radius:16px}
.ui-install button{padding:12px 20px;background:var(--color-primary);color:#fff;border:0;border-radius:12px;cursor:pointer}
.idev4 [hidden]{display:none!important}

body.admin-app{--color-background:#f7f4ee;--color-secondary:#12635e}
.radio-app .site-header{position:sticky;top:0;z-index:30}
.radio-app .nav{flex-wrap:wrap;height:auto;gap:12px;padding-block:12px}
.radio-app .nav-links{flex-wrap:wrap}
.radio-app .nav-links a{padding-block:12px}
.radio-app .hero,.radio-app .container{max-width:100%}
.radio-app .hero{min-width:0}
.radio-app .radio-air{display:none}
.admin-app header{padding:16px 24px}
.admin-app main{padding:32px 24px}
.admin-app .layout{gap:24px}
.admin-app .panel{padding:24px}
.admin-app .row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.admin-app .episode .actions button{min-height:44px}
.admin-app .intro h1{font-size:clamp(28px,4vw,40px)}

#ui-menu{border:1px solid var(--color-border);border-radius:24px;padding:24px;width:min(440px,calc(100% - 24px));max-height:85dvh;color:var(--color-text);background:#fff}
#ui-menu::backdrop{background:#10141866;backdrop-filter:blur(4px)}
.ui-sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ui-sheet-heading h2{margin:0;font-size:24px}
.ui-sheet-heading button{border:0;background:var(--color-background);border-radius:50%;width:44px;color:#111;font-size:26px;cursor:pointer}

@media(max-width:1100px) and (min-width:761px){:root{--ui-sidebar:196px}
.admin-app .layout{grid-template-columns:1fr}
.idev4 .ui-brand small{display:none}
.radio-app .hero{grid-template-columns:1fr}
}

@media(max-width:760px){body.idev4{padding-left:0;padding-bottom:calc(82px + env(safe-area-inset-bottom));overflow-x:clip}
.ui-sidebar{display:none}
.ui-bottom{position:fixed;inset:auto 0 0;display:flex;justify-content:space-around;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid var(--color-border);padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:4px}
.ui-bottom a,.ui-bottom button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:50px;padding:4px;border:0;border-radius:8px;background:transparent;color:var(--color-text-secondary);font-size:11px;text-decoration:none;font-weight:600}
.ui-bottom [aria-current]{color:#005bb8;background:#eaf3ff}
.idev4 .topbar{left:12px;right:12px;top:max(8px,env(safe-area-inset-top));padding:6px;border-radius:16px;align-items:center;gap:4px}
.idev4 .brand{font-size:13px;gap:6px;padding-right:0}
.idev4 .topbar .brand img{width:30px;height:30px}
.idev4 .lang-switch{gap:0;justify-content:flex-end}
.idev4 .lang-switch button{padding:8px;font-size:12px}
.idev4 .wrap{width:calc(100% - 32px)}
.idev4 .whatsapp-float{bottom:calc(90px + env(safe-area-inset-bottom));right:16px}
.idev4 .grid{grid-template-columns:1fr}
.idev4 form{min-width:0}
.idev4 input,.idev4 textarea,.idev4 select{min-width:0}
.idev4 h1{overflow-wrap:break-word}
.radio-app .nav{padding:12px 16px}
.radio-app .nav-links{display:flex;gap:12px;font-size:12px}
.radio-app .hero{padding:24px 16px;grid-template-columns:1fr}
.radio-app .hero h1{font-size:clamp(32px,9vw,48px)}
.radio-app .episode-player{grid-template-columns:1fr}
.radio-app audio,.admin-app audio{width:100%;min-width:0}
.radio-app .ui-install{margin:24px 16px}
.admin-app header{flex-wrap:wrap;padding:12px 16px;gap:8px}
.admin-app header nav{flex-wrap:wrap}
.admin-app main{padding:24px 16px}
.admin-app .layout{grid-template-columns:1fr}
.admin-app .panel,.admin-app .episode{padding:16px}
.admin-app .row{grid-template-columns:1fr}
.admin-app dialog{padding:20px}
.admin-app .dialog-actions{flex-wrap:wrap}
.admin-app dialog[open],#ui-menu[open]{position:fixed;margin:auto auto 0;inset:auto 0 0;border-radius:24px 24px 0 0;width:100%;max-width:none;max-height:90dvh;padding-bottom:calc(24px + env(safe-area-inset-bottom));overflow:auto}
.idev4 section[id]{scroll-margin-top:120px}
}

@media(prefers-reduced-motion:reduce){.idev4 *,.idev4 *:before,.idev4 *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.idev4 .reveal{opacity:1;transform:none}
}

@media print{body.idev4{padding:0!important;background:#fff}
.ui-sidebar,.ui-bottom,.ui-skip,#ui-menu,.ui-install{display:none!important}
}

/* Light surfaces retain each section's existing accent colors. */
.idev4.dj-app{--bg:#f5f5f7;--panel:#fff;--ink:#172025;--muted:#62626a;--line:#d8d8df;--accent:#0071e3;color:var(--ink)}

.dj-app p,.dj-app li,.dj-app .lead{color:var(--muted)}
.dj-app .topbar{background:rgba(255,255,255,.94)}
.dj-app .brand{color:var(--ink)}
.dj-app .lang-switch button{color:var(--muted)}
.dj-app .lang-switch button.active{color:#fff;background:#172025}
.dj-app form,.dj-app li,.dj-app .event-type,.dj-app input,.dj-app textarea{background:#fff}
.dj-app .visualizer{opacity:.15}
.dj-app .hero-inner{gap:24px}
.dj-app .btn{background:#fff;border-color:var(--line);color:var(--ink)}

.radio-app .hero{background:var(--color-background);color:var(--color-text);min-height:600px}
.radio-app .hero:before{background:linear-gradient(90deg,#f5f5f7 8%,#f5f5f7f2 45%,#f5f5f770),url('/Radio/assets/radio-hero.png') center/cover no-repeat}
.radio-app .hero-copy p{color:#465256}
.radio-app .eyebrow,.radio-app .next-strip span{color:var(--color-text-secondary)}
.radio-app .button-secondary{color:#172025;background:#fff;border-color:#ded7ca}
.radio-app .next-strip{background:#ffffffd9;border-color:#ded7ca}
.radio-app .about,.radio-app .site-footer{background:#fff;color:#172025}
.radio-app .about p,.radio-app .about-item p{color:#626b6e}
.radio-app .about-item svg{background:var(--color-background);color:var(--color-primary)}
.radio-app .hero h1{font-size:clamp(36px,5vw,72px)}
.radio-app .button,.radio-app .episode-card,.radio-app .subscribe-box{border-radius:var(--radius-medium)}

.idev4 .ui-links a{color:var(--color-text-secondary)}
.idev4 .ui-links a[aria-current]{color:#005bb8}
.idev4 .ui-brand{color:var(--color-text)}

@media(max-width:1100px){.dj-app .hero-inner{grid-template-columns:1fr}
.radio-app .section-heading{grid-template-columns:1fr}
.radio-app .hero-content{padding:40px 0}
.radio-app .hero{min-height:auto}
}

@media(max-width:760px){.radio-app .hero h1{font-size:clamp(32px,9vw,48px)}
.dj-app main{padding-inline:0}
.idev4 .ui-bottom button{width:auto;justify-self:auto}
.idev4 .ui-bottom{font-family:var(--ui-font)}
.idev4 .topbar{z-index:35}
.idev4 .ui-bottom a{color:var(--color-text-secondary)}
.idev4 .ui-bottom a[aria-current]{color:#005bb8}
}

.dj-app .now-playing{background:#fff;box-shadow:0 12px 32px #17202510}
.dj-app .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.dj-app .btn.primary:hover{background:#005bb8}
.radio-app .about-item{border-color:var(--color-border)}

/* Fit content to the space remaining beside the desktop navigation. */
.idev4 main{max-width:100%}
.public-app .hero-content{min-width:0;width:100%}
.public-app .hero{min-width:0}
@media(max-width:760px){.public-app .hero{grid-template-columns:minmax(0,1fr)}}

/* Radio shares the public site's neutral surfaces and blue accents. */
body.radio-app{--bg:var(--color-background);--ink:var(--color-text);--muted:var(--color-text-secondary);--panel:var(--color-surface);--line:var(--color-border);--amber:var(--color-primary);--amber-dark:#005bb8;--teal:var(--color-secondary);--teal-soft:#eaf3ff}
.radio-app .site-header{background:rgba(255,255,255,.94);border-color:var(--color-border)}
.radio-app .featured,.radio-app .schedule{background:var(--color-background)}
.radio-app .hero-copy p,.radio-app .about p,.radio-app .about-item p{color:var(--color-text-secondary)}
.radio-app .button-primary{background:var(--color-text);color:var(--color-surface)}
.radio-app .button-secondary{color:var(--color-text);background:var(--color-surface);border-color:var(--color-border)}
.radio-app .next-strip{background:var(--color-surface);border-color:var(--color-border)}
.radio-app .pill{color:#005bb8;background:#eaf3ff}
.radio-app .episode-link,.radio-app .episode-card time{color:var(--color-primary)}
.radio-app .subscribe-box{background:var(--color-surface);border-color:var(--color-border)}
.radio-app .live-dot{background:var(--color-primary);box-shadow:0 0 0 8px #0071e31a}
.radio-app .about,.radio-app .site-footer{color:var(--color-text)}

.ui-links .ui-service-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0;margin-inline:-3px}
/* Mobile navigation lives in the top ellipsis menu. */
.ui-menu-trigger{display:none}
.ui-menu-controls{border-top:1px solid var(--color-border);margin-top:16px;padding-top:12px}
.ui-menu-controls>p{font-size:13px;font-weight:600;color:var(--color-text-secondary);margin:0 0 8px}
.ui-menu-controls:empty{display:none}
@media(max-width:760px){
 body.idev4{padding-bottom:env(safe-area-inset-bottom)}
 .idev4 .ui-bottom{display:none!important}
 .idev4 .ui-menu-trigger{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-width:44px;margin-left:auto;padding:10px;border:0;border-radius:12px;background:var(--color-background);color:var(--color-text);cursor:pointer}
 .ui-menu-trigger svg{width:24px;height:24px}
 .idev4 .whatsapp-float{bottom:calc(20px + env(safe-area-inset-bottom))}
 .admin-app header{position:sticky;top:0;z-index:35}
 .idev4 #ui-menu[open]{inset:max(76px,calc(env(safe-area-inset-top) + 68px)) 12px auto auto;margin:0;width:min(380px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 96px - env(safe-area-inset-bottom));border-radius:20px;padding:16px;overflow:auto}
 #ui-menu .ui-links{gap:2px}
 #ui-menu .ui-links a{padding:8px 12px;min-height:44px}
 #ui-menu .lang-switch{display:flex;justify-content:flex-start;gap:8px}
 #ui-menu .lang-switch button{padding:8px 14px;font-size:14px;color:var(--color-text-secondary);background:var(--color-background);border:0;border-radius:10px}
 #ui-menu .lang-switch button.active{background:var(--color-text);color:var(--color-surface)}
 #ui-menu .nav-links,#ui-menu .ui-menu-controls>nav{display:flex;flex-wrap:wrap;gap:8px}
 #ui-menu .nav-links a,#ui-menu .ui-menu-controls>nav a{padding:10px;min-height:44px;font-size:14px}
}
@media print{.ui-menu-trigger{display:none!important}}
@media(max-width:760px){.radio-app .site-header .nav{flex-direction:row;align-items:center;flex-wrap:nowrap}}

.idev4 .section[id],.idev4 .article[id]{scroll-margin-top:100px}

/* The menu close button has the same geometry on every page. */
.idev4 #ui-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:50%;line-height:1;background:var(--color-background);color:var(--color-text);box-shadow:none;outline:none;-webkit-tap-highlight-color:transparent}
.idev4 #ui-close svg{display:block;width:20px;height:20px;flex-shrink:0}
.idev4 #ui-menu[data-keyboard="true"] #ui-close:focus-visible{outline:2px solid var(--color-text-secondary);outline-offset:3px}
@media(max-width:760px){
 body.dj-app,.dj-app main,.dj-app .hero{background:var(--color-surface)}
 .dj-app .visualizer,.dj-app .hero::after{display:none}
 .dj-app .hero{padding-bottom:32px}
 .dj-app .now-playing{box-shadow:0 8px 24px #17202508}
}
@media(max-width:760px){.dj-app .reveal{opacity:1;transform:none;transition:none}}

/* Center each mobile toolbar title independently of its side controls. */
@media(max-width:760px){
 .idev4 .topbar .brand,.radio-app .site-header .brand,.admin-app header .brand{flex:1;min-width:0}
 .idev4 .topbar .brand span,.radio-app .site-header .brand span,.admin-app header .brand span{position:absolute;left:50%;transform:translateX(-50%);width:calc(100% - 144px);white-space:normal;text-align:center;font-size:14px;line-height:1.2;text-wrap:balance}
}