/* =========================
   HiveHQ - Enterprise SaaS Landing Page
   Inspired by Supabase, Linear, Stripe
   ========================= */

/* =========================================================
   1) Reset & Base
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* React Native feature-parity web surfaces */
.hhq-parityPage { display:grid; gap:18px; color:var(--portal-text, #0a1e3c); }
.hhq-parityHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hhq-parityHeader h1 { margin:0; font-size:clamp(1.8rem, 4vw, 2.5rem); line-height:1.1; }
.hhq-parityHeader p:not(.hhq-eyebrow) { margin:8px 0 0; color:var(--portal-text-muted, #64748b); }
.hhq-eyebrow { margin:0 0 5px; color:#b45309; font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.hhq-toolbar { display:flex; align-items:end; gap:12px; flex-wrap:wrap; padding:16px; border:1px solid var(--portal-border-subtle, #dce2ea); border-radius:18px; background:var(--portal-card, #fff); }
.hhq-grow { flex:1 1 260px; }
.hhq-field { display:grid; gap:6px; min-width:150px; margin:0; }
.hhq-field > span, .hhq-field > label { font-size:.78rem; font-weight:800; color:var(--portal-text-muted, #526174); }
.hhq-field input, .hhq-field select, .hhq-field textarea, .hhq-answerInput { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--portal-border-subtle, #cbd5e1); border-radius:10px; background:var(--portal-bg-subtle, #fff); color:var(--portal-text, #0f172a); font:inherit; }
.hhq-field input:focus, .hhq-field select:focus, .hhq-field textarea:focus, .hhq-answerInput:focus { outline:3px solid rgba(255,196,0,.3); border-color:#d18d00; }
.hhq-formGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
.hhq-span2 { grid-column:1 / -1; }
.hhq-checkField { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:700; }
.hhq-checkField input, .hhq-toggleRow input { width:20px; height:20px; accent-color:#d99700; }
.hhq-cardGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; }
.hhq-parityCard { padding:18px; border:1px solid var(--portal-border-subtle, #dce2ea); border-radius:18px; background:var(--portal-card, #fff); box-shadow:0 8px 24px rgba(15,23,42,.05); }
.hhq-parityCard h2 { margin:0 0 8px; font-size:1.15rem; }
.hhq-parityCard > p { color:var(--portal-text-muted, #64748b); }
.hhq-cardTopline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.hhq-cardTopline h2, .hhq-cardTopline p { margin:0; }
.hhq-cardActions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hhq-stackedActions { display:grid; gap:10px; }
.hhq-chip { display:inline-flex; align-items:center; min-height:28px; padding:3px 10px; border-radius:999px; background:#fff4bf; color:#704800; font-size:.75rem; font-weight:900; }
.hhq-statusText { font-size:.8rem; font-weight:800; color:var(--portal-text-muted, #64748b); }
.hhq-metaGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
.hhq-metaGrid div { min-width:0; }
.hhq-metaGrid dt { color:var(--portal-text-muted, #64748b); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.hhq-metaGrid dd { margin:3px 0 0; overflow-wrap:anywhere; font-weight:800; }
.hhq-dangerText { color:#b42318 !important; }
.hhq-btnDanger, .hhq-dialogBtnDanger { border:1px solid #d92d20 !important; background:#fff !important; color:#b42318 !important; }
.hhq-btnDanger:hover, .hhq-dialogBtnDanger:hover { background:#fff1f0 !important; }
.hhq-alert { padding:12px 14px; border:1px solid transparent; border-radius:12px; font-weight:700; }
.hhq-alert button { margin-left:8px; border:0; background:transparent; color:inherit; text-decoration:underline; font-weight:900; }
.hhq-alertError { border-color:#f7b4ae; background:#fff1f0; color:#8a1c13; }
.hhq-alertSuccess { border-color:#8ee0b8; background:#edfff6; color:#136c45; }
.hhq-alertWarning { border-color:#f4ce6a; background:#fff9df; color:#714b00; }
.hhq-loading { display:flex; align-items:center; justify-content:center; gap:10px; min-height:140px; color:var(--portal-text-muted, #64748b); font-weight:800; }
.hhq-spinner { width:22px; height:22px; border:3px solid #e2e8f0; border-top-color:#e99d00; border-radius:50%; animation:hhq-spin .8s linear infinite; }
@keyframes hhq-spin { to { transform:rotate(360deg); } }
.hhq-emptyState { display:grid; justify-items:center; gap:8px; padding:34px 18px; text-align:center; color:var(--portal-text-muted, #64748b); }
.hhq-emptyState h2, .hhq-emptyState h3, .hhq-emptyState p { margin:0; }
.hhq-dialogBackdrop { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:18px; background:rgba(2,8,23,.62); }
.hhq-dialog { width:min(720px,100%); max-height:min(90vh,900px); overflow:auto; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:var(--portal-card, #fff); color:var(--portal-text, #0f172a); box-shadow:0 24px 80px rgba(0,0,0,.3); }
.hhq-dialogHeader { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--portal-border-subtle, #dce2ea); background:var(--portal-card, #fff); }
.hhq-dialogHeader h2 { margin:0; }
.hhq-dialogBody, .hhq-dialog > form { padding:18px; }
.hhq-dialogActions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:18px; }
.hhq-iconButton { min-width:40px; min-height:40px; display:inline-grid; place-items:center; border:1px solid var(--portal-border-subtle, #dce2ea); border-radius:10px; background:transparent; color:inherit; font-size:1.25rem; }
.hhq-list { display:grid; gap:8px; margin-top:14px; }
.hhq-listRow { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:12px; border:1px solid var(--portal-border-subtle, #e2e8f0); border-radius:12px; background:var(--portal-bg-subtle, #f8fafc); text-align:left; }
.hhq-listRow > div { display:grid; gap:3px; min-width:0; }
.hhq-listRow span { color:var(--portal-text-muted, #64748b); font-size:.8rem; overflow-wrap:anywhere; }
.hhq-listButton { cursor:pointer; color:inherit; }
.hhq-listButton:hover { border-color:#e5ad20; background:#fffaf0; }
.hhq-toggleRow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; border:1px solid var(--portal-border-subtle, #e2e8f0); border-radius:12px; }
.hhq-toggleRow > span { display:grid; gap:3px; }
.hhq-toggleRow small, .hhq-helpText { color:var(--portal-text-muted, #64748b); font-size:.8rem; }
.hhq-settingsGrid, .hhq-dashboardColumns, .hhq-qrLayout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hhq-quickActionGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.hhq-colorDot { display:inline-block; width:12px; height:12px; margin-right:8px; border:1px solid rgba(0,0,0,.12); border-radius:50%; vertical-align:middle; }
.hhq-progressSteps {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 12px auto 24px;
    padding: 0;
    list-style: none;
}

    .hhq-progressSteps li {
        position: relative;
        min-width: 0;
        display: grid;
        grid-template-rows: 32px auto;
        justify-items: center;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        color: var(--hhq-text-muted);
        font-size: 12px;
        font-weight: 750;
        line-height: 1.2;
        text-align: center;
    }

        .hhq-progressSteps li span {
            position: relative;
            z-index: 2;
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            border: 2px solid var(--hhq-border-strong);
            border-radius: 50%;
            background: var(--hhq-surface);
            color: var(--hhq-text-muted);
            font-size: 13px;
            font-weight: 800;
        }

        .hhq-progressSteps li:not(:last-child)::after {
            content: "";
            position: absolute;
            z-index: 0;
            top: 15px;
            left: calc(50% + 24px);
            right: calc(-50% + 24px);
            height: 2px;
            background: var(--hhq-border);
        }

        .hhq-progressSteps li.active {
            color: var(--hhq-text);
        }

            .hhq-progressSteps li.active span {
                border-color: var(--hhq-brand-500);
                background: var(--hhq-brand-400);
                color: var(--hhq-ink-950);
            }
.hhq-inspectionIntro { max-width:760px; margin-inline:auto; }
.hhq-inspectionIntro li { margin-block:8px; }
.hhq-questionCard { max-width:900px; margin-inline:auto; }
.hhq-questionList { display:grid; gap:14px; margin-top:18px; }
.hhq-question { margin:0; padding:16px; border:1px solid var(--portal-border-subtle, #dce2ea); border-radius:14px; }
.hhq-question legend { padding:0 5px; font-weight:900; }
.hhq-question p { margin:0 0 10px; color:var(--portal-text-muted, #64748b); font-size:.85rem; }
.hhq-required { color:#b42318; }
.hhq-choiceGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.hhq-choice { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 12px; border:1px solid var(--portal-border-subtle, #cbd5e1); border-radius:10px; cursor:pointer; }
.hhq-choice.selected { border-color:#d99700; background:#fff8d8; }
.hhq-choice input { accent-color:#d99700; }
.hhq-inspectionActions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; }
.hhq-completeCard { max-width:640px; margin-inline:auto; padding:28px; border:1px solid #8ee0b8; border-radius:20px; background:#f2fff8; text-align:center; }
.hhq-completeIcon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px; border-radius:50%; background:#1c9b62; color:#fff; font-size:1.8rem; font-weight:900; }
.hhq-rating { margin:18px 0; border:0; }
.hhq-rating button { border:0; background:transparent; color:#cbd5e1; font-size:2rem; }
.hhq-rating button.selected, .hhq-rating button:hover { color:#e99d00; }
.hhq-choiceList { display:grid; gap:8px; margin-top:14px; }
.hhq-cameraFrame { position:relative; width:min(100%,520px); aspect-ratio:1; margin:12px auto; overflow:hidden; border-radius:18px; background:#071321; }
.hhq-cameraFrame video { width:100%; height:100%; object-fit:cover; }
.hhq-scanFrame { position:absolute; inset:18%; border:3px solid #ffc400; border-radius:16px; box-shadow:0 0 0 999px rgba(0,0,0,.35); }
.hhq-uploadCard { position:sticky; top:12px; z-index:3; }
.hhq-photoGallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.hhq-photoCard { overflow:hidden; border:1px solid var(--portal-border-subtle, #dce2ea); border-radius:16px; background:var(--portal-card, #fff); }
.hhq-photoCard img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; background:#e2e8f0; }
.hhq-photoCard > div { display:grid; gap:5px; padding:12px; }
.hhq-photoCard span { color:var(--portal-text-muted, #64748b); font-size:.8rem; overflow-wrap:anywhere; }
.hhq-photoCard .hhq-btn { justify-self:start; margin-top:6px; }
.hhq-qrCard { width:min(480px,100%); margin-inline:auto; padding:28px; border:1px solid var(--portal-border-subtle, #dce2ea); border-radius:20px; background:#fff; color:#111827; text-align:center; }
.hhq-qrCard img { width:min(320px,100%); height:auto; display:block; margin:18px auto; image-rendering:pixelated; }
.hhq-qrCard code { display:block; padding:8px; overflow-wrap:anywhere; border-radius:8px; background:#f1f5f9; }
.hhq-qrCard .hhq-cardActions { justify-content:center; margin-top:16px; }

@media (max-width:900px) {
    .hhq-settingsGrid, .hhq-dashboardColumns, .hhq-qrLayout { grid-template-columns:1fr; }
    .hhq-quickActionGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hhq-portalShell { display:block; padding-bottom:74px; }
    .hhq-portalSidebar { position:fixed; inset:auto 0 0; z-index:1000; width:auto; min-height:0; padding:6px 8px max(6px,env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--portal-border-subtle,#dce2ea); background:var(--portal-card,#fff); }
    .hhq-portalSidebarTop, .hhq-portalSidebarFooter { display:none; }
    .hhq-portalNav { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; }
    .hhq-portalNav a { min-height:54px; display:grid; justify-items:center; align-content:center; gap:2px; padding:4px; border-radius:10px; font-size:.68rem; }
    .hhq-portalNavIcon { margin:0 !important; font-size:1rem; }
    .hhq-portalMain { margin:0 !important; padding:14px !important; }
}
@media (max-width:600px) {
    .hhq-formGrid, .hhq-metaGrid { grid-template-columns:1fr; }
    .hhq-span2 { grid-column:auto; }
    .hhq-parityCard { padding:14px; border-radius:14px; }
    .hhq-toolbar { align-items:stretch; }
    .hhq-toolbar > * { width:100%; }
    .hhq-listRow { align-items:flex-start; flex-direction:column; }
    .hhq-listRow > .hhq-cardActions { width:100%; }
    .hhq-listRow > .hhq-cardActions .hhq-btn { flex:1; }
    .hhq-dialogBackdrop { align-items:end; padding:0; }
    .hhq-dialog { max-height:92vh; border-radius:20px 20px 0 0; }
    .hhq-progressSteps li { display:grid; justify-items:center; gap:3px; font-size:.68rem; }
    .hhq-progressSteps li:not(:last-child)::after { left:66%; right:-34%; top:26px; }
    .hhq-quickActionGrid { grid-template-columns:1fr; }
    .hhq-choiceGrid { grid-template-columns:1fr; }
    .hhq-photoGallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .hhq-photoCard > div { padding:8px; }
}
@media (prefers-reduced-motion:reduce) { .hhq-spinner { animation-duration:1.8s; } }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    background: #000000 !important;
    color: #ffffff !important;
    line-height: 1.5;
}

/* =========================================================
   2) CSS Variables
   ========================================================= */
:root {
    /* Colors */
    --color-bg: #000000;
    --color-bg-elevated: #0a0a0a;
    --color-bg-subtle: #141414;
    --color-text-primary: #ffffff;
    --color-text-secondary: #a3a3a3;
    --color-text-tertiary: #737373;
    --color-yellow: #fbbf24;
    --color-yellow-dark: #f59e0b;
    --color-blue: #3b82f6;
    --color-green: #10b981;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-subtle: rgba(255, 255, 255, 0.05);
    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --hhq-nav-height: 50px; /* desktop default */
    --hhq-portal-sidebar-w: 320px;
    --hhq-portal-topbar-h: 60px;
}

@media (max-width: 768px) {
    :root {
        --hhq-nav-height: 10px;
    }
}

/* =========================================================
   3) Layout
   ========================================================= */
.hhq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (max-width: 768px) {
    .hhq-container {
        padding: 0 var(--space-5);
    }
}

/* =========================================================
   4) Navigation
   ========================================================= */
.hhq-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-subtle);
}

    .hhq-nav .hhq-container {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

.hhq-navInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.hhq-logo {
    width: 150px;
    height: auto;
}

.hhq-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

    .hhq-links a {
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: color 200ms ease;
    }

        .hhq-links a:hover {
            color: var(--color-text-primary);
        }

@media (max-width: 768px) {
    .hhq-links {
        display: none;
    }
}

/* =========================================================
   5) Shared Components
   ========================================================= */

/* Badge */
.hhq-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.hhq-badgeDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-green);
    box-shadow: 0 0 8px var(--color-green);
}

/* Chips */
.hhq-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
    padding: 10px 14px;
    color: var(--color-text-secondary);
    font-size: 16px;
}

/* Pills */
.hhq-pill {
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.02);
}

.hhq-pill-yellow {
    border-color: rgba(251, 191, 36, 0.25);
    color: rgba(251, 191, 36, 0.9);
}

.hhq-pill-blue {
    border-color: rgba(59, 130, 246, 0.25);
    color: rgba(59, 130, 246, 0.9);
}

.hhq-pill-green {
    border-color: rgba(16, 185, 129, 0.25);
    color: rgba(16, 185, 129, 0.9);
}

/* Buttons */
.hhq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    height: 48px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.hhq-btnLarge {
    height: 56px;
    padding: 0 var(--space-6);
    font-size: 16px;
}

.hhq-btnIcon {
    width: 18px;
    height: 18px;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hhq-btn:hover .hhq-btnIcon {
    transform: translateX(2px);
}

.hhq-btnPrimary {
    background: linear-gradient(180deg, var(--color-yellow) 0%, var(--color-yellow-dark) 100%);
    color: #000000;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2) inset, 0 4px 12px rgba(251, 191, 36, 0.4), var(--shadow-md);
    border-radius: 50px;
}

    .hhq-btnPrimary::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
        opacity: 0;
        transition: opacity 200ms ease;
    }

    .hhq-btnPrimary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3) inset, 0 8px 24px rgba(251, 191, 36, 0.5), var(--shadow-lg);
    }

        .hhq-btnPrimary:hover::before {
            opacity: 1;
        }

    .hhq-btnPrimary:active {
        transform: translateY(0);
    }

.hhq-btnSecondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    border-radius: 50px;
}

    .hhq-btnSecondary:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .hhq-btnSecondary:active {
        transform: translateY(0);
    }

/* =========================================================
   6) Shared Background (Grid + Gradient)
   ========================================================= */
/*.hhq-heroGrid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black 40%, transparent 80%);
}*/

.hhq-heroGrid {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='72' viewBox='0 0 84 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(251,191,36,0.12)' stroke-width='1'%3E%3Cpath d='M21 1 L42 13 L42 37 L21 49 L0 37 L0 13 Z'/%3E%3Cpath d='M63 1 L84 13 L84 37 L63 49 L42 37 L42 13 Z'/%3E%3Cpath d='M42 37 L63 49 L63 73 L42 85 L21 73 L21 49 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 84px 72px;
    background-repeat: repeat;
    opacity: 0.85;
    mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black 40%, transparent 80%);
}

.hhq-heroGradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(251, 191, 36, 0.15), transparent 50%), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(59, 130, 246, 0.1), transparent 70%);
    pointer-events: none;
}

/* =========================================================
   7) Accessibility
   ========================================================= */
.hhq-btn:focus-visible,
.hhq-links a:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
}

/* =========================================================
   8) Page Load Animations (Linear-style)
   ========================================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animated elements start hidden (when using IntersectionObserver) */
.hhq-animate {
    opacity: 0;
}

/* Become visible when .hhq-animate-visible is added */
.hhq-animate-visible.hhq-animate-fadeInUp {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hhq-animate-visible.hhq-animate-fadeIn {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hhq-animate-visible.hhq-animate-scaleIn {
    animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Immediate animations (e.g., hero) */
.hhq-animate-fadeInUp {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hhq-animate-fadeIn {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hhq-animate-scaleIn {
    animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays */
.hhq-animate-delay-1 {
    animation-delay: 0.1s;
}

.hhq-animate-delay-2 {
    animation-delay: 0.2s;
}

.hhq-animate-delay-3 {
    animation-delay: 0.3s;
}

.hhq-animate-delay-4 {
    animation-delay: 0.4s;
}

.hhq-animate-delay-5 {
    animation-delay: 0.5s;
}

/* Grid + Gradient entrance */
.hhq-heroGrid {
    animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.hhq-heroGradient {
    animation: fadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    animation-delay: 0.2s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hhq-animate,
    .hhq-animate-fadeInUp,
    .hhq-animate-fadeIn,
    .hhq-animate-scaleIn,
    .hhq-heroGrid,
    .hhq-heroGradient {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hhq-flyingBee {
        display: none !important;
    }
}

/* =========================================================
   9) Flying Bee Animation (Optional)
   ========================================================= */
@keyframes flyBee {
    0% {
        transform: translate(-100px, 0) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: 0.9;
    }

    12% {
        transform: translate(12vw, -60px) rotate(-15deg);
    }

    18% {
        transform: translate(18vw, -80px) rotate(-25deg);
    }

    25% {
        transform: translate(25vw, -60px) rotate(-15deg);
    }

    32% {
        transform: translate(32vw, 0px) rotate(5deg);
    }

    40% {
        transform: translate(40vw, 40px) rotate(20deg);
    }

    48% {
        transform: translate(48vw, 0px) rotate(5deg);
    }

    55% {
        transform: translate(55vw, -70px) rotate(-20deg);
    }

    62% {
        transform: translate(62vw, -50px) rotate(-10deg);
    }

    70% {
        transform: translate(70vw, 30px) rotate(15deg);
    }

    78% {
        transform: translate(78vw, 60px) rotate(25deg);
    }

    85% {
        transform: translate(85vw, 20px) rotate(10deg);
    }

    92% {
        transform: translate(92vw, -40px) rotate(-15deg);
    }

    95% {
        opacity: 0.9;
    }

    100% {
        transform: translate(calc(100vw + 100px), -20px) rotate(-5deg);
        opacity: 0;
    }
}

@keyframes flyBeeAlt {
    0% {
        transform: translate(-100px, 0) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: 0.9;
    }

    15% {
        transform: translate(15vw, 50px) rotate(20deg);
    }

    23% {
        transform: translate(23vw, 80px) rotate(30deg);
    }

    30% {
        transform: translate(30vw, 50px) rotate(15deg);
    }

    38% {
        transform: translate(38vw, -20px) rotate(-10deg);
    }

    45% {
        transform: translate(45vw, -70px) rotate(-25deg);
    }

    53% {
        transform: translate(53vw, -40px) rotate(-15deg);
    }

    60% {
        transform: translate(60vw, 10px) rotate(5deg);
    }

    68% {
        transform: translate(68vw, 60px) rotate(20deg);
    }

    75% {
        transform: translate(75vw, 30px) rotate(10deg);
    }

    83% {
        transform: translate(83vw, -30px) rotate(-10deg);
    }

    90% {
        transform: translate(90vw, -60px) rotate(-20deg);
    }

    95% {
        opacity: 0.9;
    }

    100% {
        transform: translate(calc(100vw + 100px), -30px) rotate(-10deg);
        opacity: 0;
    }
}

@keyframes flyBeeCircular {
    0% {
        transform: translate(-100px, 0) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: 0.9;
    }

    10% {
        transform: translate(10vw, -40px) rotate(-25deg);
    }

    15% {
        transform: translate(15vw, -60px) rotate(-35deg);
    }

    20% {
        transform: translate(20vw, -50px) rotate(-20deg);
    }

    25% {
        transform: translate(25vw, -10px) rotate(0deg);
    }

    33% {
        transform: translate(33vw, 50px) rotate(25deg);
    }

    41% {
        transform: translate(41vw, 90px) rotate(35deg);
    }

    50% {
        transform: translate(50vw, 70px) rotate(20deg);
    }

    58% {
        transform: translate(58vw, -10px) rotate(-5deg);
    }

    65% {
        transform: translate(65vw, -55px) rotate(-22deg);
    }

    73% {
        transform: translate(73vw, -30px) rotate(-10deg);
    }

    80% {
        transform: translate(80vw, 20px) rotate(8deg);
    }

    87% {
        transform: translate(87vw, 10px) rotate(3deg);
    }

    93% {
        transform: translate(93vw, -25px) rotate(-8deg);
    }

    95% {
        opacity: 0.9;
    }

    100% {
        transform: translate(calc(100vw + 100px), -15px) rotate(-5deg);
        opacity: 0;
    }
}

.hhq-flyingBee {
    position: fixed;
    top: 20vh;
    left: -100px;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    animation: flyBee 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: 3s;
}

    .hhq-flyingBee img {
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    }

.hhq-flyingBee-2 {
    animation-name: flyBeeAlt;
    animation-delay: 10s;
    top: 55vh;
    animation-duration: 24s;
}

.hhq-flyingBee-3 {
    animation-name: flyBeeCircular;
    animation-delay: 16s;
    top: 35vh;
    animation-duration: 26s;
}

/* =========================================================
   10) HOME PAGE
   ========================================================= */
.hhq-home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Home Hero */
.hhq-hero {
    position: relative;
    padding-top: 180px;
    padding-bottom: var(--space-9);
    overflow: hidden;
}

.hhq-heroInner {
    position: relative;
    z-index: 2;
}

.hhq-heroContent {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.hhq-heroTitle {
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 var(--space-5) 0;
    background: linear-gradient(180deg, #ffffff 0%, #a3a3a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hhq-heroSubtitle {
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-7) 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hhq-heroCtas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.hhq-heroTrust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.hhq-trustItem {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.hhq-trustIcon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Home Features Section (simple landing feature cards) */
.hhq-features {
    padding: var(--space-9) 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
}

.hhq-featuresGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.hhq-featureCard {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .hhq-featureCard:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--color-border);
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
    }

.hhq-featureIcon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

    .hhq-featureIcon svg,
    .hhq-featureIcon i {
        width: 24px;
        height: 24px;
    }

.hhq-featureIconYellow {
    background: rgba(251, 191, 36, 0.1);
    color: var(--color-yellow);
}

.hhq-featureIconBlue {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-blue);
}

.hhq-featureIconGreen {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-green);
}

.hhq-featureTitle {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text-primary);
}

.hhq-featureDesc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Home Social Proof */
.hhq-social {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-socialInner {
    text-align: center;
}

.hhq-socialLabel {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-5) 0;
    font-weight: 600;
}

.hhq-socialBadges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hhq-socialBadge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.hhq-socialIcon {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

/* =========================================================
   11) PRODUCTS PAGE (Standardized)
   ========================================================= */
.hhq-products-page {
    padding-top: 0;
}

.hhq-productsHero {
    position: relative;
    padding-top: 140px;
    padding-bottom: var(--space-9);
    overflow: hidden;
}

.hhq-productsHeroContent {
    max-width: 920px;
}

.hhq-productsTitle {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--space-4) 0 var(--space-4) 0;
}

.hhq-productsSubtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-productsHeroButtons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hhq-productsSection {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-productsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.hhq-productCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.hhq-productHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.hhq-productName {
    margin: 0;
    font-size: 18px;
}

.hhq-productBadge {
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.hhq-productSubtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 0 0;
}

.hhq-productDivider {
    height: 1px;
    background: var(--color-border-subtle);
    margin: var(--space-5) 0;
}

.hhq-productList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

    .hhq-productList li {
        display: grid;
        grid-template-columns: 18px 1fr;
        align-items: start;
        gap: var(--space-3);
        color: var(--color-text-secondary);
        font-size: 16px;
        line-height: 1.7;
    }

.hhq-productCheck {
    width: 18px;
    height: 18px;
    color: var(--color-green);
    margin-top: 2px;
}

.hhq-productCtaRow {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.hhq-productCta {
    flex: 1;
    text-align: center;
}

.hhq-productsSplit {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-productsSplitInner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
    align-items: center;
}

.hhq-productsSplitTitle {
    font-size: 38px;
    margin: 0 0 var(--space-3) 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.hhq-productsSplitDesc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-productsSplitActions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hhq-productsPanel {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hhq-productsPanelHeader {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.hhq-productsPanelTitle {
    font-size: 16px;
    font-weight: 600;
}

.hhq-productsPanelMeta {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.hhq-productsPanelBody {
    padding: var(--space-5) var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.hhq-productsMetric {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.01);
}

.hhq-productsMetricLabel {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.hhq-productsMetricValue {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hhq-productsPanelFooter {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* =========================================================
   12) FEATURES PAGE (Improved)
   ========================================================= */
.hhq-features-page {
    padding-top: 0;
}

.hhq-featuresHero {
    position: relative;
    padding-top: 140px;
    padding-bottom: var(--space-9);
    overflow: hidden;
}

.hhq-featuresHeroContent {
    max-width: 920px;
}

.hhq-featuresTitle {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--space-4) 0 var(--space-4) 0;
}

.hhq-featuresSubtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-featuresHeroButtons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hhq-featuresSection {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-featuresTabsWrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.hhq-featuresTabs {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.hhq-featuresTab {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}

    .hhq-featuresTab.is-active {
        background: rgba(255, 255, 255, 0.06);
        color: var(--color-text-primary);
    }

.hhq-featuresHeader {
    max-width: 860px;
    margin: 0 auto var(--space-7) auto;
    text-align: center;
}

.hhq-featuresSectionTitle {
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 var(--space-3) 0;
}

.hhq-featuresSectionSubtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.hhq-featuresGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.hhq-featureIconWrap {
    margin-bottom: var(--space-4);
}

.hhq-featureIcon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hhq-featureIcon svg,
    .hhq-featureIcon i {
        width: 22px;
        height: 22px;
    }

.hhq-featureBullets {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

.hhq-howGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.hhq-howStep {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: var(--space-4);
    align-items: start;
}

.hhq-howNum {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.hhq-howTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.hhq-howDesc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.hhq-matrixCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hhq-matrixHead {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
}

.hhq-matrixCol {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
}

    .hhq-matrixCol.is-highlight {
        color: var(--color-text-primary);
    }

.hhq-matrixBody {
    padding: var(--space-2) 0;
}

.hhq-matrixRow {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
    align-items: center;
    padding: 12px var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
}

    .hhq-matrixRow:first-child {
        border-top: 0;
    }

.hhq-matrixLabel {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.hhq-matrixCell {
    text-align: center;
    font-size: 16px;
}

    .hhq-matrixCell.is-highlight {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 10px;
    }

.hhq-matrixYes {
    color: rgba(16, 185, 129, 0.95);
}

.hhq-matrixNo {
    color: var(--color-text-tertiary);
}

.hhq-matrixFooter {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* =========================================================
   13) COMPLIANCE PAGE
   ========================================================= */
.hhq-compliance-page {
    padding-top: 0;
}

.hhq-complianceHero {
    position: relative;
    padding-top: 140px;
    padding-bottom: var(--space-9);
    overflow: hidden;
}

.hhq-complianceHeroContent {
    max-width: 820px;
}

.hhq-complianceTitle {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--space-4) 0 var(--space-4) 0;
}

.hhq-complianceSubtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-complianceHeroChips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hhq-complianceSection {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-complianceSectionHeader {
    max-width: 780px;
    margin: 0 auto var(--space-7) auto;
    text-align: center;
}

.hhq-complianceSectionTitle {
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 var(--space-3) 0;
}

.hhq-complianceSectionSubtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.hhq-complianceGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.hhq-complianceCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.hhq-complianceIcon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

    .hhq-complianceIcon svg,
    .hhq-complianceIcon i {
        width: 22px;
        height: 22px;
    }

.hhq-complianceCardTitle {
    font-size: 18px;
    margin: 0 0 var(--space-2) 0;
}

.hhq-complianceCardDesc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
}

.hhq-complianceList {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

.hhq-complianceSplit {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-complianceSplitInner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
    align-items: center;
}

.hhq-complianceSplitBadge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 16px;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: var(--space-4);
}

.hhq-complianceSplitTitle {
    font-size: 38px;
    margin: 0 0 var(--space-3) 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.hhq-complianceSplitDesc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-complianceSplitList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
}

    .hhq-complianceSplitList li {
        display: grid;
        grid-template-columns: 14px 1fr;
        gap: var(--space-3);
        align-items: start;
    }

.hhq-checkDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 8px;
    background: var(--color-green);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
}

.hhq-complianceSplitList strong {
    display: block;
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.hhq-complianceSplitList p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.hhq-compliancePanel {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.hhq-compliancePanelHeader {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.hhq-compliancePanelTitle {
    font-size: 16px;
    font-weight: 600;
}

.hhq-compliancePanelMeta {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.hhq-complianceRows {
    padding: var(--space-4) var(--space-6);
    display: grid;
    gap: var(--space-3);
}

.hhq-complianceRow {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.01);
}

.hhq-complianceRowLeft {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.hhq-rowTitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hhq-rowRight {
    font-size: 16px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.hhq-compliancePanelFooter {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.hhq-complianceCta {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-complianceCtaInner {
    text-align: center;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
}

.hhq-complianceCtaTitle {
    font-size: 34px;
    margin: 0 0 var(--space-3) 0;
}

.hhq-complianceCtaSubtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-complianceCtaButtons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =========================================================
   14) PRICING PAGE
   ========================================================= */
.hhq-pricing-page {
    padding-top: 0;
}

.hhq-pricingHero {
    position: relative;
    padding-top: 140px;
    padding-bottom: var(--space-9);
    overflow: hidden;
}

.hhq-pricingHeroContent {
    max-width: 820px;
}

.hhq-pricingTitle {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--space-4) 0 var(--space-4) 0;
}

.hhq-pricingSubtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.hhq-billingToggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.hhq-toggleBtn {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
}

    .hhq-toggleBtn.is-active {
        background: rgba(255, 255, 255, 0.06);
        color: var(--color-text-primary);
    }

.hhq-togglePill {
    margin-left: 8px;
    font-size: 16px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: rgba(16, 185, 129, 0.9);
    background: rgba(16, 185, 129, 0.08);
}

.hhq-planGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.hhq-planCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .hhq-planCard.is-featured {
        border-color: rgba(251, 191, 36, 0.25);
        box-shadow: var(--shadow-xl);
        transform: translateY(-6px);
    }

.hhq-planTop {
    padding: var(--space-6);
}

.hhq-planHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.hhq-planName {
    margin: 0;
    font-size: 18px;
}

.hhq-planBadge {
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.02);
}

    .hhq-planBadge.is-featured {
        border-color: rgba(251, 191, 36, 0.25);
        color: rgba(251, 191, 36, 0.95);
        background: rgba(251, 191, 36, 0.06);
    }

.hhq-planPriceRow {
    margin-top: var(--space-5);
    display: grid;
    gap: 6px;
}

.hhq-planPrice {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hhq-planPriceCustom {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hhq-planPeriod {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.hhq-planCta {
    width: 100%;
    margin-top: var(--space-5);
    text-align: center;
}

.hhq-planBody {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
    flex: 1;
}

.hhq-planDivider {
    height: 1px;
    background: var(--color-border-subtle);
    margin-bottom: var(--space-5);
}

.hhq-planList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

    .hhq-planList li {
        display: grid;
        grid-template-columns: 18px 1fr;
        align-items: start;
        gap: var(--space-3);
        color: var(--color-text-secondary);
        font-size: 16px;
        line-height: 1.7;
    }

.hhq-planCheck {
    width: 18px;
    height: 18px;
    color: var(--color-green);
    margin-top: 2px;
}

.hhq-pricingFootnote {
    margin-top: var(--space-7);
}

.hhq-pricingNoteCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.hhq-pricingNoteTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.hhq-pricingNoteGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.hhq-pricingNoteItem {
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.01);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: 16px;
    color: var(--color-text-secondary);
    text-align: center;
}

.hhq-pricingSection {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border-subtle);
}

.hhq-pricingSectionHeader {
    max-width: 780px;
    margin: 0 auto var(--space-7) auto;
    text-align: center;
}

.hhq-pricingSectionTitle {
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 var(--space-3) 0;
}

.hhq-pricingSectionSubtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.hhq-faqGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.hhq-faqItem {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

.hhq-faqQ {
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    list-style: none;
}

.hhq-faqItem summary::-webkit-details-marker {
    display: none;
}

.hhq-faqA {
    margin-top: var(--space-3);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.hhq-pricingCtaRow {
    margin-top: var(--space-7);
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =========================================================
   15) Responsive (Pages)
   ========================================================= */
@media (max-width: 1024px) {
    .hhq-productsGrid {
        grid-template-columns: 1fr;
    }

    .hhq-productsSplitInner {
        grid-template-columns: 1fr;
    }

    .hhq-featuresGrid {
        grid-template-columns: 1fr;
    }

    .hhq-howGrid {
        grid-template-columns: 1fr;
    }

    .hhq-matrixHead,
    .hhq-matrixRow {
        grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    }

    .hhq-complianceGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hhq-complianceSplitInner {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }

    .hhq-planGrid {
        grid-template-columns: 1fr;
    }

    .hhq-planCard.is-featured {
        transform: none;
    }

    .hhq-pricingNoteGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Home */
    .hhq-hero {
        padding-top: 140px;
        padding-bottom: var(--space-8);
    }

    .hhq-heroTitle {
        font-size: 42px;
    }

    .hhq-heroSubtitle {
        font-size: 17px;
    }

    .hhq-heroCtas {
        flex-direction: column;
        width: 100%;
    }

        .hhq-heroCtas .hhq-btn {
            width: 100%;
        }

    .hhq-heroTrust {
        flex-direction: column;
        gap: var(--space-4);
    }

    .hhq-featuresGrid {
        grid-template-columns: 1fr;
    }

    /* Products */
    .hhq-productsHero {
        padding-top: 120px;
        padding-bottom: var(--space-8);
    }

    .hhq-productsTitle {
        font-size: 38px;
    }

    .hhq-productsSection,
    .hhq-productsSplit {
        padding: var(--space-8) 0;
    }

    .hhq-productsPanelHeader {
        flex-direction: column;
        align-items: flex-start;
    }

    .hhq-productCtaRow {
        flex-direction: column;
    }

    /* Features */
    .hhq-featuresHero {
        padding-top: 120px;
        padding-bottom: var(--space-8);
    }

    .hhq-featuresTitle {
        font-size: 38px;
    }

    .hhq-featuresSection {
        padding: var(--space-8) 0;
    }

    .hhq-matrixHead {
        display: none;
    }

    .hhq-matrixRow {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: var(--space-5) var(--space-6);
    }

    .hhq-matrixCell {
        text-align: left;
    }

        .hhq-matrixCell.is-highlight {
            padding: 8px 10px;
        }

    /* Compliance + Pricing */
    .hhq-complianceHero,
    .hhq-pricingHero {
        padding-top: 120px;
        padding-bottom: var(--space-8);
    }

    .hhq-complianceTitle,
    .hhq-pricingTitle {
        font-size: 38px;
    }

    .hhq-complianceSection,
    .hhq-complianceSplit,
    .hhq-complianceCta,
    .hhq-pricingSection {
        padding: var(--space-8) 0;
    }

    .hhq-faqGrid {
        grid-template-columns: 1fr;
    }

    .hhq-pricingNoteGrid {
        grid-template-columns: 1fr;
    }

    .hhq-compliancePanelHeader {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .hhq-complianceGrid {
        grid-template-columns: 1fr;
    }

    .hhq-compliancePanelFooter {
        flex-direction: column;
    }

        .hhq-compliancePanelFooter .hhq-btn {
            width: 100%;
        }
}

/* =========================
   AUTH PAGES: Login / Register
   Add to bottom of hivehq.css
   ========================= */

.hhq-auth-page {
    min-height: 100vh;
}

.hhq-auth-hero {
    position: relative;
    padding-top: 140px;
    padding-bottom: var(--space-9);
    overflow: hidden;
}

.hhq-auth-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
    align-items: start;
}

.hhq-auth-left {
    padding-top: var(--space-4);
}

.hhq-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.hhq-auth-title {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4) 0;
    background: linear-gradient(180deg, #ffffff 0%, #d4d4d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hhq-auth-subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 560px;
}

.hhq-auth-trust {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    max-width: 420px;
}

.hhq-auth-trustItem {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 16px;
}

.hhq-auth-trustIcon {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: rgba(16, 185, 129, 0.95);
    font-weight: 700;
}

.hhq-auth-miniGrid {
    margin-top: var(--space-7);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 520px;
}

.hhq-auth-miniCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

.hhq-auth-miniTitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.hhq-auth-miniDesc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Auth Card */
.hhq-auth-card {
    border: 1px solid var(--color-border);
    background: rgba(10, 10, 10, 0.7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.hhq-auth-cardHeader {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
}

.hhq-auth-cardTitle {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
}

.hhq-auth-cardSubtitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.hhq-auth-form {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-5);
}

.hhq-field {
    display: grid;
    gap: 8px;
}

.hhq-fieldRow {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
}

.hhq-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.hhq-input {
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    padding: 0 14px;
    font-size: 16px;
    outline: none;
    transition: border-color 180ms ease, background 180ms ease;
}

    .hhq-input::placeholder {
        color: rgba(163, 163, 163, 0.7);
    }

    .hhq-input:focus {
        border-color: rgba(251, 191, 36, 0.35);
        background: rgba(255, 255, 255, 0.04);
    }

    .hhq-input.is-error {
        border-color: rgba(239, 68, 68, 0.35);
    }

.hhq-helper {
    font-size: 16px;
    color: var(--color-text-tertiary);
    line-height: 1.6;
}

.hhq-helperError {
    color: rgba(239, 68, 68, 0.9);
}

.hhq-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hhq-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--color-text-secondary);
}

    .hhq-checkbox input {
        width: 16px;
        height: 16px;
        accent-color: var(--color-yellow);
    }

.hhq-checkboxBlock {
    align-items: flex-start;
}

.hhq-linkBtn {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}

    .hhq-linkBtn:hover {
        color: var(--color-text-primary);
    }

.hhq-textLink {
    color: rgba(251, 191, 36, 0.9);
    text-decoration: none;
}

    .hhq-textLink:hover {
        text-decoration: underline;
    }

.hhq-auth-submit {
    width: 100%;
}

.hhq-auth-divider {
    position: relative;
    height: 1px;
    background: var(--color-border-subtle);
    margin: 6px 0;
}

    .hhq-auth-divider span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(10, 10, 10, 0.85);
        border: 1px solid var(--color-border-subtle);
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 16px;
        color: var(--color-text-tertiary);
    }

.hhq-auth-footnote {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-tertiary);
}

/* Responsive */
@media (max-width: 1024px) {
    .hhq-auth-shell {
        grid-template-columns: 1fr;
    }

    .hhq-auth-left {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .hhq-auth-hero {
        padding-top: 120px;
        padding-bottom: var(--space-8);
    }

    .hhq-auth-title {
        font-size: 38px;
    }
}

.hhq-auth-error {
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.6;
}

.hhq-portalSection {
    padding-top: var(--space-6);
}

.hhq-portalTitle {
    margin: 0 0 var(--space-3) 0;
    font-size: 34px;
    letter-spacing: -0.02em;
}

.hhq-portalSubtitle {
    margin: 0 0 var(--space-6) 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 760px;
}

.hhq-portalGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.hhq-portalCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.hhq-portalCardLabel {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.hhq-portalCardValue {
    margin-top: var(--space-3);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

@media (max-width: 1024px) {
    .hhq-portalTopInner {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .hhq-portalNav {
        justify-content: flex-start;
    }

    .hhq-portalUserMeta {
        text-align: left;
    }

    .hhq-portalGrid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .hhq-portalGrid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   PORTAL SIDEBAR LAYOUT
   Add to bottom of hivehq.css
   ========================= */

.hhq-portalShell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr;
    background: var(--color-bg);
}

/* Sidebar */
.hhq-portalSidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--color-border-subtle);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    z-index: 50;
}

.hhq-portalSidebar {
    position: sticky;
    overflow: hidden;
}

    .hhq-portalSidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='84' height='72' viewBox='0 0 84 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(251,191,36,0.30)' stroke-width='1'%3E%3Cpath d='M21 1 L42 13 L42 37 L21 49 L0 37 L0 13 Z'/%3E%3Cpath d='M63 1 L84 13 L84 37 L63 49 L42 37 L42 13 Z'/%3E%3Cpath d='M42 37 L63 49 L63 73 L42 85 L21 73 L21 49 Z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 84px 72px;
        background-repeat: repeat;
        opacity: 0.28;
        pointer-events: none;
        mask-image: linear-gradient(0deg, black 0%, transparent 90%);
        -webkit-mask-image: linear-gradient(0deg, black 0%, transparent 90%);
    }

    .hhq-portalSidebar > * {
        position: relative;
        z-index: 1;
    }

.hhq-portalSidebarTop {
    position: relative;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-5);
}

.hhq-portalBrand {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 16px;
}

.hhq-portalBrandSub {
    margin-top: 4px;
    font-size: 16px;
    color: var(--color-text-tertiary);
}

/* Sidebar nav */
.hhq-portalNav {
    display: grid;
    gap: 8px;
    padding-top: var(--space-4);
}

    .hhq-portalNav a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--color-text-secondary);
        font-size: 16px;
        font-weight: 700;
        border: 1px solid transparent;
        transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
    }

        .hhq-portalNav a:hover {
            background: rgba(255, 255, 255, 0.03);
            border-color: var(--color-border-subtle);
            color: var(--color-text-primary);
        }

        .hhq-portalNav a.active {
            background: rgba(255, 255, 255, 0.05);
            border-color: var(--color-border);
            color: var(--color-text-primary);
        }

.hhq-portalNavIcon {
    width: 22px;
    height: 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-secondary);
    font-size: 16px;
}

/* Footer user */
.hhq-portalSidebarFooter {
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
    display: grid;
    gap: var(--space-4);
}

.hhq-portalUser {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hhq-portalUserAvatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.18);
    color: rgba(251, 191, 36, 0.95);
}

.hhq-portalUserMeta {
    min-width: 0;
}

.hhq-portalUserName {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hhq-portalUserEmail {
    font-size: 16px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hhq-portalLogout {
    width: 100%;
}

/* Main */
/*.hhq-portalMain {
    min-height: 100vh;
    padding: var(--space-7);
}*/

.hhq-portalMain {
    position: relative;
    overflow: hidden;
}

    .hhq-portalMain::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='84' height='72' viewBox='0 0 84 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(251,191,36,0.10)' stroke-width='1'%3E%3Cpath d='M21 1 L42 13 L42 37 L21 49 L0 37 L0 13 Z'/%3E%3Cpath d='M63 1 L84 13 L84 37 L63 49 L42 37 L42 13 Z'/%3E%3Cpath d='M42 37 L63 49 L63 73 L42 85 L21 73 L21 49 Z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 84px 72px;
        background-repeat: repeat;
        opacity: 0.18;
        pointer-events: none;
        mask-image: radial-gradient(ellipse 80% 55% at 50% 15%, black 0%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 15%, black 0%, transparent 75%);
    }

.hhq-portalMainInner {
    position: relative;
    z-index: 1;
}

/*.hhq-portalMainInner {
    max-width: 1280px;
    margin: 0 auto;
}*/

/* Mobile top bar */
.hhq-portalMobileTop {
    display: none;
}

/* Mobile overlay */
.hhq-portalOverlay {
    display: none;
}

/* Mobile close button */
.hhq-portalClose {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .hhq-portalShell {
        grid-template-columns: 1fr;
    }

    .hhq-portalMain {
        padding-top: 86px;
    }

    .hhq-portalMobileTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border-subtle);
        background: rgba(0, 0, 0, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .hhq-portalMobileBrand {
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .hhq-portalBurger {
        width: 44px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--color-border);
        background: rgba(255, 255, 255, 0.03);
        color: var(--color-text-primary);
        cursor: pointer;
        font-size: 18px;
    }

    .hhq-portalMobileLogout {
        height: 40px;
        padding: 0 12px;
        font-size: 16px;
    }

    .hhq-portalOverlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        z-index: 55;
    }

        .hhq-portalOverlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }

    .hhq-portalSidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        transform: translateX(-105%);
        transition: transform 200ms ease;
        z-index: 58;
    }

        .hhq-portalSidebar.is-open {
            transform: translateX(0);
        }

    .hhq-portalClose {
        display: inline-flex;
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--color-border);
        background: rgba(255, 255, 255, 0.03);
        color: var(--color-text-primary);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
}

/* =========================
   FOOTER
   ========================= */

.hhq-footer {
    margin-top: var(--space-9);
    border-top: 1px solid var(--color-border-subtle);
    background: rgba(0, 0, 0, 0.92);
}

.hhq-footerInner {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: var(--space-7);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* Brand */
.hhq-footerBrand {
    max-width: 420px;
}

.hhq-footerBrandLockup {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: var(--space-4);
}

.hhq-footerBrandLogo {
    width: 175px;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

.hhq-footerBrandSub {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding-left: 2px;
}

.hhq-footerLogo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.hhq-footerTagline {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Links */
.hhq-footerLinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.hhq-footerCol {
    display: grid;
    gap: 8px;
}

.hhq-footerColTitle {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 6px;
}

.hhq-footerCol a {
    font-size: 16px;
    text-decoration: none;
    color: var(--color-text-secondary);
}

    .hhq-footerCol a:hover {
        color: var(--color-text-primary);
        text-decoration: underline;
    }

.hhq-footerMuted {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

/* Bottom bar */
.hhq-footerBottom {
    border-top: 1px solid var(--color-border-subtle);
    background: rgba(0, 0, 0, 0.96);
}

.hhq-footerBottomInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.hhq-footerSubtle {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 1024px) {
    .hhq-footerInner {
        grid-template-columns: 1fr;
    }

    .hhq-footerLinks {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hhq-footerLinks {
        grid-template-columns: 1fr;
    }

    .hhq-footerBottomInner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

/* =========================================================
   HiveHQ PORTAL THEME (Scoped Only)
   - Does NOT touch landing pages
   - Dark, enterprise (Linear/Stripe) with color accents
   ========================================================= */

/* 1) Portal tokens live ONLY on the portal shell */
.hhq-portalShell {
    /* Neutrals */
    --p-bg: #0b0f17;
    --p-bg-elevated: #0f1624;
    --p-bg-soft: #141e32;
    --p-surface: rgba(255, 255, 255, 0.035);
    --p-surface-2: rgba(255, 255, 255, 0.055);
    /* Borders + shadows */
    --p-border: rgba(255, 255, 255, 0.08);
    --p-border-soft: rgba(255, 255, 255, 0.05);
    --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --p-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    /* Text */
    --p-text: rgba(255, 255, 255, 0.92);
    --p-text-muted: rgba(255, 255, 255, 0.65);
    --p-text-soft: rgba(255, 255, 255, 0.45);
    /* Brand (HiveHQ honey) */
    --p-brand: #fbbf24;
    --p-brand-2: #f59e0b;
    --p-brand-soft: rgba(251, 191, 36, 0.16);
    /* Semantic */
    --p-success: #22c55e;
    --p-success-soft: rgba(34, 197, 94, 0.16);
    --p-warning: #f59e0b;
    --p-warning-soft: rgba(245, 158, 11, 0.16);
    --p-info: #38bdf8;
    --p-info-soft: rgba(56, 189, 248, 0.16);
    --p-danger: #ef4444;
    --p-danger-soft: rgba(239, 68, 68, 0.16);
    /* Radius */
    --p-radius: 16px;
    --p-radius-sm: 12px;
    /* Layout */
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr;
    background: radial-gradient(1200px 700px at 20% -10%, rgba(56, 189, 248, 0.10), transparent 55%), radial-gradient(900px 600px at 80% 0%, rgba(251, 191, 36, 0.10), transparent 55%), var(--p-bg);
    color: var(--p-text);
}

/* 2) Sidebar */
.hhq-portalSidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px;
    border-right: 1px solid var(--p-border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
}

.hhq-portalSidebarTop {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--p-border-soft);
    margin-bottom: 18px;
}

.hhq-portalBrand {
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 16px;
    color: var(--p-text);
}

.hhq-portalBrandSub {
    margin-top: 4px;
    font-size: 16px;
    color: var(--p-text-soft);
}

/* 3) Sidebar nav (Linear-like) */
.hhq-portalNav {
    display: grid;
    gap: 8px;
    padding-top: 8px;
}

    .hhq-portalNav a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--p-text-muted);
        font-size: 16px;
        font-weight: 800;
        border: 1px solid transparent;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

        .hhq-portalNav a:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: var(--p-border-soft);
            color: var(--p-text);
        }

        .hhq-portalNav a.active {
            background: rgba(251, 191, 36, 0.10);
            border-color: rgba(251, 191, 36, 0.22);
            color: var(--p-text);
        }

.hhq-portalNavIcon {
    width: 22px;
    height: 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--p-border-soft);
    background: rgba(255, 255, 255, 0.03);
    color: var(--p-text-soft);
    font-size: 16px;
}

/* 4) Sidebar footer user */
.hhq-portalSidebarFooter {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--p-border-soft);
    display: grid;
    gap: 14px;
}

.hhq-portalUser {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hhq-portalUserAvatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: var(--p-brand-soft);
    border: 1px solid rgba(251, 191, 36, 0.22);
    color: rgba(251, 191, 36, 0.95);
}

.hhq-portalUserName {
    font-size: 16px;
    font-weight: 900;
    color: var(--p-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hhq-portalUserEmail {
    font-size: 16px;
    color: var(--p-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5) Main */
.hhq-portalMain {
    padding: 28px;
}

.hhq-portalMainInner {
    max-width: 1280px;
    margin: 0 auto;
}

.hhq-portalTitle {
    margin: 0 0 10px 0;
    font-size: 34px;
    letter-spacing: -0.02em;
    color: var(--p-text);
}

.hhq-portalSubtitle {
    margin: 0 0 22px 0;
    color: var(--p-text-muted);
    line-height: 1.7;
    max-width: 760px;
}

/* 6) Cards (Stripe-ish) */
.hhq-card,
.hhq-portalCard {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow-sm);
}

.hhq-card {
    padding: 18px;
}

.hhq-cardHeaderRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hhq-cardTitle {
    font-size: 16px;
    font-weight: 900;
    color: var(--p-text);
    letter-spacing: -0.01em;
}

.hhq-cardSub {
    font-size: 16px;
    color: var(--p-text-soft);
}

/* 7) KPI grid */
.hhq-kpiGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hhq-kpiValue {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.02em;
    color: var(--p-text);
}

.hhq-kpiMetaRow {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 8) Chips + pills (color lives here) */
.hhq-chipLight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--p-border-soft);
    background: rgba(255, 255, 255, 0.03);
    color: var(--p-text-muted);
    font-size: 16px;
    font-weight: 800;
}

.hhq-pillBrand {
    border-color: rgba(251, 191, 36, 0.22);
    background: rgba(251, 191, 36, 0.12);
    color: rgba(251, 191, 36, 0.95);
}

.hhq-pillSuccess {
    border-color: rgba(34, 197, 94, 0.22);
    background: rgba(34, 197, 94, 0.12);
    color: rgba(34, 197, 94, 0.95);
}

.hhq-pillInfo {
    border-color: rgba(56, 189, 248, 0.22);
    background: rgba(56, 189, 248, 0.12);
    color: rgba(56, 189, 248, 0.95);
}

.hhq-pillWarn {
    border-color: rgba(245, 158, 11, 0.22);
    background: rgba(245, 158, 11, 0.12);
    color: rgba(245, 158, 11, 0.95);
}

/* 9) Buttons (portal-specific) */
.hhq-btnPortalPrimary {
    background: linear-gradient(180deg, var(--p-brand) 0%, var(--p-brand-2) 100%);
    color: #111827;
    border: 1px solid rgba(251, 191, 36, 0.30);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.22);
    border-radius: 50px;
}

.hhq-btnPortalSecondary {
    background: rgba(255, 255, 255, 0.3);
    color: var(--p-text);
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow-sm);
    border-radius: 50px;
}

/* 10) Table (Nectar-ish density) */
.hhq-tableWrap {
    overflow: auto;
    border-radius: 14px;
    border: 1px solid var(--p-border-soft);
}

.hhq-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .hhq-table th {
        text-align: left;
        font-size: 16px;
        color: var(--p-text-soft);
        font-weight: 900;
        padding: 12px 14px;
        border-bottom: 1px solid var(--p-border-soft);
        background: rgba(255, 255, 255, 0.03);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .hhq-table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--p-border-soft);
        color: var(--p-text);
        font-size: 16px;
    }

    .hhq-table tr:hover td {
        background: rgba(255, 255, 255, 0.03);
    }

/* 11) Status pill */
.hhq-statusPill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    border: 1px solid var(--p-border-soft);
    background: rgba(255, 255, 255, 0.03);
    color: var(--p-text-muted);
}

.hhq-statusGood {
    border-color: rgba(34, 197, 94, 0.22);
    background: rgba(34, 197, 94, 0.12);
    color: rgba(34, 197, 94, 0.95);
}

.hhq-statusWarn {
    border-color: rgba(245, 158, 11, 0.22);
    background: rgba(245, 158, 11, 0.12);
    color: rgba(245, 158, 11, 0.95);
}

/* 12) Dashboard layout rows */
.hhq-portalRow {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 16px;
    margin-top: 16px;
}

.hhq-portalRow3 {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 16px;
    margin-top: 16px;
}

/* 13) Graph placeholder */
.hhq-graphBox {
    height: 260px;
    border-radius: 14px;
    border: 1px solid var(--p-border-soft);
    background: radial-gradient(800px 240px at 50% 0%, rgba(56, 189, 248, 0.10), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 42px);
}

/* 14) Responsive */
@media (max-width: 1024px) {
    .hhq-portalShell {
        grid-template-columns: 1fr;
    }

    .hhq-kpiGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hhq-portalRow, .hhq-portalRow3 {
        grid-template-columns: 1fr;
    }
}


/* Prevent hidden content under fixed nav */
.hhq-page {
    padding-top: var(--hhq-nav-height);
}

/* Make media fluid */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Better gutters on small phones */
@media (max-width: 480px) {
    .hhq-container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .hhq-logo {
        width: 120px;
    }
}

/* Mobile menu toggle */
.hhq-navToggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
}

.hhq-navToggleBar {
    display: block;
    height: 2px;
    width: 100%;
    background: rgba(255,255,255,0.85);
    border-radius: 999px;
}

    .hhq-navToggleBar + .hhq-navToggleBar {
        margin-top: 6px;
    }

@media (max-width: 768px) {
    .hhq-navToggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

    /* CTA can get cramped on small widths */
    .hhq-navCta {
        display: none;
    }
}

/* Mobile nav panel */
.hhq-mobileNav {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(12px);
    display: grid;
    gap: var(--space-3);
}

    .hhq-mobileNav a {
        color: var(--color-text-primary);
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
    }

.hhq-mobileCta {
    width: 100%;
    margin-top: var(--space-2);
}

/* =========================================================
   Compliance Split (Security + Integrity) - Mobile Fix
   ========================================================= */

/* Desktop defaults (safe even if you already have them) */
.hhq-complianceSplitInner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-10, 40px);
    align-items: start;
}

    /* Prevent any child from forcing horizontal overflow */
    .hhq-complianceSplitInner > * {
        min-width: 0;
    }

/* Keep the preview panel from blowing out widths */
.hhq-compliancePanel {
    width: 100%;
    max-width: 520px; /* keep it looking "card-like" on desktop */
    margin-left: auto;
}

/* Make rows wrap correctly even if long text exists */
.hhq-complianceRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
}

.hhq-complianceRowLeft {
    min-width: 0;
}

.hhq-rowTitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------
   Mobile: stack the split layout
   ----------------------------- */
@media (max-width: 900px) {
    .hhq-complianceSplitInner {
        grid-template-columns: 1fr;
        gap: var(--space-7, 28px);
    }

    .hhq-compliancePanel {
        max-width: 100%;
        margin-left: 0;
    }
}

/* -----------------------------
   Small phones: make preview rows + buttons behave
   ----------------------------- */
@media (max-width: 520px) {
    /* Let the row become 2-line if needed */
    .hhq-complianceRow {
        align-items: flex-start;
    }

    .hhq-rowTitle {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    .hhq-rowRight {
        white-space: nowrap;
        opacity: 0.85;
        font-size: 13px;
    }

    /* Stack footer buttons so they never overflow */
    .hhq-compliancePanelFooter {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3, 12px);
    }

        .hhq-compliancePanelFooter .hhq-btn {
            width: 100%;
        }
}

/* =========================================================
   Portal Dashboard Responsive Patch
   ========================================================= */

/* Global “don’t overflow” guard for portal containers */
.hhq-portalMainInner,
.hhq-card,
.hhq-portalRow,
.hhq-portalRow3,
.hhq-kpiGrid {
    min-width: 0;
}

/* KPI grid: 4-up → 2-up → 1-up */
.hhq-kpiGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5, 20px);
}

@media (max-width: 1100px) {
    .hhq-kpiGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hhq-kpiGrid {
        grid-template-columns: 1fr;
    }
}

/* 2-column row: Activity + Compliance */
.hhq-portalRow {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: var(--space-5, 20px);
    align-items: start;
}

    .hhq-portalRow > * {
        min-width: 0;
    }

@media (max-width: 900px) {
    .hhq-portalRow {
        grid-template-columns: 1fr;
    }
}

/* 3-column row: Tasks + Inspections + Quick actions */
.hhq-portalRow3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5, 20px);
    align-items: start;
}

    .hhq-portalRow3 > * {
        min-width: 0;
    }

@media (max-width: 1100px) {
    .hhq-portalRow3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 740px) {
    .hhq-portalRow3 {
        grid-template-columns: 1fr;
    }
}

/* Card header rows: allow wrap and prevent pill overflow */
.hhq-cardHeaderRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

    .hhq-cardHeaderRow > * {
        min-width: 0;
    }

/* Let long titles wrap instead of forcing horizontal scroll */
.hhq-cardTitle,
.hhq-portalTitle {
    word-break: break-word;
}

/* Graph placeholder should never force width */
.hhq-graphBox {
    width: 100%;
    min-width: 0;
}

/* On small screens, make “View all” buttons full width for clean layout */
@media (max-width: 520px) {
    .hhq-cardHeaderRow a.hhq-btn,
    .hhq-cardHeaderRow button.hhq-btn {
        width: 100%;
        justify-content: center;
        border-radius: 50px;
    }
}

/* Tighten portal spacing on small phones */
@media (max-width: 480px) {
    .hhq-portalMainInner {
        padding-left: var(--space-4, 16px);
        padding-right: var(--space-4, 16px);
    }
}

/* =========================================================
   Portal shared layout (used by Dashboard + Hive Detail)
   ========================================================= */

.hhq-portalMainInner {
    min-width: 0;
}

/* KPI grid: 4-up → 2-up → 1-up */
.hhq-kpiGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5, 20px);
}

@media (max-width: 1100px) {
    .hhq-kpiGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hhq-kpiGrid {
        grid-template-columns: 1fr;
    }
}

/* Two-column portal row (graph + actions): stack on mobile */
.hhq-portalRow {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--space-5, 20px);
    align-items: start;
}

    .hhq-portalRow > * {
        min-width: 0;
    }

@media (max-width: 900px) {
    .hhq-portalRow {
        grid-template-columns: 1fr;
    }
}

/* Card header layout safety */
.hhq-cardHeaderRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

    .hhq-cardHeaderRow > * {
        min-width: 0;
    }

/* Graph placeholder must never overflow */
.hhq-graphBox {
    width: 100%;
    min-width: 0;
}

/* Small phones: make header buttons full width */
@media (max-width: 520px) {
    .hhq-portalMainInner .hhq-btn {
        max-width: 100%;
    }

    /* Targets the top-right Back/New inspection buttons */
    .hhq-portalMainInner > div:first-child > div:last-child {
        width: 100%;
    }

        .hhq-portalMainInner > div:first-child > div:last-child .hhq-btn {
            width: 100%;
            justify-content: center;
        }
}

/* Shell */
.hhq-portalShell {
    min-height: 100vh;
    display: flex;
    background: var(--portal-bg, #0b0d12);
}

/* Sidebar (desktop pinned) */
.hhq-portalSidebar {
    width: var(--hhq-portal-sidebar-w);
    flex: 0 0 var(--hhq-portal-sidebar-w);
    border-right: 1px solid var(--portal-border-subtle, rgba(255,255,255,0.08));
    background: var(--portal-bg, #0b0d12);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main */
.hhq-portalMain {
    flex: 1 1 auto;
    min-width: 0; /* critical for preventing overflow */
}

.hhq-portalMainInner {
    padding: 18px;
    min-width: 0;
}

/* Mobile top bar is hidden on desktop */
.hhq-portalMobileTop {
    display: none;
}

/* Overlay hidden on desktop */
.hhq-portalOverlay {
    display: none;
}

/* Hide close button on desktop */
.hhq-portalClose {
    display: none;
}

/* ---------------------------------------------------------
   Mobile Mode
   --------------------------------------------------------- */
@media (max-width: 900px) {
    .hhq-portalShell {
        display: block;
    }

    /* Top bar */
    .hhq-portalMobileTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: var(--hhq-portal-topbar-h);
        padding: 0 14px;
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(10,10,10,0.92);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--portal-border-subtle, rgba(255,255,255,0.08));
    }

    .hhq-portalMobileBrand {
        font-weight: 900;
        color: var(--portal-text, #fff);
        letter-spacing: -0.02em;
    }

    .hhq-portalBurger {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid var(--portal-border-subtle, rgba(255,255,255,0.10));
        background: rgba(255,255,255,0.03);
        color: var(--portal-text, #fff);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .hhq-portalMobileLogout {
        height: 44px;
        padding: 0 12px;
    }

    /* Main should fill width; add top padding only if needed */
    .hhq-portalMain {
        width: 100%;
    }

    .hhq-portalMainInner {
        padding: 14px;
    }

    /* Sidebar becomes off-canvas drawer */
    .hhq-portalSidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(var(--hhq-portal-sidebar-w), 88vw);
        max-width: 360px;
        transform: translateX(-110%);
        transition: transform 180ms ease;
        z-index: 60;
        box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    }

        .hhq-portalSidebar.is-open {
            transform: translateX(0);
        }

    /* Show close button on mobile */
    .hhq-portalClose {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid var(--portal-border-subtle, rgba(255,255,255,0.10));
        background: rgba(255,255,255,0.03);
        color: var(--portal-text, #fff);
        cursor: pointer;
        margin-left: auto;
    }

    /* Overlay */
    .hhq-portalOverlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        z-index: 55;
    }

        .hhq-portalOverlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }
}

/* Extra small phones: tighten padding */
@media (max-width: 480px) {
    .hhq-portalMainInner {
        padding: 12px;
    }
}

.supportPage {
    min-height: 100vh;
    padding: 75px 16px;
    background: radial-gradient(900px 400px at 15% 0%, rgba(255, 196, 0, 0.12), transparent 55%), radial-gradient(900px 400px at 85% 0%, rgba(255, 124, 0, 0.10), transparent 55%), #05070b;
    color: rgba(255, 255, 255, 0.92);
}

.supportContainer {
    max-width: 1180px;
    margin: 0 auto;
}

.supportHeader {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.supportTitle {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.supportSubtitle {
    margin: 8px 0 0;
    max-width: 720px;
    line-height: 1.55;
    opacity: 0.85;
}

.supportCardBase {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

.supportMetaCard {
    min-width: 340px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

.supportMetaRow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.supportMetaLabel {
    opacity: 0.7;
}

.supportMetaValue {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.supportQuickGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.supportQuickCard {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 16px;
}

.supportQuickTitle {
    font-weight: 800;
    margin-bottom: 6px;
}

.supportQuickText {
    opacity: 0.82;
    line-height: 1.45;
    margin-bottom: 10px;
}

.supportSplit {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    align-items: start;
}

.supportSideCard,
.supportMainCard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 16px;
}

.supportSectionTitle {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
}

.supportLinkCard {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.18);
}

.supportLink {
    color: #ffc400;
    font-weight: 800;
    text-decoration: none;
}

    .supportLink:hover {
        text-decoration: underline;
    }

.supportSmallText {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: 0.75;
    line-height: 1.35;
}

.supportTipBox {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.18);
}

.supportTipTitle {
    font-weight: 800;
    margin-bottom: 8px;
}

.supportForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.supportField {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.supportLabelRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.supportLabel {
    font-weight: 800;
}

.supportOptional {
    font-size: 12px;
    opacity: 0.65;
}

.supportRow2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.supportRow3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.supportInput {
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.92);
    outline: none;
}

    .supportInput::placeholder {
        color: rgba(255, 255, 255, 0.45);
    }

    .supportInput:focus {
        border-color: rgba(255, 196, 0, 0.55);
        box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.14);
    }

.supportTextarea {
    min-height: 150px;
    resize: vertical;
}

.supportSubmitBtn {
    border: 0;
    border-radius: 50px;
    padding: 12px 14px;
    font-weight: 900;
    cursor: pointer;
    color: #0a1e3c;
    background: linear-gradient(90deg, #ff7c00, #ffc400);
}

    .supportSubmitBtn:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

.supportDisclaimer {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.65;
}

.supportAlert {
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.24);
}

    .supportAlert.error {
        border-color: rgba(255, 74, 74, 0.45);
        background: rgba(255, 74, 74, 0.12);
    }

    .supportAlert.success {
        border-color: rgba(82, 222, 161, 0.45);
        background: rgba(82, 222, 161, 0.12);
    }

.supportList {
    margin: 0;
    padding-left: 18px;
    line-height: 1.6;
    opacity: 0.85;
}

@media (max-width: 1100px) {
    .supportQuickGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .supportSplit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .supportRow2,
    .supportRow3 {
        grid-template-columns: 1fr;
    }

    .supportTitle {
        font-size: 34px;
    }
}

.legalPage {
    min-height: 100vh;
    padding: 75px 16px;
    background: #05070b;
    color: rgba(255,255,255,0.92);
}

.legalContainer {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

    .legalContainer h1 {
        font-size: 40px;
        margin-bottom: 10px;
    }

.legalUpdated {
    opacity: 0.6;
    margin-bottom: 30px;
}

.legalContainer h2 {
    margin-top: 28px;
    font-size: 20px;
}

.legalContainer ul {
    padding-left: 20px;
}

#blazor-error-ui {
    display: none;
}

.hhq-login-page {
    background: #000;
}

.hhq-loginHero {
    position: relative;
    padding: 120px 0;
}

.hhq-loginInner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 80px;
    align-items: center;
}

@media (max-width: 900px) {
    .hhq-loginInner {
        grid-template-columns: 1fr;
    }
}

.hhq-loginLeft {
    max-width: 520px;
}

.hhq-loginTitle {
    font-size: 56px;
    font-weight: 700;
    margin: 20px 0;
}

.hhq-loginSubtitle {
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    line-height: 1.6;
}

.hhq-loginChecklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .hhq-loginChecklist li {
        margin-bottom: 12px;
        color: rgba(255,255,255,0.8);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .hhq-loginChecklist li::before {
            content: "✓";
            color: #22c55e;
            font-weight: bold;
        }

.hhq-loginCard {
    background: rgba(20,20,20,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.hhq-loginCardHeader h2 {
    margin: 0;
}

.hhq-loginCardHeader p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
}

.hhq-formGroup {
    margin-bottom: 18px;
}

    .hhq-formGroup label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        color: rgba(255,255,255,0.8);
    }

.hhq-formLabelRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hhq-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.5);
    color: #fff;
}

    .hhq-input:focus {
        outline: none;
        border-color: #fbbf24;
    }

.hhq-loginOptions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.hhq-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.hhq-link {
    color: #fbbf24;
    cursor: pointer;
    font-size: 14px;
}

.hhq-btnFull {
    width: 100%;
}

.hhq-loginDivider {
    text-align: center;
    margin: 18px 0;
    color: rgba(255,255,255,0.4);
    position: relative;
}

    .hhq-loginDivider::before,
    .hhq-loginDivider::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background: rgba(255,255,255,0.1);
    }

    .hhq-loginDivider::before {
        left: 0;
    }

    .hhq-loginDivider::after {
        right: 0;
    }

.hhq-loginTerms {
    margin-top: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

    .hhq-loginTerms a {
        color: #fbbf24;
    }

.hhq-error {
    background: rgba(255,0,0,0.1);
    border: 1px solid rgba(255,0,0,0.3);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    color: #ff6b6b;
}

.hhq-compliancePolicyGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.hhq-compliancePolicyCard {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

    .hhq-compliancePolicyCard h3 {
        font-size: 16px;
        margin: 0 0 var(--space-3) 0;
        color: var(--color-text-primary);
    }

    .hhq-compliancePolicyCard p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-text-secondary);
        margin: 0;
    }

.hhq-compliancePanel .hhq-checkDot {
    margin-top: 0;
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    .hhq-compliancePolicyGrid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .hhq-compliancePolicyGrid {
        grid-template-columns: 1fr;
    }
}



.hhq-sidebar-logout {
    color: #ffb4a8;
}

.hhq-portal-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #66815f;
    font-weight: 800;
}

.hhq-portal-pageTitle {
    margin: 4px 0 0;
    font-size: 26px;
    line-height: 1.1;
    color: #132416;
}

/*.hhq-yardPage {
    max-width: 980px;
    margin: 0 auto;
}

.hhq-yardHeroCard,
.hhq-yardCard {
    background: rgba(255, 255, 255, 0.96);
    color: #071f3d;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

.hhq-yardHeroCard {
    padding: 28px;
}

.hhq-yardHeroTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hhq-yardTitle {
    margin: 0;
    font-size: 44px;
    font-weight: 950;
    letter-spacing: -0.04em;
    color: #071f3d;
}

.hhq-yardSubtitle {
    margin: 8px 0 0;
    font-size: 20px;
    color: #66748a;
}

.hhq-yardTotal {
    margin-top: 12px;
    font-size: 24px;
    font-weight: 950;
    color: #071f3d;
}

.hhq-yardAddBtn {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ff9700, #ffe100);
    color: #071f3d;
    font-size: 42px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(255, 174, 0, 0.28);
}

.hhq-yardSearch {
    width: 100%;
    margin-top: 24px;
    height: 62px;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #071f3d;
    padding: 0 22px;
    font-size: 22px;
    outline: none;
}

    .hhq-yardSearch::placeholder {
        color: #66748a;
    }

    .hhq-yardSearch:focus {
        border-color: rgba(251, 191, 36, 0.8);
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18);
    }

.hhq-yardList {
    display: grid;
    gap: 22px;
    margin-top: 26px;
}

.hhq-yardCard {
    padding: 26px;
}

.hhq-yardCardTop {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.hhq-yardCardTitle {
    margin: 0;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.03em;
    color: #071f3d;
}

.hhq-yardHiveCount {
    margin-top: 10px;
    font-size: 20px;
    color: #66748a;
}

.hhq-yardCodePill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9700, #ffe100);
    color: #071f3d;
    font-size: 20px;
    font-weight: 950;
    white-space: nowrap;
}

.hhq-yardAddress {
    margin-top: 18px;
    font-size: 20px;
    line-height: 1.45;
    color: #66748a;
    max-width: 620px;
}

.hhq-yardCardActions {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hhq-yardBtn {
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 950;
    cursor: pointer;
}

.hhq-yardBtnLight {
    background: #ffffff;
    color: #071f3d;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.hhq-yardBtnPrimary {
    background: linear-gradient(135deg, #ff9700, #ffe100);
    color: #071f3d;
    border: none;
}

.hhq-yardStatusPill {
    margin-left: auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #071f3d;
    font-size: 20px;
}

.hhq-yardStatusDot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
}

@media (max-width: 720px) {
    .hhq-yardHeroCard,
    .hhq-yardCard {
        border-radius: 24px;
    }

    .hhq-yardHeroCard,
    .hhq-yardCard {
        padding: 22px;
    }

    .hhq-yardTitle {
        font-size: 38px;
    }

    .hhq-yardSubtitle,
    .hhq-yardAddress,
    .hhq-yardHiveCount,
    .hhq-yardStatusPill {
        font-size: 18px;
    }

    .hhq-yardAddBtn {
        width: 58px;
        height: 58px;
        font-size: 36px;
    }

    .hhq-yardSearch {
        height: 56px;
        font-size: 18px;
    }

    .hhq-yardCardActions {
        align-items: stretch;
    }

    .hhq-yardStatusPill {
        margin-left: 0;
    }
}*/

.hhq-yardPage {
    max-width: 1320px;
    margin: 0 auto;
}

.hhq-yardHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.hhq-yardToolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.hhq-yardSearch {
    height: 46px;
    min-width: 360px;
    border-radius: 14px;
    border: 1px solid var(--p-border);
    background: rgba(255,255,255,0.04);
    color: var(--p-text);
    padding: 0 14px;
    font-size: 15px;
    outline: none;
}

    .hhq-yardSearch::placeholder {
        color: var(--p-text-soft);
    }

    .hhq-yardSearch:focus {
        border-color: rgba(251, 191, 36, 0.45);
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.10);
    }

.hhq-yardEnterpriseGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.hhq-yardEnterpriseCard {
    border: 1px solid var(--p-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--p-shadow-sm);
}

.hhq-yardEnterpriseTop {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.hhq-yardEnterpriseName {
    margin: 0;
    color: var(--p-text);
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.hhq-yardEnterpriseMeta {
    margin-top: 6px;
    color: var(--p-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.hhq-yardCodePill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.14);
    color: rgba(251, 191, 36, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.24);
    font-weight: 950;
    white-space: nowrap;
}

.hhq-yardEnterpriseStats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .hhq-yardEnterpriseStats {
        grid-template-columns: 1fr; /* stack on mobile */
    }
}

.hhq-yardStatBox {
    border: 1px solid var(--p-border-soft);
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 12px;
}

.hhq-yardStatLabel {
    color: var(--p-text-soft);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hhq-yardStatValue {
    margin-top: 5px;
    color: var(--p-text);
    font-size: 16px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hhq-yardEnterpriseFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--p-border-soft);
}

.hhq-yardActionGroup {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hhq-yardStatusPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--p-border-soft);
    background: rgba(255,255,255,0.03);
    color: var(--p-text-muted);
    font-size: 14px;
    font-weight: 800;
}

.hhq-yardStatusDot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

@media (max-width: 1100px) {
    .hhq-yardEnterpriseGrid {
        grid-template-columns: 1fr;
    }

    .hhq-yardSearch {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .hhq-yardEnterpriseStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hhq-hivePage {
    max-width: 1320px;
    margin: 0 auto;
}

.hhq-hiveHeaderText {
    flex: 1;
    min-width: 0;
}

.hhq-hiveHeader {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.hhq-hiveBackBtn,
.hhq-hiveAddBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--p-border);
    cursor: pointer;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 28px;
    line-height: 0;
}

.hhq-hiveBackBtn {
    background: rgba(255,255,255,0.04);
    color: var(--p-text);
}

.hhq-hiveAddBtn {
    margin-left: auto;
    background: linear-gradient(135deg, #ff9700, #ffe100);
    color: #071f3d;
    box-shadow: 0 12px 24px rgba(255, 174, 0, 0.22);
}

.hhq-hiveGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hhq-hiveCard {
    border: 1px solid var(--p-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--p-shadow-sm);
}

.hhq-hiveCardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.hhq-hiveName {
    margin: 0;
    color: var(--p-text);
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.hhq-hiveMeta {
    margin-top: 6px;
    color: var(--p-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.hhq-hiveFooter {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--p-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .hhq-hiveGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .hhq-hiveHeader {
        align-items: flex-start;
    }

    .hhq-hiveBackBtn {
        width: 48px;
        height: 48px;
        font-size: 34px;
    }

    .hhq-hiveAddBtn {
        width: 52px;
        height: 52px;
        font-size: 34px;
    }
}

.hhq-yardDetailPage {
    max-width: 1180px;
    margin: 0 auto;
}

.hhq-yardDetailHeader {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.hhq-yardDetailCard {
    border: 1px solid var(--p-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--p-shadow-sm);
    margin-bottom: 18px;
}

.hhq-yardDetailCardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .hhq-yardDetailCardHeader h2 {
        margin: 0;
        color: var(--p-text);
        font-size: 24px;
        font-weight: 950;
        letter-spacing: -0.02em;
    }

.hhq-yardDetailActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hhq-yardDetailAddress {
    white-space: pre-line;
    color: var(--p-text-muted);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 20px;
}

.hhq-yardSummaryGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hhq-yardSummaryBox {
    border: 1px solid var(--p-border);
    background: rgba(255,255,255,0.035);
    border-radius: 18px;
    padding: 18px;
}

.hhq-yardSummaryLabel {
    color: var(--p-text-muted);
    font-size: 14px;
    font-weight: 900;
}

.hhq-yardSummaryValue {
    margin-top: 8px;
    color: var(--p-text);
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.hhq-yardNoteList {
    display: grid;
    gap: 12px;
}

.hhq-yardNoteRow {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--p-border-soft);
    padding-bottom: 14px;
}

.hhq-yardNoteText {
    color: var(--p-text);
    font-size: 18px;
    font-weight: 900;
}

.hhq-yardNoteMeta {
    margin-top: 6px;
    color: var(--p-text-muted);
    font-size: 14px;
    font-weight: 700;
}

.hhq-iconButton {
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--p-border);
    background: rgba(255,255,255,0.04);
    color: var(--p-text);
    cursor: pointer;
    font-weight: 900;
}

.hhq-yardPhotoGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.hhq-yardPhotoTile {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--p-border);
    background: rgba(255,255,255,0.035);
}

    .hhq-yardPhotoTile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hhq-yardRecentList {
    display: grid;
    gap: 12px;
}

@media (max-width: 900px) {
    .hhq-yardSummaryGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hhq-yardPhotoGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .hhq-yardDetailHeader {
        align-items: flex-start;
    }

    .hhq-yardSummaryGrid {
        grid-template-columns: 1fr;
    }

    .hhq-yardPhotoGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hhq-hiveDetailPage {
    max-width: 1180px;
    margin: 0 auto;
}

.hhq-hiveHealthText {
    color: var(--p-text-muted);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    border-left: 4px solid var(--p-success);
    padding-left: 14px;
}

/* ===== HiveHQ Syncfusion Dialog ===== */

.hhq-sync-dialog.e-dialog {
    position: relative;
    overflow: hidden;
    /*background: radial-gradient(circle at 15% 0%, rgba(252,186,3,0.18), transparent 38%), linear-gradient(180deg, #10151f 0%, #090b10 100%);*/
    background: #0b0d12;
    border: 1px solid rgba(252,186,3,0.28);
    border-radius: 22px;
    color: rgba(255,255,255,0.94);
    box-shadow: 
        0 0 0 1px rgba(252,186,3,0.10), 
        0 22px 70px rgba(0,0,0,0.70), 
        0 0 75px rgba(252,186,3,0.26), 
        0 0 100px rgba(252,186,3,0.16);
}

    .hhq-sync-dialog.e-dialog::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg width='84' height='72' viewBox='0 0 84 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(252,186,3,0.18)' stroke-width='1'%3E%3Cpath d='M21 1 L42 13 L42 37 L21 49 L0 37 L0 13 Z'/%3E%3Cpath d='M63 1 L84 13 L84 37 L63 49 L42 37 L42 13 Z'/%3E%3Cpath d='M42 37 L63 49 L63 73 L42 85 L21 73 L21 49 Z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 84px 72px;
        opacity: 0.20;
        mask-image: linear-gradient(135deg, black 0%, transparent 62%);
        -webkit-mask-image: linear-gradient(135deg, black 0%, transparent 62%);
    }

.hhq-sync-dialog .e-dlg-header-content,
.hhq-sync-dialog .e-dlg-content,
.hhq-sync-dialog .e-footer-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

.hhq-sync-dialog .e-dlg-header {
    color: rgba(255,255,255,0.96);
    font-size: 21px;
    font-weight: 950;
}

.hhq-sync-dialog .e-dlg-content {
    padding-top: 12px;
}

.hhq-sync-dialog textarea.e-input,
.hhq-sync-dialog input.e-input,
.hhq-sync-dialog .e-input {
    background: rgba(255,255,255,0.92);
    color: #071f3d;
    border-radius: 12px;
}

.hhq-sync-dialog .e-btn.hhq-dialogBtnSecondary {
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-weight: 900;
}

.hhq-sync-dialog .e-btn.hhq-dialogBtnPrimary {
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a00, #ffe100);
    border: 1px solid rgba(252,186,3,0.45);
    color: #071f3d;
    font-weight: 950;
    box-shadow: 0 0 18px rgba(252,186,3,0.35), 0 10px 24px rgba(0,0,0,0.35);
}

.hhq-sync-dialog .e-btn.hhq-dialogBtnDelete {
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: none;
    border: 1px solid #ff7373;   
    color: #ff7373;
    font-weight: 900;
}

.hhq-editPage {
    max-width: 860px;
    margin: 0 auto;
}

.hhq-editPanel {
    border: 1px solid var(--p-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border-radius: 24px;
    padding: 26px;
    box-shadow: var(--p-shadow-md);
}

.hhq-editHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.hhq-editTitle {
    margin: 0;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: -0.03em;
    color: var(--p-text);
}

.hhq-editSubtitle {
    margin: 8px 0 0;
    color: var(--p-text-muted);
    font-size: 16px;
}

.hhq-editClose {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--p-border);
    background: rgba(255,255,255,0.04);
    color: var(--p-text);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.hhq-editForm {
    display: grid;
    gap: 16px;
}

.hhq-editField {
    display: grid;
    gap: 8px;
}

    .hhq-editField label {
        color: var(--p-text-muted);
        font-size: 15px;
        font-weight: 900;
    }

.hhq-editGrid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hhq-editPin {
    color: var(--p-text-muted);
    font-weight: 800;
    font-size: 15px;
}

.hhq-editSave {
    margin-top: 12px;
    width: 100%;
    height: 56px;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ff7a00, #ffee00) !important;
    color: #071f3d !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    border: none !important;
}

.hhq-editDelete {
    width: 100%;
    height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.65);
    background: transparent;
    color: #ff7373;
    font-size: 18px;
    font-weight: 950;
    cursor: pointer;
}

.hhq-editPanel .e-input-group,
.hhq-editPanel .e-control-wrapper,
.hhq-editPanel .e-ddl,
.hhq-editPanel .e-numerictextbox {
    border-radius: 16px !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--p-border) !important;
    color: var(--p-text) !important;
    min-height: 50px;
}

.hhq-editPanel input.e-input,
.hhq-editPanel .e-input {
    color: var(--p-text) !important;
    font-weight: 800;
}

@media (max-width: 720px) {
    .hhq-editGrid2 {
        grid-template-columns: 1fr;
    }

    .hhq-editPanel {
        padding: 20px;
        border-radius: 20px;
    }
}

.skeleton-base {
    position: relative;
    overflow: hidden;
    background: #a2a2a3;
    border-radius: 6px;
}

    .skeleton-base::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150px;
        height: 100%;
        width: 150px;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.6), transparent );
        animation: skeleton-loading 1.2s infinite;
    }

@keyframes skeleton-loading {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}

.hhq-sync-dialog .hhq-dialogFieldLabel {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.74);
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.hhq-sync-dialog .hhq-dialogInput.e-input-group,
.hhq-sync-dialog .hhq-dialogInput.e-control-wrapper,
.hhq-sync-dialog .hhq-dialogInput.e-ddl,
.hhq-sync-dialog .hhq-dialogInput.e-numerictextbox {
    min-height: 64px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.hhq-sync-dialog .hhq-dialogInput input.e-input,
.hhq-sync-dialog .hhq-dialogInput .e-input {
    height: 62px !important;
    padding: 0 18px !important;
    background: transparent !important;
    color: rgba(255,255,255,0.96) !important;
    font-size: 18px !important;
    font-weight: 650 !important;
}

.hhq-sync-dialog .hhq-dialogInput .e-input-group-icon,
.hhq-sync-dialog .hhq-dialogInput .e-ddl-icon,
.hhq-sync-dialog .hhq-dialogInput .e-numeric-updown {
    color: rgba(255,255,255,0.55) !important;
}

.hhq-sync-dialog .hhq-dialogInput.e-input-focus,
.hhq-sync-dialog .hhq-dialogInput.e-control-wrapper.e-input-focus {
    border-color: rgba(251,191,36,0.42) !important;
    box-shadow: 0 0 0 4px rgba(251,191,36,0.10), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Dropdown popup container */
.hhq-sync-dialog .e-ddl.e-popup,
.hhq-sync-dialog .e-dropdownbase.e-popup {
    background: rgba(10, 14, 24, 0.98) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(12px);
}

/* Dropdown items */
.hhq-sync-dialog .e-dropdownbase .e-list-item {
    color: rgba(255,255,255,0.9) !important;
    background: transparent !important;
    font-size: 16px;
    padding: 12px 16px;
}

    /* Hover */
    .hhq-sync-dialog .e-dropdownbase .e-list-item:hover {
        background: rgba(251,191,36,0.08) !important;
    }

    /* Selected */
    .hhq-sync-dialog .e-dropdownbase .e-list-item.e-active {
        background: rgba(251,191,36,0.18) !important;
        color: #fff !important;
        font-weight: 600;
    }

    /* Focused (keyboard nav) */
    .hhq-sync-dialog .e-dropdownbase .e-list-item.e-hover {
        background: rgba(255,255,255,0.06) !important;
    }

/* Scrollbar (optional but clean) */
.hhq-sync-dialog .e-dropdownbase::-webkit-scrollbar {
    width: 6px;
}

.hhq-sync-dialog .e-dropdownbase::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

.hhq-addressSuggestions {
    position: absolute;
    z-index: 999999;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    background: rgba(10, 14, 24, 0.98);
    border: 1px solid rgba(251,191,36,0.24);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}

.hhq-addressSuggestion {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    color: rgba(255,255,255,0.92);
    text-align: left;
    font-weight: 700;
    cursor: pointer;
}

    .hhq-addressSuggestion:hover {
        background: rgba(251,191,36,0.12);
    }

.hhq-yardMapPage {
    max-width: 1380px;
    margin: 0 auto;
}

.hhq-yardMapShell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}

.hhq-yardMap {
    min-height: 680px;
    border: 1px solid var(--p-border);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)), url("data:image/svg+xml,%3Csvg width='84' height='72' viewBox='0 0 84 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(251,191,36,0.08)' stroke-width='1'%3E%3Cpath d='M21 1 L42 13 L42 37 L21 49 L0 37 L0 13 Z'/%3E%3Cpath d='M63 1 L84 13 L84 37 L63 49 L42 37 L42 13 Z'/%3E%3Cpath d='M42 37 L63 49 L63 73 L42 85 L21 73 L21 49 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: auto, 84px 72px;
}

.hhq-yardMapPanel {
    border: 1px solid var(--p-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
    border-radius: 24px;
    padding: 18px;
    height: fit-content;
}

.hhq-yardMapList {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.hhq-yardMapItem {
    width: 100%;
    border: 1px solid var(--p-border-soft);
    background: rgba(255,255,255,0.035);
    border-radius: 16px;
    padding: 14px;
    color: var(--p-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

    .hhq-yardMapItem strong {
        display: block;
        font-size: 15px;
        font-weight: 950;
    }

    .hhq-yardMapItem span {
        display: block;
        color: var(--p-text-muted);
        font-size: 13px;
        margin-top: 4px;
    }

@media (max-width: 1100px) {
    .hhq-yardMapShell {
        grid-template-columns: 1fr;
    }

    .hhq-yardMap {
        min-height: 520px;
    }
}