:root{--bg: #0b1017;--bg-panel: #111c27;--bg-elev: #16232f;--line: #22333f;--text: #e6eff7;--text-dim: #7c94a5;--accent: #22c98a;--accent-ink: #04140d;--accent-2: #e0a83a;--danger: #e05a4d;--warn: #e0a83a;--radius: 8px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--bg-elev);color:var(--text);border-radius:var(--radius);padding:8px 14px;transition:background .15s,border-color .15s}button:hover{background:#1d2c38}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}button.primary:hover{background:#33d69a}button.danger{border-color:var(--danger);color:var(--danger);background:transparent}button.ghost{background:transparent}input,select,textarea{font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;width:100%}textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}label{display:block;color:var(--text-dim);margin-bottom:4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.field{margin-bottom:12px}.app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:56px 1fr;grid-template-areas:"header header" "sidebar main";height:100vh}.header{grid-area:header;display:flex;align-items:center;gap:16px;padding:0 18px;background:var(--bg-panel);border-bottom:1px solid var(--line)}.header .brand{font-weight:700;font-size:24px;letter-spacing:.02em;display:flex;align-items:center;gap:11px}.brand-logo{width:33px;height:41px;color:var(--accent);flex:none;display:block}.login-logo{display:block;width:64px;height:78px;color:var(--accent);margin:0 auto 14px}.header .spacer{flex:1}.header .user{color:var(--text-dim)}.sidebar{grid-area:sidebar;background:var(--bg-panel);border-right:1px solid var(--line);overflow-y:auto;padding:12px}.main{grid-area:main;overflow-y:auto;padding:24px;display:flex;flex-direction:column;align-items:center}@media (max-width: 720px){.app{grid-template-columns:1fr;grid-template-areas:"header" "main"}.sidebar{position:fixed;top:56px;bottom:0;left:0;width:82%;max-width:320px;transform:translate(-100%);transition:transform .2s;z-index:20}.sidebar.open{transform:translate(0)}}.list-group{margin-bottom:16px}.list-title{color:var(--text-dim);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:12px 4px 6px}.search{margin-bottom:10px}.tree-device{margin-bottom:6px}.tree-device>.dev-name{font-weight:600;color:var(--text-dim);padding:4px 6px}.src-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius);cursor:pointer}.src-item:hover{background:var(--bg-elev)}.src-item.active{background:var(--accent);color:var(--accent-ink)}.src-item .num{margin-left:auto;color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:12px;flex:none}.src-item.active .num{color:var(--accent-ink)}.src-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex:none}.src-item.active .src-dot{background:var(--accent-ink)}.lock{color:var(--warn)}.section-head{display:flex;align-items:center;justify-content:space-between}.section-add{border:1px solid var(--line);background:transparent;color:var(--text-dim);border-radius:var(--radius);padding:1px 8px;font-size:14px;line-height:1.4}.section-add:hover{color:var(--accent);border-color:var(--accent);background:transparent}.src-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.src-del{border:none;background:transparent;color:var(--text-dim);padding:0 4px;font-size:16px;line-height:1;opacity:0}.src-item:hover .src-del{opacity:.75}.src-del:hover{color:var(--danger);background:transparent;opacity:1}.player{width:100%;max-width:640px;background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:28px;text-align:center}.now-playing .src-name{font-size:24px;font-weight:700}.now-playing .device{color:var(--text-dim);margin-top:4px}.now-playing .device-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}.now-playing .chip{font-size:12px;color:var(--text-dim);background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}.transport{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0}.play-btn{width:76px;height:76px;border-radius:16px;font-size:28px;display:flex;align-items:center;justify-content:center;background:var(--accent);border:none;color:var(--accent-ink)}.play-btn.on{background:var(--accent)}.status-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;background:var(--bg-elev);color:var(--text-dim)}.status-pill.playing{color:var(--accent-2);background:#e0a83a26}.status-pill.reconnecting{color:var(--warn)}.status-pill.error{color:var(--danger)}.volume-row{display:flex;align-items:center;gap:12px;margin-top:18px}.volume-row input[type=range]{flex:1}.meter-canvas{width:100%;height:16px;background:#0a1219;border-radius:4px;margin-top:16px;display:block}.encoders{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}.encoders button{padding:6px 12px;font-size:13px}.encoders button.active{border-color:var(--accent);color:var(--accent)}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}.preset{padding:10px 6px;font-size:12px;min-height:44px;overflow:hidden;text-overflow:ellipsis}.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center}.login-card{width:340px;background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:28px}.login-card h1{margin:0 0 18px;font-size:22px;text-align:center}.err{color:var(--danger);font-size:13px;margin-top:8px;min-height:18px}.modal-backdrop{position:fixed;inset:0;background:#02080eb3;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}.modal{width:100%;max-width:820px;max-height:88vh;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:22px}.modal h2{margin-top:0}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}.tabs button{border:none;background:transparent;border-radius:0;border-bottom:2px solid transparent;color:var(--text-dim)}.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}th{color:var(--text-dim);font-size:12px;text-transform:uppercase}.row-actions{display:flex;gap:6px}.banner{border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;font-size:13px;line-height:1.45}.banner.warn{border-left-color:var(--warn);background:#e0a83a14}.banner.danger{border-left-color:var(--danger);background:#e05a4d14}.toolbar{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hamburger{display:none}@media (max-width: 720px){.hamburger{display:inline-flex}}