/* svastari.eu umbrella brand, dark neon (default) + light variant.
   Answer palette A–D validated for CVD separation + contrast on BOTH surfaces
   (dataviz validator), same four fills in both themes. */
:root{
  --bg:#0a0a0f; --bg-2:#0d1117; --card:#111118; --card-hover:#161b2e;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.16);
  --ink:#e2e8f0; --ink-2:#94a3b8; --ink-3:#64748b;
  --cyan:#00d4ff; --violet:#8b5cf6; --pink:#ec4899; --green:#10b981; --amber:#f59e0b;
  --cyan-text:#00d4ff; --violet-text:#c4b5fd;
  --opt-a:#0891b2; --opt-b:#8b5cf6; --opt-c:#ec4899; --opt-d:#059669;
  --good:#10b981; --bad:#ef4444; --good-text:#34d399; --bad-text:#f87171;
  --gold:#fcb900; --silver:#94a3b8; --bronze:#d97706;
  --cyan-dim:rgba(0,212,255,.10); --cyan-border:rgba(0,212,255,.35);
  --violet-dim:rgba(139,92,246,.12); --violet-border:rgba(139,92,246,.35);
  --glow-cyan:0 0 18px rgba(0,212,255,.40),0 0 40px rgba(0,212,255,.14);
  --glow-violet:0 0 18px rgba(139,92,246,.40),0 0 40px rgba(139,92,246,.14);
  --grad-brand:linear-gradient(135deg,#00d4ff,#8b5cf6);
  --grad-ink:#06060a;
  --shadow-card:0 4px 20px rgba(0,0,0,.35);
  --ambient:radial-gradient(900px 480px at 85% -10%,rgba(139,92,246,.16),transparent 60%),
            radial-gradient(700px 420px at 8% 108%,rgba(0,212,255,.10),transparent 60%);
}
[data-theme=light]{
  --bg:#f4f6fa; --bg-2:#ffffff; --card:#ffffff; --card-hover:#f1f5f9;
  --border:rgba(15,23,42,.09); --border-2:rgba(15,23,42,.18);
  --ink:#1e293b; --ink-2:#5b6b7f; --ink-3:#94a3b8;
  --cyan:#0891b2; --violet:#7c3aed; --pink:#db2777; --green:#059669; --amber:#d97706;
  --cyan-text:#0e7490; --violet-text:#6d28d9;
  --good-text:#059669; --bad-text:#dc2626;
  --gold:#d4a017;
  --cyan-dim:rgba(8,145,178,.08); --cyan-border:rgba(8,145,178,.40);
  --violet-dim:rgba(124,58,237,.08); --violet-border:rgba(124,58,237,.40);
  --glow-cyan:0 0 16px rgba(8,145,178,.25);
  --glow-violet:0 0 16px rgba(124,58,237,.22);
  --grad-brand:linear-gradient(135deg,#0891b2,#7c3aed);
  --grad-ink:#ffffff;
  --shadow-card:0 4px 18px rgba(20,38,63,.08);
  --ambient:radial-gradient(900px 480px at 85% -10%,rgba(124,58,237,.07),transparent 60%),
            radial-gradient(700px 420px at 8% 108%,rgba(8,145,178,.06),transparent 60%);
}
body{background:var(--ambient),var(--bg);color:var(--ink)}

/* Buttons, pill, friendly */
.btn{padding:.6rem 1.4rem;border:none;border-radius:999px;font-size:.95rem;font-weight:700;
  cursor:pointer;font-family:inherit;transition:box-shadow .2s,opacity .15s,transform .1s}
.btn:hover{opacity:.92}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none}
.btn-primary{background:var(--grad-brand);color:var(--grad-ink)}
.btn-primary:hover{box-shadow:var(--glow-cyan);opacity:1}
.btn-second{background:var(--violet-dim);color:var(--violet-text);border:1px solid var(--violet-border)}
.btn-second:hover{box-shadow:var(--glow-violet);opacity:1}
.btn-light{background:var(--card);color:var(--ink-2);border:1px solid var(--border-2)}
.btn-danger{background:transparent;color:var(--bad-text);border:1px solid rgba(239,68,68,.35)}
.btn-sm{padding:.35rem .8rem;font-size:.8rem}

/* Kvizko, the mascot */
.mascot{width:96px;animation:floaty 3.4s ease-in-out infinite}
.mascot-sm{width:42px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Theme toggle (voditelj screens) */
.theme-toggle{background:var(--card);border:1px solid var(--border-2);border-radius:999px;
  width:2.3rem;height:2.3rem;font-size:1.05rem;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:box-shadow .2s;flex-shrink:0}
.theme-toggle:hover{box-shadow:var(--glow-cyan)}