/* roulang page: index */
:root {
      --bg-main: #040812;
      --panel-border: rgba(51, 65, 85, 0.7);
      --neon-glow: #00f0ff;
    }
    body {
      background-color: var(--bg-main);
      color: #cbd5e1;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      overflow-x: hidden;
    }
    .hud-grid {
      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: 32px 32px;
    }
    .hud-cut {
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    }
    .hud-cut-sm {
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    }
    .hud-border-glow:hover {
      border-color: #00f0ff;
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
    }
    .glow-text-cyan {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    }
    .terminal-scroll::-webkit-scrollbar {
      width: 4px;
    }
    .terminal-scroll::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 2px;
    }

/* roulang page: category2 */
:root {
      --bg-main: #040812;
      --panel-border: rgba(51, 65, 85, 0.7);
      --neon-glow: #00f0ff;
    }
    body {
      background-color: var(--bg-main);
      color: #cbd5e1;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      overflow-x: hidden;
    }
    .hud-grid {
      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: 32px 32px;
    }
    .hud-border-glow:hover {
      border-color: #00f0ff;
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
    }
    .glow-text-cyan {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    }
    .hud-clip-tl {
      clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
    }
    .hud-clip-tag {
      clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    }

/* roulang page: category1 */
:root {
      --bg-main: #040812;
      --panel-border: rgba(51, 65, 85, 0.7);
      --neon-glow: #00f0ff;
    }
    body {
      background-color: var(--bg-main);
      color: #cbd5e1;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      overflow-x: hidden;
    }
    .hud-grid {
      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: 32px 32px;
    }
    .hud-border-glow:hover {
      border-color: #00f0ff;
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
    }
    .glow-text-cyan {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    }
    .corner-cut {
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 5px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #090d1a;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #00f0ff;
    }