/* roulang page: index */
:root {
      --bg-base: #0D1117;
      --bg-surface: #161B22;
      --bg-card: #1F242C;
      --amber-accent: #F59E0B;
      --amber-dark: #D97706;
      --emerald-accent: #10B981;
      --border-line: rgba(245, 158, 11, 0.16);
      --border-subtle: rgba(255, 255, 255, 0.08);
      --text-main: #F3F4F6;
      --text-muted: #9CA3AF;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-main);
      overflow-x: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    .tactical-border {
      border: 1px solid var(--border-subtle);
      position: relative;
    }
    .tactical-border:hover {
      border-color: rgba(245, 158, 11, 0.45);
      box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.08);
    }
    .slot-corner {
      position: relative;
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    }
    .badge-tier {
      font-feature-settings: "tnum";
      letter-spacing: 0.05em;
    }
    .glow-amber-btn {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      box-shadow: 0 0 20px rgba(217, 119, 6, 0.35);
      transition: all 0.25s ease;
    }
    .glow-amber-btn:hover {
      box-shadow: 0 0 28px rgba(245, 158, 11, 0.55);
      transform: translateY(-2px);
    }
    .radar-scan-line {
      background: linear-gradient(180deg, rgba(6, 182, 212, 0) 0%, rgba(6, 182, 212, 0.25) 50%, rgba(6, 182, 212, 0) 100%);
      animation: radarSweep 4s linear infinite;
    }
    @keyframes radarSweep {
      0% { transform: translateY(-100%); }
      100% { transform: translateY(100%); }
    }

/* roulang page: category1 */
:root {
            --bg-base: #0D1117;
            --bg-surface: #161B22;
            --bg-card: #1F242C;
            --amber-accent: #F59E0B;
            --amber-dark: #D97706;
            --emerald-accent: #10B981;
            --border-line: rgba(245, 158, 11, 0.16);
            --border-subtle: rgba(255, 255, 255, 0.08);
            --text-main: #F3F4F6;
            --text-muted: #9CA3AF;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            overflow-x: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        .tactical-border {
            border: 1px solid var(--border-subtle);
            position: relative;
        }
        .tactical-border:hover {
            border-color: rgba(245, 158, 11, 0.45);
            box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.08);
        }
        .badge-tier {
            font-feature-settings: "tnum";
            letter-spacing: 0.05em;
        }
        .glow-amber-btn {
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            box-shadow: 0 0 20px rgba(217, 119, 6, 0.35);
            transition: all 0.25s ease;
        }
        .glow-amber-btn:hover {
            box-shadow: 0 0 28px rgba(245, 158, 11, 0.55);
            transform: translateY(-2px);
        }
        .filter-btn-active {
            background-color: rgba(245, 158, 11, 0.15);
            color: #F59E0B;
            border-color: rgba(245, 158, 11, 0.4);
        }
        .corner-notch {
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
        }

/* roulang page: category2 */
:root {
    --bg-base: #0D1117;
    --bg-surface: #161B22;
    --bg-card: #1F242C;
    --amber-accent: #F59E0B;
    --amber-dark: #D97706;
    --emerald-accent: #10B981;
    --border-line: rgba(245, 158, 11, 0.16);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --text-main: #F3F4F6;
    --text-muted: #9CA3AF;
  }
  body {
    background-color: var(--bg-base);
    color: var(--text-main);
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .tactical-border {
    border: 1px solid var(--border-subtle);
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tactical-border:hover {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.12);
  }
  .badge-tier {
    font-feature-settings: "tnum";
    letter-spacing: 0.05em;
  }
  .glow-amber-btn {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.35);
    transition: all 0.25s ease;
  }
  .glow-amber-btn:hover {
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.55);
    transform: translateY(-2px);
  }
  .hud-stat-bar {
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
  }
  .hud-stat-fill {
    background: linear-gradient(90deg, #D97706 0%, #F59E0B 100%);
    height: 100%;
    border-radius: 9999px;
  }
  .hud-stat-fill-cyan {
    background: linear-gradient(90deg, #059669 0%, #10B981 100%);
    height: 100%;
    border-radius: 9999px;
  }
  .card-notch {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  }