*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f6f9;--surface:#fff;--surface2:#f0f2f5;--border:#e1e4e8;
  --text:#1a1f36;--text2:#6b7280;--text3:#9ca3af;
  --accent:#0093a5;--accent-light:#eff6ff;--accent-border:#bfdbfe;
  --green:#16a34a;--green-light:#f0fdf4;--green-border:#86efac;
  --amber:#d97706;--amber-light:#fffbeb;
  --red:#dc2626;--purple:#7c3aed;--purple-light:#f5f3ff;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'SF Mono','Fira Code','Consolas',monospace;
  --radius:6px;--shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 4px 16px rgba(0,0,0,.12);
  --statusbar-h:22px;
}
[data-theme="dark"]{
  --bg:#0d1117;--surface:#161b22;--surface2:#1c2128;--border:#30363d;
  --text:#e6edf3;--text2:#9198a1;--text3:#6e7681;
  --accent:#39c5cf;--accent-light:#0d3d42;--accent-border:#1f6672;
  --green:#3fb950;--green-light:#0d2818;--green-border:#2ea043;
  --amber:#d29922;--amber-light:#3b2900;
  --red:#f85149;--purple:#a371f7;--purple-light:#2d1b4e;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 4px 16px rgba(0,0,0,.5);
}
/* "Comfortable" mode scales the whole page — most sizes here are fixed px,
   so zoom (not a font-size bump) is what actually makes everything bigger. */
html[data-fontsize="comfortable"]{ zoom:1.2; }
body{font-family:var(--font);color:var(--text);background:var(--bg);
  height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:13px;
  /* Reserve room for the fixed #status-bar (common.css) so .layout's flex
     content never extends underneath it -- otherwise anything pinned to
     the bottom of a scroll container (e.g. domain-view.js's pager) renders
     behind the status bar and is unclickable. */
  padding-bottom:var(--statusbar-h);}