:root{--bg:#0f1420;--panel:#171d2b;--panel-2:#1f2636;--border:#2a3245;--text:#e7ebf3;--text-muted:#97a1b5;--accent:#4f8cff;--accent-hover:#6a9dff;--online:#3ecf8e;--offline:#ef5b5b;--radius:10px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}#root{min-height:100vh}button{cursor:pointer;border-radius:var(--radius);background:var(--accent);color:#fff;border:none;padding:8px 14px;font-family:inherit;font-size:14px;transition:background .15s}button:hover{background:var(--accent-hover)}button.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}button.secondary:hover{background:var(--border)}button.danger{background:var(--offline)}button:disabled{opacity:.5;cursor:not-allowed}input,select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:8px 10px;font-family:inherit;font-size:14px}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;gap:4px;width:220px;padding:20px 16px;display:flex}.brand{letter-spacing:.3px;margin-bottom:24px;font-size:18px;font-weight:700}.brand span{color:var(--accent)}.nav-item{border-radius:var(--radius);color:var(--text-muted);cursor:pointer;padding:10px 12px;font-size:14px}.nav-item.active{background:var(--panel-2);color:var(--text)}.nav-item:hover{color:var(--text)}.main{flex:1;padding:28px 32px;overflow-y:auto}.topbar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.topbar h1{margin:0;font-size:20px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.player-card{flex-direction:column;gap:8px;display:flex}.player-card-header{justify-content:space-between;align-items:center;display:flex}.status-dot{border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}.status-dot.online{background:var(--online);box-shadow:0 0 6px var(--online)}.status-dot.offline{background:var(--offline)}.status-row{color:var(--text-muted);font-size:13px}.actions-row{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.login-shell{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-box{flex-direction:column;gap:12px;width:320px;display:flex}.login-box h1{text-align:center;margin-bottom:8px;font-size:22px}.error-text{color:var(--offline);font-size:13px}.media-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.media-item{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.media-item .thumb{object-fit:cover;background:#000;width:100%;height:100px;display:block}.media-item .meta{color:var(--text-muted);padding:8px;font-size:12px}.media-item .meta strong{color:var(--text);word-break:break-all;margin-bottom:2px;font-size:13px;display:block}.upload-box{border:1px dashed var(--border);border-radius:var(--radius);align-items:center;gap:12px;margin-bottom:18px;padding:16px;display:flex}.playlist-list{flex-direction:column;gap:6px;margin:10px 0;display:flex}.playlist-row{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:flex}.playlist-row .grow{flex:1}.modal-backdrop{z-index:50;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:560px;max-height:82vh;padding:20px;overflow-y:auto}.modal-box h2{margin-top:0;font-size:18px}.section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:18px 0 8px;font-size:13px}.empty-hint{color:var(--text-muted);padding:20px 0;font-size:14px}