/* roulang page: index */
:root {
      --bg-base: #0F141C;
      --bg-card: #151D28;
      --border-line: rgba(148, 163, 184, 0.15);
      --accent-amber: #E5A93C;
      --accent-green: #2D5A52;
      --accent-blue: #3A7D8C;
    }
    body {
      background-color: var(--bg-base);
      color: #E2E8F0;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .hud-border {
      position: relative;
      border: 1px solid var(--border-line);
    }
    .hud-border::before {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: 6px;
      height: 6px;
      border-top: 2px solid var(--accent-amber);
      border-left: 2px solid var(--accent-amber);
    }
    .hud-border::after {
      content: "";
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 6px;
      height: 6px;
      border-bottom: 2px solid var(--accent-amber);
      border-right: 2px solid var(--accent-amber);
    }
    .tag-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.2rem 0.6rem;
      font-size: 0.75rem;
      font-family: monospace;
      background-color: rgba(229, 169, 60, 0.1);
      border: 1px solid rgba(229, 169, 60, 0.3);
      color: #E5A93C;
      border-radius: 2px;
    }
    .custom-scroll::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #0F141C;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #2D5A52;
      border-radius: 3px;
    }

/* roulang page: category1 */
:root {
            --bg-base: #0F141C;
            --bg-card: #151D28;
            --border-line: rgba(148, 163, 184, 0.15);
            --accent-amber: #E5A93C;
            --accent-green: #2D5A52;
            --accent-blue: #3A7D8C;
        }
        body {
            background-color: var(--bg-base);
            color: #E2E8F0;
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .hud-border {
            position: relative;
            border: 1px solid var(--border-line);
        }
        .hud-border::before {
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            width: 6px;
            height: 6px;
            border-top: 2px solid var(--accent-amber);
            border-left: 2px solid var(--accent-amber);
        }
        .hud-border::after {
            content: "";
            position: absolute;
            bottom: -1px;
            right: -1px;
            width: 6px;
            height: 6px;
            border-bottom: 2px solid var(--accent-amber);
            border-right: 2px solid var(--accent-amber);
        }
        .tag-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.2rem 0.6rem;
            font-size: 0.75rem;
            font-family: monospace;
            background-color: rgba(229, 169, 60, 0.1);
            border: 1px solid rgba(229, 169, 60, 0.3);
            color: #E5A93C;
            border-radius: 2px;
        }
        .coupon-notch {
            position: relative;
            background: radial-gradient(circle at left, transparent 8px, #151D28 8.5px) left,
                        radial-gradient(circle at right, transparent 8px, #151D28 8.5px) right;
            background-size: 51% 100%;
            background-repeat: no-repeat;
        }