/* Prevent transitions during init (kept) */
.theme-init *, .theme-init *::before, .theme-init *::after {
  transition: none !important;
  animation: none !important;
}

/* DEFAULT = LIGHT */
:root{
  --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel-strong:rgba(0,0,0,.08);
  --text:#0d1228; --muted:#3e4a6f; --brand:#0a84ff; --brand-2:#00c389; --brand-3:#7a5cff;
  --card:#fff; --shadow:0 10px 24px rgba(8,15,40,.12); --ring:0 0 0 2px rgba(10,132,255,.25);
  --chip:#eef2ff; --chip-border:#dbe4ff;
  color-scheme: light;   /* native controls match */
}

/* Dark-ish override */
:root[data-theme="dark"]{
  --bg:#0f1222; --panel:rgba(255,255,255,.08); --panel-strong:rgba(255,255,255,.14);
  --text:#f2f5ff; --muted:#b8c1ec; --brand:#5aa9ff; --brand-2:#7cffc4; --brand-3:#c39bff;
  --card:#141833; --shadow:0 10px 30px rgba(0,0,0,.35); --ring:0 0 0 2px rgba(122,203,255,.45);
  --chip:#1b2146; --chip-border: color-mix(in oklab, var(--brand) 30%, var(--panel-strong));
  color-scheme: dark;
}

/* Logo (avoid dupes; base + a tweak for light if needed) */
.brand .logo{
  width:28px; height:28px; display:inline-block; border-radius:4px;
  background: no-repeat center / contain url("assets/enci_logo.png");
}
:root:not([data-theme="dark"]) .brand .logo{
  /* on light we invert; remove if you prefer a separate asset */
  filter: invert(1) hue-rotate(180deg);
}

/* Theme select */
#themeSelect {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--panel-strong);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 600;
}