:root {
  --bg-0: #070a14;
  --bg-1: #0e1428;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #e2e8f0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(99,102,241,0.22), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(139,92,246,0.18), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(16,185,129,0.10), transparent 60%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
  min-height: 100vh;
}

/* subtle grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
  z-index: 0;
}
#root { position: relative; z-index: 1; }

.sm-title {
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(120deg, #c7d2fe 0%, #a5b4fc 40%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sm-card {
  background: rgba(15, 20, 40, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,0.6),
    0 0 40px -20px rgba(99,102,241,0.4),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.sm-primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px -8px rgba(99,102,241,0.7);
}
.sm-primary:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(99,102,241,0.85);
}
.sm-primary:not(:disabled):active {
  transform: translateY(0);
}

.sm-codeblock {
  background: #05070f;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 0.6rem;
  padding: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
}

input, textarea {
  font-family: 'IBM Plex Mono', monospace;
}

/* animations */
@keyframes smReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sm-reveal {
  animation: smReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes smPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}
.sm-pulse { animation: smPulse 2s ease-in-out infinite; }

@keyframes smAntenna {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.sm-antenna { display: inline-block; animation: smAntenna 3s ease-in-out infinite; }

@keyframes smPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.sm-pop { animation: smPop 0.35s ease; }

.sm-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(99,102,241,0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: smSpin 0.7s linear infinite;
}
@keyframes smSpin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 8px; }