:root{
  /* Default theme = LIGHT */
  --bg: #f6f7fb;
  --panel: #eef1f7;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #5b6477;
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  --radius: 16px;
  --radius-sm: 12px;
  --gap: 16px;
  --max: 1200px;
  --brand: #2f6df6;
  --brand2: #16a34a;
  --danger: #dc2626;
  --focus: rgba(47,109,246,0.22);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Dark mode overrides (only when explicitly enabled) */
body[data-theme="dark"],
.theme-dark{
  --bg: #0b1220;
  --panel: #111a2e;
  --card: #0f1730;
  --text: #e7ecff;
  --muted: #aab4d6;
  --border: rgba(255,255,255,0.10);
  --shadow: 0 12px 30px rgba(0,0,0,0.25);
  --brand: #6aa8ff;
  --brand2: #72e0c5;
  --danger: #ff6a7a;
  --focus: rgba(106,168,255,0.35);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(47,109,246,0.10), transparent 55%),
    radial-gradient(1000px 650px at 80% 25%, rgba(22,163,74,0.08), transparent 60%),
    var(--bg);
  color: var(--text);
}

body[data-theme="dark"],
.theme-dark{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(106,168,255,0.18), transparent 55%),
    radial-gradient(1000px 650px at 80% 25%, rgba(114,224,197,0.14), transparent 60%),
    var(--bg);
  color: var(--text);
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px;
}

.page-title{
  font-size: 22px;
  margin: 0 0 10px;
}
.page-subtitle{
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.45;
}