*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#000;--surface:#191919;--dim:#252525;--muted:#585858;--text:#ddd;--magenta:#ff2d6f;--cyan:#00e5ff;--lime:#39ff14;--yellow:#ffe600;--violet:#b84dff;--orange:#ff8c00;--font:"Departure Mono", monospace;--font-size:18px;--max-w:660px;--text-md:var(--font-size);--text-sm:calc(var(--font-size) - 2px);--text-xs:calc(var(--font-size) - 4px);--text-xxs:calc(var(--font-size) - 6px);--sp:2px;--sp-2:calc(var(--sp) * 2);--sp-3:calc(var(--sp) * 3);--sp-4:calc(var(--sp) * 4);--sp-5:calc(var(--sp) * 5);--sp-6:calc(var(--sp) * 6);--sp-8:calc(var(--sp) * 8);--sp-10:calc(var(--sp) * 10);--dot:var(--sp-2);--icon-sm:var(--sp-8);--icon-md:calc(var(--sp) * 12);--thumb:var(--sp-4)}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);font-size:var(--font-size);line-height:1.5}::selection{background:var(--magenta);color:#fff}::-webkit-scrollbar{width:var(--sp-2)}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--dim)}::-webkit-scrollbar-thumb:hover{background:var(--muted)}button,.ctrl-btn,.btn-add,.row-action,.row.clickable,.presets-toggle,.viz-overlay,.vol-label,.player-controls,.panel-header,.footer,.logo,.npl-title,.player-info,.elapsed-time{-webkit-user-select:none;user-select:none}.text-muted{color:var(--muted)}.text-magenta{color:var(--magenta)}.text-violet{color:var(--violet)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-xxs{font-size:var(--text-xxs)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#auth-screen{background:var(--bg);z-index:100;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#auth-screen.hidden{opacity:0;pointer-events:none}.auth-box{text-align:center;gap:var(--sp-6);flex-direction:column;width:90%;max-width:340px;padding:40px;display:flex}.auth-title{color:var(--magenta);line-height:0}.auth-sub{color:var(--muted);font-size:var(--text-sm)}.auth-field{display:flex}#password-input{background:var(--surface);width:100%;color:var(--text);font-family:var(--font);font-size:var(--text-md);padding:var(--sp-5);caret-color:var(--magenta);text-align:center;border:none;outline:none}#password-input::placeholder{color:var(--muted)}.auth-error{color:var(--magenta);font-size:var(--text-xs);margin-top:var(--sp-6);min-height:1.5em}#app{scrollbar-gutter:stable;height:100vh;display:none;overflow-y:auto}#app.active{justify-content:center;display:flex}.shell{width:100%;max-width:var(--max-w);min-height:100vh;padding:0 var(--sp-10);flex-direction:column;display:flex}.header{padding:var(--sp-8) 0;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.logo{color:var(--magenta);height:var(--icon-sm);width:auto;line-height:0}.header-actions{align-items:center;gap:var(--sp-5);display:flex}.header-menu{align-items:center;display:inline-flex;position:relative}.header-menu.hidden{display:none}.header-icon-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.header-icon-btn.hidden{display:none}.header-icon-btn:hover{color:var(--text)}.header-icon-btn:active{color:var(--magenta)}.header-menu:hover .header-icon-btn,.header-menu:focus-within .header-icon-btn{color:var(--text)}.header-icon{image-rendering:pixelated;height:var(--icon-sm);width:var(--icon-sm);background:currentColor;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.header-icon-logout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20H2V18H14V20ZM2 18H0V2H2V18ZM16 18H14V15H16V18ZM12 7H14V9H16V11H14V13H12V15H10V11H4V9H10V5H12V7ZM16 5H14V2H16V5ZM14 2H2V0H14V2Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20H2V18H14V20ZM2 18H0V2H2V18ZM16 18H14V15H16V18ZM12 7H14V9H16V11H14V13H12V15H10V11H4V9H10V5H12V7ZM16 5H14V2H16V5ZM14 2H2V0H14V2Z' fill='white'/%3E%3C/svg%3E")}.header-icon-btn:hover .header-icon-logout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 20H14V18H16V15V11H14V13H12V15H10V11H4V9H10V5H12V7H14V9H16V2H14V0H2V2H0V18H2V20Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 20H14V18H16V15V11H14V13H12V15H10V11H4V9H10V5H12V7H14V9H16V2H14V0H2V2H0V18H2V20Z' fill='white'/%3E%3C/svg%3E")}.header-icon-admin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12V14H4V16H6V18H8V16H6V14H4V12H2Z' fill='white'/%3E%3Cpath d='M12 18H14V16H16V14H18V12H20V2H18V7H10V18H8V20H12V18Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2H18V0H2V2H0V12H2V7H10V2Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12V14H4V16H6V18H8V16H6V14H4V12H2Z' fill='white'/%3E%3Cpath d='M12 18H14V16H16V14H18V12H20V2H18V7H10V18H8V20H12V18Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2H18V0H2V2H0V12H2V7H10V2Z' fill='white'/%3E%3C/svg%3E")}.header-icon-btn:hover .header-icon-admin,.header-menu:hover .header-icon-admin,.header-menu:focus-within .header-icon-admin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 16H16V14H18V12H20V2H18V0H2V2H0V12H2V14H4V16H6V18H8V20H12V18H14V16Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 16H16V14H18V12H20V2H18V0H2V2H0V12H2V14H4V16H6V18H8V20H12V18H14V16Z' fill='white'/%3E%3C/svg%3E")}.header-tooltip{background:var(--dim);z-index:20;flex-direction:column;min-width:140px;display:none;position:absolute;top:100%;right:0}.header-menu:hover .header-tooltip,.header-menu:focus-within .header-tooltip{display:flex}.header-tooltip-item{background:var(--dim);width:100%;color:var(--muted);font-family:var(--font);font-size:var(--text-xxs);text-align:left;cursor:pointer;white-space:nowrap;padding:var(--sp-3) var(--sp-4);border:none}.header-tooltip-item:hover{color:var(--text);background:var(--dim)}.header-tooltip-item:active{color:var(--magenta)}.visualizer-wrap{aspect-ratio:3;width:100%;margin-bottom:var(--sp-6);background:#080808;position:relative;overflow:hidden}#visualizer{cursor:pointer;width:100%;height:100%;display:block}.viz-overlay{cursor:pointer;z-index:2;background:#0a0a0ab3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.viz-overlay.hidden{opacity:0;pointer-events:none}.viz-pointer{color:#fff;font-size:var(--text-sm);text-align:center;line-height:1.8}.viz-pointer:before{content:"";width:var(--icon-md);height:var(--icon-md);margin:0 auto var(--sp-4);image-rendering:pixelated;background:#fff;display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3H11V9H13V7H15V9H17V11H19V9H21V11H23V19H21V21H19V23H7V21H5V19H3V17H1V13H3V11H5V15H7V1H9V3Z' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3H11V9H13V7H15V9H17V11H19V9H21V11H23V19H21V21H19V23H7V21H5V19H3V17H1V13H3V11H5V15H7V1H9V3Z' fill='%23fff'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.player-bar{z-index:3;align-items:flex-end;gap:0 var(--sp-6);padding:var(--sp-6);pointer-events:none;background:0 0;flex-wrap:wrap;display:flex;position:absolute;bottom:0;left:0;right:0}.player-controls{pointer-events:auto}.player-info{flex-direction:column;flex:40%;gap:0;min-width:0;display:flex}.npl-title{height:22px;line-height:22px;font-size:var(--text-sm);color:var(--text);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.metadata-scroll{height:var(--icon-md);white-space:nowrap;align-items:center;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 80%,#0000);mask-image:linear-gradient(90deg,#000 80%,#0000)}.metadata-text{font-size:var(--text-xxs);color:var(--muted);line-height:1.2;animation:3.5s linear infinite metadata-marquee;display:inline-block}.metadata-scroll:has(.metadata-text:empty){display:none}@keyframes metadata-marquee{0%,10%{transform:translate(0)}55%,to{transform:translateX(var(--scroll-distance,0))}}.elapsed-time{font-size:var(--text-xxs);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.player-controls{flex-shrink:0;align-items:center;display:flex}.volume-control{align-items:center;gap:var(--sp-3);flex-shrink:0;display:flex}.ctrl-btn{color:var(--muted);font-family:var(--font);font-size:var(--text-md);width:calc(var(--sp) * 16);height:var(--icon-md);cursor:pointer;white-space:nowrap;background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.ctrl-btn:hover:not(:disabled){color:var(--text)}.ctrl-btn:active:not(:disabled){color:var(--magenta)}.ctrl-btn:disabled{color:var(--dim);cursor:default}.ctrl-btn.active,.ctrl-play{color:var(--magenta)}.ctrl-play:hover{color:var(--text)}.ctrl-wrap{display:inline-flex;position:relative}.vote-toast{font-size:var(--text-xxs);color:var(--orange);white-space:nowrap;pointer-events:none;opacity:0;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.vote-toast.visible{opacity:1}.vol-label{color:var(--muted);font-size:var(--text-xxs);margin-left:var(--sp-2)}#volume-slider{appearance:none;width:calc(var(--sp) * 24);height:var(--sp);background:var(--dim);cursor:pointer;outline:none}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);background:var(--muted);cursor:pointer}#volume-slider::-webkit-slider-thumb:hover{background:var(--text)}#volume-slider::-moz-range-thumb{width:var(--thumb);height:var(--thumb);background:var(--muted);cursor:pointer;border:none}.panels{gap:var(--sp-6);flex:1;grid-template-columns:1fr 1fr;min-width:0;display:grid}.panel{background:var(--surface);min-width:0;min-height:0;padding:var(--sp-6);flex-direction:column;display:flex;overflow:hidden}.panel-header{font-size:var(--text-xs);color:var(--muted);padding-bottom:var(--sp-3);flex-shrink:0}.panel-sub-header{font-size:var(--text-xxs);color:var(--muted);padding-top:var(--sp-4);padding-bottom:var(--sp-2)}.presets-toggle{cursor:pointer}.presets-toggle:hover{color:var(--text)}#preset-list{scrollbar-gutter:stable;min-width:0;max-height:500px}#preset-list.presets-collapsed{max-height:0;overflow-y:hidden}.panel-body{scrollbar-gutter:stable;flex:1}.row{align-items:center;gap:var(--sp-3);font-size:var(--text-xxs);color:var(--muted);display:flex}.row.clickable{cursor:pointer}.row.clickable:hover{color:var(--text)}.row.active,.row.is-you .row-label{color:var(--magenta)}.row-icon{box-sizing:border-box;text-align:center}.row-icon--presence{justify-content:center;align-items:center;display:flex}.row-icon--presence:before{content:"";width:var(--dot);height:var(--dot);background:var(--lime);flex-shrink:0}.row-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.row-action{color:var(--muted);cursor:pointer;opacity:0;font-family:var(--font);font-size:var(--text-sm);padding:0 var(--sp);background:0 0;border:none}.row:hover .row-action{opacity:1}.row-action:hover{color:var(--magenta)}.row-tag{color:var(--muted);font-size:var(--text-xxs)}.queue-add{gap:var(--sp-2);padding-top:var(--sp-4);flex-shrink:0;display:flex}.queue-add input{background:var(--bg);min-width:0;color:var(--text);font-family:var(--font);font-size:var(--text-xs);padding:var(--sp-3);border:none;outline:none;flex:1}#preset-list .queue-add{align-items:stretch;gap:var(--sp-3);flex-direction:column}#preset-list .queue-add input,#preset-list .queue-add .btn-add{flex:none;width:100%}.queue-add input::placeholder{color:var(--muted)}.btn-add{background:var(--magenta);color:var(--bg);font-family:var(--font);font-size:var(--text-sm);padding:var(--sp-3);cursor:pointer;white-space:nowrap;border:none}.btn-add:hover{opacity:.8}.empty-state{color:var(--muted);font-size:var(--text-xs)}.footer{padding:var(--sp-5) 0;font-size:var(--text-xxs);color:var(--muted);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.footer-left{flex-shrink:0}.footer-status{align-items:center;gap:var(--sp-3);color:var(--lime);display:flex}.footer-status .dot{width:var(--dot);height:var(--dot);background:currentColor;display:inline-block}.footer-status.loading,.footer-status.disconnected{color:var(--cyan)}.footer-status.error{color:var(--magenta)}.footer-status.idle{color:var(--muted)}@media (width<=560px){.panels{grid-template-columns:1fr}.player-bar{padding:var(--sp-5)}.player-controls{justify-content:space-between;width:100%}}