:root{color-scheme:dark;--bg:#0d1020;--card:#171d32;--line:#36415f;--muted:#abb6d0;--green:#c9ff74;--red:#ff867e}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#f6f8ff;font:15px/1.45 system-ui,sans-serif}
a{color:#cbd5ff}
[hidden]{display:none!important}
.top,.shell{max-width:1250px;margin:auto;padding:20px clamp(12px,4vw,40px)}
.top,.onair{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.top h1,h2{margin:0 0 8px} h1{font-size:clamp(1.7rem,4vw,2.6rem)}
.eyebrow{text-transform:uppercase;font-size:.72rem;letter-spacing:.14em;color:var(--green);font-weight:800}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:clamp(12px,2vw,20px);min-width:0}
.onair{margin-bottom:14px}.share{grid-column:1/-1}.pill{padding:8px 12px;border-radius:100px;background:#31394f}
.pill.live{background:#8d2628;color:white;font-weight:800}
.row,.pads{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:8px 0}
button,input,select,textarea{font:inherit;color:inherit;border:1px solid var(--line);border-radius:8px;background:#202945;padding:8px;min-height:44px;max-width:100%}
button{cursor:pointer;background:#304365;padding-inline:12px}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.danger{background:#70282f}.pads button{background:#51377e}.muted,.notice{color:var(--muted)}.notice:empty{display:none}
label{display:block;margin:6px 0}label>input:not([type=checkbox]),label>select,label>textarea,label>meter{display:block;width:100%}
input[type=checkbox]{min-height:0}.dials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.dials label{background:#10172a;border-radius:10px;padding:8px}.dials output{display:grid;place-items:center;width:clamp(42px,7vw,62px);aspect-ratio:1;margin:6px auto;color:var(--green);font-variant-numeric:tabular-nums;border-radius:50%;background:radial-gradient(circle,#10172a 58%,transparent 61%),conic-gradient(var(--green) var(--value,0%),#34405b 0)}
.dials input{padding:0;min-height:44px;accent-color:var(--green)}
meter{height:16px}.item{border-top:1px solid var(--line);padding:8px 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.item>span{flex:1 1 130px;overflow-wrap:anywhere}.now{color:var(--green)}.listen{padding:10px}.listen h1{font-size:1.45rem}.listen audio{width:100%;margin-bottom:8px}
@media(max-width:700px){.board{grid-template-columns:1fr}.dials{grid-template-columns:repeat(2,minmax(0,1fr))}.share{grid-column:auto}}

/* Desktop console rack. On small screens the modules follow the playout order. */
#studio{--bg:#090d14;--card:#151c28;--line:#354151;--muted:#aab8c7;--green:#b5fa6c}
#studio .top,#studio .shell{max-width:1560px;padding-inline:clamp(10px,2vw,28px)}
#studio .top{border-bottom:1px solid #283343;padding-block:12px}
#studio .top h1{margin:0;font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.045em}
#studio .shell{padding-top:12px}
#studio .card{border-radius:8px;padding:12px;background:linear-gradient(155deg,#192231,#111823 70%);box-shadow:inset 0 1px #ffffff0c}
#studio .onair{justify-content:flex-start;gap:14px;padding:10px 14px;margin-bottom:8px}
.station-ident{display:flex;align-items:center;gap:10px;flex:1;min-width:170px}
.station-ident h2{margin:0;font-size:1.25rem}
.station-art{width:48px;height:48px;object-fit:contain;border-radius:5px;background:#0c111b}
.listen .station-art{float:right;width:52px;height:52px;margin-left:8px}
.listen .station-description{font-size:.85rem;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clock,.timecode{font:600 .95rem/1.4 ui-monospace,monospace;color:#c3ffc7;letter-spacing:.06em}
#studio .board{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(280px,.95fr);gap:8px;align-items:start}
.module-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:-12px -12px 10px;padding:7px 10px;border-bottom:1px solid var(--line);background:#0e1520;border-radius:8px 8px 0 0;font:700 .78rem ui-monospace,monospace;letter-spacing:.07em}
.tag{font-size:.65rem;color:#b0bfce;border:1px solid #435065;padding:3px 5px;border-radius:4px;white-space:nowrap}
.deck{--deck:#54e5df}
.deck-b{--deck:#f5b75c}
.deck .module-head strong,.deck .eyebrow{color:var(--deck)}
.deck-readout{display:flex;align-items:center;gap:12px;min-height:90px;background:#0a1018;border:1px solid #303b49;border-radius:6px;padding:10px}
.deck-readout>div{min-width:0}
.deck-readout h2{font-size:clamp(.95rem,1.45vw,1.25rem);overflow-wrap:anywhere;margin:2px 0 6px}
.platter{width:64px;aspect-ratio:1;flex:none;border-radius:50%;border:2px solid #53616d;background:radial-gradient(circle,var(--deck) 0 7%,#18212b 8% 16%,transparent 17%),repeating-radial-gradient(circle,#28343f 0 2px,#141d26 3px 5px)}
.platter::after{content:"";display:block;width:7px;height:7px;margin:7px 0 0 28px;background:var(--deck);border-radius:50%}
.rolling .platter{animation:platter-turn 3.2s linear infinite}
@keyframes platter-turn{to{transform:rotate(360deg)}}
.deck progress{width:100%;height:8px;margin:9px 0;accent-color:var(--deck)}
.transport{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
#studio button{border-radius:5px;background:linear-gradient(#354357,#212c3d);min-height:37px;padding:6px 10px;box-shadow:inset 0 1px #ffffff18}
#studio button:active{background:#111824}
#studio button.danger{background:linear-gradient(#b33236,#6c1d22);border-color:#ce5154;color:#fff;font-weight:750}
#studio #take{background:linear-gradient(#4d7545,#2c492b);border-color:#68965f}
.compact{font-size:.8rem;margin:5px 0 0}
.mixer{grid-column:3;grid-row:1 / span 2}
.queue{grid-column:2;grid-row:2}
.library{grid-column:1;grid-row:2}
.carts{grid-column:1 / span 2}
.people{grid-column:3}
.profile{grid-column:1 / span 2}
.rack-list{max-height:260px;overflow:auto;scrollbar-color:#586b81 #151d29}
#studio .item{gap:4px;padding:5px 0}
#studio .item button{font-size:.78rem;padding-inline:7px}
#studio .pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:6px;margin:0}
#studio .pads button{min-height:53px;background:linear-gradient(#513b68,#2c2143);border-color:#78618d;overflow-wrap:anywhere}
#studio .dials{gap:4px}
#studio .dials label{text-align:center;font-size:.77rem;padding:4px 2px;background:#0b111b;border:1px solid #2f3949}
#studio .dials output{position:relative;width:clamp(34px,4.1vw,56px);cursor:ns-resize;touch-action:none;font:700 .72rem ui-monospace,monospace;background:radial-gradient(circle at 45% 40%,#263545 0 47%,transparent 49%),conic-gradient(from -135deg,var(--green) calc(var(--value,0%) * .75),#415166 0 75%,#111923 0)}
#studio .dials output::after{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(#eaf8fc,#eaf8fc) top center / 2px 6px no-repeat;transform:rotate(var(--angle,-135deg));pointer-events:none}
#studio .dials input{min-height:29px}
#studio meter{height:14px;appearance:none;background:#080d15;border:1px solid #3b495a;border-radius:3px}
#studio meter::-webkit-meter-bar{background:#080d15;border:0}
#studio meter::-webkit-meter-optimum-value,#studio meter::-webkit-meter-suboptimum-value{background:repeating-linear-gradient(90deg,#0000 0 6px,#0b1017 6px 8px),linear-gradient(90deg,#31c791,#c4f56c 65%,#efb459 85%,#fa6773)}
#studio meter::-moz-meter-bar{background:linear-gradient(90deg,#31c791,#c4f56c,#fa6773)}
#studio .guest-console .board{grid-template-columns:minmax(0,1fr)}
#studio .guest-console .board>.card{grid-column:auto;grid-row:auto}
@media(max-width:1100px){
    #studio .board{grid-template-columns:repeat(2,minmax(0,1fr))}
    #studio .board>.card{grid-row:auto;grid-column:auto}
    #studio .board>.share,#studio .board>.carts{grid-column:1/-1}
}
@media(max-width:700px){
    #studio .board{grid-template-columns:minmax(0,1fr)}
    #studio button{min-height:44px}
    #studio .dials{grid-template-columns:repeat(4,minmax(0,1fr))}
    #studio .dials output{width:clamp(37px,11vw,55px)}
}
@media(prefers-reduced-motion:reduce){.rolling .platter{animation:none}}

.calls{grid-column:3;grid-row:3}
.hotline-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
#studio .calls .module-head strong{color:#ffbe68}
#studio .lines-live{color:#b5fa6c;border-color:#73a74e;background:#1b3022}
.caller-row{border-left:3px solid #ffb75d;padding-inline:8px!important;background:#261f1a}
.caller-studio{border-left-color:#67deda;background:#11262b}
.caller-air{border-left-color:#ff7a82;background:#331d26}
.caller-row>span{flex-basis:100%;font-weight:650}
.call-entry{max-width:560px;margin:1rem auto}
.call-link{display:inline-flex;align-items:center;border-radius:6px;padding:10px 14px;min-height:44px;background:#265941;color:#e9fff1;font-weight:750;text-decoration:none;border:1px solid #4a8c6a}
#studio button.call-link{background:linear-gradient(#387558,#224b38)}
.signal-scope{position:relative;height:64px;overflow:hidden;margin:10px 0 6px;border:1px solid #344b52;border-radius:5px;background:repeating-linear-gradient(90deg,#192c34 0 1px,transparent 1px 18px),repeating-linear-gradient(0deg,#192c34 0 1px,#0c191e 1px 16px)}
.signal-scope canvas{display:block;width:100%;height:100%}
.signal-scope span{position:absolute;top:4px;right:5px;color:#9bc6b6;font:600 9px ui-monospace,monospace;pointer-events:none}
#studio .studio-live .onair{border-color:#7c3942;box-shadow:inset 3px 0 #f3636b,0 0 18px #d72d331d}
#studio .pill.live{animation:tally-glow 2.5s ease-in-out infinite}
.incoming{color:#ffbe68;animation:incoming-glow 1.15s ease-in-out infinite}
@keyframes tally-glow{50%{box-shadow:0 0 13px #ff575780}}
@keyframes incoming-glow{50%{text-shadow:0 0 12px #ffbe68}}
@media(max-width:1100px){#studio .board>.calls{grid-row:auto;grid-column:auto}}
@media(prefers-reduced-motion:reduce){#studio .pill.live,.incoming{animation:none}}
.fade-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fade-controls label{font-size:.8rem}
.fade-controls select{display:inline-block;width:auto;min-height:36px}
.queue-eta{font:600 .7rem ui-monospace,monospace;color:#b8ef9e;white-space:nowrap}
.history{grid-column:3}
.live-capacity{display:grid;gap:.25rem;min-width:9rem}.live-capacity[hidden]{display:none}.live-capacity meter{width:100%;height:.65rem;accent-color:#caff83}
.mobile-console-strip{display:none}
@media(max-width:700px){
    .mobile-console-strip{position:sticky;top:0;z-index:10;display:grid;gap:5px;margin-bottom:8px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;background:#101927;border:1px solid #3b4e61;border-radius:8px;box-shadow:0 4px 12px #0007}
    .mobile-console-status{display:flex;justify-content:space-between;align-items:center;gap:8px}
    .mobile-console-status .pill{padding:5px 10px}
    .mobile-console-jumps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
    #studio .mobile-console-strip button{min-height:44px}
    #studio [id$="-panel"]{scroll-margin-top:calc(114px + env(safe-area-inset-top))}
}