/* roulang page: index */
:root {
      --bg-dark: #0F1117;
      --bg-card: #161922;
      --primary: #00F2A5;
      --primary-hover: #00d691;
      --accent-purple: #8A2BE2;
      --accent-orange: #FF6B35;
      --accent-gold: #FFD700;
      --text-main: #F3F4F6;
      --text-muted: #9CA3AF;
      --border-subtle: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .text-gradient-gold {
      background: linear-gradient(135deg, #FFE57F 0%, #FFB300 50%, #FF8F00 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-gradient-cyan {
      background: linear-gradient(135deg, #00F2A5 0%, #00C9FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .card-glass {
      background: rgba(22, 25, 34, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
    }
    .btn-gold {
      background: linear-gradient(135deg, #FFB300 0%, #FF8F00 100%);
      color: #0F1117;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    .btn-gold:hover {
      box-shadow: 0 0 20px rgba(255, 179, 0, 0.4);
      transform: translateY(-2px);
    }
    .btn-cyan {
      background: #00F2A5;
      color: #0F1117;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    .btn-cyan:hover {
      box-shadow: 0 0 20px rgba(0, 242, 165, 0.4);
      transform: translateY(-2px);
    }
    .btn-ghost {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #F3F4F6;
      transition: all 0.3s ease;
    }
    .btn-ghost:hover {
      border-color: #00F2A5;
      color: #00F2A5;
      background: rgba(0, 242, 165, 0.05);
    }
    .badge-club {
      background: rgba(255, 179, 0, 0.15);
      border: 1px solid rgba(255, 179, 0, 0.4);
      color: #FFE57F;
    }