:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#000;--frame:#0c0c0c;--panel:#151515;--line:#ffffffdb;--line-soft:#ffffff52;--text:#fff;--muted:#b8b8b8;--accent:#fff;--danger:#fff}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;overflow:hidden}body{color:var(--text);background:var(--bg);font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.dashboard-page{place-items:center;width:100%;height:100%;padding:clamp(6px,.8vw,10px);display:grid;overflow:hidden}.dashboard-frame{aspect-ratio:16/9;background:#000;border:1.25px solid #ffffffc7;border-radius:clamp(14px,1.5vw,18px);grid-template-rows:auto 1fr;width:min(100%,177.778vh);max-width:100%;height:min(100%,56.25vw);max-height:100%;display:grid;overflow:hidden}.topbar{border-bottom:1px solid #ffffffb8;grid-template-columns:1.06fr 2.2fr .94fr;align-items:center;gap:clamp(6px,.7vw,10px);padding:clamp(8px,.9vw,11px);display:grid;position:relative}.topbar:after{content:"";opacity:.16;pointer-events:none;background:linear-gradient(#ffffff6b,#fff0);height:12px;position:absolute;bottom:-6px;left:0;right:0}.identity-block{align-items:center;gap:10px;min-width:0;display:flex}.avatar{border:1px solid var(--line-soft);color:#fff;background:#000;border-radius:999px;flex:none;place-items:center;width:clamp(34px,3.5vw,46px);height:clamp(34px,3.5vw,46px);font-size:clamp(.88rem,1.15vw,1.02rem);font-weight:800;display:grid}.identity-name{margin:0;font-size:clamp(.9rem,1.55vw,1.45rem);line-height:.95}.identity-sub{color:var(--muted);margin:1px 0 0;font-size:clamp(.64rem,.82vw,.86rem)}.search-block{width:100%;position:relative}.search-block input{border:1.5px solid var(--line);width:100%;height:clamp(36px,4.2vh,44px);color:var(--text);text-align:center;background:#090909;border-radius:999px;padding:0 clamp(108px,8.2vw,148px) 0 clamp(10px,1vw,16px);font-size:clamp(.86rem,1.5vw,1.3rem)}.search-source-dock{z-index:2;gap:4px;display:flex;position:absolute;top:50%;right:clamp(8px,.8vw,10px);transform:translateY(-50%)}.search-source-btn{width:clamp(24px,2.2vw,28px);height:clamp(24px,2.2vw,28px);box-shadow:none;background:#ffffff0a;border:1px solid #ffffff2e;border-radius:999px;place-items:center;padding:0;display:grid;transform:none}.search-source-btn img{object-fit:contain;filter:brightness(0)invert();width:70%;height:70%;display:block}.search-source-letter{letter-spacing:.01em;color:#fff;font-size:.82rem;font-weight:800;line-height:1}.search-source-btn.active{background:#ffffff1f;border-color:#ffffffbf}.search-source-btn:not(.active):hover{background:#ffffff14}.search-suggestions{z-index:8;background:linear-gradient(#1a1a1afa,#090909fa),#090909;border:1.5px solid #ffffff38;border-radius:18px;gap:4px;max-height:min(260px,36vh);margin:0;padding:6px;list-style:none;display:grid;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 14px 28px #00000073,inset 0 0 0 1px #ffffff08}.search-suggestion-btn{text-align:left;width:100%;box-shadow:none;background:0 0;border:0;border-radius:14px;gap:2px;padding:9px 12px;display:grid;transform:none}.search-suggestion-btn:hover,.search-suggestions li.active .search-suggestion-btn{text-shadow:none;box-shadow:none;background:#ffffff14;transform:none}.search-suggestion-value{color:#fff;font-size:clamp(.8rem,1.2vw,1rem)}.search-suggestion-meta{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.68rem}.rec-pill{border:1.5px solid var(--line);background:#000;border-radius:999px;justify-content:center;align-items:center;gap:8px;height:clamp(36px,4.2vh,44px);padding:0 12px;font-size:clamp(.84rem,1.45vw,1.22rem);display:flex}.rec-dot{background:#5e5e5e;border-radius:999px;width:12px;height:12px;box-shadow:0 0 0 4px #ffffff1f}.rec-dot.on{background:var(--danger);box-shadow:0 0 0 5px #fff3}.main-grid{grid-template:"left center right"1fr"left center right".78fr"left player player".42fr/1fr 1.08fr 1fr;gap:clamp(8px,.75vw,10px);min-height:0;padding:clamp(8px,.75vw,10px);display:grid;overflow:hidden}.panel{background:#000;border:1.5px solid #ffffffc2;border-radius:clamp(12px,1.1vw,16px);gap:8px;min-height:0;padding:clamp(8px,.75vw,10px);display:grid;overflow:hidden}.panel h2{letter-spacing:.01em;margin:0;font-size:clamp(1.05rem,1.55vw,1.35rem);line-height:1}.left-panel{grid-area:left;grid-template-rows:auto 1fr auto auto}.queue-list{gap:6px;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.queue-list li{border:1px solid var(--line-soft);color:#e0e0e0;background:#000;border-radius:10px;grid-template-columns:22px 32px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;padding:7px 8px;font-size:.8rem;display:grid;overflow:hidden}.queue-list li.queue-item--placeholder{grid-template-columns:minmax(0,1fr)}.queue-order-controls{gap:4px;display:grid}.queue-icon-btn,.queue-remove-btn{min-width:0}.queue-icon-btn{border-radius:7px;width:22px;height:14px;padding:0;font-size:.62rem;font-weight:800;line-height:1}.queue-remove-btn{white-space:nowrap;border-radius:8px;height:28px;padding:0 8px;font-size:.67rem}.queue-thumb{color:#fff;text-transform:uppercase;background:#080808;border:1px solid #ffffff3d;border-radius:9px;place-items:center;width:32px;height:32px;font-size:.78rem;font-weight:800;display:grid;overflow:hidden;box-shadow:0 0 0 1px #ffffff0a}.queue-thumb.glowing{box-shadow:0 0 0 1px #ffffff14,0 0 18px #ffffff24,0 0 28px #ffffff14}.queue-thumb img{object-fit:cover;width:100%;height:100%;display:block}.queue-copy{gap:2px;min-width:0;display:grid}.queue-title,.queue-subtitle{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.queue-title{color:#f1f1f1;font-size:.79rem;line-height:1.15}.queue-subtitle{color:#a7a7a7;font-size:.66rem;line-height:1.1}.field-label,.mini-label,.log-title{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:.66rem;font-weight:700}.center-col{grid-area:center;grid-template-rows:minmax(0,1fr) auto;gap:clamp(8px,.75vw,10px);min-height:0;display:grid;overflow:hidden}.center-top,.center-mid{min-height:0}.center-mid{align-content:start;gap:6px;padding:clamp(7px,.62vw,9px)}.center-mid h2{font-size:clamp(.96rem,1.35vw,1.16rem)}textarea,input,select{width:100%;color:var(--text);font:inherit;background:#000;border:1px solid #ffffff4f;border-radius:10px;padding:8px 10px;font-size:.88rem}textarea{resize:none;line-height:1.25}.inline-controls{gap:6px;display:grid}.inline-controls.two{grid-template-columns:1fr 1fr}.inline-controls.three{grid-template-columns:1fr auto auto}.mix-select-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.mix-field{gap:4px;min-width:0;display:grid}.mix-field select{height:34px;padding:6px 10px;font-size:.8rem}.mix-seek-row{margin-top:2px}button{color:#fff;font:inherit;cursor:pointer;background:#000;border:1px solid #ffffff8c;border-radius:10px;padding:8px 10px;font-size:.88rem;font-weight:700;transition:border-color .16s,box-shadow .18s,text-shadow .18s,color .16s,transform .16s}button:disabled{opacity:.55;cursor:not-allowed}button:not(:disabled):hover,.rec-pill:not(:disabled):hover{color:#fff;text-shadow:0 0 10px #ffffff38;border-color:#ffffffeb;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #ffffff0d,0 0 14px #ffffff14,0 0 26px #ffffff0d}.player-panel{background:#000;border:1.5px solid #ffffffc2;border-radius:clamp(12px,1.1vw,16px);grid-area:player;grid-template-rows:auto auto auto;gap:4px;min-height:0;padding:clamp(6px,.58vw,8px);display:grid}.player-top{grid-template-columns:46px 1fr auto;align-items:center;gap:8px;min-height:0;display:grid}.cover{background:#c8c8c8;border-radius:clamp(9px,.7vw,11px);width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px)}.track-info{min-width:0}.track-artist{color:#b0b0b0;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.72rem;overflow:hidden}.track-title{white-space:nowrap;text-overflow:ellipsis;margin:1px 0 0;font-size:clamp(.86rem,1.2vw,1.08rem);overflow:hidden}.player-actions{justify-content:flex-end;align-items:center;gap:5px;display:flex}.icon-btn{border:1.5px solid var(--line);background:#000;border-radius:11px;place-items:center;width:clamp(30px,3vw,38px);height:clamp(30px,3vw,38px);padding:0;display:grid;position:relative}.icon-btn.primary{width:clamp(34px,3.2vw,42px);height:clamp(34px,3.2vw,42px)}.icon-btn.active{border-color:#fffffff5;box-shadow:inset 0 0 0 1px #ffffff14}.icon-asset{filter:invert();opacity:.9;pointer-events:none;width:15px;height:15px;transition:opacity .16s,filter .18s,transform .16s;display:block}.icon-btn.primary .icon-asset{width:17px;height:17px}.icon-btn:disabled .icon-asset{opacity:.34}.icon-btn:not(:disabled):hover .icon-asset{opacity:1;filter:invert()drop-shadow(0 0 6px #ffffff3d)}.icon-asset.forward{transform:rotate(180deg)}.mode-badge{color:#fff;text-align:center;pointer-events:none;background:#000;border:1px solid #ffffff47;border-radius:999px;min-width:12px;height:12px;padding:0 3px;font-size:.48rem;font-weight:800;line-height:10px;position:absolute;top:4px;right:4px}.progress-track{touch-action:none;background:#fff3;border-radius:999px;height:10px;transition:background .14s,transform .14s;position:relative;overflow:hidden}.progress-track.interactive{cursor:pointer}.progress-track.interactive:hover,.progress-track.dragging{background:#ffffff3d;transform:translateY(-1px)}.progress-fill{border-radius:inherit;z-index:1;background:#fff;height:100%;position:relative}.progress-hover-fill{border-radius:inherit;z-index:2;pointer-events:none;background:linear-gradient(90deg,#fff3,#ffffff6b);height:100%;position:absolute;inset:0 auto 0 0}.progress-thumb{z-index:3;pointer-events:none;background:#fff;border:2px solid #0e0e0e;border-radius:999px;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 6px 14px #0000004d}.progress-tooltip{color:#fff;white-space:nowrap;z-index:4;pointer-events:none;background:#0c0c0cf5;border:1px solid #ffffff42;border-radius:999px;padding:4px 7px;font-size:.68rem;font-weight:700;line-height:1;position:absolute;bottom:calc(100% + 8px);transform:translate(-50%)}.time-row{color:#e0e0e0;justify-content:space-between;font-size:.74rem;display:flex}.right-panel{grid-area:right;grid-auto-rows:min-content;align-content:start}.status-pill{border:1px solid var(--line-soft);background:#000;border-radius:10px;margin:0;padding:7px 9px;font-size:.88rem;font-weight:700}.status-pill[data-tone=ok],.status-pill[data-tone=error]{color:#fff}.status-pill[data-tone=pending]{color:#e2e2e2}.error-text{color:#f0f0f0;margin:0;font-size:.76rem;line-height:1.25}.dev-box{gap:6px;display:grid}.log-box{border:1px solid var(--line-soft);color:#e0e0e0;white-space:pre-wrap;background:#000;border-radius:10px;min-height:0;margin:0;padding:8px;font-size:.72rem;line-height:1.3;overflow:hidden}@media (width<=980px){.topbar{grid-template-columns:1fr 1.55fr .92fr}.mix-select-grid{grid-template-columns:1fr}}