/* roulang page: index */
:root {
            --primary: #2554d7;
            --primary-dark: #1b41b5;
            --bg-dark: #0b0f19;
            --card-dark: #111827;
            --border-dark: #1f2937;
        }
        body {
            background-color: var(--bg-dark);
            color: #e5e7eb;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            overflow-x: hidden;
        }
        .header-blur {
            backdrop-filter: blur(16px);
            background-color: rgba(11, 15, 25, 0.85);
        }
        .hero-pattern {
            background-image: radial-gradient(rgba(37, 84, 215, 0.15) 1px, transparent 1px), radial-gradient(rgba(225, 29, 72, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
        }
        .card-glow:hover {
            box-shadow: 0 10px 30px -10px rgba(37, 84, 215, 0.3);
            border-color: rgba(37, 84, 215, 0.5);
        }
        .gold-glow:hover {
            box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.3);
            border-color: rgba(245, 158, 11, 0.5);
        }
        .crimson-glow:hover {
            box-shadow: 0 10px 30px -10px rgba(225, 29, 72, 0.3);
            border-color: rgba(225, 29, 72, 0.5);
        }

/* roulang page: category1 */
:root {
      --primary: #2554d7;
      --primary-dark: #1b41b5;
      --bg-dark: #0b0f19;
      --card-dark: #111827;
      --border-dark: #1f2937;
    }
    body {
      background-color: var(--bg-dark);
      color: #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .header-blur {
      backdrop-filter: blur(16px);
      background-color: rgba(11, 15, 25, 0.85);
    }
    .hero-pattern {
      background-image: radial-gradient(rgba(37, 84, 215, 0.15) 1px, transparent 1px), radial-gradient(rgba(225, 29, 72, 0.1) 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: 0 0, 20px 20px;
    }
    .card-glow:hover {
      box-shadow: 0 10px 30px -10px rgba(37, 84, 215, 0.3);
      border-color: rgba(37, 84, 215, 0.5);
    }
    .gold-card {
      background: linear-gradient(145deg, #161c2e 0%, #0d121f 100%);
      border: 1px solid rgba(217, 119, 6, 0.25);
    }
    .gold-card:hover {
      border-color: rgba(217, 119, 6, 0.6);
      box-shadow: 0 12px 32px -8px rgba(217, 119, 6, 0.25);
    }
    .badge-gold {
      background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
      color: #ffffff;
    }
    .badge-vip {
      background: linear-gradient(135deg, #374151 0%, #111827 100%);
      border: 1px solid rgba(245, 158, 11, 0.4);
    }