@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg-base:#0f1214;--bg-surface:#161a1d;--bg-elevated:#1c2124;--border:#2a3136;--border-strong:#3d464d;--text:#d8dee3;--text-muted:#8b9499;--accent:#3d8f8f;--accent-hover:#4da8a8;--danger:#c45c5c;--danger-hover:#d46e6e;--success:#5c9a6e;--font-sans:"IBM Plex Sans", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--radius:3px;--header-h:44px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);color:var(--text);background:var(--bg-base);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.45}a{color:var(--accent)}.mono{font-family:var(--font-mono);font-size:12px}.nowrap{white-space:nowrap}.muted{color:var(--text-muted)}.link{color:var(--accent);word-break:break-all;text-decoration:none}.link:hover{text-decoration:underline}.app-shell{flex-direction:column;min-height:100%;display:flex}.app-header{height:var(--header-h);background:var(--bg-surface);border-bottom:1px solid var(--border);align-items:center;gap:1.5rem;padding:0 1rem;display:flex}.app-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:1rem}.brand{align-items:center;gap:.5rem;display:flex}.brand-lg{justify-content:center;margin-bottom:.5rem}.brand-mark{background:var(--accent);width:22px;height:22px;color:var(--bg-base);border-radius:var(--radius);justify-content:center;align-items:center;font-size:12px;font-weight:600;display:inline-flex}.brand-name{letter-spacing:-.02em;text-transform:lowercase;font-weight:600}.app-nav{flex:1;gap:.25rem;display:flex}.nav-link{color:var(--text-muted);border-radius:var(--radius);padding:.35rem .65rem;font-weight:500;text-decoration:none}.nav-link:hover{color:var(--text);background:var(--bg-elevated)}.nav-link.active{color:var(--text);background:var(--bg-elevated);border:1px solid var(--border)}.header-actions{align-items:center;gap:.75rem;display:flex}.user-badge{color:var(--text-muted);align-items:center;gap:.5rem;font-size:12px;display:flex}.role-tag{font-size:10px;font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);padding:.1rem .35rem;display:inline-block}.auth-page{justify-content:center;align-items:center;min-height:100%;padding:2rem;display:flex}.auth-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:320px;padding:2rem}.auth-subtitle{text-align:center;color:var(--text-muted);margin:0 0 1.5rem}.error-text{color:var(--danger);margin-bottom:1rem}.page{flex-direction:column;gap:1rem;display:flex}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.page-title{letter-spacing:-.02em;margin:0;font-size:18px;font-weight:600}.toolbar{align-items:center;gap:.75rem;display:flex}.panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.panel-title{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 0 .75rem;font-size:13px;font-weight:600}.field{margin-bottom:.75rem}.field-inline{align-items:center;gap:.5rem;display:flex}.field-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.25rem;font-size:11px;font-weight:500;display:block}.field-inline .field-label{margin-bottom:0}.input{width:100%;color:var(--text);background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .55rem;font-family:inherit;font-size:13px}.input:focus{border-color:var(--accent);outline:none}.select{width:auto;min-width:160px}.textarea{resize:vertical;min-height:80px}.input-row{gap:.5rem;display:flex}.input-row .input{flex:1}.form-grid{grid-template-columns:1fr 120px auto;align-items:end;gap:.75rem;display:grid}.form-stack{flex-direction:column;gap:.25rem;max-width:480px;display:flex}.field-action{margin-bottom:0}.paste-form{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}.btn{color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;white-space:nowrap;justify-content:center;align-items:center;padding:.4rem .75rem;font-family:inherit;font-size:12px;font-weight:500;display:inline-flex}.btn:hover:not(:disabled){background:var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg-base)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{color:var(--text-muted);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--bg-elevated);border-color:var(--border)}.btn-danger{color:var(--danger);border-color:var(--danger);background:0 0}.btn-danger:hover:not(:disabled){background:var(--danger);color:var(--bg-base)}.btn-sm{padding:.25rem .5rem;font-size:11px}.btn-block{width:100%}.data-table{border-collapse:collapse;width:100%;font-size:12px}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--border);padding:.4rem .6rem}.data-table th{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--bg-base);font-size:10px;font-weight:600}.data-table tbody tr:hover{background:var(--bg-elevated)}.cell-actions{text-align:right}.cell-details{word-break:break-word;max-width:280px}.event-type{font-family:var(--font-mono);font-size:11px}.search-results{border:1px solid var(--border);border-radius:var(--radius);margin:.5rem 0 0;padding:0;list-style:none}.search-result{border-bottom:1px solid var(--border);align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.search-result:last-child{border-bottom:none}.thumb{object-fit:cover;border-radius:var(--radius);background:var(--bg-base);width:48px;height:36px}.search-result-body{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.search-title{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.now-playing-panel{flex-direction:column;gap:.65rem;display:flex}.now-playing-meta{flex-direction:column;gap:.25rem;display:flex}.now-playing-title{font-size:15px;font-weight:600}.now-playing-link{font-size:12px}.progress-track{background:var(--bg-base);border:1px solid var(--border);border-radius:999px;height:6px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .4s linear}.progress-times{font-family:var(--font-mono);justify-content:space-between;font-size:11px;display:flex}.playback-controls{flex-wrap:wrap;gap:.4rem;display:flex}.queue-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.queue-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);align-items:center;gap:.75rem;padding:.55rem .65rem;display:flex}.queue-item[draggable=true]{cursor:grab}.queue-item.is-dragging{opacity:.55}.queue-index{color:var(--text-muted);min-width:1.5rem}.queue-body{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.queue-name{font-weight:500}.alert{border-radius:var(--radius);border:1px solid;padding:.5rem .75rem;font-size:12px}.alert-error{color:var(--danger);background:#c45c5c14;border-color:#c45c5c4d}.alert-success{color:var(--success);background:#5c9a6e14;border-color:#5c9a6e4d}@media (width<=640px){.form-grid{grid-template-columns:1fr}.app-header{flex-wrap:wrap;height:auto;padding:.5rem}.app-nav{order:3;width:100%;overflow-x:auto}}