:root {
  color-scheme: light dark;
  --bg: #0f172a;
  --panel: #111827;
  --text: #f9fafb;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.14);
  --accent: #b91c1c;
  --button: rgba(255, 255, 255, 0.10);
  --button-hover: rgba(255, 255, 255, 0.18);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-width: 320px; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; background: linear-gradient(90deg, #111827, #1f2937); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.brand-mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; background: var(--accent); color: white; font-weight: 800; }
.brand-title { font-weight: 700; line-height: 1.05; white-space: nowrap; }
.brand-subtitle { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; }
.actions { display: flex; gap: 0.35rem; }
button { appearance: none; border: 1px solid var(--border); border-radius: 0.35rem; background: var(--button); color: var(--text); font: inherit; font-size: 0.75rem; padding: 0.32rem 0.5rem; cursor: pointer; }
button:hover { background: var(--button-hover); }
.pane { flex: 1 1 auto; min-height: 0; background: #fff; }
iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.bridge-status { flex: 0 0 auto; padding: 0.4rem 0.55rem; border-top: 1px solid var(--border); color: var(--muted); background: var(--panel); font-size: 0.72rem; }