:root {
  /* ── Core Backgrounds ── */
  --c-bg: #04060c;
  --c-surface: #0b0d15;
  --c-card: rgba(14, 16, 26, 0.75);
  --c-card2: rgba(22, 25, 38, 0.8);

  /* ── Borders ── */
  --c-border: rgba(255,255,255,0.04);
  --c-border2: rgba(255,255,255,0.08);
  --c-border3: rgba(255,255,255,0.14);

  /* ── Text ── */
  --c-txt1: #f0f2f5;
  --c-txt2: #8b95a5;
  --c-txt3: #4a5568;

  /* ── Accent: Electric Blue ── */
  --c-indigo: #7c8cf8;
  --c-indigo2: #5b63f0;
  --c-indigo3: rgba(91,99,240,0.14);

  /* ── Accent: Emerald ── */
  --c-green: #2dd4a8;
  --c-green2: rgba(45,212,168,0.12);

  /* ── Accent: Warm Gold ── */
  --c-amber: #f5b731;
  --c-amber2: rgba(245,183,49,0.10);

  /* ── Accent: Coral / Danger ── */
  --c-red: #ef6b6b;
  --c-red2: rgba(239,107,107,0.10);

  /* ── Accent: Lavender ── */
  --c-violet: #a08cf8;
  --c-violet2: rgba(160,140,248,0.10);

  /* ── Accent: Rose ── */
  --c-pink: #f472b6;

  /* ── Radius ── */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Shadows ── */
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.7);

  /* ── Transitions ── */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Fonts ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-txt1);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
input,select,textarea {
  font-family: inherit; color: var(--c-txt1);
  background: rgba(22,25,38,0.5);
  border: 1px solid var(--c-border2);
  border-radius: var(--radius);
  padding: 11px 15px; font-size: .875rem;
  outline: none; transition: all var(--transition);
  width: 100%;
}
input:focus,select:focus,textarea:focus {
  border-color: var(--c-indigo);
  background: rgba(22,25,38,0.9);
  box-shadow: 0 0 0 3px rgba(91,99,240,0.12);
}
textarea { resize: vertical; min-height: 80px }
.hidden { display:none !important }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--c-border3); border-radius: 3px }

/* ── Keyframes ── */
@keyframes fadeUp      { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn      { from { opacity:0 } to { opacity:1 } }
@keyframes spin        { to { transform:rotate(360deg) } }
@keyframes pulse       { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@keyframes shimmer     { 0% { background-position:-200% } 100% { background-position:200% } }
@keyframes slideUp     { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes scaleIn     { from { opacity:0; transform:scale(.94) } to { opacity:1; transform:scale(1) } }
@keyframes glow        { 0%,100% { opacity:.6 } 50% { opacity:1 } }
@keyframes float       { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-12px) } }
@keyframes gradShift   { 0%,100% { background-position:0% 50% } 50% { background-position:100% 50% } }
@keyframes borderGlow  { 0%,100% { opacity:.5 } 50% { opacity:1 } }
@keyframes orb1        { 0%,100% { transform:translate(0,0) scale(1) } 33% { transform:translate(60px,-40px) scale(1.1) } 66% { transform:translate(-30px,30px) scale(0.95) } }
@keyframes orb2        { 0%,100% { transform:translate(0,0) scale(1) } 33% { transform:translate(-50px,50px) scale(1.05) } 66% { transform:translate(40px,-20px) scale(0.9) } }
@keyframes orb3        { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(30px,60px) scale(1.08) } }
@keyframes dashMove    { from { stroke-dashoffset:24 } to { stroke-dashoffset:0 } }