:root{
  --bg:#f7f7f9;
  --text:#222;
  --muted:#7a7a7a;
  --card:#fff;
  --border:#e6e6ea;
  --accent:#3b82f6;
  --surface-input:#fff;
  --surface-subtle:#f8f9fb;
  --surface-elevated:#fff;
  --shadow-elevated:0 2px 10px rgba(0,0,0,.12);
  --shadow-panel:0 18px 35px rgba(0,0,0,.16);
  --sidebar-open:240px;
  --sidebar-collapsed:64px;
  --page-max:1440px;
  --page-gutter:24px;
}

.app.dark{
  --bg:#0f1115;
  --text:#e8e8e8;
  --muted:#9aa1a9;
  --card:#151922;
  --border:#202633;
  --accent:#60a5fa;
  --surface-input:#0f141d;
  --surface-subtle:#1b2130;
  --surface-elevated:#151922;
  --shadow-elevated:0 2px 10px rgba(0,0,0,.32);
  --shadow-panel:0 18px 35px rgba(0,0,0,.32);
  color-scheme:dark;
}

html.dark-loading body,
html.dark body{
  background:#0f1115;
  color:#e8e8e8;
}