:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f2f3f3;background:#0a0c0d;--bg:#0a0c0d;--panel:#121517;--panel2:#191d20;--line:#30363a;--muted:#9ca4a9;--accent:#e25f52;--lime:#c6d6a0}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -10%,#2b2524 0,transparent 32%),var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.page-layout{width:min(1800px,100%);min-height:100dvh;margin:auto;display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:16px;padding:16px}.app-shell{min-width:0;overflow:hidden;background:#0e1112;border:1px solid var(--line);border-radius:20px;box-shadow:0 28px 90px #0009}.app-header{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 20px;background:#111416;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand>span{width:43px;height:43px;display:grid;place-items:center;border-radius:11px;background:var(--accent);font-weight:950}.brand b,.brand small{display:block}.brand small{margin-top:2px;color:var(--muted);font-size:10px}.header-actions{display:flex;align-items:end;gap:8px}.playlist-select{display:grid;gap:4px;color:var(--muted);font-size:9px;font-weight:800}.playlist-select select{min-width:175px;height:42px;padding:0 10px;color:#eef0f0;background:#191d20;border:1px solid var(--line);border-radius:9px}.button{min-height:42px;padding:9px 13px;color:#eff2f1;background:#191e20;border:1px solid var(--line);border-radius:9px;font-weight:850}.button:hover{filter:brightness(1.1)}.button.primary{color:#fff;background:var(--accent);border-color:var(--accent)}.button.accent{color:#171b18;background:var(--lime);border-color:var(--lime)}.button.danger{color:#f3b8b1;background:#291b1a;border-color:#59312d}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);min-height:calc(100dvh - 116px)}.stage-column{min-width:0;padding:18px;border-right:1px solid var(--line)}.player-card,.add-card,.planning-card{background:var(--panel);border:1px solid var(--line);border-radius:15px}.player-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050607;border-radius:14px 14px 0 0}.player-wrap iframe,#player{width:100%;height:100%}.player-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:25px;background:linear-gradient(145deg,#171b1d,#0a0c0d)}.player-empty span{width:58px;height:58px;display:grid;place-items:center;padding-left:4px;background:var(--accent);border-radius:50%;font-size:23px}.player-empty h1{margin:16px 0 5px;font-size:clamp(24px,4vw,42px);letter-spacing:-.045em}.player-empty p{max-width:500px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}.player-empty.hidden{display:none}.now-playing{display:flex;justify-content:space-between;gap:16px;padding:14px 16px 10px}.now-copy span,.section-head span,.queue-head span,.dialog-head span{color:var(--accent);font-size:8px;font-weight:950;letter-spacing:.15em}.now-copy b,.now-copy small{display:block}.now-copy b{margin-top:4px;font-size:15px}.now-copy small{margin-top:3px;color:var(--muted);font-size:9px}.time-box{display:flex;align-items:center;gap:5px;color:#cbd0ce;font-size:11px}.time-box i{color:#697176;font-style:normal}.progress-track{height:5px;margin:0 16px;background:#252a2d;border-radius:5px;cursor:pointer}.progress-track i{display:block;width:0;height:100%;background:var(--accent);border-radius:5px}.transport{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:12px 16px 15px}.transport button{min-height:36px;padding:7px 10px;color:#dbe0de;background:#1b2022;border:1px solid #353c40;border-radius:8px;font-size:10px;font-weight:850}.transport .play-button{width:43px;height:43px;padding:0;color:#fff;background:var(--accent);border-color:var(--accent);border-radius:50%;font-size:17px}.transport-spacer{flex:1}.volume{display:grid;grid-template-columns:auto 76px 32px;align-items:center;gap:6px;color:var(--muted);font-size:9px}.volume input{accent-color:var(--accent)}.add-card{margin-top:14px;padding:16px}.section-head{display:flex;justify-content:space-between;align-items:start;gap:15px}.section-head h2,.queue-head h2{margin:4px 0 0;font-size:17px}.text-button{padding:5px;color:var(--lime);background:none;border:0;font-size:10px;font-weight:850}.url-field{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-top:13px}.url-field input,.add-options input,dialog input,dialog textarea{width:100%;min-height:43px;padding:10px 11px;color:#eff1f0;background:#0d1011;border:1px solid #394044;border-radius:8px}.add-options{display:grid;grid-template-columns:2fr 1fr .7fr .7fr;gap:8px;margin-top:9px}.add-options label,dialog label{display:grid;gap:5px;color:#abb2b6;font-size:9px;font-weight:800}.form-error{min-height:0;margin:8px 0 0;color:#e9958c;font-size:10px}.form-error:empty{display:none}.planning-card{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:12px 14px}.stats{display:flex;gap:18px}.stats div{display:grid;gap:2px}.stats b{font-size:15px}.stats span{color:var(--muted);font-size:8px;text-transform:uppercase}.planning-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.planning-actions .button{min-height:35px;padding:7px 9px;font-size:9px}.queue-panel{min-width:0;display:flex;flex-direction:column;background:#111416}.queue-head{display:flex;justify-content:space-between;align-items:center;padding:19px 17px 11px}.queue-head>span:last-child{color:var(--muted);letter-spacing:0}.queue-tools{display:flex;gap:6px;padding:0 17px 11px}.queue-tools button{padding:7px 9px;color:#99a2a6;background:#171b1d;border:1px solid #2c3235;border-radius:7px;font-size:9px;font-weight:850}.queue-tools button.active{color:#151917;background:var(--lime);border-color:var(--lime)}.queue-tools #sort-menu{margin-left:auto}.queue-list{max-height:calc(100dvh - 250px);overflow:auto;padding:0 10px 12px}.queue-item{display:grid;grid-template-columns:24px 86px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 7px;border-bottom:1px solid #292f32;border-radius:9px}.queue-item:hover{background:#181c1e}.queue-item.dragging{opacity:.35}.queue-item.drag-over{outline:2px solid var(--lime)}.drag-handle{color:#70797d;text-align:center;cursor:grab}.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#252a2c;border-radius:6px}.thumb img{width:100%;height:100%;object-fit:cover}.thumb span{position:absolute;right:3px;bottom:3px;padding:2px 4px;color:#fff;background:#000c;border-radius:3px;font-size:7px}.item-copy{min-width:0}.item-copy b,.item-copy span{display:block}.item-copy b{overflow:hidden;font-size:11px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.item-copy span{margin-top:4px;color:#8e979b;font-size:8px}.item-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}.item-actions button{width:28px;height:27px;padding:0;color:#b9c0bd;background:#202527;border:1px solid #343a3e;border-radius:6px;font-size:10px}.item-actions .play-now{color:#171a18;background:var(--lime)}.queue-item.current{background:#251d1d;border:1px solid #70433f}.queue-item.current .drag-handle{color:var(--accent)}.queue-empty{display:grid;place-items:center;align-content:center;min-height:230px;color:#a4ada9;text-align:center}.queue-empty span{margin-top:5px;color:#727b7f;font-size:10px}.queue-footer{margin-top:auto;padding:12px 17px;color:#747d81;border-top:1px solid var(--line);font-size:8px}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:13px 20px;color:#737c80;border-top:1px solid var(--line);font-size:9px}.site-footer a{color:#b7c99a}.side-ad{min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;align-self:center;color:#737b78;text-align:center}.side-ad>span,.portrait-ad>span{font-size:8px;letter-spacing:.13em;text-transform:uppercase}.side-ad>div{width:100%;min-height:600px;display:grid;place-items:center;align-content:center;gap:17px;padding:10px;background:linear-gradient(160deg,#1d2122,#352725,#171a1b);border:1px solid #403a39;border-radius:14px;animation:adshift 7s ease-in-out infinite}.side-ad b{color:#c8aaa5;font-size:23px;line-height:1.5}.side-ad small{color:#746d6b;font-size:8px}.portrait-ad{display:none}.portrait-ad>div{width:min(728px,94%);min-height:80px;margin:auto;display:flex;align-items:center;justify-content:center;gap:16px;background:linear-gradient(100deg,#191d1e,#412d2a,#191d1e);background-size:220% 100%;border:1px solid #423a38;border-radius:10px;animation:adshift 7s ease-in-out infinite}.portrait-ad b{color:#dfb9b3}.portrait-ad small{color:#817774}@keyframes adshift{50%{background-position:100% 50%}}dialog{width:min(560px,calc(100% - 28px));padding:0;color:#f0f2f1;background:#141819;border:1px solid #464e51;border-radius:15px;box-shadow:0 28px 90px #000d}dialog::backdrop{background:#020303c9;backdrop-filter:blur(5px)}dialog form{display:grid;gap:13px;padding:20px}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin:4px 0 0}.dialog-head button{width:35px;height:35px;color:#d5dbd8;background:#1d2224;border:1px solid var(--line);border-radius:8px;font-size:20px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:5px}.dialog-note{margin:0;color:#899296;font-size:9px;line-height:1.5}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.help-grid article{padding:12px;background:#0f1213;border:1px solid #303639;border-radius:9px}.help-grid p{margin:5px 0 0;color:#929b9f;font-size:9px;line-height:1.5}.toast{position:fixed;left:50%;bottom:22px;z-index:50;display:flex;align-items:center;gap:12px;transform:translate(-50%,35px);padding:10px 13px;color:#131715;background:#e5ece7;border-radius:9px;font-size:10px;font-weight:850;opacity:0;pointer-events:none;transition:.22s}.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}.toast button{padding:3px 7px;color:#fff;background:#5c3430;border:0;border-radius:5px;font-size:9px}.party-display .app-header,.party-display .add-card,.party-display .planning-card,.party-display .site-footer,.party-display .side-ad,.party-display+.portrait-ad{display:none}.party-display .page-layout{display:block;width:100%;padding:0}.party-display .app-shell{min-height:100dvh;border:0;border-radius:0}.party-display .workspace{grid-template-columns:minmax(0,1.8fr) minmax(320px,.6fr);min-height:100dvh}.party-display .stage-column{display:grid;align-content:center}.party-display .player-card{border-radius:0}.party-display .player-wrap{border-radius:0}.party-display .queue-list{max-height:calc(100dvh - 140px)}
@media(orientation:portrait){.page-layout{display:block;min-height:auto;padding:9px}.side-ad{display:none}.portrait-ad{display:block;padding:9px 0;color:#737b78;text-align:center}.portrait-ad>span{display:block;margin-bottom:5px}.workspace{grid-template-columns:1fr}.stage-column{border-right:0}.queue-panel{border-top:1px solid var(--line)}.queue-list{max-height:none}.party-display .workspace{grid-template-columns:1fr}.party-display .queue-panel{max-height:42dvh;overflow:auto}.party-display .stage-column{min-height:58dvh;padding:8px}.party-display .player-wrap{max-height:45dvh}}
@media(max-width:920px){.workspace{grid-template-columns:1fr}.stage-column{border-right:0}.queue-panel{border-top:1px solid var(--line)}.queue-list{max-height:520px}.add-options{grid-template-columns:1fr 1fr}.planning-card{align-items:flex-start;flex-direction:column}.planning-actions{justify-content:flex-start}}
@media(max-width:680px){.app-header{align-items:flex-start;flex-direction:column}.header-actions{width:100%;flex-wrap:wrap}.playlist-select{flex:1}.playlist-select select{width:100%;min-width:0}.stage-column{padding:10px}.url-field{grid-template-columns:1fr 1fr}.url-field input{grid-column:1/3}.transport-spacer{display:none}.transport{justify-content:center}.volume{width:100%;grid-template-columns:auto 1fr 35px}.add-options{grid-template-columns:1fr}.stats{width:100%;justify-content:space-between}.site-footer{flex-direction:column}.queue-item{grid-template-columns:20px 72px minmax(0,1fr) auto}.help-grid{grid-template-columns:1fr}}
.party-display .portrait-ad{display:none}