:root {
  color-scheme: dark;
  --ink: #f3f7f8;
  --muted: #9eabb4;
  --panel: rgba(13, 22, 30, .84);
  --panel-border: rgba(255,255,255,.1);
  --accent: #5be0c0;
  --accent-2: #76a9ff;
  --danger: #ff8d8d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0d151d; }
body { color: var(--ink); }
button { font: inherit; }

#app-shell, #scene { position: fixed; inset: 0; width: 100%; height: 100%; }
#scene { display: block; touch-action: none; background: linear-gradient(145deg,#d8e3e7,#9fb2ba); }

.glass-panel {
  border: 1px solid var(--panel-border);
  background: linear-gradient(145deg, rgba(20,32,43,.92), var(--panel));
  box-shadow: 0 18px 55px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px) saturate(120%);
}

.topbar {
  position: fixed;
  left: 22px; right: 22px; top: 18px;
  min-height: 74px;
  padding: 13px 16px 13px 19px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  border-radius: 18px;
  z-index: 4;
}

.eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
h1, h2, p { margin-top: 0; }
.topbar h1 { margin: 0; font-size: 23px; letter-spacing: -.04em; line-height: 1; }
.topbar h1 span { color: var(--muted); font-weight: 500; }
.top-actions { display: flex; align-items: center; gap: 9px; }

