/* roulang page: index */
:root {
      --color-primary: #6366f1;
      --color-primary-dark: #4f46e5;
      --color-secondary: #06b6d4;
      --color-accent: #f43f5e;
      --color-bg-dark: #0b0f19;
      --color-card-bg: rgba(17, 24, 39, 0.75);
      --color-border: rgba(255, 255, 255, 0.1);
    }
    body {
      background-color: var(--color-bg-dark);
      color: #f3f4f6;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .brand-gradient {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .card-glass {
      background: var(--color-card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--color-border);
    }
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.25);
      border-color: rgba(99, 102, 241, 0.4);
    }

/* roulang page: index */
:root {
            --primary: #7c3aed;
            --primary-light: #a78bfa;
            --accent: #06b6d4;
            --bg-dark: #0c0a12;
            --card-bg: rgba(26, 22, 38, 0.75);
            --border-line: rgba(139, 92, 246, 0.2);
        }
        body {
            background-color: var(--bg-dark);
            color: #e2e8f0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .glass-panel {
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-line);
        }
        .hero-mesh {
            background-image: radial-gradient(at 10% 20%, rgba(124, 58, 237, 0.25) 0px, transparent 50%),
                              radial-gradient(at 90% 80%, rgba(6, 182, 212, 0.2) 0px, transparent 50%);
        }
        .glow-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glow-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.35);
            border-color: rgba(167, 139, 250, 0.45);
        }
        .text-gradient {
            background: linear-gradient(135deg, #ffffff 20%, #c4b5fd 70%, #67e8f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* roulang page: category1 */
:root {
      --color-primary: #6366f1;
      --color-primary-dark: #4f46e5;
      --color-secondary: #06b6d4;
      --color-accent: #f43f5e;
      --color-bg-dark: #0b0f19;
      --color-card-bg: rgba(17, 24, 39, 0.75);
      --color-border: rgba(255, 255, 255, 0.1);
      --primary: #7c3aed;
      --primary-light: #a78bfa;
      --accent: #06b6d4;
      --bg-dark: #0c0a12;
      --card-bg: rgba(26, 22, 38, 0.75);
      --border-line: rgba(139, 92, 246, 0.2);
    }
    body {
      background-color: var(--color-bg-dark);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .brand-gradient {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .glass-panel {
      background: rgba(11, 15, 25, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .card-glass {
      background: var(--color-card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--color-border);
    }
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.25);
      border-color: rgba(99, 102, 241, 0.4);
    }
    .hero-mesh {
      background-image: radial-gradient(at 10% 20%, rgba(124, 58, 237, 0.28) 0px, transparent 50%),
                        radial-gradient(at 90% 80%, rgba(6, 182, 212, 0.22) 0px, transparent 50%);
    }
    .text-gradient {
      background: linear-gradient(135deg, #ffffff 20%, #c4b5fd 70%, #67e8f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .progress-bar {
      background: linear-gradient(90deg, #6366f1, #06b6d4, #ec4899);
    }

/* roulang page: category2 */
:root {
      --color-primary: #7c3aed;
      --color-primary-dark: #6d28d9;
      --color-secondary: #06b6d4;
      --color-accent: #f43f5e;
      --color-bg-dark: #0c0a12;
      --color-card-bg: rgba(26, 22, 38, 0.75);
      --color-border: rgba(139, 92, 246, 0.2);
    }
    body {
      background-color: var(--color-bg-dark);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .brand-gradient {
      background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #06b6d4 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #67e8f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .card-glass {
      background: var(--color-card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--color-border);
    }
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(124, 58, 237, 0.35);
      border-color: rgba(167, 139, 250, 0.5);
    }
    .coupon-ticket {
      position: relative;
      background: radial-gradient(circle at 0 50%, transparent 12px, rgba(30, 24, 46, 0.85) 13px) top left,
                  radial-gradient(circle at 100% 50%, transparent 12px, rgba(30, 24, 46, 0.85) 13px) top right;
      background-size: 100% 100%;
      border: 1px dashed rgba(167, 139, 250, 0.4);
    }
    .coupon-primary {
      background: radial-gradient(circle at 0 50%, transparent 16px, rgba(46, 26, 74, 0.95) 17px) top left,
                  radial-gradient(circle at 100% 50%, transparent 16px, rgba(46, 26, 74, 0.95) 17px) top right;
      background-size: 100% 100%;
      border: 1.5px solid rgba(192, 132, 252, 0.5);
    }

/* roulang page: category3 */
:root {
      --color-primary: #6366f1;
      --color-primary-dark: #4f46e5;
      --color-secondary: #06b6d4;
      --color-accent: #f43f5e;
      --color-bg-dark: #0b0f19;
      --color-card-bg: rgba(17, 24, 39, 0.75);
      --color-border: rgba(255, 255, 255, 0.1);
      --primary: #7c3aed;
      --primary-light: #a78bfa;
      --accent: #06b6d4;
      --bg-dark: #0c0a12;
      --card-bg: rgba(26, 22, 38, 0.75);
      --border-line: rgba(139, 92, 246, 0.2);
    }
    body {
      background-color: var(--bg-dark);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .glass-panel {
      background: rgba(12, 10, 18, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .brand-gradient {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .card-glass {
      background: var(--card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-line);
    }
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(124, 58, 237, 0.35);
      border-color: rgba(167, 139, 250, 0.5);
    }
    .hero-mesh {
      background-image: radial-gradient(at 10% 20%, rgba(124, 58, 237, 0.3) 0px, transparent 50%),
                        radial-gradient(at 90% 80%, rgba(6, 182, 212, 0.22) 0px, transparent 50%);
    }
    .text-gradient {
      background: linear-gradient(135deg, #ffffff 20%, #c4b5fd 70%, #67e8f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

/* roulang page: category4 */
:root {
      --color-primary: #6366f1;
      --color-primary-dark: #4f46e5;
      --color-secondary: #06b6d4;
      --color-accent: #f43f5e;
      --color-bg-dark: #0b0f19;
      --color-card-bg: rgba(17, 24, 39, 0.75);
      --color-border: rgba(255, 255, 255, 0.1);
      --primary: #7c3aed;
      --primary-light: #a78bfa;
      --accent: #06b6d4;
      --bg-dark: #0c0a12;
      --card-bg: rgba(26, 22, 38, 0.75);
      --border-line: rgba(139, 92, 246, 0.2);
    }
    body {
      background-color: var(--bg-dark);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .brand-gradient {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .card-glass {
      background: var(--color-card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--color-border);
    }
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.25);
      border-color: rgba(99, 102, 241, 0.4);
    }
    .hero-mesh {
      background-image: radial-gradient(at 10% 20%, rgba(124, 58, 237, 0.25) 0px, transparent 50%),
                        radial-gradient(at 90% 80%, rgba(6, 182, 212, 0.2) 0px, transparent 50%);
    }
    .text-gradient {
      background: linear-gradient(135deg, #ffffff 20%, #c4b5fd 70%, #67e8f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .glass-panel {
      background: rgba(12, 10, 18, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }