:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box;min-width:0}html,body,#root{height:100%;margin:0}body{color:#f3f4f6;background:#0b0f14;font-family:Inter,Arial,sans-serif;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{background:radial-gradient(circle at 0 0,#38bdf81f,#0000 28%),radial-gradient(circle at 100% 0,#a855f71f,#0000 28%),#0b0f14;flex-direction:column;height:100vh;display:flex;overflow:hidden}.header{z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0b0f14e0;border-bottom:1px solid #ffffff14;flex:none;grid-template-columns:260px 1fr auto;align-items:start;gap:16px;padding:18px 22px;display:grid;position:sticky;top:0}.brand-block{flex-direction:column;gap:4px;display:flex}.brand{letter-spacing:.2px;font-size:24px;font-weight:800}.brand-sub{color:#9ca3af;font-size:13px}.header-right{align-items:center;gap:10px;display:flex}.user-pill{color:#e5e7eb;background:#ffffff14;border:1px solid #ffffff14;border-radius:999px;padding:10px 14px}.primary-btn,.ghost-btn,.filter-chip,.search-result-actions button,.icon-btn{border:0;border-radius:12px;transition:all .15s}.primary-btn{color:#fff;background:linear-gradient(135deg,#38bdf8,#8b5cf6);padding:10px 16px;font-weight:700}.primary-btn:hover{filter:brightness(1.08)}.ghost-btn{color:#e5e7eb;background:#ffffff0f;padding:10px 14px}.ghost-btn:hover{background:#ffffff1a}.modern-search{position:relative}.modern-search form{grid-template-columns:1fr auto;gap:10px;display:grid}.modern-search input{color:#fff;background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;outline:none;width:100%;padding:12px 14px}.modern-search input:focus,.stack-form input:focus,.playlist-manual-search:focus,.chat-input-row textarea:focus{border-color:#38bdf8b3;box-shadow:0 0 0 3px #38bdf824}.search-filter-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.filter-chip{color:#d1d5db;background:#ffffff0f;padding:8px 12px}.filter-chip.active{color:#e0f2fe;background:#38bdf82e;border:1px solid #38bdf859}.search-dropdown{scrollbar-gutter:stable;background:#111827fa;border:1px solid #ffffff14;border-radius:18px;max-height:min(520px,70vh);padding:10px;position:absolute;top:calc(100% + 10px);left:0;right:0;overflow:auto;box-shadow:0 20px 50px #00000073}.search-empty,.error-text{color:#9ca3af;padding:12px}.search-result-item{border-radius:14px;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:10px;display:grid}.search-result-item:hover{background:#ffffff0d}.search-result-item img{object-fit:cover;background:#111827;border-radius:12px;width:56px;height:56px}.search-result-title{overflow-wrap:anywhere;font-weight:700}.search-result-sub{color:#9ca3af;overflow-wrap:anywhere;margin-top:4px;font-size:13px}.search-result-actions{flex-wrap:wrap;gap:8px;display:flex}.search-result-actions button{color:#f3f4f6;background:#ffffff12;padding:9px 12px}.search-result-actions button:hover{background:#ffffff1f}.main-layout{flex:auto;min-height:0;padding:18px 22px 132px;overflow:hidden}.playlist-layout{grid-template-columns:260px 1fr minmax(280px,360px) minmax(320px,420px) 320px;gap:16px;height:100%;min-height:0;display:grid;overflow:hidden}.playlist-layout>*{min-width:0;min-height:0}.panel{background:#111827d1;border:1px solid #ffffff14;border-radius:22px;padding:18px;box-shadow:0 16px 40px #00000040}.panel,.modern-panel{flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.panel h2{margin-top:0;margin-bottom:16px;font-size:18px}.panel-tab-header{flex:none;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.panel-tabs{flex-wrap:wrap;gap:8px;display:flex}.panel-tab{color:#d1d5db;background:#ffffff0f;border:0;border-radius:12px;padding:8px 12px;transition:all .15s}.panel-tab:hover{background:#ffffff1a}.panel-tab.active{color:#e0f2fe;background:#38bdf82e;border:1px solid #38bdf859}.panel-top-actions{flex:none;justify-content:flex-end;margin-bottom:12px;display:flex}.panel-scroll-list,.playlist-groups,.playlist-user-list,.playlist-manual-results,.chat-messages-list{scrollbar-gutter:stable;flex:auto;min-height:0;padding-right:4px;overflow:hidden auto}.empty-state{color:#9ca3af}.now-playing-stack{flex-direction:column;gap:16px;min-height:0;display:flex}.now-playing-cover{aspect-ratio:1;object-fit:cover;background:#111827;border-radius:20px;width:100%}.now-playing-meta{flex-direction:column;gap:8px;display:flex}.now-playing-title{overflow-wrap:anywhere;font-size:22px;font-weight:800;line-height:1.2}.now-playing-artist{color:#d1d5db;overflow-wrap:anywhere;font-size:16px}.now-playing-status{color:#9ca3af;font-size:14px}.track-card{background:#ffffff0a;border-radius:14px;grid-template-columns:56px 1fr;align-items:center;gap:12px;min-width:0;margin-bottom:8px;padding:10px;display:grid}.track-card-with-actions{grid-template-columns:56px 1fr auto}.track-card img{object-fit:cover;background:#111827;border-radius:12px;width:56px;height:56px}.track-title{overflow-wrap:anywhere;font-weight:700}.track-sub{color:#9ca3af;overflow-wrap:anywhere;margin-top:4px;font-size:13px}.track-inline-actions{flex-wrap:wrap;gap:8px;display:flex}.mini-action-btn{color:#f3f4f6;background:#ffffff14;border:0;border-radius:10px;padding:8px 10px;transition:all .15s}.mini-action-btn:hover{background:#ffffff24}.danger-btn,.danger-clear-btn{color:#fecaca;background:#ef444424}.danger-btn:hover,.danger-clear-btn:hover{background:#ef444438}.modern-playback-bar{z-index:30;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(135deg,#111827eb,#0a0e18eb);border:1px solid #ffffff14;border-radius:24px;justify-content:space-between;align-items:center;min-height:96px;padding:14px 18px 18px;display:flex;position:fixed;bottom:16px;left:24px;right:24px;box-shadow:0 18px 40px #00000059,inset 0 0 0 1px #ffffff08}.playback-left,.playback-right{z-index:2;width:260px;min-width:0;position:relative}.playback-left{justify-content:flex-start;display:flex}.playback-right{justify-content:flex-end;align-items:center;gap:10px;display:flex}.playback-meta{min-width:0;max-width:100%}.playback-title{color:#f8fafc;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:800;overflow:hidden}.playback-sub{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.playback-center-absolute{pointer-events:none;justify-content:center;width:min(760px,100% - 620px);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playback-center{pointer-events:auto;flex-direction:column;align-items:center;gap:10px;width:100%;display:flex;position:relative}.modern-actions{justify-content:center;align-items:center;gap:12px;display:flex}.icon-btn{color:#e5e7eb;background:#ffffff0f;border:0;border-radius:999px;width:44px;height:44px;font-size:18px;transition:all .15s;box-shadow:inset 0 0 0 1px #ffffff0a}.icon-btn:hover{background:#ffffff1c;transform:translateY(-1px)}.primary-icon-btn{color:#fff;background:linear-gradient(135deg,#38bdf8,#8b5cf6);width:52px;height:52px;font-size:20px;box-shadow:0 10px 24px #3b82f640,inset 0 0 0 1px #ffffff1f}.primary-icon-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.playback-progress-row{grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;width:100%;display:grid}.time-label{color:#94a3b8;text-align:center;font-variant-numeric:tabular-nums;font-size:12px}.playback-slider,.volume-slider{appearance:none;background:0 0;width:100%;margin:0}.playback-slider::-webkit-slider-runnable-track{background:#ffffff1f;border-radius:999px;height:6px}.volume-slider::-webkit-slider-runnable-track{background:#ffffff1f;border-radius:999px;height:6px}.playback-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg,#38bdf8,#8b5cf6);border:0;border-radius:999px;width:16px;height:16px;margin-top:-5px;box-shadow:0 4px 12px #38bdf859}.volume-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg,#38bdf8,#8b5cf6);border:0;border-radius:999px;width:16px;height:16px;margin-top:-5px;box-shadow:0 4px 12px #38bdf859}.playback-slider::-moz-range-track{background:#ffffff1f;border-radius:999px;height:6px}.volume-slider::-moz-range-track{background:#ffffff1f;border-radius:999px;height:6px}.playback-slider::-moz-range-thumb{background:linear-gradient(135deg,#38bdf8,#8b5cf6);border:0;border-radius:999px;width:16px;height:16px;box-shadow:0 4px 12px #38bdf859}.volume-slider::-moz-range-thumb{background:linear-gradient(135deg,#38bdf8,#8b5cf6);border:0;border-radius:999px;width:16px;height:16px;box-shadow:0 4px 12px #38bdf859}.volume-slider{max-width:140px}.volume-percent{text-align:right;color:#cbd5e1;font-variant-numeric:tabular-nums;width:40px}.audio-blocked-note{color:#fbbf24;white-space:nowrap;pointer-events:none;background:#fbbf2424;border:1px solid #fbbf243d;border-radius:999px;padding:6px 10px;font-size:12px;line-height:1;position:absolute;top:-10px;left:50%;transform:translate(-50%,-100%)}@media (width<=1200px){.modern-playback-bar{grid-template-columns:1fr;gap:14px;min-height:auto;padding:14px;display:grid;bottom:12px;left:16px;right:16px}.playback-left,.playback-right{text-align:center;justify-content:center;width:100%}.playback-right{flex-wrap:wrap}.playback-center-absolute{pointer-events:auto;width:100%;position:static;transform:none}.playback-progress-row{width:100%}.audio-blocked-note{width:fit-content;margin:0 auto 2px;position:static;transform:none}}.modal-backdrop{z-index:50;background:#0000008c;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.settings-modal{background:#111827fa;border:1px solid #ffffff14;border-radius:24px;width:min(1100px,100%);max-height:90vh;padding:20px;overflow:auto;box-shadow:0 20px 50px #00000073}.settings-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.settings-tab-row{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.settings-section{flex-direction:column;gap:18px;display:flex}.stack-form{flex-direction:column;gap:12px;display:flex}.stack-form input{color:#fff;background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;outline:none;padding:12px 14px}.inline-check{color:#d1d5db;align-items:center;gap:8px;display:flex}.permissions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.permissions-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.permission-check{background:#ffffff0a;border-radius:12px;padding:8px 10px}.users-list{flex-direction:column;gap:14px;display:flex}.user-card{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:18px;padding:14px}.user-card-top{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.playlist-groups{flex-direction:column;gap:10px;display:flex}.playlist-user-group{flex-direction:column;flex:none;gap:8px;display:flex}.playlist-user-header{color:#f3f4f6;text-align:left;background:#ffffff0f;border:0;border-radius:12px;align-items:center;gap:10px;min-width:0;padding:10px 12px;display:flex}.playlist-user-list{flex-direction:column;gap:6px;padding-left:8px;display:flex}.playlist-row{color:#e5e7eb;text-align:left;background:#ffffff0a;border:0;border-radius:12px;justify-content:space-between;align-items:center;min-width:0;padding:10px 12px;display:flex}.playlist-row.active,.playlist-row:hover{background:#38bdf824}.playlist-row-name{overflow-wrap:anywhere}.playlist-row-count{color:#9ca3af;flex:none;font-size:12px}.playlist-add-sources{flex:none;margin-bottom:14px}.playlist-manual-add-box{background:#ffffff0a;border-radius:16px;flex-direction:column;flex:none;gap:12px;margin-bottom:16px;padding:14px;display:flex}.playlist-manual-search{color:#fff;background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;outline:none;width:100%;padding:12px 14px}.playlist-manual-results{flex-direction:column;gap:8px;display:flex}.queue-panel,.history-panel,.current-track-panel,.queue-section,.history-section{min-height:0}.queue-section,.history-section{flex-direction:column;flex:1 1 0;display:flex}.queue-section .panel-scroll-list,.history-section .panel-scroll-list{flex:auto;min-height:0;overflow-y:auto}.chat-panel{flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.chat-messages-list{flex-direction:column;flex:1 1 0;gap:10px;min-height:0;margin-bottom:14px;padding-right:4px;display:flex;overflow:hidden auto}.chat-message{background:#ffffff0d;border:1px solid #ffffff0f;border-radius:14px;min-width:0;padding:10px 12px}.chat-message.own{background:#38bdf81f;border-color:#38bdf833}.chat-message-top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;display:flex}.chat-author{overflow-wrap:anywhere;font-size:14px;font-weight:700}.chat-meta{color:#9ca3af;flex:none;align-items:center;gap:10px;font-size:12px;display:flex}.chat-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.4}.chat-delete-btn{color:#fca5a5;cursor:pointer;font:inherit;background:0 0;border:0}.chat-input-row{flex-direction:column;flex:none;gap:10px;margin-top:12px;display:flex}.chat-input-row textarea{resize:vertical;color:#fff;width:100%;min-height:84px;max-height:140px;font:inherit;background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;outline:none;padding:12px 14px}@media (width<=1500px){.playlist-layout{grid-template-columns:240px 1fr minmax(260px,320px) minmax(280px,360px) 280px}}@media (width<=1400px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;overflow:visible}.main-layout{padding-bottom:150px;overflow:visible}.playlist-layout{grid-template-columns:240px 1fr 320px;grid-template-areas:"playlists playlistdetail nowplaying""playlists queue chat";height:auto;overflow:visible}.panel,.modern-panel{height:auto;min-height:280px}}@media (width<=1200px){.header,.modern-playback-bar{grid-template-columns:1fr}}@media (width<=1100px){.playlist-layout{flex-direction:column;display:flex}.permissions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.main-layout{padding:14px 14px 160px}.header{padding:14px}.modern-playback-bar{padding:12px}.permissions-grid,.permissions-grid.compact{grid-template-columns:1fr}}:root{--scrollbar-thumb:#38bdf852;--scrollbar-thumb-hover:#8b5cf673;--scrollbar-track:transparent}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);background-clip:padding-box;border:2px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box;border:2px solid #0000}::-webkit-scrollbar-corner{background:0 0}.presence-dot{vertical-align:middle;border:2px solid #0b0f14e6;border-radius:999px;flex:0 0 12px;width:12px;min-width:12px;height:12px;min-height:12px;margin-right:2px;display:inline-block}.presence-dot.online{background:#22c55e;box-shadow:0 0 0 1px #ffffff14,0 0 12px #22c55e8c}.presence-dot.offline{background:#6b7280;box-shadow:0 0 0 1px #ffffff0f}.chat-author-row{align-items:center;gap:8px;min-width:0;display:flex}.playlist-user-header .presence-dot{margin-left:2px;margin-right:2px}.chat-author-row .presence-dot{margin-right:0}