/* roulang page: index */
:root {
      --color-primary: #143d65;
      --color-primary-dark: #081d33;
      --color-accent: #b45309;
      --color-surface: #ffffff;
      --color-bg-alt: #f8fafc;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #1e293b;
      background-color: #ffffff;
    }
    .custom-hero-bg {
      background-image: linear-gradient(to right, rgba(4, 15, 28, 0.92), rgba(14, 45, 76, 0.85)), url('/assets/images/727b8564eb94158b.webp');
      background-size: cover;
      background-position: center;
    }
    .panel-glass {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .transition-card {
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .transition-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    }

/* roulang page: index */
:root {
            --brand-primary: #0052d9;
            --brand-dark: #0a1931;
            --surface-bg: #f8fafc;
            --card-border: #e2e8f0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            background-color: var(--surface-bg);
            color: #1e293b;
        }
        .header-glass {
            backdrop-filter: blur(12px);
            background-color: rgba(10, 25, 49, 0.92);
        }
        .metric-card {
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .metric-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
        }

/* roulang page: category1 */
:root {
      --color-primary: #143d65;
      --color-primary-dark: #081d33;
      --color-accent: #b45309;
      --color-surface: #ffffff;
      --color-bg-alt: #f8fafc;
      --brand-primary: #0052d9;
      --brand-dark: #0a1931;
      --surface-bg: #f8fafc;
      --card-border: #e2e8f0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--surface-bg);
      color: #1e293b;
    }
    .header-glass {
      backdrop-filter: blur(12px);
      background-color: rgba(10, 25, 49, 0.94);
    }
    .category-hero {
      background-image: linear-gradient(135deg, rgba(8, 29, 51, 0.94) 0%, rgba(20, 61, 101, 0.88) 100%), url('/assets/images/727b8564eb94158b.webp');
      background-size: cover;
      background-position: center;
    }
    .metric-card {
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .metric-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.12);
    }
    .badge-amber {
      background-color: rgba(180, 83, 9, 0.12);
      color: #b45309;
      border: 1px solid rgba(180, 83, 9, 0.25);
    }

/* roulang page: category2 */
:root {
      --color-primary: #143d65;
      --color-primary-dark: #081d33;
      --color-accent: #b45309;
      --color-surface: #ffffff;
      --color-bg-alt: #f8fafc;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --brand-primary: #0052d9;
      --brand-dark: #0a1931;
      --surface-bg: #f8fafc;
      --card-border: #e2e8f0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      background-color: var(--surface-bg);
      color: #1e293b;
    }
    .header-glass {
      backdrop-filter: blur(12px);
      background-color: rgba(10, 25, 49, 0.92);
    }
    .metric-card {
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .metric-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
    }
    .custom-hero-bg {
      background-image: linear-gradient(to right, rgba(4, 15, 28, 0.92), rgba(14, 45, 76, 0.85)), url('/assets/images/727b8564eb94158b.webp');
      background-size: cover;
      background-position: center;
    }
    .transition-card {
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .transition-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    }
    .gold-gradient-badge {
      background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #b45309 100%);
    }
    .gold-glow {
      box-shadow: 0 0 25px -5px rgba(217, 119, 6, 0.4);
    }
    .gold-border {
      border: 1px solid rgba(245, 158, 11, 0.35);
    }

/* roulang page: category3 */
:root {
            --color-primary: #143d65;
            --color-primary-dark: #081d33;
            --color-accent: #b45309;
            --color-surface: #ffffff;
            --color-bg-alt: #f8fafc;
            --brand-primary: #0052d9;
            --brand-dark: #0a1931;
            --surface-bg: #f8fafc;
            --card-border: #e2e8f0;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: #1e293b;
            background-color: var(--surface-bg);
        }
        .header-glass {
            backdrop-filter: blur(12px);
            background-color: rgba(10, 25, 49, 0.92);
        }
        .custom-hero-bg {
            background-image: linear-gradient(to right, rgba(4, 15, 28, 0.94), rgba(14, 45, 76, 0.88)), url('/assets/images/727b8564eb94158b.webp');
            background-size: cover;
            background-position: center;
        }
        .transition-card {
            transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .transition-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
        }
        .metric-card {
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .metric-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
        }
        .table-custom-border tr th, .table-custom-border tr td {
            border-bottom: 1px solid #e2e8f0;
        }

/* roulang page: category4 */
:root {
      --color-primary: #143d65;
      --color-primary-dark: #081d33;
      --color-accent: #b45309;
      --color-surface: #ffffff;
      --color-bg-alt: #f8fafc;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --brand-primary: #0052d9;
      --brand-dark: #0a1931;
      --surface-bg: #f8fafc;
      --card-border: #e2e8f0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--surface-bg);
      color: #1e293b;
    }
    .header-glass {
      backdrop-filter: blur(12px);
      background-color: rgba(10, 25, 49, 0.92);
    }
    .transition-card {
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .transition-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    }
    .metric-card {
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .metric-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
    }
    .coupon-ticket {
      background: radial-gradient(circle at left, transparent 12px, #ffffff 13px) top left,
                  radial-gradient(circle at right, transparent 12px, #ffffff 13px) top right;
      background-size: 51% 100%;
      background-repeat: no-repeat;
    }
    .custom-hero-bg {
      background-image: linear-gradient(to right, rgba(4, 15, 28, 0.94), rgba(14, 45, 76, 0.88)), url('/assets/images/727b8564eb94158b.webp');
      background-size: cover;
      background-position: center;
    }