:root{--bg:#101112;--panel:#181a1d;--panel-2:#202328;--line:#ffffff1a;--text:#f4f5f6;--muted:#9ca3ad;--green:#30d158;--red:#ff5a66;--amber:#ffc857;--blue:#68b7ff;--violet:#b99cff}*{box-sizing:border-box}body{background:linear-gradient(180deg, #ffffff08, transparent 260px), var(--bg);min-width:320px;min-height:100vh;color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button,.link-button{border:1px solid var(--line);min-height:36px;color:var(--text);cursor:pointer;background:#24272c;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:0 12px;text-decoration:none;display:inline-flex}button:hover,.link-button:hover{background:#2b2f35;border-color:#fff3}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--green);color:#061007;border-color:#0000;font-weight:760}.danger{color:#ffe9eb;background:#ff5a6624;border-color:#ff5a6647}.subtle{background:0 0}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-shell{grid-template-columns:248px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:#101112db;height:100vh;padding:22px 14px;position:sticky;top:0}.brand{align-items:center;gap:12px;padding:0 8px 22px;display:flex}.brand strong,.brand span{display:block}.brand span,.eyebrow,.request-main small,.empty-state{color:var(--muted)}.sidebar nav{gap:6px;display:grid}.sidebar nav button{color:#d9dde3;background:0 0;border-color:#0000;justify-content:flex-start;width:100%}.sidebar nav button.active{border-color:var(--line);color:#fff;background:#24272c}.main{width:100%;max-width:1320px;padding:28px}.topbar{justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px;display:flex}.topbar h1,.topbar p,.tool-panel h2,.now-playing h3{margin:0}.topbar h1{letter-spacing:0;font-size:30px}.top-actions{align-items:center;gap:10px;display:flex}.button-group{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.pill{border-radius:999px}.pill.on{color:#dfffe7;background:#30d15824;border-color:#30d15861}.pill.off{color:#fff1c9;background:#ffc8571f;border-color:#ffc85757}.icon-button{width:38px;padding:0}.stack{gap:18px;display:grid}.status-grid,.connection-grid,.blacklist-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;display:grid}.status-card,.tool-panel{border:1px solid var(--line);background:var(--panel);border-radius:8px}.status-card{align-content:center;gap:6px;min-height:92px;padding:16px;display:grid}.status-card span{color:var(--muted)}.status-dot{border-radius:999px;width:10px;height:10px;display:inline-block}.status-dot.ok{background:var(--green);box-shadow:0 0 0 5px #30d1581a}.status-dot.bad{background:var(--red);box-shadow:0 0 0 5px #ff5a661a}.tool-panel{padding:18px}.section-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.count{background:var(--panel-2);min-width:28px;height:28px;color:var(--muted);border-radius:999px;place-items:center;display:grid}.now-playing{grid-template-columns:90px minmax(0,1fr);align-items:center;gap:16px;display:grid}.now-playing p,.now-playing span{color:var(--muted)}.cover{width:74px;height:74px;color:var(--muted);background:linear-gradient(135deg,#2d323a,#16191d);border-radius:8px;place-items:center;display:grid;overflow:hidden}.cover img{object-fit:cover;width:100%;height:100%}.dash-progress{color:var(--muted);grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:10px;margin-top:10px;font-size:13px;display:grid}.dash-progress div{background:#ffffff1c;border-radius:999px;height:6px;overflow:hidden}.dash-progress i{border-radius:inherit;background:linear-gradient(90deg, var(--green), var(--blue));height:100%;display:block}.request-list{gap:10px;display:grid}.request-row{background:var(--panel-2);border:1px solid #ffffff12;border-radius:8px;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;display:grid}.request-row.status-pending-approval{background:linear-gradient(90deg, #ffc8571a, var(--panel-2) 34%);border-color:#ffc85742}.request-row.status-added-to-spotify,.request-row.status-playing{border-color:#30d1582e}.request-row.status-spotify-error,.request-row.status-pending-spotify-device{background:linear-gradient(90deg, #ff5a661a, var(--panel-2) 34%);border-color:#ff5a6642}.request-row .cover{width:54px;height:54px}.request-main{gap:3px;min-width:0;display:grid}.request-main strong,.request-main span,.request-main small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.row-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.row-actions button{min-height:32px;padding:0 9px}.inline-form{grid-template-columns:minmax(0,1fr) auto;gap:10px;display:grid}.compact-inline-form{width:min(420px,100%)}.user-create-grid{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:12px;display:grid}.user-list{gap:10px;display:grid}.user-row{background:var(--panel-2);border:1px solid #ffffff12;border-radius:8px;grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr);align-items:center;gap:14px;padding:12px;display:grid}.user-main{gap:3px;display:grid}.user-main span,.user-main small{color:var(--muted)}.user-controls{grid-template-columns:minmax(120px,.75fr) minmax(90px,.55fr) minmax(220px,1fr) auto;align-items:end;gap:10px;display:grid}.user-controls .field,.user-controls .toggle{margin-bottom:0}input,select,textarea{border:1px solid var(--line);min-height:38px;color:var(--text);background:#111315;border-radius:8px;padding:0 11px}textarea{resize:vertical;min-height:82px;padding:10px 11px;line-height:1.45}.search{width:min(340px,100%)}.settings-grid{grid-template-columns:minmax(280px,.85fr) minmax(320px,1.45fr);align-items:start;gap:18px;display:grid}.settings-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.field,.toggle{color:#dfe3e8;gap:7px;margin-bottom:12px;display:grid}.mode-field{background:#68b7ff14;border:1px solid #68b7ff33;border-radius:8px;padding:12px}.toggle{grid-template-columns:minmax(0,1fr) auto;align-items:center}.toggle input{display:none}.toggle i{background:#30343b;border-radius:999px;width:42px;height:24px;position:relative}.toggle i:after{content:"";background:#c8ced7;border-radius:999px;width:18px;height:18px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px}.toggle input:checked+i{background:#30d15857}.toggle input:checked+i:after{background:var(--green);transform:translate(18px)}.preview-frame{background-color:#141619;background-image:linear-gradient(45deg,#ffffff0f 25%,#0000 25%),linear-gradient(-45deg,#ffffff0f 25%,#0000 25%),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px dashed #ffffff2e;border-radius:8px;max-width:100%;margin:12px 0 18px;overflow:hidden}.voting-preview{width:450px;height:200px}.preview-frame iframe{border:0;width:100%;height:100%;display:block}.obs-steps{color:var(--muted);margin:14px 0 0;padding-left:20px}.obs-steps li{margin:4px 0}.community-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;display:grid}.community-card,.command-card{background:var(--panel-2);border:1px solid #ffffff12;border-radius:8px;padding:12px}.community-card{gap:10px;display:grid}.community-card strong,.community-card span{display:block}.community-card span:not(.status-badge),.community-card p,.hint-text{color:var(--muted)}.community-card p{margin:0}.community-table{grid-template-columns:170px 1fr .8fr .8fr .8fr}.community-settings-grid .command-settings{grid-column:1/-1}.command-list,.command-card{gap:12px;display:grid}.section-head.compact{margin-bottom:0}.section-head.compact>div{gap:3px;display:grid}.section-head.compact span{color:var(--muted)}.alias-list{flex-wrap:wrap;gap:8px;display:flex}.alias-chip{color:#dfffe7;background:#30d1581f;border:1px solid #30d15838;border-radius:999px;align-items:center;gap:6px;min-height:30px;padding:0 4px 0 10px;display:inline-flex}.alias-chip .icon-button{border-radius:999px;width:24px;height:24px;min-height:24px}.hint-text{margin:12px 0 0;font-size:13px}.inline-message{margin:0}.connection-card{gap:8px;display:grid}.connection-card p{color:var(--muted);margin:0}.code-line{grid-template-columns:100px minmax(0,1fr);align-items:start;gap:10px;margin:10px 0;display:grid}code{color:#d8f5df;overflow-wrap:anywhere;background:#101214;border-radius:8px;padding:9px 10px}.table-list,.mini-list,.log-list{gap:8px;display:grid}.table-row{border-bottom:1px solid var(--line);color:var(--muted);grid-template-columns:170px 1.2fr 1fr .8fr .8fr;gap:10px;padding:10px;display:grid}.table-row strong{color:var(--text)}.mini-row,.log-row{background:var(--panel-2);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:9px;display:flex}.log-row{justify-content:flex-start}.log-row span{color:var(--muted);min-width:160px}.log-row p{margin:0}.form-error{color:var(--red);margin:0}.success-text{color:var(--green);margin:12px 0 0}.warning-text{color:var(--amber);margin:8px 0 0}.status-badge{border-radius:999px;align-items:center;min-height:26px;padding:0 10px;font-size:12px;font-weight:760;display:inline-flex}.status-badge.ok{color:#dfffe7;background:#30d15824;border:1px solid #30d1584d}.status-badge.bad{color:#ffe9eb;background:#ff5a6624;border:1px solid #ff5a664d}.divider{background:var(--line);height:1px;margin:18px 0}.compact-heading{margin:0 0 12px;font-size:16px}.splash,.login-screen{place-items:center;min-height:100vh;display:grid}.login-panel{border:1px solid var(--line);background:var(--panel);border-radius:8px;gap:14px;width:min(420px,100vw - 32px);padding:26px;display:grid}.login-panel h1{margin:0}@media (width<=980px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line);height:auto;position:static}.sidebar nav{padding-bottom:4px;display:flex;overflow-x:auto}.sidebar nav button{flex:none;width:auto}.main{padding:20px}.settings-grid{grid-template-columns:1fr}}@media (width<=680px){.topbar,.top-actions,.section-head{flex-direction:column;align-items:stretch}.request-row,.now-playing,.inline-form,.table-row,.code-line,.settings-columns,.user-create-grid,.user-row,.user-controls{grid-template-columns:1fr}.row-actions{justify-content:flex-start}.table-row span,.log-row span{min-width:0}}