/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1024px;margin:0 auto;padding:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.space{justify-content:space-between}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:16px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}

.topbar{background:var(--topbar);border-bottom:1px solid var(--border)}
.brand{font-weight:800;color:var(--topbar-fg)}
.nav a{color:var(--topbar-fg)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--pill-border);background:var(--pill-bg);color:var(--pill-fg);text-decoration:none}

.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;cursor:pointer}
.btn.secondary{background:transparent;color:var(--fg)}
.btn.danger{border-color:var(--danger);background:var(--danger);color:#fff}

label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
input,select,textarea{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--fg);font-size:14px;width:100%}
textarea{min-height:90px}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}

/* LIGHT THEME */
html[data-theme="light"]{
  --bg:#f6f7fb;
  --fg:#111;
  --muted:#666;
  --card:#fff;
  --border:#e7e8ee;
  --link:#1a4fff;

  --topbar:#111;
  --topbar-fg:#fff;

  --pill-bg:#222;
  --pill-fg:#ddd;
  --pill-border:#333;

  --btn-bg:#111;
  --btn-fg:#fff;
  --btn-border:#111;

  --input-bg:#fff;
  --danger:#b00;
}

/* DARK THEME */
html[data-theme="dark"]{
  --bg:#0c0f14;
  --fg:#e9eef7;
  --muted:#aab3c2;
  --card:#121826;
  --border:#263044;
  --link:#8ab4ff;

  --topbar:#0a0d12;
  --topbar-fg:#e9eef7;

  --pill-bg:#101726;
  --pill-fg:#cbd5e1;
  --pill-border:#2a3650;

  --btn-bg:#e9eef7;
  --btn-fg:#0c0f14;
  --btn-border:#e9eef7;

  --input-bg:#0f1522;
  --danger:#ff3b3b;
}

/* Add future themes like:
html[data-theme="midnight"] { ...vars... }
and add 'midnight' to THEMES in core/config.php
*/