/* roulang page: index */
:root {
            --bg-obsidian: #0A0C10;
            --bg-card: #12161F;
            --bg-surface: #181E2A;
            --primary-cyan: #00F5D4;
            --primary-amber: #FF9E00;
            --text-main: #F3F4F6;
            --text-body: #9CA3AF;
            --border-hud: rgba(255, 255, 255, 0.08);
            --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: var(--bg-obsidian);
            color: var(--text-main);
            font-family: var(--font-stack);
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 32px 32px;
            background-position: center center;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .hud-border {
            border: 1px solid var(--border-hud);
            position: relative;
        }

        .hud-border::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            width: 8px;
            height: 8px;
            border-top: 2px solid var(--primary-cyan);
            border-left: 2px solid var(--primary-cyan);
            pointer-events: none;
        }

        .hud-border-amber::before {
            border-color: var(--primary-amber);
        }

        .hud-cut {
            clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
        }

        .btn-neon-cyan {
            background: linear-gradient(135deg, #00F5D4 0%, #00B4D8 100%);
            color: #05070B;
            font-weight: 700;
            transition: all 0.25s ease;
        }

        .btn-neon-cyan:hover {
            box-shadow: 0 0 20px rgba(0, 245, 212, 0.45);
            transform: translateY(-1px);
        }

        .btn-outline-hud {
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(18, 22, 31, 0.7);
            color: #F3F4F6;
            transition: all 0.2s ease;
        }

        .btn-outline-hud:hover {
            border-color: var(--primary-cyan);
            background: rgba(24, 30, 42, 0.9);
            color: var(--primary-cyan);
        }

        .slider-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--primary-cyan);
            cursor: ew-resize;
            box-shadow: 0 0 12px var(--primary-cyan);
        }

        .slider-handle-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            background: #0A0C10;
            border: 2px solid var(--primary-cyan);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 15px rgba(0, 245, 212, 0.5);
        }

        .tech-tag {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }

/* roulang page: category1 */
:root {
      --bg-obsidian: #0A0C10;
      --bg-card: #12161F;
      --bg-surface: #181E2A;
      --primary-cyan: #00F5D4;
      --primary-amber: #FF9E00;
      --text-main: #F3F4F6;
      --text-body: #9CA3AF;
      --border-hud: rgba(255, 255, 255, 0.08);
      --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: var(--bg-obsidian);
      color: var(--text-main);
      font-family: var(--font-stack);
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 32px 32px;
      background-position: center center;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    .hud-border {
      border: 1px solid var(--border-hud);
      position: relative;
    }
    .hud-border::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: 8px;
      height: 8px;
      border-top: 2px solid var(--primary-cyan);
      border-left: 2px solid var(--primary-cyan);
      pointer-events: none;
    }
    .hud-border-amber::before {
      border-color: var(--primary-amber);
    }
    .btn-neon-cyan {
      background: linear-gradient(135deg, #00F5D4 0%, #00B4D8 100%);
      color: #05070B;
      font-weight: 700;
      transition: all 0.25s ease;
    }
    .btn-neon-cyan:hover {
      box-shadow: 0 0 20px rgba(0, 245, 212, 0.45);
      transform: translateY(-1px);
    }
    .btn-outline-hud {
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(18, 22, 31, 0.7);
      color: #F3F4F6;
      transition: all 0.2s ease;
    }
    .btn-outline-hud:hover {
      border-color: var(--primary-cyan);
      background: rgba(24, 30, 42, 0.9);
      color: var(--primary-cyan);
    }
    .tech-tag {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
    }
    .filter-btn-active {
      background-color: rgba(0, 245, 212, 0.15);
      border-color: #00F5D4;
      color: #00F5D4;
    }