/* roulang page: index */
:root {
      --bg-main: #0B0E14;
      --bg-surface: #121722;
      --bg-card: #1A2232;
      --color-neon: #00FFA3;
      --color-purple: #7B2CBF;
      --color-blue: #00D2FF;
      --color-red: #FF3864;
      --border-hud: rgba(255, 255, 255, 0.08);
      --border-neon: rgba(0, 255, 163, 0.4);
    }
    body {
      background-color: var(--bg-main);
      color: #FFFFFF;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .hud-grid {
      background-image: radial-gradient(rgba(0, 255, 163, 0.07) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .hud-corner {
      position: relative;
    }
    .hud-corner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 8px;
      border-top: 2px solid var(--color-neon);
      border-left: 2px solid var(--color-neon);
      pointer-events: none;
    }
    .hud-corner::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 8px;
      height: 8px;
      border-bottom: 2px solid var(--color-neon);
      border-right: 2px solid var(--color-neon);
      pointer-events: none;
    }
    .hud-border {
      border: 1px solid var(--border-hud);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hud-border:hover {
      border-color: var(--border-neon);
      box-shadow: 0 0 20px rgba(0, 255, 163, 0.12);
    }
    .pulse-glow {
      box-shadow: 0 0 15px rgba(0, 255, 163, 0.5);
    }
    .text-glow {
      text-shadow: 0 0 10px rgba(0, 255, 163, 0.4);
    }
    .coupon-edge {
      background-image: radial-gradient(circle at 0 50%, transparent 10px, #1A2232 11px),
                        radial-gradient(circle at 100% 50%, transparent 10px, #1A2232 11px);
    }
    .btn-action {
      background: #00FFA3;
      color: #0B0E14;
      font-weight: 700;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .btn-action:hover {
      background: #33ffb5;
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 255, 163, 0.4);
    }
    .btn-action:active {
      transform: translateY(0);
    }

/* roulang page: category1 */
:root {
      --bg-main: #0B0E14;
      --bg-surface: #121722;
      --bg-card: #1A2232;
      --color-neon: #00FFA3;
      --color-purple: #7B2CBF;
      --color-blue: #00D2FF;
      --color-red: #FF3864;
      --border-hud: rgba(255, 255, 255, 0.08);
      --border-neon: rgba(0, 255, 163, 0.4);
    }
    body {
      background-color: var(--bg-main);
      color: #FFFFFF;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .hud-grid {
      background-image: radial-gradient(rgba(0, 255, 163, 0.07) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .hud-border {
      border: 1px solid var(--border-hud);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hud-border:hover {
      border-color: var(--border-neon);
      box-shadow: 0 0 20px rgba(0, 255, 163, 0.12);
    }
    .text-glow {
      text-shadow: 0 0 10px rgba(0, 255, 163, 0.4);
    }
    .btn-action {
      background: #00FFA3;
      color: #0B0E14;
      font-weight: 700;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .btn-action:hover {
      background: #33ffb5;
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 255, 163, 0.4);
    }
    .btn-action:active {
      transform: translateY(0);
    }
    .hud-corner {
      position: relative;
    }
    .hud-corner::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: 8px;
      height: 8px;
      border-top: 2px solid var(--color-neon);
      border-left: 2px solid var(--color-neon);
    }
    .hud-corner::after {
      content: '';
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 8px;
      height: 8px;
      border-bottom: 2px solid var(--color-neon);
      border-right: 2px solid var(--color-neon);
    }