/* THEME VARS START */

:root{
  /* base palette */
  --bg:#0b0d10;
  --panel: rgba(18,21,26,.66);
  --panel-2:#0f141b;
  --line: rgba(255,255,255,.12);
  --text:#EAF2FB;
  --muted:#9FB2C8;

  /* buttons */
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
  --btn-bg-hover: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  --btn-border: rgba(255,255,255,.14);
  --btn-text: var(--text);

  /* primary */
  --btnp-text:#ffffff;
  --btnp-shadow: 0 10px 24px rgba(91,140,255,.28);
  --btnp-shadow-hover: 0 16px 40px rgba(91,140,255,.36);

  /* accent + focus */
  --gradA:#5B8CFF;
  --gradB:#22D3EE;
  --ring:#6ea8ff;

  /* radii */
  --radius:16px;
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --panel: rgba(255,255,255,.9);
  --panel-2:#ffffff;
  --line: rgba(0,0,0,.12);
  --text:#0a0d12;
  --muted:#5d6b7b;

  /* buttons */
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,247,252,1));
  --btn-bg-hover: linear-gradient(180deg, rgba(255,255,255,1), rgba(236,240,248,1));
  --btn-border: rgba(0,0,0,.12);
  --btn-text: var(--text);

  /* primary */
  --btnp-text:#ffffff;
  --btnp-shadow: 0 10px 24px rgba(59,130,246,.20);
  --btnp-shadow-hover: 0 16px 40px rgba(59,130,246,.28);

  --gradA:#3B82F6;
  --gradB:#22C1E7;
  --ring:#356ee6;
}

/* THEME VARS END */
/* consolidate */
*{box-sizing:border-box}
/* base.css — theme + utilities */
*{box-sizing:border-box}
:root{
  --bg:#0b0d10; --panel:#0f1319; --panel-2:#0b0f14; --text:#EAF2FB; --muted:#9FB2C8; --line:rgba(255,255,255,.08);
  --ring:#5B8CFF; --shadow:0 10px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  --radius:14px; --blur:12px;
  --gradA:#5B8CFF; --gradB:#22D3EE; --gradC:#A78BFA;
}
html[data-theme="light"]{
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f3f6fb; --text:#0a0d12; --muted:#5d6b7b; --line:rgba(0,0,0,.08);
  --ring:#3355dd;
}
html,body{background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease;height:100%}
body{background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease;
  margin:0;color:var(--text);
  font: 15px/1.5 ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(91,140,255,.20), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(34,211,238,.18), transparent 50%),
    radial-gradient(800px 400px at 50% 120%, rgba(167,139,250,.18), transparent 50%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0 0 .5rem 0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
::selection{background:rgba(91,140,255,.35)}

.hidden{display:none!important}
.glass{background:rgba(18,21,26,.55);border:1px solid var(--line);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));box-shadow:var(--shadow);border-radius:var(--radius)}
html[data-theme="light"] .glass{background:rgba(255,255,255,.95)}

.fade-in{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.btn{display:inline-flex;align-items:center;gap:8px;background:#121723;border:1px solid var(--line);color:var(--text);padding:9px 12px;border-radius:12px;cursor:pointer;transition:transform .06s ease,border-color .2s,background .2s}
.btn:hover{border-color:rgba(91,140,255,.55)} .btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg,var(--gradA),var(--gradB));border-color:transparent}
.icon{width:16px;height:16px;display:inline-block}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card{padding:12px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(18,21,26,.55);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:10px 12px;z-index:50;box-shadow:var(--shadow);animation:fade .25s ease both}
html[data-theme="light"] .toast{background:rgba(255,255,255,.7)}

/* Focus ring upgrade */
:focus-visible{ outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 10px }
/* Subtle transitions */
* { transition: border-color .2s ease, background-color .2s ease, color .2s ease }

img, canvas, iframe { max-width:100%; height:auto }

body{background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease; overflow-x:hidden }