@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#090a0c;--surface:#111317;--raised:#171a1f;--line:#2a2d33;--line2:#202328;--ink:#f3f1e9;--muted:#868990;--lime:#dfff00;--orange:#ff6038;--red:#ef4354;--blue:#2d9ce5;--good:#68df9c;font-family:Manrope,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{color:inherit;background:#1b1e23;border:1px solid var(--line);border-radius:5px;padding:10px 13px;cursor:pointer}button:hover{border-color:#555a63;background:#23272d}.app-shell{min-height:100vh;display:grid;grid-template:72px 1fr/92px 1fr}.appbar{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 25px;border-bottom:1px solid var(--line2);background:rgba(9,10,12,.94);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;width:max-content}.brand img{width:37px;height:37px}.brand strong,.brand span{display:block}.brand strong{font-size:14px;letter-spacing:-.2px}.brand span{font:500 8px DM Mono;color:var(--lime);letter-spacing:1.5px;margin-top:3px}.signal-state{display:grid;grid-template-columns:10px auto;column-gap:8px;align-items:center;font:500 8px DM Mono;letter-spacing:1px;color:#a4a6aa}.signal-state i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 9px var(--good)}.signal-state i.offline{background:var(--orange);box-shadow:none}.signal-state b{grid-column:2;color:#55585d;font-weight:400;font-size:7px;margin-top:3px}.app-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}.app-actions time{font:500 12px DM Mono;margin-right:6px}.icon-btn{width:38px;padding:9px}.install-btn{color:var(--lime);border-color:#596300;font:600 10px DM Mono;text-transform:uppercase}.rail{grid-row:2;border-right:1px solid var(--line2);display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:72px;height:calc(100vh - 72px)}.rail nav{display:flex;flex-direction:column}.rail-item{height:88px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;padding:10px 3px;color:#777a80;position:relative}.rail-item:hover,.rail-item.active{background:#111317;color:var(--ink)}.rail-item.active:before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;background:var(--lime)}.rail-item i,.rail-item span{display:block;font-style:normal}.rail-item i{font:500 24px DM Mono;margin-bottom:8px}.rail-item span{font:500 8px DM Mono;text-transform:uppercase;letter-spacing:.7px}.rail-item b{position:absolute;top:16px;right:16px;background:var(--lime);color:#090a0c;border-radius:9px;min-width:16px;height:16px;padding:2px;font:700 8px DM Mono}.rail-foot{padding:20px 8px;text-align:center}.rail-foot span,.rail-foot small{display:block;font:500 7px DM Mono;letter-spacing:.5px}.rail-foot span{color:var(--good)}.rail-foot small{color:#4e5156;margin-top:8px}.stage{min-width:0}.view{display:none;padding:46px clamp(28px,4vw,70px) 70px;max-width:1650px;margin:auto}.view.active{display:block}.view-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px}.view-head h1{font-size:clamp(42px,5vw,70px);letter-spacing:-4px;line-height:1;margin:14px 0 10px}.view-head p{color:var(--muted);margin:0}.kicker,.panel-head span,.show-card>span,.readiness>span{font:500 9px DM Mono;letter-spacing:1.5px;color:#777a7f}.primary{background:var(--ink);color:#0a0b0d;border-color:var(--ink);font-weight:800;padding:14px 18px;min-width:155px}.primary:hover{background:var(--lime);border-color:var(--lime)}.primary span{font-size:17px}.primary.lime{background:var(--lime);border-color:var(--lime)}.panel{background:linear-gradient(145deg,#15181c,#0f1114);border:1px solid var(--line);border-radius:8px}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:18px;border:1px solid var(--line);border-radius:7px;overflow:hidden}.stat-row article{height:98px;padding:20px 22px;background:#111317;border-right:1px solid var(--line)}.stat-row article:last-child{border:0}.stat-row span{display:block;font:500 8px DM Mono;letter-spacing:1.3px;color:#73767b}.stat-row b{display:block;font-size:28px;margin-top:10px;letter-spacing:-1px}.storage-card{position:relative}.storage-card i{position:absolute;left:22px;right:22px;bottom:12px;height:2px;background:#2b2e34}.storage-card em{display:block;height:100%;width:0;background:var(--lime);transition:width .3s}.collection-tools{height:68px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.search{width:min(390px,50%);display:flex;align-items:center;background:#0b0d10;border:1px solid #25282e;border-radius:5px;color:#666;padding:0 11px}.search input{width:100%;padding:10px 8px;background:transparent;border:0;outline:0;color:var(--ink)}.quiet{background:transparent}.danger{color:#a46b70}.track-header,.track-row{display:grid;grid-template-columns:42px minmax(180px,1.4fr) minmax(130px,1fr) 80px 180px;gap:12px;align-items:center}.track-header{padding:11px 18px;color:#61646a;font:500 8px DM Mono;letter-spacing:1px;border-bottom:1px solid var(--line)}.track-row{min-height:67px;padding:10px 18px;border-bottom:1px solid var(--line2)}.track-row:hover{background:#171a1f}.track-row>span:first-child{font:500 9px DM Mono;color:#5f6268}.track-title{min-width:0}.track-title b,.track-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-title small{font-size:10px;color:#676a70;margin-top:3px}.track-artist,.track-time{font-size:12px;color:#9a9ca1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-actions{display:flex;justify-content:flex-end;gap:5px}.track-actions button{font:600 8px DM Mono;padding:7px 8px}.track-actions .add{color:var(--lime)}.empty-state{padding:80px 20px;text-align:center;color:#74777d;list-style:none}.empty-state i{display:grid;place-items:center;margin:auto;width:55px;height:55px;border:1px solid #34373d;border-radius:50%;font:400 23px DM Mono;font-style:normal}.empty-state h2{font-size:18px;color:#c8c7c2;margin:18px 0 6px}.empty-state p{font-size:12px;margin:0 0 18px}.empty-state button{font-size:11px}.rundown-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px}.panel-head{min-height:80px;padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2{margin:5px 0 0;font-size:20px;outline:0}.panel-head>div:last-child{text-align:right}.panel-head>div:last-child b,.panel-head>div:last-child small{display:block}.panel-head>div:last-child b{font:500 18px DM Mono}.panel-head>div:last-child small{font:500 7px DM Mono;color:#64676d;margin-top:5px}.queue-list{margin:0;padding:0;min-height:430px}.queue-item{display:grid;grid-template-columns:28px 1fr 60px 78px;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line2);list-style:none}.queue-item:hover{background:#171a1f}.drag{color:#555;font:500 15px DM Mono;cursor:grab}.queue-item b,.queue-item small{display:block}.queue-item small{color:#73767b;font-size:10px;margin-top:3px}.queue-item>span{font:500 10px DM Mono;color:#7b7e84}.queue-item button{font-size:10px;padding:7px}.queue-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:#5d6065;font:500 8px DM Mono;border-top:1px solid var(--line)}.show-aside{display:flex;flex-direction:column;gap:18px}.show-card{padding:23px}.show-card>b{display:block;font:500 30px DM Mono;margin:18px 0}.show-card>i{display:block;height:1px;background:var(--line);margin:17px 0}.show-card small,.show-card strong{display:block}.show-card small{font:500 7px DM Mono;color:#64676d}.show-card strong{font:600 16px DM Mono;color:var(--lime);margin-top:8px}.readiness{padding:23px}.readiness ul{list-style:none;padding:10px 0 0;margin:0}.readiness li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:11px;color:#898c91}.readiness li i{width:7px;height:7px;border-radius:50%;background:#51545a}.readiness li i.good{background:var(--good);box-shadow:0 0 7px var(--good)}.live-view{max-width:1750px}.live-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:24px}.live-head h1{font-size:26px;margin:7px 0 0}.on-air-state{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 15px;font:600 9px DM Mono}.on-air-state i{width:7px;height:7px;border-radius:50%;background:var(--orange)}.on-air-state time{color:#777;margin-left:12px}.live-head>button{justify-self:end;font:600 9px DM Mono}.live-head>button b{color:var(--orange);margin-left:8px}.live-head>button.active{border-color:var(--lime)}.live-head>button.active b{color:var(--lime)}.now-strip{height:58px;padding:0 18px;margin-bottom:12px;border:1px solid var(--line);background:#111317;display:grid;grid-template-columns:100px 1fr auto 180px;gap:15px;align-items:center}.now-strip>span{font:500 8px DM Mono;color:var(--orange)}.now-strip>em{font-style:normal;color:#70737a;font-size:11px}.meter{height:28px;display:flex;gap:4px;align-items:center}.meter i{width:4px;background:var(--lime);height:8px;opacity:.35}.meter i:nth-child(2),.meter i:nth-child(6){height:15px}.meter i:nth-child(3),.meter i:nth-child(5){height:22px}.meter i:nth-child(4){height:27px}.desk-grid{display:grid;grid-template-columns:minmax(250px,1fr) 90px minmax(250px,1fr) 260px;gap:12px}.deck{padding:18px;min-width:0}.deck-label{display:flex;justify-content:space-between;font:500 9px DM Mono;color:#74777c}.deck-label b{color:var(--good)}.platter{width:min(280px,82%);aspect-ratio:1;margin:24px auto;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#35161d 0 6px,#cb3a4a 7px 10px);box-shadow:0 0 45px rgba(239,67,84,.12)}.platter.blue{background:repeating-radial-gradient(circle,#102638 0 6px,#2584c1 7px 10px);box-shadow:0 0 45px rgba(45,156,229,.12)}.platter>div{width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#101216;border:10px solid rgba(255,255,255,.07);position:relative}.platter span{font:800 28px Manrope}.platter i{position:absolute;width:7px;height:7px;border-radius:50%;background:#050607}.deck>h2{font-size:19px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck>p{font-size:11px;color:#73767c;margin:5px 0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline input{width:100%;accent-color:var(--red)}[data-deck=B] .timeline input{accent-color:var(--blue)}.timeline>div{display:flex;justify-content:space-between;font:500 9px DM Mono;color:#676a70}.deck-controls{display:grid;grid-template-columns:55px 1fr 55px;gap:7px;margin-top:19px}.deck-controls .play{background:var(--ink);color:#090a0c;font-weight:800}.mix-column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;font:700 9px DM Mono}.mix-column>input{height:230px;writing-mode:vertical-lr;direction:rtl;accent-color:var(--lime)}.mix-column label{display:flex;flex-direction:column;align-items:center;gap:7px;color:#777;font-size:7px}.mix-column label input{width:65px}.mix-btn{font-size:7px;padding:8px 5px}.mic-btn{font-size:7px;padding:9px 5px}.mic-btn i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#666;margin-right:3px}.mic-btn.active{border-color:var(--orange);color:var(--orange)}.mic-btn.active i{background:var(--orange);box-shadow:0 0 7px var(--orange)}.live-queue{min-width:0;display:flex;flex-direction:column}.live-queue .panel-head{padding:15px}.live-queue .panel-head h2{font-size:17px}.live-queue-list{flex:1;max-height:510px;overflow:auto}.live-track{padding:12px 15px;border-bottom:1px solid var(--line2);cursor:pointer}.live-track:hover{background:#1b1e23}.live-track b,.live-track small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-track b{font-size:11px}.live-track small{font-size:9px;color:#70737a;margin-top:4px}.live-queue>button{margin:12px}.toast{position:fixed;right:24px;bottom:24px;z-index:30;padding:13px 17px;background:var(--lime);color:#090a0c;font:700 10px DM Mono;transform:translateY(100px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}dialog{width:min(480px,calc(100% - 30px));padding:0;border:1px solid #393c43;border-radius:8px;background:#15171b;color:var(--ink)}dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}dialog form{padding:25px}dialog form>div{display:flex;justify-content:space-between;color:#777;font:500 8px DM Mono;letter-spacing:1px}dialog form>div button{border:0;background:transparent;font-size:24px;padding:0}dialog h2{font-size:28px;letter-spacing:-1.5px}dialog li{margin:12px 0;color:#a1a3a8;font-size:13px}dialog p{color:#777;font-size:11px;margin:24px 0}
@media(max-width:1200px){.desk-grid{grid-template-columns:1fr 80px 1fr}.live-queue{grid-column:1/-1;min-height:220px}.live-queue-list{display:grid;grid-template-columns:repeat(3,1fr)}.stat-row{grid-template-columns:1fr 1fr}.stat-row article:nth-child(2){border-right:0}.stat-row article:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:800px){.app-shell{grid-template:64px auto 1fr/1fr}.appbar{grid-template-columns:1fr auto;padding:0 14px}.signal-state{display:none}.app-actions time{display:none}.rail{grid-row:2;position:sticky;top:64px;height:58px;z-index:9;border-right:0;border-bottom:1px solid var(--line);background:#0d0f12}.rail nav{display:grid;grid-template-columns:repeat(3,1fr)}.rail-item{height:58px;border-bottom:0;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px}.rail-item.active:before{top:auto;bottom:0;left:20%;right:20%;width:auto;height:2px}.rail-item i,.rail-item span{display:inline;margin:0}.rail-item b{top:8px;right:20%}.rail-foot{display:none}.stage{grid-row:3}.view{padding:32px 14px 50px}.view-head{align-items:flex-start;flex-direction:column;gap:25px}.view-head h1{font-size:44px;letter-spacing:-3px}.view-head .primary{width:100%}.rundown-layout{grid-template-columns:1fr}.show-aside{display:grid;grid-template-columns:1fr 1fr}.track-header{display:none}.track-row{grid-template-columns:28px 1fr auto}.track-artist,.track-time{display:none}.track-actions{grid-column:3}.collection-tools{height:auto;gap:10px;align-items:stretch;flex-direction:column}.search{width:100%}.collection-tools>div{display:flex;justify-content:space-between}.live-head{grid-template-columns:1fr auto}.on-air-state{display:none}.now-strip{grid-template-columns:80px 1fr}.now-strip>em,.meter{display:none}.desk-grid{grid-template-columns:1fr}.mix-column{flex-direction:row;min-height:90px}.mix-column>input{height:auto;width:120px;writing-mode:horizontal-tb;direction:ltr}.platter{max-width:230px}.live-queue-list{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.brand strong{font-size:12px}.app-actions .install-btn{font-size:8px;padding:8px}.stat-row{grid-template-columns:1fr 1fr}.stat-row article{height:82px;padding:15px}.stat-row b{font-size:21px}.show-aside{grid-template-columns:1fr}.queue-item{grid-template-columns:22px 1fr 45px}.queue-item button{grid-column:auto}.live-queue-list{grid-template-columns:1fr}.now-strip{grid-template-columns:70px 1fr}.deck-controls{grid-template-columns:45px 1fr 45px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.import-progress{margin:-20px 0 18px;padding:17px 20px;background:linear-gradient(110deg,#15191d,#101317);box-shadow:inset 3px 0 0 var(--lime)}.import-progress[hidden]{display:none}.import-progress-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.import-progress-head span,.import-progress>small{display:block;font:500 7px DM Mono;letter-spacing:1.2px;color:#686c72}.import-progress-head b{display:block;margin-top:5px;font:600 11px DM Mono;color:var(--ink)}.import-progress-head strong{font:600 20px DM Mono;color:var(--lime)}.import-progress-track{height:5px;margin:14px 0 10px;background:#292d32;overflow:hidden}.import-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--lime),#91ad00);box-shadow:0 0 12px rgba(223,255,0,.35);transition:width .2s ease}.import-progress.complete{box-shadow:inset 3px 0 0 var(--good)}.import-progress.complete .import-progress-head strong{color:var(--good)}.import-progress.error{box-shadow:inset 3px 0 0 var(--orange)}.import-progress.error .import-progress-head strong{color:var(--orange)}
.import-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.import-actions>div{display:flex;gap:7px}.import-actions small{display:none;color:#666b72;font:500 6px DM Mono;letter-spacing:.7px}.library-actions{display:flex;align-items:center;gap:7px}.bulk-actions{display:flex;gap:6px;padding-right:10px;margin-right:3px;border-right:1px solid var(--line)}.bulk-actions button{font:600 8px DM Mono}.bulk-actions #addSelectedBtn:not(:disabled){color:var(--lime);border-color:#596300}.bulk-actions button:disabled{opacity:.4;cursor:not-allowed}.track-header,.track-row{grid-template-columns:66px minmax(180px,1.4fr) minmax(130px,1fr) 80px 180px}.track-select{display:flex;align-items:center;gap:8px;color:#5f6268;font:500 9px DM Mono}.track-select input{width:15px;height:15px;margin:0;accent-color:var(--lime)}.track-row.selected{background:#181b13;box-shadow:inset 3px 0 0 var(--lime)}
@media(pointer:coarse), (max-width:800px){.import-actions{width:100%;align-items:stretch}.import-actions>div{display:grid;grid-template-columns:1fr 1fr}.import-actions>div button{width:100%}.import-actions small{display:block;text-align:right}.collection-tools .library-actions{align-items:stretch;flex-wrap:wrap}.bulk-actions{padding-right:0;margin-right:0;border-right:0}.track-row{grid-template-columns:62px 1fr auto}}
@media(max-width:520px){.import-actions>div{grid-template-columns:1fr}.collection-tools .library-actions{display:grid;grid-template-columns:1fr 1fr}.bulk-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.library-actions button{min-width:0;padding:9px 7px}.track-row{grid-template-columns:54px 1fr}.track-actions{grid-column:2;justify-content:flex-start}.track-select{gap:5px}}

/* Alpha 4: safer live output and an assisted, touch-friendly show workflow. */
.import-progress-foot{display:flex;align-items:center;justify-content:space-between;gap:15px}.import-progress-foot small{font:500 7px DM Mono;letter-spacing:1.2px;color:#686c72}.import-progress-foot button{padding:5px 8px;font:600 7px DM Mono;color:var(--orange)}
.library-actions select,.show-builder select,.output-label select,dialog input,dialog select{color:var(--ink);background:#0b0d10;border:1px solid var(--line);border-radius:5px;padding:9px}.track-artist small{display:block;width:max-content;margin-top:5px}.type-pill{padding:3px 5px;border:1px solid #454a50;border-radius:3px;font:600 6px DM Mono;letter-spacing:.8px;color:#9ca0a7}.type-pill.id{color:var(--lime);border-color:#596300}.type-pill.promo{color:var(--orange);border-color:#673c2f}.type-pill.sweeper{color:#78bcef;border-color:#285577}
.track-header,.track-row{grid-template-columns:66px minmax(180px,1.4fr) minmax(130px,1fr) 80px 220px}.track-actions{flex-wrap:wrap}.queue-item{grid-template-columns:28px 1fr 60px minmax(148px,auto)}.queue-actions{display:flex;justify-content:flex-end;gap:4px}.queue-actions button{padding:7px 8px;font-size:8px}.queue-actions button:disabled{opacity:.3;cursor:not-allowed}
.show-builder{padding:23px}.show-builder>span{font:500 9px DM Mono;letter-spacing:1.5px;color:#777a7f}.show-builder p{color:var(--muted);font-size:11px;line-height:1.5}.show-builder label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:10px}.show-builder select{padding:7px;font-size:9px}.show-builder button{width:100%;min-width:0;margin-top:16px;font-size:10px}.show-builder small{display:block;color:#62666c;font-size:8px;line-height:1.5;margin-top:10px}
.live-head{grid-template-columns:1fr auto auto auto auto;gap:8px}.on-air-state{background:#15181c;color:var(--ink)}.on-air-state.active{border-color:var(--red);background:#2b1015;color:#fff;box-shadow:0 0 24px rgba(239,67,84,.14)}.on-air-state.active i{background:var(--red);box-shadow:0 0 9px var(--red)}#recordBtn.active{border-color:var(--red);color:var(--red)}.meter{width:180px;height:28px}.waveform{display:block;width:100%;height:54px;margin:5px 0 8px;background:#0c0e11;border:1px solid var(--line2)}.output-label{max-width:76px}.output-label select{width:70px;padding:5px;font-size:7px}
dialog form>label{display:grid;gap:7px;color:#92959b;font-size:11px;margin:14px 0}dialog form>label input,dialog form>label select{width:100%}.dialog-actions{align-items:center;margin-top:24px}.dialog-actions .primary{margin-left:auto}.dialog-actions .danger{color:#ff8993}
@media(max-width:1000px){.live-head{grid-template-columns:1fr repeat(2,auto)}.live-head .on-air-state{grid-row:1;grid-column:2/-1}.live-head>button:not(.on-air-state){grid-row:2}.track-header,.track-row{grid-template-columns:66px minmax(150px,1fr) minmax(120px,.7fr) 70px 180px}}
@media(pointer:coarse), (max-width:800px){.queue-item{grid-template-columns:24px 1fr 48px}.queue-actions{grid-column:2/-1;justify-content:flex-start}.queue-actions button{min-height:38px}.show-builder label{font-size:11px}.track-row{grid-template-columns:62px 1fr auto}.live-head{grid-template-columns:1fr 1fr}.live-head .on-air-state{display:flex;grid-column:1/-1;grid-row:2;justify-content:center}.live-head>button:not(.on-air-state){grid-row:auto}.meter{display:none}}
@media(max-width:520px){.track-row{grid-template-columns:54px 1fr}.track-actions{grid-column:2}.queue-foot{align-items:flex-start;gap:10px}.queue-foot>div{display:grid;grid-template-columns:1fr 1fr;gap:4px}.queue-foot>span{display:none}.live-head{gap:6px}.live-head h1{font-size:21px}.live-head>button{padding:8px 6px;font-size:7px}.output-label{display:none}}