/* roulang page: index */
:root {
      --primary: #00DC82;
      --secondary: #00A3FF;
      --accent: #FF5500;
      --bg-dark: #090D16;
      --bg-surface: #F8FAFC;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --radius-xl: 1rem;
      --radius-2xl: 1.5rem;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    body {
      background-color: var(--bg-surface);
      color: var(--text-main);
      overflow-x: hidden;
    }
    .custom-gradient-dark {
      background: radial-gradient(circle at 50% 20%, #16243b 0%, #090D16 100%);
    }
    .coupon-ticket {
      background: linear-gradient(135deg, rgba(0, 220, 130, 0.08) 0%, rgba(0, 163, 255, 0.08) 100%);
      border: 1px dashed #00DC82;
      position: relative;
    }
    .coupon-ticket::before, .coupon-ticket::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background-color: var(--bg-surface);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
    }
    .coupon-ticket::before { left: -12px; }
    .coupon-ticket::after { right: -12px; }
    .status-pulse {
      box-shadow: 0 0 0 0 rgba(0, 220, 130, 0.7);
      animation: pulse 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
    }
    @keyframes pulse {
      to { box-shadow: 0 0 0 10px rgba(0, 220, 130, 0); }
    }