:root{color-scheme:dark;--ink:#f2f9ff;--muted:#b9cedd;--cyan:#75edf2;--blue:#69b6ff;--violet:#aa8cff;--edge:#68b8d371}
body{color:var(--ink);background:radial-gradient(ellipse 60% 35% at 52% 0%,#174c877a,transparent 85%),radial-gradient(ellipse 32% 30% at 96% 32%,#49317959,transparent 90%),linear-gradient(155deg,#060b19,#09162e 72%,#0a1023)}
::selection{background:#37d4e5;color:#061123}a,button,input,textarea{accent-color:var(--cyan)}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline-color:var(--cyan)}
.site-header{min-height:110px;border-color:var(--edge);gap:28px}.wordmark{flex:none}.wordmark img{display:block;width:220px;height:auto;filter:drop-shadow(0 8px 20px #1279c954)}.site-header nav{gap:5px;justify-content:center}.nav,.logout{border:1px solid transparent;border-radius:9px;padding:11px 14px;color:#c1d6e5}.nav.active{color:#fff;background:#123c62;border-color:#5ccce084}.nav:hover,.logout:hover{background:#18507877}.logout{border-color:var(--edge)}
main{padding-top:60px}.view>h1,.intro h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.035em;font-weight:750;text-wrap:balance}.intro h1 em{font-style:normal;color:var(--cyan)}.kicker{color:var(--cyan)}.intro>p:last-child,.view>p:not(.kicker),.bottom-cards p,.content-card p,.small-note{color:var(--muted)}
.player-card{grid-template-columns:minmax(220px,37%) 1fr;background:linear-gradient(125deg,#102743,#0b1933 60%,#261a47);border-color:#60d6e78a;border-radius:21px;box-shadow:0 38px 78px #020716a8,0 1px 0 #c9f8ff22 inset;position:relative;overflow:hidden}.player-card:before{content:"";position:absolute;width:360px;height:360px;right:-140px;top:-200px;border:1px solid #a4d0ff56;border-radius:50%;pointer-events:none}.record{background:radial-gradient(circle at 50% 50%,#0e1a37 0 20%,transparent 21%),repeating-radial-gradient(circle,#081226 0 4px,#182c4d 5px 7px,#091729 8px 11px);box-shadow:18px 28px 48px #020612a8,0 0 0 9px #091830,0 0 0 10px #4debf496}.record:before{content:"";position:absolute;inset:-8%;border:1px solid #65c7ff75;border-radius:50%;transform:rotate(-17deg) scaleY(.58);pointer-events:none}.record-label{width:40%;background:#07152e url('emti-radio-orbit.png') center/100% auto no-repeat;border:1px solid #62d7f7a0;box-shadow:0 0 24px #28c9f755}.record-label span{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.live-line{color:#c2edf2}.live-dot{background:var(--cyan);box-shadow:0 0 0 4px #75edf228}.private-badge{border-color:#87d9ec72;color:#e5f8ff}.player-content h2,.content-card h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:710;letter-spacing:-.025em}.artist,.notice,.time{color:var(--muted)}.progress{background:#9ec4da42}.progress-fill{background:linear-gradient(90deg,var(--cyan),var(--violet))}.primary{background:linear-gradient(105deg,#7af5ef,#75bbff);color:#061629;box-shadow:0 12px 25px #0628466b}.primary:hover{filter:brightness(1.1)}.secondary{background:#ffffff0d;color:#eafaff;border-color:#7dc4d080}.secondary:hover{background:#65d7f526}
.bottom-cards article,.content-card{background:#0c1a31d9;border-color:#6ea7c849;border-radius:15px}.card-icon,.program-row>span{color:var(--cyan)}.program-row{border-color:#9dc8df27}.program-row div span{color:var(--muted)}label{color:#e2f0f7}input,textarea{background:#071327;border-color:#719ab1;color:#f3fbff}input:focus,textarea:focus{border-color:var(--cyan)}.status-list dd{color:#a5eef3}.track{background:#071527;border-color:#6ea7c849}.icon-button{background:#123d59;border-color:#75b6cf}progress{accent-color:var(--cyan)}footer{border-color:var(--edge);color:#adc5d4}
.login-brand img{display:block;width:min(100%,340px);height:auto;margin:auto;filter:drop-shadow(0 14px 28px #177de154)}.login-card{background:linear-gradient(135deg,#102743,#0a1731 70%,#221942);border-color:#6bdde985;border-radius:20px}.login-card h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:750;letter-spacing:-.025em}.login-card>p:not(.kicker),.privacy-line{color:var(--muted)}
.password-field{position:relative}.password-field input{padding-right:112px}.password-toggle{position:absolute;right:5px;top:5px;min-height:42px;min-width:96px;padding:6px 10px;border:0;border-radius:8px;background:#244d6c;color:#effaff;font-size:13px;font-weight:700}.password-toggle:hover{background:#326b90}.password-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media(max-width:980px){.site-header{gap:12px}.wordmark img{width:184px}.site-header nav{gap:2px}.nav,.logout{padding:10px 9px;font-size:13px}}
@media(max-width:760px){.site-header{min-height:0}.wordmark img{width:176px}.site-header nav{justify-content:flex-start}.player-card{grid-template-columns:1fr}.record{max-width:205px}}
@media(max-width:480px){.wordmark img{width:155px}.nav{padding:10px 9px;font-size:12px}.record{max-width:170px}.view>h1,.intro h1{font-size:42px}}
.nav-short{display:none}.view:not([hidden]){animation:panel-in .22s cubic-bezier(.2,.8,.2,1) both}@keyframes panel-in{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}
.primary,.secondary,.nav,.logout,.bottom-cards article,.content-card{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}.primary:not(:disabled):active,.secondary:not(:disabled):active,.nav:active{transform:scale(.97)}.bottom-cards article:hover{border-color:#83dcec80;transform:translateY(-2px)}.notice{line-height:1.5}.primary:disabled{box-shadow:none;background:#163b52;color:#cbe5ed;border:1px solid #6e9eb2;opacity:1}.player-card.is-playing .record{box-shadow:18px 28px 48px #020612a8,0 0 0 9px #091830,0 0 0 10px #4debf4a6,0 0 34px #42d7e178}.player-card:not(.is-playing) .live-dot{background:#a8c9d4;box-shadow:0 0 0 4px #a8c9d424}.player-card:not(.is-playing) .progress{opacity:.58}
@media(max-width:760px){html,body{max-width:100%;overflow-x:hidden}.site-wrap{padding-inline:18px}.site-header{padding:8px 0;min-height:66px}.wordmark img{width:158px}.logout{min-height:44px;padding:8px 12px}.site-header nav{position:fixed;z-index:20;left:0;right:0;bottom:0;order:initial;width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));background:#091429f2;border-top:1px solid #76d9e584;box-shadow:0 -12px 36px #0208139c;overflow:visible;backdrop-filter:blur(14px)}body.is-admin .site-header nav{grid-template-columns:repeat(5,minmax(0,1fr))}.nav{min-width:0;min-height:52px;padding:7px 3px;white-space:normal;font-size:12px;line-height:1.15}.nav-full{display:none}.nav-short{display:inline}main{padding:26px 0 calc(112px + env(safe-area-inset-bottom));min-height:70dvh}.intro{margin-bottom:20px}.intro h1{font-size:clamp(31px,8vw,43px);margin:0 0 10px}.intro p:last-child{font-size:14px;line-height:1.45;margin:0}.kicker{font-size:10px;margin-bottom:9px}.player-card{gap:16px;min-height:0;padding:22px 20px 25px;border-radius:20px}.record{max-width:128px}.player-content h2{font-size:clamp(27px,7vw,38px);margin:17px 0 5px;overflow-wrap:anywhere}.artist{font-size:15px}.live-line{font-size:10px}.progress{margin-top:22px}.controls{margin-top:22px}.controls>*{min-height:50px}.notice{margin-top:15px}.bottom-cards{gap:10px}.bottom-cards article{padding:18px}.content-card{padding:22px}.view>h1{font-size:clamp(32px,8vw,44px)}footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
@media(max-width:760px){.progress{height:8px;background:#58758f;box-shadow:0 0 0 1px #b6d5e366,0 3px 12px #020813aa;opacity:1!important}.progress-fill{background:linear-gradient(90deg,#75f2df,#8d9dff);box-shadow:0 0 10px #79e9e7cc}.time{color:#d6e8e8;font-weight:650;text-shadow:0 1px 3px #020813}}
@media(max-width:760px){body .player-card .progress{height:10px;background:#91afc2!important;border:1px solid #d8f7ff!important;box-shadow:0 0 0 1px #ffffffaa,0 3px 14px #020813cc;opacity:1!important}.player-card .progress-fill{background:#55ffe0!important;box-shadow:0 0 12px #55ffe0,0 0 4px #ffffff!important}.player-card .time{color:#f4ffff!important;font-size:15px;font-weight:800;text-shadow:0 1px 4px #020813}}
@media(max-width:760px){.site-header{padding-top:calc(8px + env(safe-area-inset-top))}.login-layout{padding-top:calc(25px + env(safe-area-inset-top))}.login-card{padding:27px 23px}.login-card h1{font-size:clamp(32px,9vw,42px)}.login-brand{margin-bottom:18px}.login-brand img{width:min(100%,275px)}}
@media(max-width:390px){.site-wrap{padding-inline:14px}.wordmark img{width:144px}.nav{font-size:11px}.record{max-width:116px}.player-card{padding:19px 17px}.controls{flex-direction:column}.controls>*{width:100%}.bottom-cards article{gap:12px}.track-actions{flex-wrap:wrap;justify-content:flex-end}}
@media(max-height:520px) and (orientation:landscape){.site-header nav{position:static;display:flex;box-shadow:none;background:none;border:0;padding:0;flex-basis:100%;overflow:auto}.nav{min-height:44px;white-space:nowrap}.site-header{flex-wrap:wrap}main{padding-bottom:40px}footer{padding-bottom:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.view:not([hidden]){animation:none}.primary,.secondary,.nav,.logout,.bottom-cards article,.content-card{transition:none}}

.premiere-note{display:block;margin-top:8px;color:#6f8b98;font-size:11px;letter-spacing:.02em;line-height:1.4}@media(max-width:760px){.premiere-note{font-size:10px;max-width:32rem}}

/* Cinematic polish: lightweight lighting layers with clear content contrast. */
body{position:relative;isolation:isolate;background:radial-gradient(ellipse 72% 48% at 50% -12%,#256fb04d,transparent 74%),radial-gradient(ellipse 42% 42% at 100% 38%,#7848b738,transparent 78%),radial-gradient(ellipse 34% 34% at 0% 65%,#147e9850,transparent 78%),linear-gradient(155deg,#050a18 0%,#09162c 54%,#0b1023 100%)}
body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body:before{background:radial-gradient(ellipse at 50% 31%,#65e5ff0b,transparent 39%),radial-gradient(ellipse at 50% 100%,#a756ff14,transparent 46%)}
body:after{opacity:.13;background-image:linear-gradient(#b9eaff0b 1px,transparent 1px),linear-gradient(90deg,#b9eaff0b 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 82%)}
.site-wrap{position:relative;z-index:1}
.site-header{border-bottom-color:#75dff23d;background:linear-gradient(180deg,#09172a59,transparent);backdrop-filter:blur(5px)}
main{padding-top:clamp(42px,6vw,76px)}
.intro{position:relative;max-width:900px;margin-bottom:clamp(30px,4vw,52px)}
.intro:after{content:"";display:block;width:clamp(92px,13vw,164px);height:2px;margin-top:27px;border-radius:9px;background:linear-gradient(90deg,var(--cyan),#a980ff 72%,transparent);box-shadow:0 0 22px #51dff573}
.kicker{display:flex;align-items:center;gap:12px;text-shadow:0 0 20px #52e7ff55}
.kicker:before{content:"";width:22px;height:1px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.intro h1{font-size:clamp(48px,7.2vw,88px);line-height:.99;text-shadow:0 8px 48px #3bc9ff20}
.intro h1 em{background:linear-gradient(100deg,#77f3f2 5%,#8bd1ff 52%,#c2a0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px #6b80ff20)}
.intro>p:last-child{max-width:600px;font-size:clamp(15px,1.45vw,18px);line-height:1.7}
.player-card{isolation:isolate;background:linear-gradient(118deg,#102949f5 0%,#0b1832f7 49%,#251944f5 100%);border-color:#76e8f29c;border-radius:26px;box-shadow:0 38px 100px #010611c7,0 0 0 1px #b8f5ff12 inset,0 0 72px #389ed51c;transition:box-shadow .24s ease,border-color .24s ease}
.player-card:before{width:clamp(330px,42vw,520px);height:clamp(330px,42vw,520px);right:-190px;top:-300px;border-color:#b0b5ff65;box-shadow:0 0 65px #814dff12}
.player-card:after{content:"";position:absolute;top:-28%;bottom:-28%;left:-48%;width:34%;border-radius:50%;z-index:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 0%,#8eeeff08 30%,#c5faff35 49%,#a5dfff16 56%,transparent 100%);filter:blur(9px);transform:translateX(-220%) skewX(-18deg);animation:player-glint 24s ease-in-out infinite}
.player-card>*{position:relative;z-index:1}
.record-area{position:relative;isolation:isolate}
.record-area:before{content:"";position:absolute;z-index:-1;width:125%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#4de9ff19 0%,#559cff0d 39%,transparent 70%);pointer-events:none}
.record{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;filter:drop-shadow(0 15px 28px #06122670)}
.record:hover,.record:focus-visible{transform:perspective(600px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.025);box-shadow:18px 28px 48px #020612a8,0 0 0 9px #091830,0 0 0 11px #4debf4b5,0 0 42px #42d7e178}
.record:active{transform:perspective(600px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(.975)}
.player-content h2{text-shadow:0 8px 35px #47cfff1c}
.live-dot{box-shadow:0 0 0 4px #75edf228,0 0 18px #75edf2a0}
.progress{box-shadow:0 0 0 1px #a9eaff12 inset}
.program-row{align-items:center}.program-row .cover-preview{position:relative;flex:none;width:56px;height:56px;padding:0;border:1px solid #86d9e9;border-radius:6px;background:#091429;cursor:pointer}.cover-preview>img:first-child{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}.program-row .cover-preview:focus-visible{outline:3px solid #75edf2;outline-offset:3px}.cover-enlarged{display:none;position:absolute;z-index:15;left:50%;bottom:calc(100% + 9px);width:min(240px,65vw);height:auto;aspect-ratio:1;object-fit:cover;transform:translateX(-50%);border:1px solid #86d9e9;border-radius:8px;box-shadow:0 10px 30px #000b;pointer-events:none}.cover-preview[aria-expanded="true"] .cover-enlarged{display:block}@media(hover:hover){.cover-preview:hover .cover-enlarged,.cover-preview:focus-visible .cover-enlarged{display:block}}@media(max-width:760px){.program-row{gap:12px}.program-row>span{min-width:30px}.program-row .cover-preview{width:48px;height:48px}.cover-enlarged{left:0;transform:none;width:min(220px,60vw)}}
.primary:not(:disabled){box-shadow:0 12px 25px #0628466b,0 0 28px #61e6eb17}
.bottom-cards article,.content-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#10213ad9,#0b172bd9 62%,#17182dd9);border-color:#7dbce04d;box-shadow:0 16px 40px #02091645,0 1px 0 #d9f7ff0b inset}
.bottom-cards article:before,.content-card:before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,#71eaf2a8,#b58bff88,transparent)}
.bottom-cards article:hover,.content-card:hover{border-color:#86e8f07a;box-shadow:0 20px 48px #02091660,0 0 30px #45d9ed0c,0 1px 0 #d9f7ff11 inset}
.bottom-cards article>* ,.content-card>*{position:relative;z-index:1}
.view>h1{ text-shadow:0 8px 36px #5bbfff22}
footer{color:#9db7ca}
@media(max-width:760px){
 body:after{background-size:54px 54px;opacity:.09}
 main{padding-top:34px}
 .intro{margin-bottom:25px}
 .intro:after{margin-top:19px;width:86px}
 .intro h1{font-size:clamp(38px,9vw,52px);line-height:1.01;letter-spacing:-.045em}
 .intro>p:last-child{max-width:38rem;line-height:1.55}
 .player-card{border-radius:22px;box-shadow:0 26px 70px #010611bd,0 0 42px #389ed51b,0 1px 0 #b8f5ff12 inset}
 .player-card:before{right:-220px;top:-260px}
 .record{box-shadow:14px 22px 38px #020612a8,0 0 0 7px #091830,0 0 0 8px #4debf496}
 .bottom-cards article,.content-card{box-shadow:0 12px 30px #02091645,0 1px 0 #d9f7ff0b inset}
}
@media(prefers-reduced-motion:reduce){.player-card,.record{transition:none}}

/* Calm ambient light; animations use only opacity/transform and pause for reduced motion. */
body:before{animation:ambient-breathe 26s ease-in-out infinite alternate}
@keyframes ambient-breathe{from{opacity:.48}to{opacity:.9}}
@keyframes player-glint{0%,68%{opacity:0;transform:translateX(-220%) skewX(-18deg)}73%{opacity:.72}88%{opacity:.5;transform:translateX(460%) skewX(-18deg)}92%,100%{opacity:0;transform:translateX(460%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){body:before,.player-card:after{animation:none!important;opacity:1}.player-card:after{display:none}}

/* Brief interaction glints for cards: once on appearance, or on hover/focus/touch. */
.bottom-cards article:after,.content-card:after{content:"";position:absolute;z-index:0;top:-34%;bottom:-34%;left:-42%;width:25%;border-radius:50%;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 0%,#85edff0b 30%,#c7faff30 49%,#b6cfff15 58%,transparent 100%);filter:blur(7px);transform:translateX(-240%) skewX(-18deg)}
.view:not([hidden]) .bottom-cards article:after,.view:not([hidden]) .content-card:after{animation:card-glint 1.05s ease-out both}
.view:not([hidden]) .bottom-cards article:nth-child(2):after,.view:not([hidden]) .content-card:nth-of-type(2):after{animation-delay:.16s}
.view:not([hidden]) .content-card:nth-of-type(3):after{animation-delay:.3s}
@keyframes card-glint{0%{opacity:0;transform:translateX(-240%) skewX(-18deg)}18%{opacity:.72}100%{opacity:0;transform:translateX(520%) skewX(-18deg)}}
@media(hover:hover) and (pointer:fine){.bottom-cards article:hover:after,.content-card:hover:after{animation:card-glint .78s ease-out 1}}
.bottom-cards article:focus-within:after,.content-card:focus-within:after{animation:card-glint .85s ease-out 1}
.bottom-cards article:active:after,.content-card:active:after{opacity:.7;transform:translateX(20%) skewX(-18deg);transition:opacity .12s ease,transform .24s ease}
@media(prefers-reduced-motion:reduce){.view:not([hidden]) .bottom-cards article:after,.view:not([hidden]) .content-card:after,.bottom-cards article:hover:after,.content-card:hover:after,.bottom-cards article:focus-within:after,.content-card:focus-within:after{animation:none!important}.bottom-cards article:active:after,.content-card:active:after{transition:none;opacity:0}}

