:root{--c-bg: #f5f6f8;--c-panel: #ffffff;--c-border: #e3e5ea;--c-text: #1a1d22;--c-muted: #6b7280;--c-accent: #4b6bff;--c-lifecycle: #1f8a47;--c-analytics: #1d6fdc;--c-error: #c0382b;--c-state: #6b7280;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--c-bg);color:var(--c-text)}#app{display:grid;grid-template-rows:auto 1fr;height:100vh}header.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--c-panel);border-bottom:1px solid var(--c-border)}header.topbar h1{font-size:14px;margin:0 12px 0 0;font-weight:600}header.topbar label{font-size:12px;color:var(--c-muted);display:flex;align-items:center;gap:6px}header.topbar select,header.topbar input{padding:4px 8px;font:inherit;border:1px solid var(--c-border);border-radius:6px;background:#fff}main.layout{display:grid;grid-template-columns:1fr 360px;min-height:0}.iframe-wrap{position:relative;display:flex;align-items:stretch;justify-content:stretch;background:#d8dadf;padding:12px}.iframe-wrap iframe{flex:1;border:1px solid var(--c-border);border-radius:8px;background:#fff;width:100%;height:100%}aside.sidebar{display:grid;grid-template-rows:auto auto 1fr;border-left:1px solid var(--c-border);background:var(--c-panel);min-height:0}section.panel{padding:12px 14px;border-bottom:1px solid var(--c-border);overflow:auto}section.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);margin:0 0 8px;font-weight:600}.controls .row{display:flex;flex-wrap:wrap;gap:6px}.controls button{padding:6px 10px;font:inherit;font-size:12px;border:1px solid var(--c-border);border-radius:6px;background:#fff;cursor:pointer}.controls button:hover{background:#f0f1f4}.controls button.primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff}.controls button.primary:hover{filter:brightness(1.05)}.controls button:disabled{opacity:.5;cursor:not-allowed}.theme-editor .grid{display:grid;grid-template-columns:110px 1fr;gap:6px 8px;align-items:center}.theme-editor label{font-size:11px;color:var(--c-muted)}.theme-editor input{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--c-border);border-radius:4px;background:#fff;width:100%}.theme-editor .actions{display:flex;gap:6px;margin-top:10px}.theme-editor input[type=color]{padding:0;height:24px;width:36px;cursor:pointer}.theme-editor .pair{display:flex;gap:6px;align-items:center}.theme-editor .pair input[type=text]{flex:1}.event-log{display:grid;grid-template-rows:auto 1fr;min-height:0}.event-log .log-list{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:11px;background:#fafbfc;border:1px solid var(--c-border);border-radius:6px;padding:6px 8px;overflow:auto;white-space:pre-wrap;word-break:break-word}.event-log .entry{display:grid;grid-template-columns:56px 90px 1fr;gap:8px;padding:2px 0;border-bottom:1px solid #eef0f3}.event-log .entry:last-child{border-bottom:none}.event-log .entry .ts{color:var(--c-muted)}.event-log .entry .kind{font-weight:600}.event-log .entry .body{color:#2c2f33}.event-log .entry.lifecycle .kind{color:var(--c-lifecycle)}.event-log .entry.analytics .kind{color:var(--c-analytics)}.event-log .entry.error .kind{color:var(--c-error)}.event-log .entry.state .kind{color:var(--c-state)}.event-log .entry.host .kind{color:var(--c-accent)}