/* roulang page: index */
:root {
            --bg-canvas: #EFECE6;
            --bg-card: #FFFFFF;
            --bg-card-alt: #F8F7F4;
            --bg-dark: #18181A;
            --color-primary: #F38725;
            --color-primary-hover: #D97316;
            --color-secondary: #00D2B4;
            --color-accent: #D33E68;
            --color-green: #2B5C4E;
            --color-ink: #0A0A0A;
            --color-muted: #555555;
            --border-pixel: 2px solid #0A0A0A;
            --border-pixel-thick: 3px solid #0A0A0A;
            --shadow-hard: 4px 4px 0px #0A0A0A;
            --shadow-hard-sm: 2px 2px 0px #0A0A0A;
            --shadow-hard-lg: 6px 6px 0px #0A0A0A;
            --font-display: "Impact", "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
            --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            --font-mono: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        * {
            box-sizing: border-box;
            border-radius: 0 !important;
        }

        body {
            background-color: var(--bg-canvas);
            color: var(--color-ink);
            font-family: var(--font-body);
            line-height: 1.75;
            font-size: 15px;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: var(--color-ink);
            text-decoration: none;
            transition: none;
        }
        a:hover {
            color: var(--color-primary);
        }

        .pixel-heading {
            font-family: var(--font-display);
            letter-spacing: -0.5px;
            font-weight: 900;
            color: var(--color-ink);
            text-transform: uppercase;
        }

        .pixel-mono {
            font-family: var(--font-mono);
        }

        .pixel-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 14px;
            padding: 10px 20px;
            border: var(--border-pixel);
            box-shadow: var(--shadow-hard);
            background: var(--color-primary);
            color: #0A0A0A;
            cursor: pointer;
            text-decoration: none;
            user-select: none;
        }
        .pixel-btn:hover {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px #0A0A0A;
            color: #0A0A0A;
        }
        .pixel-btn:active {
            transform: translate(4px, 4px);
            box-shadow: 0px 0px 0px #0A0A0A;
        }
        .pixel-btn-outline {
            background: #FFFFFF;
            color: #0A0A0A;
        }
        .pixel-btn-dark {
            background: var(--bg-dark);
            color: #FFFFFF;
        }
        .pixel-btn-dark:hover {
            color: var(--color-secondary);
        }
        .pixel-btn-cyan {
            background: var(--color-secondary);
            color: #0A0A0A;
        }

        .pixel-card {
            background: var(--bg-card);
            border: var(--border-pixel);
            box-shadow: var(--shadow-hard);
            padding: 24px;
            position: relative;
        }
        .pixel-card:hover {
            box-shadow: var(--shadow-hard-lg);
        }

        .pixel-badge {
            display: inline-block;
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border: 1px solid #0A0A0A;
            box-shadow: 1px 1px 0px #0A0A0A;
            text-transform: uppercase;
            background: #FFFFFF;
            color: #0A0A0A;
        }
        .pixel-badge-primary { background: var(--color-primary); }
        .pixel-badge-cyan { background: var(--color-secondary); }
        .pixel-badge-magenta { background: var(--color-accent); color: #FFFFFF; }
        .pixel-badge-dark { background: var(--bg-dark); color: #FFFFFF; }

        .site-header {
            background: #FFFFFF;
            border-bottom: var(--border-pixel-thick);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .brand-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 900;
            color: #0A0A0A;
        }
        .brand-logo-icon {
            width: 28px;
            height: 28px;
            background: var(--color-primary);
            border: 2px solid #0A0A0A;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 2px 2px 0px #0A0A0A;
        }
        .nav-link-saas {
            font-family: var(--font-mono);
            font-size: 14px;
            font-weight: 700;
            color: #0A0A0A;
            padding: 8px 16px;
            border: 1px solid transparent;
        }
        .nav-link-saas:hover,
        .nav-link-saas.active {
            background: var(--bg-canvas);
            border: var(--border-pixel);
            box-shadow: 2px 2px 0px #0A0A0A;
        }
        .command-bar {
            display: flex;
            align-items: center;
            background: var(--bg-canvas);
            border: var(--border-pixel);
            padding: 4px 10px;
            gap: 10px;
            box-shadow: 2px 2px 0px #0A0A0A;
        }
        .command-input {
            border: none;
            background: transparent;
            font-size: 13px;
            font-family: var(--font-mono);
            outline: none;
            width: 140px;
        }

        .section-block {
            padding: 64px 0;
            border-bottom: var(--border-pixel);
        }
        .section-header-compact {
            margin-bottom: 36px;
        }
        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 8px;
            background: #FFFFFF;
            border: 1px solid #0A0A0A;
            padding: 2px 8px;
            box-shadow: 2px 2px 0px #0A0A0A;
        }

        .hero-section {
            background: #FFFFFF;
            border-bottom: var(--border-pixel-thick);
            padding: 72px 0;
        }
        .vertical-stage {
            width: 100%;
            max-width: 320px;
            margin: 0 auto;
            border: var(--border-pixel-thick);
            box-shadow: var(--shadow-hard-lg);
            background: #111113;
            color: #FFFFFF;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .vertical-stage-screen {
            background: #000000;
            border: 2px solid #333333;
            height: 380px;
            position: relative;
            padding: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
        .vertical-stage-screen::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 4px, 6px 100%;
            pointer-events: none;
        }

        .pixel-table {
            width: 100%;
            border-collapse: collapse;
            border: var(--border-pixel);
            background: #FFFFFF;
            font-family: var(--font-mono);
        }
        .pixel-table th, .pixel-table td {
            border: 1px solid #0A0A0A;
            padding: 12px 16px;
            font-size: 14px;
        }
        .pixel-table th {
            background: #18181A;
            color: #FFFFFF;
            font-weight: 700;
        }
        .pixel-table tr:nth-child(even) td {
            background: #F8F7F4;
        }

        .pipeline-step {
            position: relative;
            background: #FFFFFF;
            border: var(--border-pixel);
            box-shadow: var(--shadow-hard);
            padding: 20px;
            height: 100%;
        }
        .pipeline-number {
            font-family: var(--font-display);
            font-size: 32px;
            line-height: 1;
            color: var(--color-primary);
            margin-bottom: 8px;
        }

        .accordion-retro .accordion-item {
            background: #FFFFFF;
            border: var(--border-pixel) !important;
            margin-bottom: 12px;
            box-shadow: var(--shadow-hard-sm);
        }
        .accordion-retro .accordion-button {
            background: #FFFFFF;
            color: #0A0A0A;
            font-weight: 700;
            font-family: var(--font-mono);
            box-shadow: none;
            padding: 16px 20px;
        }
        .accordion-retro .accordion-button::after {
            content: "[+]";
            background: none;
            transform: none !important;
            font-family: var(--font-mono);
            font-weight: 900;
            color: var(--color-primary);
        }
        .accordion-retro .accordion-button:not(.collapsed)::after {
            content: "[-]";
            color: var(--color-accent);
        }
        .accordion-retro .accordion-button:not(.collapsed) {
            background: #F4F1EA;
            border-bottom: var(--border-pixel);
        }
        .accordion-retro .accordion-body {
            padding: 18px 20px;
            font-size: 14px;
            color: #333333;
            line-height: 1.8;
            background: #FFFFFF;
        }

        .retro-form-input, .retro-form-select {
            width: 100%;
            background: #FFFFFF;
            border: var(--border-pixel);
            padding: 10px 14px;
            font-family: var(--font-mono);
            font-size: 14px;
            outline: none;
            box-shadow: 2px 2px 0px #0A0A0A;
        }
        .retro-form-input:focus, .retro-form-select:focus {
            background: #FFFAF4;
            border-color: var(--color-primary);
        }

        .site-footer {
            background: #111113;
            color: #CCCCCC;
            border-top: var(--border-pixel-thick);
            padding: 56px 0 32px;
            font-size: 14px;
        }
        .footer-heading {
            font-family: var(--font-display);
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 16px;
            letter-spacing: 0.5px;
        }
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-links li {
            margin-bottom: 8px;
        }
        .footer-links a {
            color: #999999;
            font-family: var(--font-mono);
            font-size: 13px;
        }
        .footer-links a:hover {
            color: var(--color-secondary);
        }
        .footer-bottom {
            border-top: 1px solid #333333;
            padding-top: 24px;
            margin-top: 40px;
            font-family: var(--font-mono);
            font-size: 12px;
            color: #777777;
        }

        @media (max-width: 991.98px) {
            .command-bar { display: none; }
            .hero-section { padding: 48px 0; }
        }
        @media (max-width: 767.98px) {
            .section-block { padding: 44px 0; }
            .vertical-stage { max-width: 100%; }
            .pixel-heading { font-size: 26px !important; }
        }

/* roulang page: category1 */
:root {
        --bg-canvas: #EFECE6;
        --bg-card: #FFFFFF;
        --bg-card-alt: #F8F7F4;
        --bg-dark: #18181A;
        --color-primary: #F38725;
        --color-primary-hover: #D97316;
        --color-secondary: #00D2B4;
        --color-accent: #D33E68;
        --color-green: #2B5C4E;
        --color-ink: #0A0A0A;
        --color-muted: #555555;
        --border-pixel: 2px solid #0A0A0A;
        --border-pixel-thick: 3px solid #0A0A0A;
        --shadow-hard: 4px 4px 0px #0A0A0A;
        --shadow-hard-sm: 2px 2px 0px #0A0A0A;
        --shadow-hard-lg: 6px 6px 0px #0A0A0A;
        --font-display: "Impact", "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
        --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        --font-mono: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
    body {
        background-color: var(--bg-canvas);
        color: var(--color-ink);
        font-family: var(--font-body);
        line-height: 1.75;
        font-size: 15px;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }
    a {
        color: var(--color-ink);
        text-decoration: none;
        transition: none;
    }
    a:hover {
        color: var(--color-primary);
    }
    .pixel-heading {
        font-family: var(--font-display);
        letter-spacing: -0.5px;
        font-weight: 900;
        color: var(--color-ink);
        text-transform: uppercase;
    }
    .pixel-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 14px;
        padding: 10px 20px;
        border: var(--border-pixel);
        box-shadow: var(--shadow-hard);
        background: var(--color-primary);
        color: #0A0A0A;
        cursor: pointer;
        text-decoration: none;
        user-select: none;
    }
    .pixel-btn:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px #0A0A0A;
        color: #0A0A0A;
    }
    .pixel-btn:active {
        transform: translate(4px, 4px);
        box-shadow: 0px 0px 0px #0A0A0A;
    }
    .pixel-btn-outline {
        background: #FFFFFF;
        color: #0A0A0A;
    }
    .pixel-btn-dark {
        background: var(--bg-dark);
        color: #FFFFFF;
    }
    .pixel-btn-dark:hover {
        color: var(--color-secondary);
    }
    .pixel-btn-cyan {
        background: var(--color-secondary);
        color: #0A0A0A;
    }
    .pixel-card {
        background: var(--bg-card);
        border: var(--border-pixel);
        box-shadow: var(--shadow-hard);
        padding: 24px;
        position: relative;
    }
    .pixel-card:hover {
        box-shadow: var(--shadow-hard-lg);
    }
    .pixel-badge {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border: 1px solid #0A0A0A;
        box-shadow: 1px 1px 0px #0A0A0A;
        text-transform: uppercase;
        background: #FFFFFF;
        color: #0A0A0A;
    }
    .pixel-badge-primary { background: var(--color-primary); }
    .pixel-badge-cyan { background: var(--color-secondary); }
    .pixel-badge-magenta { background: var(--color-accent); color: #FFFFFF; }
    .pixel-badge-dark { background: var(--bg-dark); color: #FFFFFF; }
    .site-header {
        background: #FFFFFF;
        border-bottom: var(--border-pixel-thick);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .brand-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 900;
        color: #0A0A0A;
    }
    .brand-logo-icon {
        width: 28px;
        height: 28px;
        background: var(--color-primary);
        border: 2px solid #0A0A0A;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 2px 2px 0px #0A0A0A;
    }
    .nav-link-saas {
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 700;
        color: #0A0A0A;
        padding: 8px 16px;
        border: 1px solid transparent;
    }
    .nav-link-saas:hover,
    .nav-link-saas.active {
        background: var(--bg-canvas);
        border: var(--border-pixel);
        box-shadow: 2px 2px 0px #0A0A0A;
    }
    .command-bar {
        background: #FFFFFF;
        border: var(--border-pixel);
        padding: 6px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: var(--shadow-hard-sm);
    }
    .command-input {
        border: none;
        background: transparent;
        font-size: 13px;
        font-family: var(--font-mono);
        outline: none;
        width: 140px;
    }
    .section-block {
        padding: 56px 0;
        border-bottom: var(--border-pixel);
    }
    .section-header-compact {
        margin-bottom: 32px;
    }
    .section-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 8px;
        background: #FFFFFF;
        border: 1px solid #0A0A0A;
        padding: 2px 8px;
        box-shadow: 2px 2px 0px #0A0A0A;
    }
    .category-header-panel {
        background: #FFFFFF;
        border-bottom: var(--border-pixel-thick);
        padding: 40px 0;
    }
    .breadcrumb-pixel {
        font-family: var(--font-mono);
        font-size: 13px;
        margin-bottom: 12px;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .breadcrumb-pixel a {
        font-weight: 700;
        text-decoration: underline;
    }
    .metric-chip {
        background: var(--bg-card-alt);
        border: var(--border-pixel);
        padding: 10px 14px;
        box-shadow: var(--shadow-hard-sm);
    }
    .filter-console {
        background: var(--bg-card);
        border: var(--border-pixel);
        box-shadow: var(--shadow-hard);
        padding: 16px 20px;
    }
    .filter-btn {
        background: #FFFFFF;
        border: 1px solid #0A0A0A;
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 700;
        padding: 6px 14px;
        box-shadow: 2px 2px 0px #0A0A0A;
        cursor: pointer;
    }
    .filter-btn.active, .filter-btn:hover {
        background: var(--color-primary);
    }
    .search-field-retro {
        border: var(--border-pixel);
        padding: 8px 12px;
        font-family: var(--font-mono);
        font-size: 13px;
        background: #FFFFFF;
        outline: none;
        box-shadow: 2px 2px 0px #0A0A0A;
    }
    .search-field-retro:focus {
        border-color: var(--color-primary);
    }
    .status-meter {
        height: 6px;
        background: #E5E5E5;
        border: 1px solid #0A0A0A;
        margin-top: 8px;
        overflow: hidden;
    }
    .status-meter-bar {
        height: 100%;
        background: var(--color-secondary);
    }
    .rank-item {
        background: #FFFFFF;
        border: var(--border-pixel);
        box-shadow: var(--shadow-hard-sm);
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .rank-num {
        font-family: var(--font-display);
        font-size: 24px;
        width: 36px;
        height: 36px;
        background: var(--color-ink);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #0A0A0A;
    }
    .rank-item:nth-child(1) .rank-num {
        background: var(--color-primary);
        color: #0A0A0A;
    }
    .rank-item:nth-child(2) .rank-num {
        background: var(--color-secondary);
        color: #0A0A0A;
    }
    .terminal-window {
        background: var(--bg-dark);
        color: #EFECE6;
        border: var(--border-pixel);
        box-shadow: var(--shadow-hard);
        padding: 20px;
        font-family: var(--font-mono);
    }
    .terminal-bar {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
        border-bottom: 1px solid #333333;
        padding-bottom: 8px;
    }
    .terminal-dot {
        width: 10px;
        height: 10px;
        border: 1px solid #0A0A0A;
    }
    .tag-cloud-item {
        background: #FFFFFF;
        border: var(--border-pixel);
        padding: 8px 16px;
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 700;
        box-shadow: var(--shadow-hard-sm);
        display: inline-block;
    }
    .tag-cloud-item:hover {
        background: var(--color-secondary);
        transform: translate(-1px, -1px);
    }
    .retro-pagination .page-link {
        border: var(--border-pixel);
        color: var(--color-ink);
        background: #FFFFFF;
        font-family: var(--font-mono);
        font-weight: 700;
        margin: 0 4px;
        box-shadow: 2px 2px 0px #0A0A0A;
    }
    .retro-pagination .page-item.active .page-link {
        background: var(--color-primary);
        border-color: #0A0A0A;
        color: #0A0A0A;
    }
    .footer-retro {
        background: #FFFFFF;
        border-top: var(--border-pixel-thick);
        padding: 60px 0 30px;
    }
    .badge-icon {
        width: 24px;
        height: 24px;
        background: var(--color-secondary);
        border: 1px solid #0A0A0A;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }
    .pixel-mono {
        font-family: var(--font-mono);
    }

/* roulang page: category2 */
:root {
      --bg-canvas: #EFECE6;
      --bg-card: #FFFFFF;
      --bg-card-alt: #F8F7F4;
      --bg-dark: #18181A;
      --color-primary: #F38725;
      --color-primary-hover: #D97316;
      --color-secondary: #00D2B4;
      --color-accent: #D33E68;
      --color-green: #2B5C4E;
      --color-ink: #0A0A0A;
      --color-muted: #555555;
      --border-pixel: 2px solid #0A0A0A;
      --border-pixel-thick: 3px solid #0A0A0A;
      --shadow-hard: 4px 4px 0px #0A0A0A;
      --shadow-hard-sm: 2px 2px 0px #0A0A0A;
      --shadow-hard-lg: 6px 6px 0px #0A0A0A;
      --font-display: "Impact", "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
      --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --font-mono: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    body {
      background-color: var(--bg-canvas);
      color: var(--color-ink);
      font-family: var(--font-body);
      line-height: 1.75;
      font-size: 15px;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: var(--color-ink);
      text-decoration: none;
      transition: none;
    }

    a:hover {
      color: var(--color-primary);
    }

    .pixel-heading {
      font-family: var(--font-display);
      letter-spacing: -0.5px;
      font-weight: 900;
      color: var(--color-ink);
    }

    .pixel-mono {
      font-family: var(--font-mono);
    }

    .pixel-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 14px;
      padding: 10px 20px;
      border: var(--border-pixel);
      box-shadow: var(--shadow-hard);
      background: var(--color-primary);
      color: #0A0A0A;
      cursor: pointer;
      text-decoration: none;
      user-select: none;
    }

    .pixel-btn:hover {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0px #0A0A0A;
      color: #0A0A0A;
    }

    .pixel-btn:active {
      transform: translate(4px, 4px);
      box-shadow: 0px 0px 0px #0A0A0A;
    }

    .pixel-btn-outline {
      background: #FFFFFF;
      color: #0A0A0A;
    }

    .pixel-btn-dark {
      background: var(--bg-dark);
      color: #FFFFFF;
    }

    .pixel-btn-dark:hover {
      color: var(--color-secondary);
      background: #252528;
    }

    .pixel-btn-cyan {
      background: var(--color-secondary);
      color: #0A0A0A;
    }

    .pixel-card {
      background: var(--bg-card);
      border: var(--border-pixel);
      box-shadow: var(--shadow-hard);
      padding: 24px;
      position: relative;
    }

    .pixel-card:hover {
      box-shadow: var(--shadow-hard-lg);
    }

    .pixel-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border: 1px solid #0A0A0A;
      box-shadow: 1px 1px 0px #0A0A0A;
      text-transform: uppercase;
      background: #FFFFFF;
      color: #0A0A0A;
    }

    .pixel-badge-primary { background: var(--color-primary); }
    .pixel-badge-cyan { background: var(--color-secondary); }
    .pixel-badge-magenta { background: var(--color-accent); color: #FFFFFF; }
    .pixel-badge-dark { background: var(--bg-dark); color: #FFFFFF; }

    .site-header {
      background: #FFFFFF;
      border-bottom: var(--border-pixel-thick);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .brand-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 900;
      color: #0A0A0A;
    }

    .brand-logo-icon {
      width: 28px;
      height: 28px;
      background: var(--color-primary);
      border: 2px solid #0A0A0A;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 2px 0px #0A0A0A;
    }

    .nav-link-saas {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: #0A0A0A;
      padding: 8px 16px;
      border: 1px solid transparent;
    }

    .nav-link-saas:hover,
    .nav-link-saas.active {
      background: var(--bg-canvas);
      border: var(--border-pixel);
      box-shadow: 2px 2px 0px #0A0A0A;
    }

    .command-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #F4F1EA;
      border: var(--border-pixel);
      padding: 6px 12px;
    }

    .command-input {
      border: none;
      background: transparent;
      font-size: 13px;
      font-family: var(--font-mono);
      outline: none;
      width: 140px;
    }

    .section-block {
      padding: 60px 0;
      border-bottom: var(--border-pixel);
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 12px;
      background: #FFFFFF;
      border: 1px solid #0A0A0A;
      padding: 3px 10px;
      box-shadow: 2px 2px 0px #0A0A0A;
    }

    /* Category Specific Components */
    .cat-header-panel {
      background: #FFFFFF;
      border: var(--border-pixel-thick);
      box-shadow: var(--shadow-hard-lg);
      padding: 32px;
    }

    .breadcrumb-retro {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 12px;
      margin-bottom: 16px;
    }

    .console-filter-bar {
      background: var(--bg-card-alt);
      border: var(--border-pixel);
      box-shadow: var(--shadow-hard);
      padding: 20px;
    }

    .retro-input {
      border: var(--border-pixel);
      padding: 8px 12px;
      font-family: var(--font-mono);
      font-size: 14px;
      background: #FFFFFF;
      box-shadow: var(--shadow-hard-sm);
      outline: none;
      width: 100%;
    }

    .retro-select {
      border: var(--border-pixel);
      padding: 8px 12px;
      font-family: var(--font-mono);
      font-size: 14px;
      background: #FFFFFF;
      box-shadow: var(--shadow-hard-sm);
      outline: none;
      cursor: pointer;
      width: 100%;
    }

    .rating-gauge {
      display: flex;
      gap: 3px;
      align-items: center;
    }

    .gauge-block {
      width: 12px;
      height: 10px;
      background: #DDD;
      border: 1px solid #0A0A0A;
    }

    .gauge-block.active {
      background: var(--color-primary);
    }

    .gauge-block.cyan {
      background: var(--color-secondary);
    }

    .cli-box {
      background: var(--bg-dark);
      color: #00FF66;
      font-family: var(--font-mono);
      border: var(--border-pixel-thick);
      box-shadow: var(--shadow-hard-lg);
      padding: 24px;
      position: relative;
    }

    .cli-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #333;
      padding-bottom: 12px;
      margin-bottom: 16px;
      font-size: 12px;
      color: #AAA;
    }

    .rank-num {
      width: 36px;
      height: 36px;
      background: var(--color-ink);
      color: #FFFFFF;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #FFFFFF;
    }

    .rank-item {
      background: #FFFFFF;
      border: var(--border-pixel);
      box-shadow: var(--shadow-hard-sm);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: none;
    }

    .rank-item:hover {
      transform: translate(2px, 2px);
      box-shadow: none;
    }

    .pagination-retro {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 36px;
      font-family: var(--font-mono);
    }

    .page-btn {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: var(--border-pixel);
      background: #FFFFFF;
      box-shadow: var(--shadow-hard-sm);
      font-weight: 700;
      color: #0A0A0A;
    }

    .page-btn.active {
      background: var(--color-primary);
      box-shadow: none;
      transform: translate(2px, 2px);
    }

    .footer-retro {
      background: #FFFFFF;
      border-top: var(--border-pixel-thick);
      padding: 60px 0 30px;
    }

    .badge-icon {
      width: 24px;
      height: 24px;
      background: var(--color-secondary);
      border: 1px solid #0A0A0A;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}