:root {
  --bg-deep: #071a0f;
  --bg-mid: #0d2818;
  --bg-surface: rgba(255,255,255,0.06);
  --bg-surface-hover: rgba(255,255,255,0.10);
  --bg-glass: rgba(255,255,255,0.04);
  --primary: #52b788;
  --primary-light: #74c69d;
  --primary-dark: #1b4332;
  --primary-glow: rgba(82,183,136,0.3);
  --primary-dim: #2d6a4f;
  --accent: #e07a5f;
  --accent-dim: rgba(224,122,95,0.15);
  --gold: #e9c46a;
  --text: #e8f0e8;
  --text2: rgba(255,255,255,0.55);
  --text3: rgba(255,255,255,0.3);
  --border: rgba(255,255,255,0.08);
  --border-active: rgba(82,183,136,0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px var(--primary-glow);
  --font: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; font-size: 16px; }
body {
  font-family: var(--font); background: var(--bg-deep); color: var(--text);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(82,183,136,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(82,183,136,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(233,196,106,0.03) 0%, transparent 40%);
}
#app { height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }

/* Animated Background Leaves */
#bgLeaves {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
#bgLeaves .leaf {
  position: absolute; top: -10%; font-size: 20px;
  opacity: 0; animation: leafFall linear infinite;
}
#bgLeaves .leaf:nth-child(1) { left: 10%; font-size: 16px; animation-duration: 18s; animation-delay: 0s; opacity: 0.3; }
#bgLeaves .leaf:nth-child(2) { left: 30%; font-size: 12px; animation-duration: 22s; animation-delay: 3s; opacity: 0.2; }
#bgLeaves .leaf:nth-child(3) { left: 50%; font-size: 18px; animation-duration: 20s; animation-delay: 6s; opacity: 0.25; }
#bgLeaves .leaf:nth-child(4) { left: 70%; font-size: 14px; animation-duration: 25s; animation-delay: 2s; opacity: 0.2; }
#bgLeaves .leaf:nth-child(5) { left: 85%; font-size: 10px; animation-duration: 16s; animation-delay: 8s; opacity: 0.3; }
#bgLeaves .leaf:nth-child(6) { left: 20%; font-size: 22px; animation-duration: 30s; animation-delay: 12s; opacity: 0.15; }
#bgLeaves .leaf:nth-child(7) { left: 60%; font-size: 8px; animation-duration: 14s; animation-delay: 5s; opacity: 0.35; }
#bgLeaves .leaf:nth-child(8) { left: 40%; font-size: 15px; animation-duration: 28s; animation-delay: 10s; opacity: 0.18; }
@keyframes leafFall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; }
  10% { opacity: var(--leaf-op, 0.25); }
  90% { opacity: var(--leaf-op, 0.25); }
  100% { transform: translateY(105vh) rotate(720deg) scale(0.6); opacity: 0; }
}