:root{--bg:#1d1b2c;--panel:#2a2640;--panel-2:#353052;--line:#4a4368;--text:#ece8f6;--muted:#a49cc0;--accent:#f2c84b;--accent-ink:#2a2014;--danger:#e2566b;color:var(--text);background:var(--bg);font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}#app{grid-template-rows:auto auto 1fr auto;height:100%;display:grid}button{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:4px;padding:4px 10px}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.4;cursor:default}button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.topbar{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;display:flex}.brand{letter-spacing:.04em;color:var(--accent);font-weight:700}.house-name{font:inherit;color:var(--text);background:0 0;border:1px solid #0000;border-radius:4px;min-width:12ch;padding:4px 6px}.house-name:hover,.house-name:focus{border-color:var(--line);outline:none}.group{align-items:center;gap:4px;display:flex}.zoom-label{text-align:center;font-variant-numeric:tabular-nums;min-width:5ch}.toggle{color:var(--muted);align-items:center;gap:4px;margin-left:6px;display:flex}.floor-tabs{background:var(--bg);border-bottom:1px solid var(--line);align-items:end;gap:2px;padding:6px 12px 0;display:flex;overflow-x:auto}.floor-tabs .tab{background:var(--panel);color:var(--muted);white-space:nowrap;border-bottom:none;border-radius:6px 6px 0 0;align-items:center;gap:6px;display:flex}.floor-tabs .tab.active{background:var(--panel-2);color:var(--text);border-color:var(--muted)}.floor-tabs .tab .close{color:var(--muted);padding:0 2px}.floor-tabs .tab .close:hover{color:var(--danger)}.floor-tabs input{font:inherit;width:14ch;color:var(--text);background:var(--bg);border:1px solid var(--accent);border-radius:3px}.floor-tabs .add{background:0 0;border-style:dashed dashed none;border-bottom-width:medium;border-bottom-color:currentColor;border-radius:6px 6px 0 0}.workspace{grid-template-columns:auto auto 1fr auto;min-height:0;display:grid}.tools{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;gap:6px;padding:10px 8px;display:flex}.tools button{text-align:left;align-items:center;gap:8px;min-width:96px;display:flex}.tools .key{text-align:center;opacity:.7;border:1px solid;border-radius:3px;width:18px;font-size:11px;display:inline-block}.viewport{min-width:0;min-height:0;position:relative;overflow:hidden}.viewport canvas{width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:crosshair;position:absolute;inset:0}.viewport canvas.panning{cursor:grabbing}.viewport canvas.pan-ready{cursor:grab}.toast{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;max-width:80%;padding:8px 14px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.toast.error{border-color:var(--danger)}.statusbar{color:var(--muted);background:var(--panel);border-top:1px solid var(--line);font-variant-numeric:tabular-nums;gap:18px;padding:4px 12px;font-size:12px;display:flex}.statusbar .autosave{margin-left:auto}.inspector{background:var(--panel);border-left:1px solid var(--line);width:270px;font-size:13px;overflow-y:auto}.panel{border-bottom:1px solid var(--line);padding:10px 12px 12px}.panel h2{letter-spacing:.03em;color:var(--accent);margin:0 0 4px;font-size:13px}.panel .hint{color:var(--muted);margin:4px 0 8px;font-size:12px;line-height:1.35}.panel .row{align-items:end;gap:6px;margin:6px 0;display:flex}.panel .fields{flex-direction:column;gap:4px;display:flex}.panel .fields[hidden]{display:none}.panel label{color:var(--muted);flex-direction:column;gap:2px;display:flex}.panel label.toggle{flex-direction:row;margin:0 0 4px}.panel .grid3{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.panel input[type=number],.panel select,dialog input{font:inherit;width:100%;min-width:0;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:3px 4px}.panel select{width:auto}.panel input[type=range]{width:100%;accent-color:var(--accent)}dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:6px}dialog::backdrop{background:#0a081499}dialog .row{gap:6px;margin-top:10px;display:flex}.viewport canvas.move-ready{cursor:move}.tools hr{border:none;border-top:1px solid var(--line);width:100%;margin:2px 0}.panel[hidden],.panel [data-for][hidden]{display:none}.panel input[type=text]{font:inherit;width:100%;min-width:0;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:3px 4px}.panel input[type=text]:focus,.panel input[type=number]:focus,.panel select:focus{border-color:var(--accent);outline:none}.panel .fields>label>select{width:100%}.panel .color-row{align-items:center;gap:6px;display:flex}.panel .color-row input[type=color]{border:1px solid var(--line);background:var(--bg);width:36px;height:24px;padding:0}.panel .color-row code{color:var(--text);flex:1;font-size:11px}.panel .color-row button{padding:2px 6px;font-size:11px}.panel .grid4{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.panel .field-label{color:var(--muted);margin-top:4px}.panel .checks{flex-wrap:wrap;gap:2px 10px;display:flex}.panel button.danger{border-color:var(--danger);color:var(--danger);margin-top:8px}.panel .fields>button{align-self:flex-start}.palette{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;width:196px;min-height:0;padding:10px 8px 0;font-size:12px;display:flex}.palette h2{letter-spacing:.03em;color:var(--accent);margin:0 0 6px;font-size:13px}.palette input[type=search]{font:inherit;width:100%;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:3px 6px}.palette .hint{color:var(--muted);margin:6px 0;line-height:1.3}.palette-list{flex:1;padding-bottom:12px;overflow-y:auto}.palette-group h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:8px 0 4px;font-size:11px;font-weight:600}.palette-group[hidden],.palette-item[hidden]{display:none}.palette-grid{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.palette-item{cursor:grab;background:#3d4a3a;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 2px;display:flex}.palette-item .thumb{justify-content:center;align-items:center;width:48px;height:48px;display:flex}.palette-item canvas{image-rendering:pixelated}.palette-item .name{text-overflow:ellipsis;white-space:nowrap;text-align:center;width:100%;font-size:10px;overflow:hidden}.palette-item.active{outline:2px solid var(--accent);outline-offset:-2px;color:var(--text);background:#56663f}.panel h2 .count{float:right;color:var(--muted);font-weight:400}.problems{max-height:220px;margin:0;padding:0;list-style:none;overflow-y:auto}.problems li{margin:0 0 4px}.problems button{text-align:left;border-left:4px solid var(--danger);width:100%;padding:4px 6px 4px 8px;font-size:12px;line-height:1.3;display:block}.problems li.warning button{border-left-color:#ffaa28}.problems li.other-floor button{opacity:.7}.problems .code{color:var(--muted);font-size:10px;display:block}#problems-panel.clean h2 .count{color:#7fd08a}.palette[data-pane=devices]{width:244px}.palette-tabs{gap:4px;margin-bottom:8px;display:flex}.palette-tabs button{color:var(--muted);background:var(--bg);flex:1;padding:4px 0;font-size:12px;font-weight:600}.palette-tabs button.active{color:var(--accent-ink);background:var(--accent)}.palette .pane{flex-direction:column;flex:1;min-height:0;display:flex}.palette .pane[hidden]{display:none}#pane-devices{padding-bottom:12px;overflow-y:auto}.ha-form,.device-plan{flex-direction:column;gap:4px;margin-bottom:8px;display:flex}.ha-form label,.device-plan label{color:var(--muted);flex-direction:column;gap:2px;display:flex}.ha-form input,.device-plan input,.device-plan select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:3px;min-width:0;padding:3px 6px}.ha-form .row{gap:4px;display:flex}.ha-form .row button{flex:1}.ha-status{background:var(--bg);border-left:4px solid var(--muted);border-radius:3px;padding:4px 6px;line-height:1.3}.ha-status[data-state=online]{border-left-color:#5fd08a}.ha-status[data-state=connecting]{border-left-color:var(--accent)}.toggle.small{color:var(--muted);margin:4px 0;font-size:11px}.entity-list{border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex:none;min-height:80px;max-height:46vh;margin-bottom:8px;overflow-y:auto}.entity-group h3{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);justify-content:space-between;gap:6px;margin:8px 0 3px;font-size:11px;font-weight:600;display:flex}.entity-group .room-link{text-transform:none;letter-spacing:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-weight:400;overflow:hidden}button.entity{text-align:left;background:var(--panel-2);align-items:center;gap:6px;width:100%;margin-bottom:2px;padding:3px 4px;display:flex}button.entity.placed{opacity:.62}button.entity.active{outline:2px solid var(--accent);outline-offset:-2px;opacity:1}button.entity .icon{flex:0 0 16px;width:16px;height:16px}button.entity .icon canvas{image-rendering:pixelated}button.entity .text{flex-direction:column;flex:1;min-width:0;display:flex}button.entity .name,button.entity .id{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button.entity .id{color:var(--muted);font-family:ui-monospace,monospace;font-size:10px}button.entity .tag{text-transform:uppercase;color:var(--muted);font-size:9px}.device-plan h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:4px 0 2px;font-size:11px}.device-plan .suggest{color:#9fe6b8}#btn-plan-place.active{color:var(--accent-ink);background:var(--accent)}.ha-form[data-state=online] label,.ha-form[data-state=online] .hint{display:none}#tracer-list{max-height:240px;margin:6px 0 0;padding:0;list-style:none;overflow-y:auto}#tracer-list li{align-items:center;gap:4px;margin:2px 0;display:flex}#tracer-list li.focused .ghost-name{outline:1px solid #ffe45c}#tracer-list .ghost-name{text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}#tracer-list .ghost-accept,#tracer-list .ghost-reject{width:28px;padding-left:0;padding-right:0}#tracer-list .ghost-accept{color:#9fe8a6}#tracer-list .ghost-reject{color:#f09aa8}.group.run{margin-left:auto}button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}button.primary:hover:not(:disabled){border-color:var(--text)}button.blocked{opacity:.55}.ready{margin:0 0 6px;font-size:12px;font-weight:600}.ready.ok{color:#7fd89a}.ready.no{color:var(--danger)}.play{z-index:50;background:#120f1e;flex-direction:column;display:flex;position:fixed;inset:0}.play[hidden]{display:none}.play-bar{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;display:flex}.play-bar select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;margin-left:4px;padding:3px 6px}.play-title{color:var(--accent)}.play-status{min-width:0;color:var(--muted);flex:1;font-size:12px}.play-status.error{color:var(--danger)}.play-stage{flex:1;justify-content:safe center;align-items:safe center;min-height:0;padding:8px;display:flex;overflow:auto}.play-stage canvas{image-rendering:pixelated;image-rendering:crisp-edges;outline:none;display:block}#problems-panel.flash{animation:.9s ease-out 2 problems-flash}@keyframes problems-flash{0%{box-shadow:0 0 0 2px var(--danger)}to{box-shadow:0 0 0 2px #0000}}