*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --accent: #6c63ff;
  --accent2: #4ecdc4;
  --text: #e8eaf0;
  --muted: #7b8094;
  --danger: #ff5252;
  --success: #4caf50;
  --warn: #ffc107;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  padding: 0.5rem 1.2rem;
  transition: opacity 0.15s, transform 0.1s;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: default; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { opacity: 0.85; }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-ghost   { background: var(--surface2); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: #2d3147; }

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }