:root { color-scheme: light; --page-background: #fff; --panel-border: #ccc; }
/* Match the original app's body.dark-mode, including before bootstrap finishes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --page-background: #1e1e1e; --panel-border: #333; }
}
:root[data-theme="dark"] { color-scheme: dark; --page-background: #1e1e1e; --panel-border: #333; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { display: flex; background: var(--page-background); }
iframe { display: block; border: 0; height: 100%; min-width: 0; background: var(--page-background); }
#sidebar { width: 435px; flex: 0 0 435px; border-right: 1px solid var(--panel-border); }
#expanded { flex: 1; }
[hidden] { display: none !important; }
#error { position: fixed; inset: auto 1rem 1rem; padding: 1rem; background: #fff; color: #b00020; }
@media (max-width: 760px), (orientation: portrait) {
  #sidebar { width: 100%; flex: 1; border: 0; }
  #expanded { display: none; }
}