:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --c-bg-1: #060e1a;
  --c-bg-2: #0a1628;
  --c-bg-3: #0d1f3a;
  --c-surface: rgba(15, 29, 48, 0.7);
  --c-surface-dim: rgba(12, 24, 40, 0.9);
  --c-surface-hover: rgba(26, 48, 80, 0.4);

  --c-accent: #4db8ff;
  --c-accent-light: #7dd3fc;
  --c-accent-glow: rgba(77, 184, 255, 0.1);
  --c-accent-border: rgba(77, 184, 255, 0.3);

  --c-text: #d0dce8;
  --c-text-bright: #e0e8f0;
  --c-text-sub: #c8dae8;
  --c-text-secondary: #8bb8d8;
  --c-text-muted: #5a8aaa;
  --c-text-dim: #4a7090;

  --c-border: rgba(30, 60, 100, 0.25);
  --c-border-subtle: rgba(30, 60, 100, 0.15);

  --c-gold: #ffd700;
  --c-gold-glow: rgba(255, 215, 0, 0.3);

  --c-danger: #ff6b6b;
  --c-danger-bg: rgba(255, 80, 80, 0.15);
  --c-danger-border: rgba(255, 80, 80, 0.3);

  --c-rarity-common: #b0c4de;
  --c-rarity-rare: #b680f0;
  --c-rarity-epic: #ffb020;
  --c-rarity-legendary: #ff5050;

  --c-twitch: #6441a5;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);

  --ease: 0.2s ease;
  --ease-fast: 0.15s ease;
}

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

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(180deg, var(--c-bg-1) 0%, var(--c-bg-2) 40%, var(--c-bg-3) 100%);
  color: var(--c-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea {
  font: inherit;
  line-height: inherit;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(30,80,140,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(20,60,120,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(40,100,180,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: caustics 20s ease-in-out infinite alternate;
}
@keyframes caustics {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.tab-panel { display: none; animation: fadeIn 0.3s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.tab-content { transition: opacity 0.15s ease; }
.tab-content.fading { opacity: 0; }