.icon-button, .room-button {
  color: #dce5e9;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.icon-button { border-radius: 11px; padding: 9px 12px; font-size: 12px; }
.icon-button:hover, .room-button:hover { border-color: rgba(91,224,192,.55); color: #fff; background: rgba(91,224,192,.12); }
.icon-button:active, .room-button:active { transform: translateY(1px); }
.icon-button[aria-pressed="true"] { background: rgba(91,224,192,.18); color: var(--accent); }

.status-pill { display: inline-flex; align-items: center; gap: 8px; color: #bac6cc; font-size: 11px; font-weight: 700; letter-spacing: .035em; padding: 8px 10px; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #f1b96c; box-shadow: 0 0 12px currentColor; }
.status-pill.ready { color: #b6f1e3; }
.status-pill.ready i { background: var(--accent); }

.room-nav {
  position: fixed;
  top: 110px; left: 22px; bottom: 72px;
  width: 76px;
  padding: 9px;
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 7px;
  z-index: 3;
  overflow: auto;
}
.room-button { min-height: 58px; border-radius: 12px; padding: 7px 4px; display: grid; place-items: center; gap: 2px; text-align: center; }
.room-button strong { display: block; font-size: 18px; line-height: 1; }
.room-button span { font-size: 9px; line-height: 1.1; color: #a9b5bd; }
.room-button.active { border-color: rgba(91,224,192,.65); background: rgba(91,224,192,.16); color: var(--accent); }

.inspector {
  position: fixed;
  top: 110px; right: 22px;
  width: min(300px, calc(100vw - 130px));
  max-height: calc(100vh - 183px);
  border-radius: 18px;
  overflow: hidden;
  z-index: 3;
}
.inspector-head { padding: 18px 18px 13px; border-bottom: 1px solid rgba(255,255,255,.07); }
.inspector h2 { margin-bottom: 5px; font-size: 19px; letter-spacing: -.025em; }
.inspector-head > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.device-list { padding: 12px; max-height: 52vh; overflow: auto; }
.device-card { width:100%; min-height:55px; margin-bottom:8px; padding:9px 10px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; color:var(--ink); border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(255,255,255,.035); text-align:left; }
button.device-card { cursor:pointer; }
button.device-card:hover { border-color:rgba(91,224,192,.42); background:rgba(91,224,192,.08); }
.device-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:#b8c5cc; background:rgba(255,255,255,.065); font-weight:700; }
.device-card.active .device-icon { color:#10231e; background:var(--accent); box-shadow:0 0 18px rgba(91,224,192,.25); }
.device-name { min-width:0; font-size:11px; font-weight:700; line-height:1.22; }
.device-entity { display:block; margin-top:2px; color:#7f8e97; font-size:8px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-state { color:#9eabb4; font-size:10px; text-transform:capitalize; }
.device-card.active .device-state { color:var(--accent); }
.empty-state { padding: 21px 12px 25px; text-align: center; color: var(--muted); }
.empty-state p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; }
.empty-icon { font-size: 30px; color: var(--accent); }

.hint-bar {
  position: fixed;
  left: 116px; right: 342px; bottom: 18px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 13px;
  display: flex; align-items: center; gap: 20px;
  color: #a7b4bb; font-size: 11px;
  z-index: 3;
}
.hint-bar b { color: #eef3f5; font-weight: 650; }
.hint-accent { margin-left: auto; color: var(--accent); }

#file-warning { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: #0e171e; }
#file-warning[hidden] { display: none; }
.warning-card { max-width: 560px; padding: 32px; border-radius: 22px; background: #18252e; border: 1px solid rgba(255,255,255,.12); }
.warning-card h1 { margin-bottom: 12px; }
.warning-card p { margin: 0; color: #c4cdd2; line-height: 1.6; }

dialog { width:min(520px,calc(100vw - 28px)); padding:0; border:0; border-radius:20px; background:transparent; color:var(--ink); }
dialog::backdrop { background:rgba(3,8,12,.72); backdrop-filter:blur(7px); }
.settings-card { padding:21px; border-radius:20px; }
.settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.settings-head h2 { margin-bottom:0; }
.dialog-close { border:0; background:transparent; color:#b9c4c9; font-size:27px; line-height:1; cursor:pointer; }
.settings-copy { color:#aab6bc; font-size:12px; line-height:1.55; }
.settings-card label { display:grid; gap:6px; margin:13px 0; color:#cbd4d8; font-size:11px; font-weight:700; }
.settings-card input { width:100%; padding:11px 12px; color:#f4f7f8; border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(255,255,255,.055); }
.settings-card input:focus { border-color:rgba(91,224,192,.65); box-shadow:0 0 0 3px rgba(91,224,192,.09); }
.settings-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.primary-button,.secondary-button { padding:10px 14px; border-radius:10px; cursor:pointer; }
.primary-button { border:0; color:#10231e; background:var(--accent); font-weight:800; }
.secondary-button { color:#c3cdd2; border:1px solid rgba(255,255,255,.1); background:transparent; }
.settings-error { margin:8px 0; color:var(--danger); font-size:11px; }
#toast { position:fixed; left:50%; bottom:76px; z-index:10; transform:translate(-50%,18px); padding:10px 14px; border-radius:11px; color:#eaf0f2; background:rgba(17,26,34,.94); border:1px solid rgba(255,255,255,.1); opacity:0; pointer-events:none; transition:.2s; font-size:11px; }
#toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 820px) {
  .topbar { left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top)); padding: 12px 13px; }
  .topbar .icon-button { display: none; }
  .status-pill { font-size: 0; padding: 8px; }
  .room-nav { left: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 82px); bottom: max(10px, env(safe-area-inset-bottom)); width: 64px; }
  .inspector { right: 10px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 94px); max-height: 210px; }
  .inspector-head { padding: 12px 14px 9px; }
  .device-list { max-height: 110px; }
  .hint-bar { display: none; }
}
:root { color-scheme: dark; }
.device-dialog { color:#edf5f5; background:#17252e; border:1px solid #48616b; border-radius:18px; width:min(460px,90vw); padding:28px; max-height:85vh; overflow:auto; }
.device-dialog::backdrop { background:#031017aa; }
.device-dialog .dialog-close { float:right; }
.device-dialog .primary-button { margin:6px 8px 6px 0; }
.device-dialog .control-label { display:block; margin:22px 0; }
.device-dialog input[type=range] { display:block; width:100%; margin-top:12px; accent-color:#53d7c1; }
.device-dialog input[type=color] { padding:2px; width:64px; height:40px; }
.detail-state { color:#73e2cf; text-transform:capitalize; }
.media-art { display:block; max-width:100%; max-height:220px; margin:15px auto; border-radius:8px; }
.device-details { border:0; background:transparent; color:#81c9c1; padding:4px 12px 12px; text-align:right; cursor:pointer; }
.media-summary { display:block; margin-top:5px; font-size:10px; color:#b4d8d2; line-height:1.4; }
#inspection-lighting[aria-pressed=true] { background:#88652d; color:white; }

/* Compact working surface: apartment first, controls on demand. */
svg{width:24px;height:24px;flex:none}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.42;cursor:wait}button,input,summary{-webkit-tap-highlight-color:transparent}
.topbar{left:16px;right:16px;top:12px;min-height:52px;padding:6px 12px;border-radius:14px;box-shadow:0 5px 20px #0002;backdrop-filter:none;background:#15232dea}
.topbar h1{font-size:20px}.topbar h1 span{font-size:14px}.top-actions{gap:5px}.icon-button{display:grid;place-items:center;width:42px;height:42px;padding:8px;border:0;background:transparent}.status-pill{font-size:12px;max-width:220px}
.room-nav{top:78px;bottom:auto;max-height:calc(100dvh - 110px);left:16px;width:150px;padding:7px;gap:3px;overflow-x:hidden;backdrop-filter:none;background:#15232deb;box-shadow:0 6px 20px #0002}
.room-button{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;justify-items:start;gap:10px;min-height:48px;padding:8px 10px;border:1px solid transparent;text-align:left;flex-shrink:0}.room-button span{font-size:14px;line-height:1.3;color:inherit}.room-button svg{width:23px;height:23px}
.inspector{top:78px;right:16px;width:240px;max-height:60dvh;background:#15232de8;backdrop-filter:none;box-shadow:0 6px 20px #0002}.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:0}.inspector h2{font-size:15px;margin:0}.inspector-head #view-subtitle{display:none}#inspector-toggle{background:none;color:var(--accent);border:0;padding:8px;font-size:13px;cursor:pointer}.inspector.empty #inspector-toggle{display:none}.inspector .device-list{display:none}.inspector.expanded .device-list{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:4px;padding:8px;max-height:48dvh}.inspector.empty .device-list{display:none}
.device-card{grid-template-columns:28px minmax(0,1fr);gap:8px;margin:0;padding:8px;min-width:0}.device-name{font-size:14px;line-height:1.3}.device-state{grid-column:2;font-size:12px;text-align:left;overflow-wrap:anywhere}.device-icon{width:28px;height:28px}.device-icon svg{width:19px;height:19px}.device-details{padding:4px;align-self:center}.device-details svg{width:20px}.media-summary{font-size:12px}.hint-bar{left:182px;right:auto;bottom:12px;padding:8px 12px;font-size:12px;box-shadow:none;backdrop-filter:none}.hint-accent{display:none}
.device-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:20px;border:1px solid #3f525c;border-radius:22px;background:#12212c;box-shadow:0 28px 80px #0008;font-size:16px}.device-dialog[open]{animation:screen-in .2s ease-out}.device-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;touch-action:pan-y}.device-heading h2{font-size:18px;margin:0}.device-heading .remote-button{width:40px;height:40px;background:none;border:0}.floating-tv{width:min(760px,calc(100vw - 40px));border:8px solid #172129;border-radius:18px;background:#09151d;padding:18px 22px}.now-playing-screen{display:grid;grid-template-columns:minmax(100px,38%) minmax(0,1fr);gap:24px;align-items:center;padding:16px 0}.artwork-wrap{aspect-ratio:1;display:grid;place-items:center;background:#20323d;border-radius:12px;overflow:hidden}.artwork-wrap>svg{width:64px;height:64px;color:#9ab3c0}.media-art{display:block;width:100%;height:100%;max-height:none;object-fit:contain;margin:0;border-radius:0}.media-copy{min-width:0}.media-title{font-size:clamp(20px,2.5vw,30px);line-height:1.2;overflow-wrap:anywhere;margin:8px 0}.media-artist{font-size:17px;margin:10px 0;color:#dae6ea}.media-album,.media-source{font-size:13px;color:#a6bdc8;line-height:1.5;margin:6px 0}.detail-state{font-size:13px;margin:4px 0}.remote-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}.remote-button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#263d4b;color:#e5f2f7;border:1px solid #52708066;cursor:pointer;flex-shrink:0}.remote-button:hover{background:#355567}.remote-button:active{transform:scale(.94)}.remote-button.main-play{width:60px;height:60px;background:var(--accent);color:#0a2923;border:0}.control-label{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:14px;margin:16px 0!important}.control-label input[type=range]{grid-column:1/-1;height:26px;margin:0;width:100%}.device-dialog progress{width:100%;height:5px;accent-color:var(--accent)}.progress-time{font-size:12px;color:var(--muted);text-align:right;margin:6px 0}.detail-line{font-size:14px}.sensor-reading{font-size:25px;color:var(--accent)}details{margin-top:16px;font-size:13px;color:var(--muted)}summary{cursor:pointer;padding:8px 0}.device-entity{overflow-wrap:anywhere;font-size:12px}.settings-card label,.settings-copy,.settings-error{font-size:14px}.settings-card input,#pair-code{font-size:16px}.settings-card{max-height:90dvh;overflow:auto}#toast{font-size:14px;max-width:90vw;width:max-content;bottom:22px}#pair-dialog label{display:grid;gap:10px}#pair-code{padding:12px;width:100%;margin-bottom:12px}
@keyframes screen-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:820px){.topbar{top:max(8px,env(safe-area-inset-top));left:8px;right:8px;min-height:48px;padding:4px 8px}.topbar h1{font-size:17px}.topbar h1 span{display:none}.topbar .icon-button{display:grid;width:38px;height:38px}.status-pill{font-size:0;padding:4px;max-width:18px}.top-actions{gap:1px}.room-nav{left:8px;right:8px;top:auto;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-height:84px;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:5px;gap:3px;scrollbar-width:none;border-radius:16px}.room-button{display:flex;flex-direction:column;justify-content:center;align-items:center;width:69px;min-width:69px;min-height:60px;padding:5px 2px;gap:5px;text-align:center}.room-button span{font-size:12px;white-space:nowrap}.room-button svg{width:22px;height:22px}.inspector{top:calc(max(8px,env(safe-area-inset-top)) + 58px);bottom:auto;right:8px;width:auto;max-width:calc(100vw - 16px);max-height:46dvh}.inspector.expanded{width:min(330px,calc(100vw - 16px))}.inspector.expanded .device-list{max-height:34dvh}.inspector-head{padding:6px 10px}.hint-bar{display:none}.device-dialog{width:100%;max-width:100%;max-height:88dvh;margin:auto 0 0;border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));border-width:1px}.floating-tv{border-width:5px;padding:14px 14px calc(14px + env(safe-area-inset-bottom));width:100%}.now-playing-screen{gap:14px;padding:8px 0}.media-title{font-size:21px}.media-artist{font-size:15px}.remote-controls{gap:10px}.remote-button{width:44px;height:44px}.remote-button.main-play{width:54px;height:54px}#toast{bottom:100px}.settings-card{padding:18px}.device-dialog::backdrop{backdrop-filter:none}.glass-panel{backdrop-filter:none}}
@media(max-height:500px) and (orientation:landscape){.device-dialog{max-height:100dvh}.now-playing-screen{grid-template-columns:120px 1fr}.room-nav{max-height:66px}.room-button{min-height:48px}.room-button span{font-size:11px}.inspector{top:62px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.render-warning{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 190px));padding:22px;color:#f2e2b5;background:#26343de8;border:1px solid #9e8954;border-radius:16px;line-height:1.6;pointer-events:none}.qa-report{position:fixed;bottom:70px;left:180px;z-index:8;background:#102028;max-height:50vh;overflow:auto;max-width:60vw}.qa-report pre{white-space:pre-wrap;font-size:12px}.qa-report summary{padding:10px}@media(max-width:820px){.render-warning{width:calc(100vw - 32px);top:45%;font-size:14px}.qa-report{left:8px;max-width:95vw;bottom:95px}}