/* Extracted Theme CSS for HWQ */

        :root {
            /* Canonical Legacy Typography Contracts */
            --hq-font-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
            --hq-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            --hq-font-mono: 'Space Grotesk', monospace;

            /* Arc UI Typography Families */
            --font-display: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;
            --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
            --font-mono: 'Space Grotesk', ui-monospace, monospace;

            /* Fluid Modular Typography Scale */
            --hq-h1-size: clamp(1.75rem, 1.30rem + 2.05vw, 2.375rem);
            --hq-h2-size: clamp(1.375rem, 1.16rem + 1.15vw, 1.875rem);
            --hq-h3-size: clamp(1.125rem, 1.02rem + 0.65vw, 1.375rem);
            --hq-h4-size: clamp(1.000rem, 0.95rem + 0.35vw, 1.1875rem);
            --hq-eyebrow-size: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
            --hq-body-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1.125rem);
            --hq-body-leading: 1.6;

            /* Technical Specs & Data Grid Fluid Scale (27" 5K/4K Retina Ready) */
            --hq-spec-label-size: clamp(0.8125rem, 0.775rem + 0.30vw, 0.9375rem);
            --hq-spec-value-size: clamp(0.875rem, 0.825rem + 0.40vw, 1.0625rem);
            --hq-spec-unit-size: clamp(0.75rem, 0.725rem + 0.20vw, 0.875rem);
            --hq-spec-bool-size: clamp(0.75rem, 0.700rem + 0.25vw, 0.875rem);

            --hq-h1-leading: 1.16;
            --hq-h2-leading: 1.20;
            --hq-h3-leading: 1.28;
            --hq-h4-leading: 1.34;
            --hq-h1-tracking: -0.021em;
            --hq-h2-tracking: -0.017em;
            --hq-h3-tracking: -0.012em;
            --hq-h4-tracking: -0.008em;

            /* Legacy Radii */
            --hq-radius-xs: 6px;
            --hq-radius-sm: 10px;
            --hq-radius-md: 14px;
            --hq-radius-lg: 18px;
            --hq-radius-xl: 24px;
            --hq-radius-2xl: 32px;
            --hq-radius-full: 9999px;

            /* Arc Radii Tokens */
            --radius-control: 1.125rem;
            --radius-panel: 1.625rem;
            --radius-surface: 2.125rem;
            --radius-pill: 9999px;

            --hq-ease-apple: cubic-bezier(0.25, 1, 0.5, 1);

            /* Arc Motion */
            --ease-enter: cubic-bezier(.16, 1, .3, 1);
            --ease-standard: cubic-bezier(.22, 1, .36, 1);
            --ease-exit: cubic-bezier(.7, 0, .84, 0);
            --ease-in-out: cubic-bezier(.65, 0, .35, 1);
            --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);

            --duration-instant: 120ms;
            --duration-fast: 160ms;
            --duration-standard: 240ms;
            --duration-considered: 480ms;
            --duration-spring: 580ms;

            /* Brand Theme Dynamic Scale (Emerald Default) */
            --theme-50: #ecfdf5;
            --theme-100: #d1fae5;
            --theme-200: #a7f3d0;
            --theme-300: #6ee7b7;
            --theme-400: #34d399;
            --theme-500: #10b981;
            --theme-600: #059669;
            --theme-700: #047857;
            --theme-800: #065f46;
            --theme-900: #064e3b;
            --theme-950: #022c22;
            --theme-500-10: rgba(16, 185, 129, 0.10);
            --theme-500-15: rgba(16, 185, 129, 0.15);
            --theme-500-20: rgba(16, 185, 129, 0.20);

            /* Arc Surfaces */
            --background: oklch(100% 0 0);
            --surface: oklch(100% 0 0);
            --surface-raised: oklch(100% 0 0);
            --surface-muted: oklch(97.8% 0 0);
            --foreground: oklch(15% 0 0);
            --text-secondary: oklch(46% 0 0);
            --text-muted: oklch(59% 0 0);

            /* Arc Borders */
            --border: oklch(93.5% 0 0);
            --border-subtle: oklch(96.5% 0 0);
            --border-strong: oklch(82% 0 0);

            /* Brand Accent: Hardware Quest Emerald */
            --accent: #2FC373;
            --accent-strong: #1e9b55;
            --accent-subtle: rgba(47, 195, 115, 0.12);
            --accent-foreground: #042514;

            /* Semantic Feedback */
            --success: oklch(49% .19 150);
            --warning: oklch(58% .18 75);
            --danger: oklch(54% .21 25);

            /* Shadows */
            --shadow-resting: 0 1px 2px oklch(0% 0 0 / .035);
            --shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035);
            --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045);

            /* Layout & Clearance Tokens */
            --hq-sticky-top: 5.5rem;
            --site-header-height: 4.25rem;
            --site-header-clearance: clamp(5.25rem, 4.5rem + 1.5vw, 6.75rem);
            --hq-page-start: var(--site-header-clearance);
        }

        :root[data-theme="dark"],
        html.dark {
            --background: #060c0a;
            --surface: #0e1714;
            --surface-raised: #14221d;
            --surface-muted: #1b2c26;
            --foreground: oklch(96% 0 0);
            --text-secondary: oklch(77% 0 0);
            --text-muted: oklch(64% 0 0);

            --border: rgba(255, 255, 255, 0.12);
            --border-subtle: rgba(255, 255, 255, 0.06);
            --border-strong: rgba(255, 255, 255, 0.24);

            --accent: #3de88c;
            --accent-strong: #78f0b3;
            --accent-subtle: rgba(47, 195, 115, 0.20);
            --accent-foreground: #021a0d;

            --success: oklch(78% .18 150);
            --warning: oklch(83% .17 80);
            --danger: oklch(76% .2 25);

            --shadow-resting: 0 1px 2px oklch(0% 0 0 / .18);
            --shadow-raised: 0 8px 22px oklch(0% 0 0 / .22);
            --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34);
        }

        /* Fluid Modular Typography Scale */
        .hq-h1 {
            font-family: var(--hq-font-display);
            line-height: var(--hq-h1-leading);
            letter-spacing: var(--hq-h1-tracking);
            font-weight: 800;
        }
        :where(.hq-h1, h1:not([class*="text-"])) {
            font-size: var(--hq-h1-size);
        }
        .hq-h2 {
            font-family: var(--hq-font-display);
            line-height: var(--hq-h2-leading);
            letter-spacing: var(--hq-h2-tracking);
            font-weight: 700;
        }
        :where(.hq-h2, h2:not([class*="text-"])) {
            font-size: var(--hq-h2-size);
        }
        .hq-h3 {
            font-family: var(--hq-font-display);
            line-height: var(--hq-h3-leading);
            letter-spacing: var(--hq-h3-tracking);
            font-weight: 700;
        }
        :where(.hq-h3, h3:not([class*="text-"])) {
            font-size: var(--hq-h3-size);
        }
        .hq-h4 {
            font-family: var(--hq-font-display);
            line-height: var(--hq-h4-leading);
            letter-spacing: var(--hq-h4-tracking);
            font-weight: 600;
        }
        :where(.hq-h4, h4:not([class*="text-"])) {
            font-size: var(--hq-h4-size);
        }
        :where(h5:not([class*="text-"])) {
            font-size: 1rem;
            line-height: 1.4;
            font-weight: 600;
        }
        :where(h6:not([class*="text-"])) {
            font-size: 0.875rem;
            line-height: 1.4;
            font-weight: 600;
        }
        .hq-eyebrow {
            font-size: var(--hq-eyebrow-size);
            line-height: 1.4;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
        }
        .hq-mono {
            font-family: var(--hq-font-mono);
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        /* Apple Liquid Glass (.lg) Material */
        .lg, .liquid-glass {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(228, 228, 231, 0.6);
            border-radius: var(--hq-radius-lg, 18px);
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.65);
        }
        html.dark .lg, html.dark .liquid-glass {
            background: rgba(10, 12, 16, 0.78);
            backdrop-filter: blur(24px) saturate(190%);
            -webkit-backdrop-filter: blur(24px) saturate(190%);
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }

        /* Solid High-Contrast Surface (.solid) */
        .solid {
            background: #ffffff;
            border: 1px solid rgba(228, 228, 231, 0.8);
            border-radius: var(--hq-radius-lg, 18px);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px -6px rgba(0, 0, 0, 0.04);
        }
        html.dark .solid {
            background: #18181b;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
        }

        /* Specular Border Rims & Highlights */
        .specular-rim {
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.65);
        }
        html.dark .specular-rim {
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }
        .specular-rim-bottom {
            box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.20);
        }
        .rim-highlight {
            position: relative;
        }
        .rim-highlight::before {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            pointer-events: none;
        }

        /* Inner Glows */
        .inner-glow-emerald {
            box-shadow: inset 0 0 20px 0 rgba(16, 185, 129, 0.15);
        }
        .inner-glow-white {
            box-shadow: inset 0 0 20px 0 rgba(255, 255, 255, 0.10);
        }
        .glow-emerald {
            box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
        }

        /* Continuous Squircle Utilities */
        .squircle-xs { border-radius: var(--hq-radius-xs, 6px); }
        .squircle-sm { border-radius: var(--hq-radius-sm, 10px); }
        .squircle-md { border-radius: var(--hq-radius-md, 14px); }
        .squircle-lg { border-radius: var(--hq-radius-lg, 18px); }
        .squircle-xl { border-radius: var(--hq-radius-xl, 24px); }
        .squircle-2xl { border-radius: var(--hq-radius-2xl, 32px); }
        .squircle-full { border-radius: var(--hq-radius-full, 9999px); }

        /* Navigation Glass (.nav-glass) */
        .nav-glass {
            position: relative;
            isolation: isolate;
            background: rgba(255, 255, 255, 0.72) !important;
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.65);
        }
        html.dark .nav-glass {
            background: rgba(10, 12, 16, 0.82) !important;
            backdrop-filter: blur(24px) saturate(190%);
            -webkit-backdrop-filter: blur(24px) saturate(190%);
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }

        /* Brand Logo Diamond & Mark */
        .hq-logo-mark {
            position: relative !important;
            display: inline-flex !important;
            width: 2.25rem !important;
            height: 2.25rem !important;
            flex: 0 0 2.25rem !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .hq-logo-diamond {
            position: absolute !important;
            inset: 0.25rem !important;
            border-radius: 0.5rem !important;
            background: #065F46 !important;
            transform: rotate(45deg) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
            transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
        }
        .group:hover .hq-logo-diamond,
        .group:focus-visible .hq-logo-diamond {
            transform: rotate(90deg) !important;
        }
        .hq-logo-glow {
            display: none !important;
        }
        .hq-logo-mark svg {
            position: relative !important;
            z-index: 1 !important;
            color: #ffffff !important;
        }

        /* Radar Status Indicator */
        @keyframes radar-pulse {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(2.3); opacity: 0; }
            100% { transform: scale(2.3); opacity: 0; }
        }
        .animate-radar-pulse {
            animation: radar-pulse 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        /* Theme Switcher Styles */
        .hq-appearance { position: relative; }
        .hq-appearance-thumb {
            position: absolute;
            top: 4px; left: 4px;
            height: calc(100% - 8px);
            width: 40px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.85);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(6px) saturate(1.4);
            opacity: 0;
            transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s ease, opacity 0.2s ease;
            z-index: 0;
            pointer-events: none;
        }
        html.dark .hq-appearance-thumb {
            background: rgba(255, 255, 255, 0.14);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
        }
        .hq-appearance-btn {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            width: 40px;
            border-radius: 9999px;
            color: rgb(113 113 122);
            transition: color 0.2s ease;
        }
        html.dark .hq-appearance-btn { color: rgb(161 161 170); }
        .hq-appearance-btn:hover { color: rgb(24 24 27); }
        html.dark .hq-appearance-btn:hover { color: #fff; }
        .hq-appearance-btn[data-active="true"] { color: #047857; }
        html.dark .hq-appearance-btn[data-active="true"] { color: #6ee7b7; }

        body.hq-overlay-open {
            overflow: hidden !important;
        }
    

.lg { -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8)); backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8)); background-color: rgba(255,255,255,var(--lg-opacity, 0.45)); border: 1px solid rgba(255,255,255,0.2); isolation: isolate;  }
html.dark .lg { background-color: rgba(6,12,10,var(--lg-opacity, 0.35)); border: 1px solid rgba(255,255,255,0.05); }

        /* ── Account (Dashboard) dropdown ───────────────────────────────────────────── */
        .hq-acct-item {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            min-height: 2.75rem;
            padding: 0.5rem 0.625rem;
            border-radius: 0.625rem;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.15;
            color: #3f3f46;
            text-decoration: none;
            transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }
        html.dark .hq-acct-item {
            color: #d4d4d8;
        }
        .hq-acct-item:hover,
        .hq-acct-item:focus-visible {
            background: rgba(16, 185, 129, 0.10);
            background: color-mix(in srgb, var(--theme-500, #10b981) 12%, transparent);
            color: var(--theme-700, #047857);
            outline: none;
            transform: translateX(1px);
        }
        html.dark .hq-acct-item:hover,
        html.dark .hq-acct-item:focus-visible {
            background: rgba(16, 185, 129, 0.16);
            background: color-mix(in srgb, var(--theme-500, #10b981) 18%, transparent);
            color: var(--theme-300, #6ee7b7);
        }
        .hq-acct-item:focus-visible {
            box-shadow: 0 0 0 2px var(--theme-500, #10b981);
        }
        .hq-acct-ico {
            flex: 0 0 auto;
            color: #a1a1aa;
            transition: color 0.18s ease;
        }
        .hq-acct-item:hover .hq-acct-ico,
        .hq-acct-item:focus-visible .hq-acct-ico {
            color: var(--theme-500, #10b981);
        }
        .hq-acct-item--danger:hover,
        .hq-acct-item--danger:focus-visible {
            background: rgba(239, 68, 68, 0.10);
            background: color-mix(in srgb, #ef4444 12%, transparent);
            color: #dc2626;
        }
        html.dark .hq-acct-item--danger:hover,
        html.dark .hq-acct-item--danger:focus-visible {
            background: rgba(239, 68, 68, 0.18);
            background: color-mix(in srgb, #ef4444 20%, transparent);
            color: #f87171;
        }
        .hq-acct-item--danger:focus-visible {
            box-shadow: 0 0 0 2px #ef4444;
        }
        .hq-acct-item--danger .hq-acct-ico {
            color: #f87171;
        }
        .hq-acct-item--danger:hover .hq-acct-ico,
        .hq-acct-item--danger:focus-visible .hq-acct-ico {
            color: #ef4444;
        }
        .hq-acct-sep {
            height: 1px;
            margin: 0.375rem 0.25rem;
            background: rgba(161, 161, 170, 0.35);
        }
        html.dark .hq-acct-sep {
            background: rgba(255, 255, 255, 0.10);
        }

        /* ── Ambient Background & Depth Orbs ────────────────────────────────────────── */
        .hq-ambient-background {
            background:
                radial-gradient(circle at 16% 20%, rgba(16, 185, 129, 0.05), transparent 32%),
                radial-gradient(circle at 84% 14%, rgba(20, 184, 166, 0.04), transparent 28%),
                linear-gradient(145deg, #f8fafc 0%, #f8fafc 100%);
        }
        html.dark .hq-ambient-background {
            background:
                radial-gradient(circle at 16% 20%, rgba(16, 185, 129, 0.06), transparent 38%),
                radial-gradient(circle at 84% 14%, rgba(20, 184, 166, 0.04), transparent 32%),
                radial-gradient(60% 50% at 50% 118%, rgba(6, 95, 70, 0.15), transparent 62%),
                linear-gradient(145deg, #060c0a 0%, #05100c 52%, #020806 100%);
        }
        .hq-ambient-orb {
            filter: blur(140px);
            opacity: 0.25;
            pointer-events: none;
        }

        /* ── R3 Integrated Animation Playground ─────────────────────────────────────── */
        /* 1. Click Ripple Effect */
        .anim-ripple {
            position: relative;
            overflow: hidden;
        }
        .anim-ripple-wave {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            animation: hq-ripple 600ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
            background: rgba(255, 255, 255, 0.35);
            pointer-events: none;
        }
        @keyframes hq-ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* 2. Magnetic CTA Hover */
        .anim-magnetic {
            transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: transform;
        }

        /* 3. Liquid Glass Gleam & Sheen Sweep */
        .anim-gleam {
            position: relative;
            overflow: hidden;
        }
        .anim-gleam::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 25%;
            height: 200%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.18) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(25deg);
            pointer-events: none;
            transition: none;
        }
        .anim-gleam:hover::after,
        .anim-gleam.active-gleam::after {
            animation: hq-gleam-sweep 1.2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        @keyframes hq-gleam-sweep {
            0% { transform: translateX(0) rotate(25deg); }
            100% { transform: translateX(650%) rotate(25deg); }
        }

        /* 4. 3D Perspective Card Tilt */
        .anim-tilt {
            transform-style: preserve-3d;
            transition: transform 0.15s ease-out;
            will-change: transform;
        }

        /* 5. Skeleton Loading Shimmer */
        .anim-shimmer {
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.02) 0%,
                rgba(255, 255, 255, 0.12) 50%,
                rgba(255, 255, 255, 0.02) 100%
            );
            background-size: 200% 100%;
            animation: hq-shimmer 2s infinite ease-in-out;
        }
        @keyframes hq-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* 6. Ambient Pulse Glow */
        .anim-pulse-glow {
            animation: hq-pulse-glow 2.5s infinite ease-in-out;
        }
        @keyframes hq-pulse-glow {
            0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
            50% { box-shadow: 0 0 28px rgba(16, 185, 129, 0.55); }
        }

        /* 7. Range Slider Glow */
        .anim-slider-glow::-webkit-slider-thumb {
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
        }
        .anim-slider-glow:focus::-webkit-slider-thumb {
            transform: scale(1.15);
            box-shadow: 0 0 22px rgba(16, 185, 129, 0.9);
        }

        /* 8. Elastic Dropdown Entrance */
        .anim-dropdown-elastic {
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }


        /* versus.com-style "explainable spec" affordance: a fine hairline (dotted) underline
           under the spec term signals it has an educational explanation. CLICK the term (or its
           info dot) to open the callout beneath the row — no hover card (that overlapped blocks). */
        .hq-spec-term {
            text-decoration: underline dotted;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
            text-decoration-color: rgba(100, 116, 139, 0.45); /* zinc-500 @ 45% — hairline */
            cursor: pointer;
            transition: text-decoration-color 0.15s ease, color 0.15s ease;
        }
        .group:hover .hq-spec-term,
        .hq-spec-term:hover {
            text-decoration-color: var(--theme-500, #10b981);
            color: var(--theme-700, #047857);
        }
        .dark .hq-spec-term { text-decoration-color: rgba(148, 163, 184, 0.4); }
        .dark .group:hover .hq-spec-term,
        .dark .hq-spec-term:hover { text-decoration-color: var(--theme-400, #34d399); color: var(--theme-300, #6ee7b7); }

        /* Lightbox controls (close, prev, next): a solid dark chip with a light border so they
           stay clearly visible whether the product image behind them is white or dark. Glass
           (bg-white/10) was invisible over white product shots. */
        .hq-lb-ctl {
            background: rgba(15, 23, 42, 0.72);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.22);
            box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        .hq-lb-ctl:hover {
            background: rgba(15, 23, 42, 0.92);
            border-color: rgba(255, 255, 255, 0.4);
        }

        .hq-amazon-button {
            background: linear-gradient(180deg, rgba(255,193,7,0.92) 0%, rgba(255,153,0,0.92) 100%);
            color: #131921;
            border: 1px solid rgba(255,193,7,0.35);
            box-shadow: 0 8px 22px -8px rgba(255, 153, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .hq-amazon-button:hover {
            background: linear-gradient(180deg, rgba(255,208,64,0.96) 0%, rgba(255,168,28,0.96) 100%);
            transform: translateY(-1px);
            box-shadow: 0 12px 28px -8px rgba(255, 153, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.45);
        }
        .dark .hq-amazon-button {
            /* In dark mode: a subdued amber-on-glass chip that matches the spec-table cards. */
            background: linear-gradient(180deg, rgba(251,191,36,0.16) 0%, rgba(245,158,11,0.12) 100%);
            color: #fcd34d;
            border: 1px solid rgba(251,191,36,0.30);
            box-shadow: 0 8px 22px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .dark .hq-amazon-button:hover {
            background: linear-gradient(180deg, rgba(251,191,36,0.24) 0%, rgba(245,158,11,0.18) 100%);
            color: #fde68a;
            border-color: rgba(251,191,36,0.45);
        }

        /* ---- Right sidebar rail: sticky on desktop so the jump-nav / resources stay
           in view while the visitor scrolls a long spec table. Released naturally on
           mobile (single column) and honours reduced-motion. ---- */
        @media (min-width: 1024px) {
            /* Content LEFT (wide) + sidebar RIGHT (narrow). Declared here as scoped CSS
               because the reversed arbitrary Tailwind track class is not in the pre-compiled
               stylesheet — this rule guarantees the desktop 2-col layout without a TW rebuild. */
            .hq-single-grid {
                grid-template-columns: minmax(0, 2fr) minmax(0, 0.62fr) !important;
            }
            .hq-side-rail {
                position: sticky;
                top: 6rem; /* clears the fixed header (~top-24) */
                align-self: start; /* stop the grid track stretching so sticky can engage */
            }
        }

        /* ---- Scroll-spy: active On-this-page link. Mirrors the emerald hover state so
           the current section is always obvious. .is-active is applied by JS below. ---- */
        .hq-toc-link.is-active {
            background: var(--theme-500-10, rgba(16, 185, 129, 0.10));
            color: var(--theme-700, #047857);
        }
        .hq-toc-link.is-active .hq-toc-ico {
            background: var(--theme-500-15, rgba(16, 185, 129, 0.15));
            color: var(--theme-700, #047857);
        }
        .hq-toc-link.is-active .hq-toc-caret { color: var(--theme-600, #059669); }
        .dark .hq-toc-link.is-active { color: var(--theme-300, #6ee7b7); }
        .dark .hq-toc-link.is-active .hq-toc-ico { color: var(--theme-300, #6ee7b7); }
        .dark .hq-toc-link.is-active .hq-toc-caret { color: var(--theme-400, #34d399); }
    

		.googlesitekit-sign-in-with-google__frontend-output-button{max-width:320px}
		.interim-login #login>.googlesitekit-sign-in-with-google__frontend-output-button{margin-bottom:16px}
		

/* PC Builder — SELF-CONTAINED styling. Every STRUCTURAL rule lives here (not in Tailwind
   arbitrary classes) because the theme ships a PURGED compiled Tailwind file that drops any
   utility it didn't see at build time. Colours use light defaults; a .dark ancestor flips them. */

/* ---- Toolbar: mode switch + browse ---- */
.hq-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; }
.hq-mode-switch { display:inline-flex; padding:.25rem; gap:.25rem; border-radius:.9rem; background:rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.2); }
.hq-mode-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:.7rem; font-size:12px; font-weight:800; letter-spacing:.02em; color:#64748b; background:transparent; border:0; cursor:pointer; transition:background .15s,color .15s,box-shadow .15s; }
.hq-mode-btn svg { width:1rem; height:1rem; }
.hq-mode-btn:hover { color:#047857; }
.hq-mode-btn--on { color:#047857; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.08); }
.hq-browse-link { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:.8rem; background:#047857; color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; transition:background .15s; }
.hq-browse-link svg { width:1rem; height:1rem; }
.hq-browse-link:hover { background:#059669; }

/* ---- Layout: two columns; summary sticky on desktop (INLINED so purge can't strip it) ---- */
.hq-build-layout { display:flex; flex-direction:column; gap:2rem; align-items:stretch; }
.hq-build-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1rem; }
.hq-summary-col { width:100%; }
/* Desktop (>=1152px): the summary sits BESIDE the slots and sticks at its NATURAL, full
   content height. No max-height / no overflow-y, so it never grows an inner scrollbar — it
   scrolls with the page and, being sticky INSIDE .hq-build-layout (align-items:flex-start),
   is bounded by that container so it can't overrun the footer.
   Below 1152px (tablet landscape 1024, tablet portrait 768, mobile) the summary STACKS
   below the slots at full width — no sticky, no fixed width, no inner scroll. */
@media (min-width:1152px){
    .hq-build-layout { flex-direction:row; align-items:flex-start; }
    .hq-summary-col { width:360px; flex:0 0 360px; align-self:flex-start; position:sticky; top:6rem; }
}

.hq-build-hint { font-size:13px; line-height:1.5; color:#475569; padding:.85rem 1rem; border-radius:1rem; background:rgba(255,255,255,.6); border:1px solid rgba(148,163,184,.25); }
.hq-hint-plus { display:inline-flex; width:1.15rem; height:1.15rem; vertical-align:middle; align-items:center; justify-content:center; border-radius:.3rem; background:rgba(16,185,129,.12); color:#047857; margin:0 .1rem; }
.hq-hint-plus svg { width:.7rem; height:.7rem; }

/* ---- Slot card: the whole card is a click target ---- */
.hq-build-slot { position:relative; display:flex; flex-direction:column; background:rgba(255,255,255,.8); border:1px solid rgba(148,163,184,.28); border-radius:1rem; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.05); cursor:pointer; transition:box-shadow .25s, border-color .25s, transform .25s; }
.hq-build-slot:hover { box-shadow:0 12px 28px -12px rgba(16,185,129,.35); border-color:rgba(16,185,129,.45); transform:translateY(-1px); }
.hq-build-slot:focus-visible { outline:2px solid #10b981; outline-offset:2px; }
.hq-build-slot--filled { cursor:default; }
.hq-build-slot--filled:hover { transform:none; }
@media (min-width:640px){ .hq-build-slot { flex-direction:row; align-items:stretch; } }

/* next-up highlight (stepwise) */
.hq-slot-next { border-color:rgba(16,185,129,.6); box-shadow:0 0 0 3px rgba(16,185,129,.16); }
.hq-slot-next::before { content:"Next"; position:absolute; top:0; right:0; z-index:2; font-size:9.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:#059669; padding:.2rem .5rem; border-bottom-left-radius:.6rem; }
.hq-build-slot--filled.hq-slot-next::before { display:none; }
.hq-build-slot--filled.hq-slot-next { box-shadow:0 1px 2px rgba(15,23,42,.05); border-color:rgba(148,163,184,.28); }

.hq-slot-head { display:flex; align-items:center; gap:1rem; padding:1.15rem 1.25rem; background:rgba(248,250,252,.7); border-bottom:1px solid rgba(148,163,184,.2); }
@media (min-width:640px){ .hq-slot-head { width:248px; flex:0 0 248px; border-bottom:0; border-right:1px solid rgba(148,163,184,.18); } }
.hq-slot-step { display:none; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; flex-shrink:0; border-radius:.5rem; font-family:'Space Grotesk',ui-monospace,monospace; font-size:11px; font-weight:800; color:#94a3b8; background:rgba(148,163,184,.14); }
@media (min-width:640px){ .hq-slot-step { display:flex; } }
.hq-build-slot:hover .hq-slot-step, .hq-slot-next .hq-slot-step { color:#059669; background:rgba(16,185,129,.14); }
.hq-slot-icon { width:3rem; height:3rem; flex-shrink:0; border-radius:.75rem; background:#fff; border:1px solid rgba(148,163,184,.3); display:flex; align-items:center; justify-content:center; color:#059669; box-shadow:0 1px 2px rgba(15,23,42,.05); transition:border-color .2s; }
.hq-slot-icon svg { width:1.5rem; height:1.5rem; }
.hq-build-slot:hover .hq-slot-icon { border-color:rgba(16,185,129,.45); }
.hq-slot-headtext { min-width:0; }
.hq-slot-title { font-size:15px; font-weight:800; line-height:1.2; color:#0f172a; }
.hq-slot-compat { margin-top:.25rem; font-size:11px; font-weight:700; line-height:1.2; display:none; }
.hq-slot-compat--on { display:block; }
.hq-slot-compat--fail { color:#dc2626; } .hq-slot-compat--warn { color:#d97706; } .hq-slot-compat--unknown { color:#64748b; }

.hq-slot-content { flex:1 1 auto; display:flex; align-items:center; padding:1rem 1.25rem; min-height:104px; min-width:0; }

/* The Choose affordance — GUARANTEED large + full width (this is what purge broke before) */
.hq-slot-choose { display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; min-height:72px; padding:1rem 1.5rem; border:2px dashed rgba(148,163,184,.55); border-radius:.85rem; background:rgba(255,255,255,.5); color:#64748b; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.hq-slot-choose:hover { border-color:rgba(16,185,129,.6); background:rgba(16,185,129,.06); color:#047857; }
.hq-choose-plus { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; flex-shrink:0; border-radius:999px; background:rgba(16,185,129,.12); color:#059669; transition:background .2s,color .2s; }
.hq-choose-plus svg { width:1.25rem; height:1.25rem; }
.hq-slot-choose:hover .hq-choose-plus { background:#10b981; color:#fff; }
.hq-choose-hint { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:none; color:#94a3b8; }
@media (max-width:520px){ .hq-choose-hint { display:none; } }

/* selected part display */
.hq-slot-selected { display:flex; width:100%; align-items:center; gap:1rem; }
.hq-item-imgwrap { width:64px; height:64px; flex-shrink:0; border-radius:.75rem; background:#fff; border:1px solid rgba(148,163,184,.28); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.05); }
@media (min-width:640px){ .hq-item-imgwrap { width:72px; height:72px; } }
.hq-item-img { width:100%; height:100%; object-fit:contain; padding:.4rem; }
.hq-item-main { flex:1 1 auto; min-width:0; }
.hq-item-link { font-size:15px; font-weight:800; color:#064e3b; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s; }
.hq-item-link:hover { color:#059669; }
.hq-item-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .6rem; margin-top:.35rem; }
.hq-item-price { font-family:ui-monospace,monospace; font-size:14px; font-weight:800; color:#334155; }
.hq-item-specs { font-size:11px; font-weight:600; color:#94a3b8; }
.hq-item-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.hq-slot-change { min-height:40px; padding:0 1rem; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#475569; background:#fff; border:1px solid rgba(148,163,184,.3); border-radius:.6rem; cursor:pointer; transition:color .15s; }
.hq-slot-change:hover { color:#059669; }
.hq-remove-item { min-height:40px; min-width:40px; display:flex; align-items:center; justify-content:center; color:#94a3b8; background:#fff; border:1px solid rgba(148,163,184,.3); border-radius:.6rem; cursor:pointer; transition:color .15s; }
.hq-remove-item svg { width:1rem; height:1rem; }
.hq-remove-item:hover { color:#ef4444; }

/* ---- Summary card ---- */
.hq-summary-card { background:rgba(255,255,255,.8); border:1px solid rgba(148,163,184,.28); border-radius:1.5rem; padding:1.5rem; box-shadow:0 20px 40px -24px rgba(15,23,42,.25); }
.hq-summary-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.hq-progress-count { font-family:ui-monospace,monospace; font-size:12px; font-weight:800; color:#047857; }
.hq-progress-wrap { margin-bottom:1rem; }
.hq-progress-track { height:.5rem; width:100%; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.28); }
.hq-progress-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#10b981,#34d399); transition:width .5s ease-out; }
.hq-progress-note { margin-top:.5rem; font-size:11px; font-weight:600; color:#64748b; }

/* stepwise next-step prompt */
.hq-next-step { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.15rem; padding:.7rem .85rem; border-radius:.85rem; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.22); }
.hq-next-badge { flex-shrink:0; font-size:9.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:#059669; padding:.25rem .5rem; border-radius:.4rem; margin-top:.05rem; }
.hq-next-text { font-size:12px; font-weight:600; line-height:1.4; color:#065f46; }
.hq-next-step--done { background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.25); }
.hq-next-step--done .hq-next-badge { background:#10b981; }
.hq-next-step--done .hq-next-text { color:#475569; }

.hq-compat-panel { border-width:1px; margin-bottom:1.15rem; }
.hq-compat-title { color:#334155; }
.hq-compat-dot { background:#e2e8f0; color:#64748b; }
.hq-compat-row { display:flex; align-items:flex-start; gap:.5rem; font-size:12px; line-height:1.35; color:#475569; }
.hq-ci { height:1rem; width:1rem; margin-top:.1rem; flex-shrink:0; }
.hq-compat--idle { border-color:rgba(203,213,225,.7); background:rgba(248,250,252,.7); }
.hq-compat--ok   { border-color:rgba(110,231,183,.7); background:rgba(236,253,245,.75); }
.hq-compat--ok   .hq-compat-title { color:#047857; }
.hq-compat--ok   .hq-compat-dot { background:#10b981; color:#fff; }
.hq-compat--warn { border-color:rgba(252,211,77,.7); background:rgba(255,251,235,.8); }
.hq-compat--warn .hq-compat-title { color:#b45309; }
.hq-compat--warn .hq-compat-dot { background:#f59e0b; color:#fff; }
.hq-compat--fail { border-color:rgba(252,165,165,.75); background:rgba(254,242,242,.8); }
.hq-compat--fail .hq-compat-title { color:#b91c1c; }
.hq-compat--fail .hq-compat-dot { background:#ef4444; color:#fff; }
.hq-ci--ok { color:#10b981; } .hq-ci--warn { color:#f59e0b; } .hq-ci--fail { color:#ef4444; } .hq-ci--idle { color:#94a3b8; }

/* checklist */
.hq-checklist { margin-bottom:1.15rem; display:flex; flex-direction:column; gap:.15rem; }
.hq-check-row { display:flex; align-items:center; gap:.625rem; padding:.375rem .5rem; border-radius:.625rem; font-size:12px; }
.hq-check-ic { display:inline-flex; align-items:center; justify-content:center; width:1.125rem; height:1.125rem; flex-shrink:0; color:#cbd5e1; }
.hq-check-ic svg { width:1.125rem; height:1.125rem; }
.hq-check-empty { width:.7rem; height:.7rem; border-radius:999px; border:2px dashed #cbd5e1; }
.hq-check-name { font-weight:600; color:#94a3b8; }
.hq-check-note { margin-left:auto; font-family:ui-monospace,monospace; font-size:10.5px; font-weight:700; color:#94a3b8; }
.hq-check-row--on { background:rgba(16,185,129,.07); }
.hq-check-row--on .hq-check-ic { color:#10b981; }
.hq-check-row--on .hq-check-name { color:#334155; }
.hq-check-row--on .hq-check-note { color:#059669; }

/* budget */
.hq-budget { margin-bottom:1.15rem; padding:.9rem 1rem; border-radius:1rem; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.2); }
.hq-budget-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.hq-budget-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#64748b; }
.hq-budget-inputwrap { display:inline-flex; align-items:center; background:#fff; border:1px solid rgba(148,163,184,.35); border-radius:.6rem; padding:0 .6rem; }
.hq-budget-cur { font-family:ui-monospace,monospace; font-size:13px; font-weight:800; color:#94a3b8; }
.hq-budget-input { width:6rem; border:0; outline:0; background:transparent; padding:.45rem .35rem; font-family:ui-monospace,monospace; font-size:14px; font-weight:800; color:#0f172a; text-align:right; }
.hq-budget-input:focus { color:#047857; }
.hq-budget-track { height:.45rem; width:100%; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.25); }
.hq-budget-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#10b981,#34d399); transition:width .4s ease-out; }
.hq-budget-fill--tight { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.hq-budget-fill--over { background:linear-gradient(90deg,#ef4444,#f87171); }
.hq-budget-note { margin-top:.5rem; font-size:11px; font-weight:600; color:#64748b; }

/* totals */
.hq-totals { margin-bottom:1.25rem; }
.hq-total-row { display:flex; align-items:center; justify-content:space-between; padding:.35rem 0; }
.hq-total-row--price { padding-bottom:1rem; margin-bottom:.5rem; border-bottom:1px solid rgba(148,163,184,.22); }
.hq-total-label { font-size:13px; font-weight:600; color:#475569; }
.hq-total-price { font-family:ui-monospace,monospace; font-size:24px; font-weight:900; color:#0f172a; }
.hq-total-watt { font-family:ui-monospace,monospace; font-size:14px; font-weight:800; color:#0f172a; }
.hq-watt-note { margin-top:.35rem; font-size:11px; color:#94a3b8; }

/* buttons */
.hq-summary-actions { display:flex; flex-direction:column; gap:.6rem; }
.hq-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:44px; padding:.6rem 1rem; border-radius:.75rem; background:#fff; border:1px solid rgba(148,163,184,.3); color:#334155; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.hq-btn svg { width:1rem; height:1rem; }
.hq-btn:hover { background:rgba(248,250,252,.9); }
.hq-btn--primary { background:#047857; border-color:#047857; color:#fff; }
.hq-btn--primary:hover { background:#059669; }

/* ---- Plain parts list mode ---- */
.hq-pl { display:none; background:rgba(255,255,255,.8); border:1px solid rgba(148,163,184,.28); border-radius:1.25rem; padding:1.25rem; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.hq-mode-list #hq-partslist { display:block; }
.hq-mode-list .hq-build-slot { display:none; }
.hq-mode-list .hq-build-hint { display:none; }
.hq-mode-guided #hq-partslist { display:none; }
.hq-pl-head { margin-bottom:1rem; }
.hq-pl-title { font-size:16px; font-weight:800; color:#0f172a; }
.hq-pl-sub { margin-top:.25rem; font-size:12px; color:#64748b; }
.hq-pl-rows { display:flex; flex-direction:column; }
.hq-plrow { display:flex; align-items:center; gap:.85rem; padding:.8rem .5rem; border-bottom:1px solid rgba(148,163,184,.18); cursor:pointer; transition:background .15s; }
.hq-plrow:hover { background:rgba(16,185,129,.05); }
.hq-plrow:focus-visible { outline:2px solid #10b981; outline-offset:-2px; }
.hq-pl-cat { flex:0 0 130px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#64748b; }
.hq-pl-val { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.hq-pl-name { font-size:14px; font-weight:700; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hq-pl-price { font-family:ui-monospace,monospace; font-size:12px; font-weight:700; color:#475569; margin-top:.1rem; }
.hq-pl-empty { font-size:13px; font-weight:700; color:#94a3b8; }
.hq-pl-add { flex-shrink:0; width:1.75rem; height:1.75rem; display:flex; align-items:center; justify-content:center; border-radius:.5rem; background:rgba(16,185,129,.1); color:#059669; font-size:18px; font-weight:800; }
.hq-pl-remove { flex-shrink:0; width:1.75rem; height:1.75rem; display:flex; align-items:center; justify-content:center; border-radius:.5rem; background:#fff; border:1px solid rgba(148,163,184,.3); color:#94a3b8; font-size:12px; font-weight:800; cursor:pointer; transition:color .15s; }
.hq-pl-remove:hover { color:#ef4444; }
.hq-pl-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1.15rem; }
.hq-pl-actions .hq-btn { width:auto; }
.hq-pl-copied { font-size:12px; font-weight:700; color:#059669; }

/* ---- Picker popup structure (INLINED so max-heights survive purge) ---- */
.hq-pick-shell { max-height:calc(100dvh - 3rem); }
@media (min-width:640px){ .hq-pick-shell { max-height:calc(100dvh - 8rem); } }
.hq-pick-results { max-height:none; }
.hq-pick-gate { display:flex; align-items:center; gap:.5rem; margin:0 .25rem .625rem; padding:.5rem .75rem; border-radius:.75rem; font-size:12px; font-weight:600; color:#047857; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); }
.hq-pick-gate b { font-weight:800; }
.hq-pick-gate-ic { width:1.05rem; height:1.05rem; flex-shrink:0; }
.hq-pick-item { display:flex; width:100%; align-items:center; gap:.75rem; border-radius:.75rem; border:1px solid transparent; padding:.625rem; text-align:left; transition:background .15s, border-color .15s, opacity .15s; }
.hq-pick-item:hover { border-color:rgba(16,185,129,.3); background:rgba(16,185,129,.05); }
.hq-pick-item--bad { opacity:.55; }
.hq-pick-item--bad:hover { border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.05); cursor:not-allowed; }
.hq-pick-reason { display:block; margin-top:.125rem; font-size:10.5px; font-weight:700; color:#dc2626; }
.hq-pick-reason--na { color:#94a3b8; font-weight:600; }
.hq-pick-add { flex-shrink:0; border-radius:.5rem; background:#047857; padding:.375rem .75rem; font-size:12px; font-weight:700; color:#fff; }
.hq-pick-add--off { background:rgba(100,116,139,.18); color:#64748b; }
.hq-pick-shake { animation:hqShake .4s; }
@keyframes hqShake { 10%,90%{transform:translateX(-1px);} 30%,70%{transform:translateX(2px);} 50%{transform:translateX(-3px);} }
.hq-pick-badge { flex-shrink:0; border-radius:.375rem; padding:.125rem .5rem; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.hq-pick-badge--ok  { background:rgba(16,185,129,.15); color:#047857; }
.hq-pick-badge--bad { background:rgba(239,68,68,.15); color:#dc2626; }
.hq-pick-badge--na  { background:rgba(100,116,139,.12); color:#64748b; font-weight:700; }

/* =========================== DARK PALETTE =========================== */
.dark .hq-mode-switch { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
.dark .hq-mode-btn { color:#94a3b8; }
.dark .hq-mode-btn:hover { color:#6ee7b7; }
.dark .hq-mode-btn--on { color:#6ee7b7; background:rgba(255,255,255,.08); box-shadow:none; }
.dark .hq-build-hint { background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.1); color:#cbd5e1; }
.dark .hq-hint-plus { background:rgba(16,185,129,.16); color:#6ee7b7; }

.dark .hq-build-slot { background:rgba(0,0,0,.4); border-color:rgba(255,255,255,.1); box-shadow:none; }
.dark .hq-build-slot:hover { border-color:rgba(16,185,129,.45); box-shadow:0 12px 28px -12px rgba(16,185,129,.25); }
.dark .hq-slot-next { border-color:rgba(16,185,129,.55); box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.dark .hq-slot-head { background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.06); }
.dark .hq-slot-step { color:#64748b; background:rgba(255,255,255,.06); }
.dark .hq-build-slot:hover .hq-slot-step, .dark .hq-slot-next .hq-slot-step { color:#6ee7b7; background:rgba(16,185,129,.16); }
.dark .hq-slot-icon { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#34d399; box-shadow:none; }
.dark .hq-slot-title { color:#f8fafc; }
.dark .hq-slot-compat--fail { color:#f87171; } .dark .hq-slot-compat--warn { color:#fbbf24; } .dark .hq-slot-compat--unknown { color:#94a3b8; }
.dark .hq-slot-choose { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.03); color:#94a3b8; }
.dark .hq-slot-choose:hover { border-color:rgba(16,185,129,.5); background:rgba(16,185,129,.08); color:#6ee7b7; }
.dark .hq-choose-plus { background:rgba(16,185,129,.14); color:#34d399; }
.dark .hq-slot-choose:hover .hq-choose-plus { background:#10b981; color:#fff; }
.dark .hq-choose-hint { color:#64748b; }
.dark .hq-item-imgwrap { background:#1e293b; border-color:rgba(255,255,255,.1); }
.dark .hq-item-link { color:#f8fafc; }
.dark .hq-item-price { color:#cbd5e1; }
.dark .hq-item-specs { color:#64748b; }
.dark .hq-slot-change { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#cbd5e1; }
.dark .hq-remove-item { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

.dark .hq-summary-card { background:rgba(0,0,0,.6); border-color:rgba(255,255,255,.1); }
.dark .hq-progress-count { color:#6ee7b7; }
.dark .hq-progress-track { background:rgba(255,255,255,.1); }
.dark .hq-progress-note { color:#94a3b8; }
.dark .hq-next-step { background:rgba(6,78,59,.28); border-color:rgba(16,185,129,.28); }
.dark .hq-next-text { color:#a7f3d0; }
.dark .hq-next-step--done { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.dark .hq-next-step--done .hq-next-text { color:#94a3b8; }
.dark .hq-compat-title { color:#e2e8f0; }
.dark .hq-compat-dot { background:rgba(255,255,255,.1); color:#94a3b8; }
.dark .hq-compat-row { color:#cbd5e1; }
.dark .hq-compat--idle { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.dark .hq-compat--ok   { border-color:rgba(16,185,129,.28); background:rgba(6,78,59,.32); }
.dark .hq-compat--ok   .hq-compat-title { color:#6ee7b7; }
.dark .hq-compat--warn { border-color:rgba(245,158,11,.28); background:rgba(120,53,15,.3); }
.dark .hq-compat--warn .hq-compat-title { color:#fcd34d; }
.dark .hq-compat--fail { border-color:rgba(239,68,68,.3); background:rgba(127,29,29,.32); }
.dark .hq-compat--fail .hq-compat-title { color:#fca5a5; }
.dark .hq-check-ic { color:#475569; }
.dark .hq-check-empty { border-color:#475569; }
.dark .hq-check-name { color:#64748b; }
.dark .hq-check-note { color:#64748b; }
.dark .hq-check-row--on { background:rgba(16,185,129,.1); }
.dark .hq-check-row--on .hq-check-ic { color:#34d399; }
.dark .hq-check-row--on .hq-check-name { color:#e2e8f0; }
.dark .hq-check-row--on .hq-check-note { color:#6ee7b7; }
.dark .hq-budget { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.dark .hq-budget-label { color:#94a3b8; }
.dark .hq-budget-inputwrap { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.dark .hq-budget-input { color:#f8fafc; }
.dark .hq-budget-track { background:rgba(255,255,255,.1); }
.dark .hq-budget-note { color:#94a3b8; }
.dark .hq-total-label { color:#cbd5e1; }
.dark .hq-total-price, .dark .hq-total-watt { color:#f8fafc; }
.dark .hq-watt-note { color:#64748b; }
.dark .hq-btn { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#e2e8f0; }
.dark .hq-btn:hover { background:rgba(255,255,255,.1); }
.dark .hq-btn--primary { background:#059669; border-color:#059669; color:#fff; }
.dark .hq-btn--primary:hover { background:#10b981; }

.dark .hq-pl { background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.1); }
.dark .hq-pl-title { color:#f8fafc; }
.dark .hq-pl-sub { color:#94a3b8; }
.dark .hq-plrow { border-color:rgba(255,255,255,.08); }
.dark .hq-plrow:hover { background:rgba(16,185,129,.08); }
.dark .hq-pl-cat { color:#94a3b8; }
.dark .hq-pl-name { color:#f8fafc; }
.dark .hq-pl-price { color:#cbd5e1; }
.dark .hq-pl-add { background:rgba(16,185,129,.14); color:#34d399; }
.dark .hq-pl-remove { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

.dark .hq-pick-gate { color:#6ee7b7; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.28); }
.dark .hq-pick-item:hover { border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.08); }
.dark .hq-pick-item--bad:hover { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.dark .hq-pick-reason { color:#f87171; }
.dark .hq-pick-reason--na { color:#94a3b8; }
.dark .hq-pick-add { background:#059669; }
.dark .hq-pick-add--off { background:rgba(255,255,255,.08); color:#94a3b8; }
.dark .hq-pick-badge--ok  { background:rgba(16,185,129,.2); color:#6ee7b7; }
.dark .hq-pick-badge--bad { background:rgba(239,68,68,.2); color:#f87171; }
.dark .hq-pick-badge--na  { background:rgba(255,255,255,.08); color:#94a3b8; }


		.googlesitekit-sign-in-with-google__frontend-output-button{max-width:320px}
		.interim-login #login>.googlesitekit-sign-in-with-google__frontend-output-button{margin-bottom:16px}
		

/* V3 Typography Overrides for Precompiled Tailwind */
body, .font-sans {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
.font-display, h1, h2, h3, h4, h5, h6, .hq-h1, .hq-h2, .hq-h3, .hq-h4 {
    font-family: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif !important;
    letter-spacing: -0.025em;
}
.font-mono {
    font-family: 'Space Grotesk', monospace !important;
}

/* PCB / PCIe Lanes Background Pattern */
.hq-pcb-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='1.2' stroke-opacity='1'%3E%3Cpath d='M-10,40 h50 l20,20 v100 l30,30'/%3E%3Cpath d='M-10,50 h46 l20,20 v100 l34,34'/%3E%3Cpath d='M-10,60 h42 l20,20 v100 l38,38'/%3E%3Ccircle cx='100' cy='160' r='2.5' fill='%2310b981'/%3E%3Cpath d='M310,120 h-40 l-20,-20 v-50 l-30,-30'/%3E%3Cpath d='M310,130 h-44 l-20,-20 v-50 l-34,-34'/%3E%3Cpath d='M310,140 h-48 l-20,-20 v-50 l-38,-38'/%3E%3Ccircle cx='120' cy='50' r='2.5' fill='%2310b981'/%3E%3Cpath d='M150,-10 v30 l20,20 h50'/%3E%3Cpath d='M160,-10 v26 l20,20 h46'/%3E%3Ccircle cx='220' cy='46' r='2.5' fill='%2310b981'/%3E%3Cpath d='M50,310 v-30 l20,-20 h50'/%3E%3Cpath d='M60,310 v-26 l20,-20 h46'/%3E%3Ccircle cx='126' cy='264' r='2.5' fill='%2310b981'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 400px 400px;
}