/* === Onboarding wizard === */
.bcx-onboard-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    padding: 12px 0;
    margin-top: 8px;
    transition: background 0.15s;
    cursor: pointer;
    box-shadow: 0 1px 4px #2563eb22;
}

.bcx-onboard-btn:hover,
.bcx-onboard-btn:focus {
    background: #1d4ed8;
}

.bcx-label {
    display: block;
    margin-bottom: 16px;
    color: #334155;
    font-size: 1em;
    font-weight: 500;
}

.bcx-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 1em;
    margin-top: 6px;
    background: #f1f5f9;
    color: #1e293b;
    transition: border 0.15s;
}

.bcx-input:focus {
    border-color: #2563eb;
    outline: none;
}

@media (max-width: 600px) {
    .bcx-onboard-shell {
        min-height: 100dvh;
    }

    .bcx-onboard-card {
        max-width: 98vw;
    }
}

/* B-connex — modern UX baseline. Single sheet for POC. */
:root {
    --bg: #0e1320;
    --bg-2: #141b2d;
    --panel: #1a2236;
    --panel-2: #202a44;
    --line: #2a3556;
    --text: #e9ecf3;
    --muted: #9aa3bd;
    --accent: #4f8cff;
    --accent-2: #34d399;
    --danger: #ef4444;
    --warn: #f59e0b;
    --ok: #10b981;
    --radius: 12px;
    --shadow: 0 6px 24px rgba(0, 0, 0, .25);

    /* === Phase 12 — semantic lead/status palette ===
       Positive customer-facing flow: red attention → amber working →
       blue qualified → green converted → slate done. Reserve --danger
       strictly for system errors so the UI doesn't shout at customers
       when a brand-new lead lands. */
    --lead-new: #ff6b6b;
    /* fresh, hot, demands action */
    --lead-new-bg: rgba(255, 107, 107, .18);
    --lead-open: #f59e0b;
    /* in conversation */
    --lead-open-bg: rgba(245, 158, 11, .18);
    --lead-qualified: #38bdf8;
    /* warming, quality signal */
    --lead-qualified-bg: rgba(56, 189, 248, .18);
    --lead-engaged: #a78bfa;
    /* active back-and-forth */
    --lead-engaged-bg: rgba(167, 139, 250, .18);
    --lead-converted: #22c55e;
    /* WON — the money colour */
    --lead-converted-bg: rgba(34, 197, 94, .22);
    --lead-closed: #475569;
    /* archived, neutral */
    --lead-closed-bg: rgba(71, 85, 105, .25);
    --lead-lost: #94a3b8;
    /* lost — neutral grey, not red */
    --lead-lost-bg: rgba(148, 163, 184, .18);

    /* === Per-metric heatmap ramps (5 buckets each, b0…b4) ===
       b0 = empty/very-low neutral; b4 = peak. Default ramp is a calm
       blue/teal so the "All activity" overview reads as informative,
       not alarming. Mode-specific overrides live further down. */
    /* b0 is the cold/empty floor — kept just-visible above the dark card bg. */
    --heat-b0: #2a3a5c;
    --heat-b1: #2563eb;
    --heat-b2: #3b82f6;
    --heat-b3: #38bdf8;
    --heat-b4: #67e8f9;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

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

a:hover {
    text-decoration: underline;
}

code,
pre {
    font-family: ui-monospace, "JetBrains Mono", Consolas, Menlo, monospace;
}

.muted {
    color: var(--muted);
}

.accent {
    color: var(--accent);
}

/* ===== 5-panel shell ===== */
.bcx-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bcx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    /* 8px grid */
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}

.bcx-topbar-left,
.bcx-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    /* 8px grid */
}

.bcx-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.bcx-topnav a {
    color: var(--muted);
    margin-right: 14px;
    font-weight: 500;
}

.bcx-topnav a:hover {
    color: var(--text);
    text-decoration: none;
}

.bcx-user {
    color: var(--muted);
    margin-right: 12px;
}

.bcx-user em {
    color: var(--accent-2);
    font-style: normal;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .05em;
}

.bcx-main {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    gap: 0;
    flex: 1;
}

.bcx-sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    padding: 16px;
    /* 8px grid */
}

.bcx-rightpanel {
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    padding: 16px;
    /* 8px grid */
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 8px grid */
}

.bcx-content {
    padding: 24px 24px;
    /* 8px grid */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 8px grid */
}

.bcx-content>* {
    min-width: 0;
}

.bcx-content>.bcx-flash {
    margin: 0;
}

.bcx-side-section {
    margin-bottom: 16px;
    /* 8px grid */
}

.bcx-side-section h4 {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
}

.bcx-side-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcx-side-section li a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
}

.bcx-side-section li a:hover {
    background: var(--panel);
    text-decoration: none;
}

/* Dev-only nav items: subdued colour + italic to signal internal tools */
.bcx-side-section li a.bcx-nav-devonly {
    font-style: italic;
    color: var(--muted);
    opacity: .75;
}

.bcx-side-section li a.bcx-nav-devonly:hover {
    opacity: 1;
    color: var(--text);
}

.bcx-side-section li a.bcx-nav-devonly.on {
    opacity: 1;
}

.bcx-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    /* 8px grid */
    padding: 16px 24px;
    /* 8px grid */
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    /* Improved readability */
}

.bcx-footer-links {
    text-align: center;
    justify-self: center;
}

.bcx-footer-copy {
    text-align: right;
    justify-self: end;
}

.bcx-footer-version {
    justify-self: start;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .02em;
    opacity: .7;
}

/* ===== Logo placeholder ===== */
.bcx-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: var(--shadow);
}

.bcx-logo.sm {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

/* ===== Cards / KPIs ===== */
.bcx-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    /* 8px grid */
}

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

.bcx-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bcx-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bcx-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    /* 8px grid */
    flex-wrap: wrap;
    margin-bottom: 16px;
    /* 8px grid */
}

.bcx-page-head h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.bcx-kpis .bcx-kpi {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.bcx-kpi .label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bcx-kpi .value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
}

.bcx-kpi .delta {
    color: var(--accent-2);
    font-size: 12px;
    margin-top: 4px;
}

/* Activity */
.bcx-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcx-activity li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--line);
    display: flex;
    gap: 14px;
}

.bcx-activity time {
    color: var(--muted);
    width: 40px;
    flex: none;
}

/* Funnel */
.bcx-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bcx-funnel .bar {
    height: 36px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    width: var(--w);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    color: #0b1020;
    font-weight: 600;
}

/* Phase 12: stage-coloured funnel bars (positive flow). Each stage maps
   to its lead-status colour so the funnel reads as a journey, not as a
   monochrome bar chart. */
.bcx-funnel .bar.prospects {
    background: linear-gradient(90deg, var(--lead-new), #fb7185);
}

.bcx-funnel .bar.engaged {
    background: linear-gradient(90deg, var(--lead-open), #fbbf24);
}

.bcx-funnel .bar.replied {
    background: linear-gradient(90deg, var(--lead-engaged), #c4b5fd);
}

.bcx-funnel .bar.meeting {
    background: linear-gradient(90deg, var(--lead-qualified), #7dd3fc);
}

.bcx-funnel .bar.won {
    background: linear-gradient(90deg, var(--lead-converted), #4ade80);
    color: #052e16;
}

/* === Phase 12 — a11y + UX polish ===
   Visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.bcx-mode-tab:focus-visible,
.bcx-inbox-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Respect users who turn motion down. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Tables */
.bcx-table {
    width: 100%;
    border-collapse: collapse;
}

.bcx-table th,
.bcx-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.bcx-table th {
    color: var(--muted);
    font-weight: 600;
}

.pill {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    font-size: 12px;
}

.pill.active,
.pill.connected,
.pill.issued,
.pill.paid {
    color: var(--accent-2);
    border-color: rgba(52, 211, 153, .4);
}

.pill.suspended,
.pill.error,
.pill.revoked,
.pill.void {
    color: var(--danger);
    border-color: rgba(239, 68, 68, .4);
}

/* === Phase 12 — lead-status pills (positive flow palette) ===
   Used by /campaigns, /inbox, lead lists, and any future kanban view.
   The same status name maps to the same colour everywhere so customers
   build muscle memory. */
.pill.new {
    color: var(--lead-new);
    background: var(--lead-new-bg);
    border-color: rgba(255, 107, 107, .45);
}

.pill.open,
.pill.contacted,
.pill.in_progress {
    color: var(--lead-open);
    background: var(--lead-open-bg);
    border-color: rgba(245, 158, 11, .45);
}

.pill.qualified {
    color: var(--lead-qualified);
    background: var(--lead-qualified-bg);
    border-color: rgba(56, 189, 248, .45);
}

.pill.engaged,
.pill.replied {
    color: var(--lead-engaged);
    background: var(--lead-engaged-bg);
    border-color: rgba(167, 139, 250, .45);
}

.pill.converted,
.pill.won,
.pill.closed_won,
.pill.customer {
    color: var(--lead-converted);
    background: var(--lead-converted-bg);
    border-color: rgba(34, 197, 94, .5);
    font-weight: 600;
}

.pill.closed,
.pill.archived {
    color: #cbd5e1;
    background: var(--lead-closed-bg);
    border-color: rgba(71, 85, 105, .55);
}

.pill.lost,
.pill.closed_lost {
    color: #cbd5e1;
    background: var(--lead-lost-bg);
    border-color: rgba(148, 163, 184, .45);
}

/* Forms / buttons */
.btn {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    transition: transform .05s ease, background .2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1020;
    border: none;
}

.btn.ghost {
    background: transparent;
}

.btn.danger {
    color: var(--danger);
}

.btn.block {
    width: 100%;
    display: block;
}

.btn.lg {
    padding: 12px 18px;
    font-size: 16px;
}

.btn.xs {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.4;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.bcx-key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bcx-key code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.inline {
    display: inline-block;
}

.bcx-form label {
    display: block;
    margin: 10px 0;
}

.bcx-form input,
.bcx-form select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.bcx-form-inline {
    display: flex;
    gap: 8px;
}

.bcx-form-inline input,
.bcx-form-inline select {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
}

/* Flash */
.bcx-flash {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.bcx-flash.ok {
    background: rgba(16, 185, 129, .12);
    color: var(--accent-2);
    border: 1px solid rgba(16, 185, 129, .4);
}

.bcx-flash.err {
    background: rgba(239, 68, 68, .12);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, .4);
}

/* Auth */
.bcx-auth-body {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(79, 140, 255, .18), transparent), var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bcx-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.bcx-brand {
    text-align: center;
    margin-bottom: 18px;
}

.bcx-brand h1 {
    margin: 10px 0 4px;
    font-size: 22px;
}

.bcx-brand .bcx-logo {
    margin: 0 auto;
}

.bcx-fineprint {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin-top: 16px;
}

/* Hero (landing) */
.bcx-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    padding: 40px 0;
    align-items: center;
}

.bcx-hero h1 {
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 14px;
}

.bcx-hero .lead {
    font-size: 17px;
    color: var(--muted);
    max-width: 620px;
}

.bcx-cta {
    margin: 18px 0;
    display: flex;
    gap: 12px;
}

.bcx-tickrow {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--muted);
}

.bcx-hero-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.bcx-hero-mock .m-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 8px;
    border-bottom: 1px dashed var(--line);
}

.bcx-hero-mock .m-row:last-child {
    border-bottom: none;
}

.bcx-features h2 {
    margin: 8px 0 18px;
}

.bcx-plan {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.bcx-plan h3 {
    margin: 0 0 6px;
}

.bcx-plan .price {
    font-size: 24px;
    font-weight: 700;
    margin: 4px 0 12px;
}

.bcx-plan .price span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.bcx-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    color: var(--muted);
}

.bcx-plan ul li {
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
}

.bcx-plan .btn {
    margin-top: auto;
}

/* Gwen GAI-lens: AI-token allowance is the new currency of GAI products. */
.bcx-ai-allowance {
    margin: 0 0 12px;
}

.bcx-ai-allowance .pill {
    background: linear-gradient(135deg, rgba(110, 168, 254, .18), rgba(168, 85, 247, .18));
    border: 1px solid rgba(110, 168, 254, .4);
    color: #d6e4ff;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
}

.bcx-mini-stats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bcx-mini-stats li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
}

.bcx-mini-stats li:last-child {
    border-bottom: none;
}

.bcx-ai-out {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    max-height: 200px;
    overflow: auto;
    font-size: 12px;
    color: var(--muted);
}

.bcx-error {
    text-align: center;
    padding: 80px 20px;
}

.bcx-error h1 {
    font-size: 64px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .bcx-main {
        grid-template-columns: 220px 1fr;
    }

    .bcx-rightpanel {
        display: none;
    }

    .bcx-grid-3,
    .bcx-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .bcx-main {
        grid-template-columns: 1fr;
    }

    .bcx-sidebar {
        display: none;
    }

    .bcx-hero {
        grid-template-columns: 1fr;
    }

    .bcx-grid-2,
    .bcx-grid-3,
    .bcx-grid-4 {
        grid-template-columns: 1fr;
    }

    .bcx-topnav {
        display: none;
    }
}

/* === A10 Phase 2 additions === */
.bcx-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.bcx-banner-info {
    background: #1d4ed8
}

.bcx-banner-warning {
    background: #b45309
}

.bcx-banner-critical {
    background: #b91c1c
}

.bcx-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: .85;
    animation: bcx-pulse 1.6s infinite
}

@keyframes bcx-pulse {

    0%,
    100% {
        opacity: .85
    }

    50% {
        opacity: .35
    }
}

.bcx-badge {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9px;
    margin-left: 4px;
    line-height: 1.2
}

.bcx-inbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #cfd6e6;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    margin-right: 10px
}

.bcx-inbox-pill:hover {
    background: rgba(255, 255, 255, .1)
}

.bcx-flash.info {
    background: rgba(59, 130, 246, .15);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, .4)
}

.bcx-table tr.unread td {
    font-weight: 600;
    background: rgba(59, 130, 246, .06)
}

.bcx-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #cfd6e6;
    text-transform: uppercase;
    letter-spacing: .04em
}

.bcx-tag-ok,
.bcx-tag-verified,
.bcx-tag-login_success,
.bcx-tag-converted,
.bcx-tag-won,
.bcx-tag-closed_won {
    background: var(--lead-converted-bg);
    color: #86efac
}

.bcx-tag-pending,
.bcx-tag-submitted,
.bcx-tag-ip_change,
.bcx-tag-ua_change,
.bcx-tag-open,
.bcx-tag-contacted {
    background: var(--lead-open-bg);
    color: #fde68a
}

.bcx-tag-new {
    background: var(--lead-new-bg);
    color: #fecaca
}

.bcx-tag-qualified {
    background: var(--lead-qualified-bg);
    color: #bae6fd
}

.bcx-tag-engaged,
.bcx-tag-replied {
    background: var(--lead-engaged-bg);
    color: #ddd6fe
}

.bcx-tag-closed,
.bcx-tag-archived,
.bcx-tag-lost,
.bcx-tag-closed_lost {
    background: var(--lead-lost-bg);
    color: #e2e8f0
}

.bcx-tag-err,
.bcx-tag-rejected,
.bcx-tag-suspicious,
.bcx-tag-locked,
.bcx-tag-login_failed {
    background: rgba(239, 68, 68, .18);
    color: #fecaca
}

.bcx-tag-security {
    background: rgba(168, 85, 247, .18);
    color: #e9d5ff
}

.bcx-tag-billing {
    background: rgba(14, 165, 233, .18);
    color: #bae6fd
}

.bcx-tag-marketing {
    background: rgba(244, 114, 182, .18);
    color: #fbcfe8
}

.bcx-tag-announcement,
.bcx-tag-system {
    background: rgba(148, 163, 184, .18);
    color: #e2e8f0
}

.bcx-prose {
    white-space: pre-wrap;
    line-height: 1.55;
    margin-top: 14px
}

.bcx-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 12px
}

.bcx-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500
}

.bcx-check input {
    margin: 0
}

.bcx-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px
}

.bcx-stat {
    background: #10162d;
    border: 1px solid #1c2440;
    border-radius: 12px;
    padding: 18px;
    text-align: center
}

.bcx-stat h3 {
    margin: 0 0 6px;
    font-size: 13px;
    color: #8a93a8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em
}

.bcx-stat b {
    font-size: 28px;
    color: #fff
}

.bcx-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding: 6px 0
}

.bcx-bar {
    flex: 1;
    display: flex;
    align-items: flex-end;
    height: 100%
}

/* === Kanban board for /leads === */
.bcx-leads-kanban {
    padding: 24px 0;
}

.bcx-kanban-board {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.bcx-kanban-col {
    background: #f7f9fb;
    border-radius: 10px;
    box-shadow: 0 2px 8px #1f2d4412;
    flex: 1 1 0;
    min-width: 220px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.bcx-kanban-col-head {
    font-weight: 600;
    font-size: 1.1em;
    padding: 16px 18px 10px 18px;
    border-bottom: 1px solid #e3e8ee;
    background: #eaf1fa;
    border-radius: 10px 10px 0 0;
}

.bcx-kanban-col-list {
    flex: 1 1 auto;
    padding: 14px 12px 18px 12px;
    min-height: 300px;
    transition: background 0.2s;
}

.bcx-kanban-col-list.is-over {
    background: #dbeafe55;
}

.bcx-lead-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px #1f2d4410;
    margin-bottom: 14px;
    padding: 14px 12px 10px 12px;
    cursor: grab;
    border: 1px solid #e3e8ee;
    transition: box-shadow 0.2s, border 0.2s;
    user-select: none;
}

.bcx-lead-card.is-dragging {
    opacity: 0.6;
    box-shadow: 0 4px 16px #1f2d4440;
}

.bcx-lead-name {
    font-weight: 600;
    font-size: 1.08em;
    margin-bottom: 2px;
}

.bcx-lead-company {
    color: #4b5c77;
    font-size: 0.98em;
    margin-bottom: 4px;
}

.bcx-lead-value {
    color: #1e7e34;
    font-weight: 500;
    font-size: 0.97em;
    margin-bottom: 2px;
}

.bcx-lead-age {
    color: #7a869a;
    font-size: 0.93em;
}

.bcx-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: 3px 3px 0 0;
    min-height: 2px
}

.bcx-intro-video {
    padding: 32px 0;
    text-align: center
}

.bcx-intro-video h2 {
    margin-bottom: 18px
}

.bcx-video-frame {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4)
}

.bcx-video-frame iframe,
.bcx-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block
}

.btn.sm {
    padding: 4px 10px;
    font-size: 12px
}

.ellipsis {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* === A10 Phase 3: spacing + role pages === */
.bcx-content {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%
}

.bcx-page-head {
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.bcx-page-head h1 {
    font-size: 26px;
    line-height: 1.2
}

.bcx-page-head p {
    margin: 6px 0 0;
    max-width: 780px
}

.bcx-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.bcx-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%
}

.bcx-form label {
    display: block;
    margin: 0;
    font-weight: 500;
    font-size: 13px;
    color: #cfd6e6
}

.bcx-form input,
.bcx-form select,
.bcx-form textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    margin-top: 6px
}

.bcx-form textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5
}

.bcx-form .bcx-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0
}

.bcx-form .bcx-check {
    margin-top: 4px
}

.bcx-form button[type="submit"] {
    align-self: flex-start;
    margin-top: 4px
}

.bcx-form small.muted {
    display: block;
    margin-top: 4px;
    font-size: 11.5px
}

.bcx-grid-broadcast {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start
}

@media (max-width:1100px) {
    .bcx-grid-broadcast {
        grid-template-columns: 1fr
    }
}

.bcx-ref-card details {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .02)
}

.bcx-ref-card summary {
    cursor: pointer;
    font-size: 13px;
    outline: none
}

.bcx-ref-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 240px;
    overflow: auto;
    font-size: 12.5px;
    line-height: 1.7
}

.bcx-ref-list li {
    padding: 2px 0;
    border-bottom: 1px dashed var(--line)
}

.bcx-ref-list li:last-child {
    border-bottom: none
}

.bcx-ref-list code {
    background: rgba(255, 255, 255, .06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px
}

.bcx-table-scroll {
    overflow-x: auto;
    margin: 0 -4px
}

.bcx-table th.num,
.bcx-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.bcx-table tfoot th {
    border-top: 2px solid var(--line);
    font-weight: 700;
    color: var(--text)
}

.bcx-funnel .bar {
    min-width: 120px;
    font-size: 13px
}

.bcx-tag-unverified {
    background: rgba(148, 163, 184, .18);
    color: #cbd5e1
}

.bcx-tag-submitted {
    background: rgba(234, 179, 8, .18);
    color: #fde68a
}

.bcx-tag-verified {
    background: rgba(34, 197, 94, .18);
    color: #86efac
}

.bcx-tag-rejected {
    background: rgba(239, 68, 68, .18);
    color: #fecaca
}

@media print {

    .bcx-topbar,
    .bcx-sidebar,
    .bcx-rightpanel,
    .bcx-footer,
    .bcx-banner,
    .bcx-actions,
    .btn {
        display: none !important
    }

    body,
    html,
    .bcx-content,
    .bcx-card {
        background: #fff !important;
        color: #000 !important
    }

    .bcx-card {
        border: 1px solid #ccc;
        box-shadow: none
    }

    .bcx-table th,
    .bcx-table td {
        color: #000 !important;
        border-bottom: 1px solid #ccc
    }

    .bcx-tag {
        border: 1px solid #999;
        color: #000;
        background: #fff !important
    }

    .bcx-kpi {
        border: 1px solid #ccc
    }

    .bcx-kpi .label,
    .muted {
        color: #444 !important
    }

    .bcx-kpi .value {
        color: #000 !important
    }

    a {
        color: #000;
        text-decoration: none
    }

    .bcx-main {
        display: block
    }
}

/* ------------------------------------------------------------------ */
/* i18n + currency picker (Phase 4)                                   */
/* ------------------------------------------------------------------ */
.bcx-locale-picker {
    position: relative;
    display: inline-block;
    margin-right: .5rem;
}

.bcx-locale-picker>summary {
    list-style: none;
    cursor: pointer;
    padding: .35rem .65rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: inherit;
    user-select: none;
}

.bcx-locale-picker>summary::-webkit-details-marker {
    display: none;
}

.bcx-locale-picker>summary:hover {
    background: rgba(255, 255, 255, .10);
}

.bcx-globe {
    font-size: 1rem;
    line-height: 1;
}

.bcx-locale-code,
.bcx-locale-cur {
    font-weight: 600;
    letter-spacing: .02em;
}

.bcx-locale-sep {
    opacity: .55;
}

.bcx-locale-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    min-width: 280px;
    background: #fff;
    color: #1d2530;
    border: 1px solid #e3e6ec;
    border-radius: .55rem;
    box-shadow: 0 12px 32px rgba(20, 30, 50, .18);
    padding: .85rem;
    z-index: 1100;
}

[dir="rtl"] .bcx-locale-dropdown {
    right: auto;
    left: 0;
}

.bcx-locale-dropdown form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bcx-locale-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7385;
    margin-top: .25rem;
}

.bcx-locale-select {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid #d6dbe3;
    border-radius: .35rem;
    background: #fff;
    font-size: .9rem;
}

.bcx-locale-hint {
    margin: .35rem 0 0;
    font-size: .72rem;
    color: #6b7385;
}

.bcx-locale-hint.mute {
    color: #8d94a3;
}

.bcx-locale-apply {
    align-self: flex-end;
    margin-top: .25rem;
}

.bcx-auth-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.bcx-auth-topbar .bcx-brand-link {
    color: #1d2530;
    text-decoration: none;
    font-size: 1.1rem;
}

.bcx-auth-body .bcx-locale-picker>summary {
    background: rgba(20, 30, 50, .05);
    border-color: rgba(20, 30, 50, .08);
    color: #1d2530;
}

/* RTL niceties */
[dir="rtl"] .bcx-topbar-right {
    flex-direction: row-reverse;
}

[dir="rtl"] .bcx-content {
    text-align: right;
}

[dir="rtl"] .bcx-table-scroll table {
    direction: rtl;
}

/* === Phase 5: Activity heatmap (Phase 12 enlarged + responsive) ========== */
.bcx-heatmap-card {
    padding: 18px;
    /* Cells size from a CSS var so the card can fill its container and
       scale up on wide screens. View emits inline grid-template-columns
       referencing both vars below. */
    --bcx-heatmap-cell: 16px;
    --bcx-heatmap-rowhead: 36px;
}

@media (min-width: 1280px) {
    .bcx-heatmap-card {
        --bcx-heatmap-cell: 18px;
    }
}

@media (min-width: 1600px) {
    .bcx-heatmap-card {
        --bcx-heatmap-cell: 22px;
    }
}

@media (max-width: 720px) {
    .bcx-heatmap-card {
        --bcx-heatmap-cell: 14px;
        --bcx-heatmap-rowhead: 30px;
        padding: 12px;
    }
}

.bcx-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
}

.bcx-heatmap-months {
    display: grid;
    gap: 3px;
    margin-bottom: 4px;
    font-size: 10px;
    color: #6b7280;
    height: 14px;
}

.bcx-heatmap-month-label {
    white-space: nowrap;
    overflow: visible;
}

.bcx-heatmap-grid {
    display: grid;
    gap: 3px;
    align-items: start;
}

.bcx-heatmap-weekdays {
    display: grid;
    grid-template-rows: repeat(7, var(--bcx-heatmap-cell, 16px));
    gap: 3px;
    font-size: 10px;
    color: #6b7280;
    width: var(--bcx-heatmap-rowhead, 36px);
    line-height: var(--bcx-heatmap-cell, 16px);
}

.bcx-heatmap-col {
    display: grid;
    grid-template-rows: repeat(7, var(--bcx-heatmap-cell, 16px));
    gap: 3px;
}

.bcx-heatmap-cell {
    width: var(--bcx-heatmap-cell, 16px);
    height: var(--bcx-heatmap-cell, 16px);
    border-radius: 2px;
    background: #ebedf0;
    display: inline-block;
    transition: transform .08s ease;
    /* Inset hairline so the lowest-bucket tiles never bleed into the card background. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}

.bcx-heatmap-cell:hover {
    transform: scale(1.5);
    cursor: help;
}

.bcx-heatmap-cell.empty {
    background: transparent;
}

.bcx-heatmap-cell.b0 {
    background: var(--heat-b0);
}

.bcx-heatmap-cell.b1 {
    background: var(--heat-b1);
}

.bcx-heatmap-cell.b2 {
    background: var(--heat-b2);
}

.bcx-heatmap-cell.b3 {
    background: var(--heat-b3);
}

.bcx-heatmap-cell.b4 {
    background: var(--heat-b4);
}

/* === Phase 12 — per-metric heatmap ramps ===
   Drop a [data-metric] attribute on .bcx-heatmap-card or any ancestor
   and the embedded cells + legend pick up a semantically appropriate
   ramp instead of the default cool blue overview palette. */
[data-metric="leads_new"] {
    --heat-b0: #3a2630;
    --heat-b1: #fecaca;
    --heat-b2: #fb7185;
    --heat-b3: #ef4444;
    --heat-b4: #b91c1c;
}

[data-metric="leads_open"] {
    --heat-b0: #3a3022;
    --heat-b1: #fde68a;
    --heat-b2: #fbbf24;
    --heat-b3: #f59e0b;
    --heat-b4: #b45309;
}

[data-metric="leads_converted"] {
    --heat-b0: #22372e;
    --heat-b1: #bbf7d0;
    --heat-b2: #4ade80;
    --heat-b3: #22c55e;
    --heat-b4: #15803d;
}

[data-metric="leads_closed"] {
    --heat-b0: #26334a;
    --heat-b1: #bae6fd;
    --heat-b2: #38bdf8;
    --heat-b3: #0284c7;
    --heat-b4: #075985;
}

[data-metric="campaigns_launched"] {
    --heat-b0: #2e2440;
    --heat-b1: #ddd6fe;
    --heat-b2: #a78bfa;
    --heat-b3: #7c3aed;
    --heat-b4: #5b21b6;
}

[data-metric="revenue"] {
    --heat-b0: #3a311a;
    --heat-b1: #fef08a;
    --heat-b2: #facc15;
    --heat-b3: #ca8a04;
    --heat-b4: #854d0e;
}

[data-metric="audit_actions"] {
    --heat-b0: #2a2e3c;
    --heat-b1: #cbd5e1;
    --heat-b2: #94a3b8;
    --heat-b3: #64748b;
    --heat-b4: #334155;
}

.bcx-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
}

.bcx-heatmap-legend .bcx-heatmap-cell:hover {
    transform: none;
    cursor: default;
}

.bcx-heatmap-peak {
    margin-left: auto;
}

.bcx-heatmap-range {
    display: flex;
    gap: 6px;
}

.bcx-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 500;
}

.bcx-pill.ok {
    background: #dcfce7;
    color: #166534;
}

.bcx-pill.warn {
    background: #fef3c7;
    color: #92400e;
}

.bcx-spike-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

.bcx-spike {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.bcx-spike-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.bcx-spike-date {
    font-weight: 600;
}

.bcx-spike-count {
    color: #6b7280;
    font-size: 13px;
}

.bcx-spike-why {
    margin: 4px 0 6px;
}

.bcx-spike-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

[data-theme="dark"] .bcx-heatmap-cell.b0 {
    background: var(--heat-b0);
}

[data-theme="dark"] .bcx-spike {
    background: #111827;
    border-color: #1f2937;
}

/* === Phase 6: UI fixes (auth + sidebar) =================================== */
.bcx-auth-body {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.bcx-auth-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    width: 100%;
}

.bcx-auth-topbar {
    width: 100%;
    box-sizing: border-box;
}

.bcx-side-section li a.on {
    background: var(--panel);
    color: var(--accent);
    font-weight: 600;
}

.bcx-side-section li a .bcx-pill {
    font-size: 9px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

/* === Phase 6: Locality (geo) map ========================================== */
.bcx-upsell {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 32px;
}

.bcx-upsell-icon {
    font-size: 64px;
    line-height: 1;
}

.bcx-upsell-body {
    flex: 1;
}

.bcx-upsell-body h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.bcx-upsell-list {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    display: grid;
    gap: 6px;
}

.bcx-upsell-list li {
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 6px;
}

.bcx-geo-card {
    padding: 24px;
    margin-top: 20px;
}

.bcx-geo-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.bcx-geo-head h3 {
    margin: 0;
}

.bcx-geo-map {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #0e1726;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

.bcx-geo-map svg {
    display: block;
    width: 100%;
    height: auto;
}

.bcx-geo-map.is-zoomable {
    cursor: grab;
}

.bcx-geo-map.is-zoomable.is-panning {
    cursor: grabbing;
}

.bcx-geo-zoom-ctrls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    background: rgba(14, 23, 38, .92);
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.bcx-geo-zoom-ctrls button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #1b2538;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, transform .12s ease, border-color .12s ease;
    padding: 0;
}

.bcx-geo-zoom-ctrls button:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.bcx-geo-zoom-ctrls button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bcx-geo-zoom-ctrls button:active {
    transform: scale(.94);
}

.bcx-geo-zoom-ctrls button[data-geo-zoom="reset"] {
    font-size: 14px;
}

.bcx-geo-zoom-hint {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    background: rgba(14, 23, 38, .78);
    padding: 5px 9px;
    border-radius: 6px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .06);
}

/* Country choropleth (generated by scripts/build_world_svg.php) */
.bcx-geo-countries path {
    fill: #1f2d44;
    stroke: #2c3a55;
    stroke-width: .35;
    vector-effect: non-scaling-stroke;
    transition: fill .12s ease;
}

.bcx-geo-countries path.has-cc {
    cursor: pointer;
}

.bcx-geo-countries path.has-cc:hover {
    fill: #2d4060;
}

.bcx-geo-countries path.is-active {
    fill: var(--accent) !important;
    stroke: #fff;
    stroke-width: .8;
}

/* Country drilldown modal (Scale + Enterprise) */
.bcx-geo-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 22, .72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.bcx-geo-modal.is-open {
    display: flex;
}

.bcx-geo-modal-card {
    background: var(--bg-card, #131c2e);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 460px;
    width: 100%;
    padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.bcx-geo-modal-card h4 {
    margin: 0 0 4px;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bcx-geo-modal-card .bcx-geo-modal-cc {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .08em;
}

.bcx-geo-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.bcx-geo-modal-stat {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.bcx-geo-modal-stat .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.bcx-geo-modal-stat .value {
    font-size: 18px;
    font-weight: 600;
    margin-top: 2px;
}

.bcx-geo-modal-cities {
    margin: 8px 0 14px;
    padding: 0;
    list-style: none;
}

.bcx-geo-modal-cities li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}

.bcx-geo-modal-cities li:last-child {
    border-bottom: 0;
}

.bcx-geo-modal-cities .muted {
    color: var(--muted);
}

.bcx-geo-modal-foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.bcx-geo-modal-foot .btn {
    font-size: 13px;
}

.bcx-geo-modal-upsell {
    margin: 8px 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .3);
    font-size: 12px;
    color: var(--muted);
}

.bcx-geo-city {
    fill: #f59e0b;
    fill-opacity: .85;
    stroke: #fff;
    stroke-width: .4;
    cursor: help;
}

.bcx-geo-city:hover {
    fill-opacity: 1;
    stroke-width: .8;
}

.bcx-geo-bubble {
    fill: #38bdf8;
    fill-opacity: .65;
    stroke: #93c5fd;
    stroke-width: .6;
    cursor: help;
    transition: fill-opacity .15s ease, stroke-width .15s ease;
}

.bcx-geo-bubble:hover {
    fill-opacity: .9;
    stroke-width: 1.4;
}

/* Phase 12: bubbles read low-volume → high-volume as a positive flow.
   Volume is opportunity, not alarm: cool blue → teal → green → gold.
   Keep red strictly for the explicit "leads_new" map variant. */
.bcx-geo-bubble.b1 {
    fill: #38bdf8;
}

.bcx-geo-bubble.b2 {
    fill: #2dd4bf;
}

.bcx-geo-bubble.b3 {
    fill: #22c55e;
}

.bcx-geo-bubble.b4 {
    fill: #facc15;
}

[data-metric="leads_new"] .bcx-geo-bubble.b1 {
    fill: #fecaca;
}

[data-metric="leads_new"] .bcx-geo-bubble.b2 {
    fill: #fb7185;
}

[data-metric="leads_new"] .bcx-geo-bubble.b3 {
    fill: #ef4444;
}

[data-metric="leads_new"] .bcx-geo-bubble.b4 {
    fill: #b91c1c;
}

[data-metric="leads_new"] .bcx-geo-micro {
    fill: #ef4444;
}

/* ── leads_open (amber) ── */
[data-metric="leads_open"] .bcx-geo-bubble.b1 {
    fill: #fef3c7;
}

[data-metric="leads_open"] .bcx-geo-bubble.b2 {
    fill: #fde68a;
}

[data-metric="leads_open"] .bcx-geo-bubble.b3 {
    fill: #f59e0b;
}

[data-metric="leads_open"] .bcx-geo-bubble.b4 {
    fill: #b45309;
}

[data-metric="leads_open"] .bcx-geo-micro {
    fill: #f59e0b;
}

/* ── leads_converted (green) ── */
[data-metric="leads_converted"] .bcx-geo-bubble.b1 {
    fill: #bbf7d0;
}

[data-metric="leads_converted"] .bcx-geo-bubble.b2 {
    fill: #86efac;
}

[data-metric="leads_converted"] .bcx-geo-bubble.b3 {
    fill: #22c55e;
}

[data-metric="leads_converted"] .bcx-geo-bubble.b4 {
    fill: #15803d;
}

[data-metric="leads_converted"] .bcx-geo-micro {
    fill: #22c55e;
}

/* ── leads_closed (slate-blue) ── */
[data-metric="leads_closed"] .bcx-geo-bubble.b1 {
    fill: #bae6fd;
}

[data-metric="leads_closed"] .bcx-geo-bubble.b2 {
    fill: #7dd3fc;
}

[data-metric="leads_closed"] .bcx-geo-bubble.b3 {
    fill: #0ea5e9;
}

[data-metric="leads_closed"] .bcx-geo-bubble.b4 {
    fill: #0369a1;
}

[data-metric="leads_closed"] .bcx-geo-micro {
    fill: #0ea5e9;
}

/* ── campaigns_launched (purple) ── */
[data-metric="campaigns_launched"] .bcx-geo-bubble.b1 {
    fill: #ede9fe;
}

[data-metric="campaigns_launched"] .bcx-geo-bubble.b2 {
    fill: #c4b5fd;
}

[data-metric="campaigns_launched"] .bcx-geo-bubble.b3 {
    fill: #7c3aed;
}

[data-metric="campaigns_launched"] .bcx-geo-bubble.b4 {
    fill: #5b21b6;
}

[data-metric="campaigns_launched"] .bcx-geo-micro {
    fill: #7c3aed;
}

/* ── zero-metric bubble: fully hidden ── */
.bcx-geo-bubble.is-zero-metric {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── #174 geo overview base layer ── */
/* Semi-transparent blue anchor always rendered behind the metric bubble */
.bcx-geo-overview-base {
    fill: #38bdf8;
    fill-opacity: 0.2;
    stroke: none;
    pointer-events: none;
}

/* ── #175 geo campaign pulse rings ── */
@keyframes bcxGeoPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.bcx-geo-pulse-ring {
    fill: none;
    stroke: #7c3aed;
    stroke-width: 1.5;
    stroke-opacity: 0.7;
    pointer-events: none;
    animation: bcxGeoPulse 2s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.bcx-geo-pulse-ring.speed-slow {
    animation-duration: 2.4s;
}

.bcx-geo-pulse-ring.speed-med {
    animation-duration: 1.8s;
}

.bcx-geo-pulse-ring.speed-fast {
    animation-duration: 1.2s;
}

.inline-bubble {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 4px;
}

.bcx-geo-legend {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 12px;
    font-size: 12px;
}

.bcx-share-bar {
    height: 6px;
    width: 120px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.bcx-share-bar>span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.bcx-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    text-align: center;
}

/* === Phase 7: Marketing layout =========================================== */
.bcx-shell-marketing .bcx-main {
    display: block;
}

.bcx-marketing {
    display: block;
    width: 100%;
    padding: 0;
}

.bcx-marketing-flash {
    max-width: 1180px;
    margin: 12px auto;
}

.bcx-mk-section {
    padding: 72px 24px;
}

.bcx-mk-section+.bcx-mk-section {
    border-top: 1px solid var(--border);
}

.bcx-mk-wrap {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.bcx-mk-wrap.narrow {
    max-width: 880px;
}

.bcx-mk-wrap.centered,
.bcx-mk-section-head.centered {
    text-align: center;
}

.bcx-mk-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 4px 10px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    margin-bottom: 14px;
}

.bcx-mk-section-head {
    margin-bottom: 36px;
}

.bcx-mk-section-head h2 {
    margin: 0;
    font-size: 30px;
}

.bcx-mk-section-head p {
    margin: 12px auto 0;
    max-width: 640px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.bcx-mk-section-head.centered p {
    margin-left: auto;
    margin-right: auto;
}

/* Hero */
.bcx-mk-hero {
    padding-top: 56px;
    padding-bottom: 80px;
    background: radial-gradient(circle at 20% 0%, rgba(79, 140, 255, .15), transparent 60%), radial-gradient(circle at 90% 100%, rgba(34, 197, 94, .10), transparent 60%);
}

.bcx-mk-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
}

.bcx-mk-hero-copy h1 {
    font-size: 44px;
    line-height: 1.1;
    margin: 6px 0 18px;
}

.bcx-mk-hero-copy h1 .accent {
    color: var(--accent);
}

.bcx-mk-hero-card {
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}

/* Logos */
.bcx-mk-logos {
    padding: 40px 24px;
}

.bcx-mk-logo-caption {
    text-align: center;
    color: var(--muted);
    margin: 0 0 18px;
    font-size: 13px;
}

.bcx-mk-logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    opacity: .75;
    font-weight: 600;
}

.bcx-mk-logo-row span {
    padding: 6px 12px;
}

/* Promise */
.bcx-mk-promise h2 {
    font-size: 32px;
    margin: 6px 0 16px;
}

/* Feature splits */
.bcx-mk-feature.alt {
    background: var(--panel);
}

.bcx-mk-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.bcx-mk-split.reverse .bcx-mk-split-copy {
    order: 2;
}

.bcx-mk-split.reverse .bcx-mk-split-visual {
    order: 1;
}

.bcx-mk-split-copy h2 {
    font-size: 28px;
    margin: 6px 0 14px;
}

.bcx-mk-bullets {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 8px;
}

.bcx-mk-bullets li {
    padding-left: 22px;
    position: relative;
}

.bcx-mk-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.bcx-mk-split-visual .bcx-hero-mock {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

/* Steps */
.bcx-mk-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.bcx-mk-step {
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.bcx-mk-step .step-n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 12px;
}

.bcx-mk-step h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.bcx-mk-step p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* Testimonials */
.bcx-mk-testimonials {
    background: var(--panel);
}

.bcx-mk-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bcx-mk-quote {
    margin: 0;
    padding: 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.bcx-mk-quote blockquote {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
}

.bcx-mk-quote figcaption {
    font-size: 13px;
    color: var(--muted);
}

/* Compare */
.bcx-mk-compare-table {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.bcx-mk-compare-table .row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: var(--panel);
}

.bcx-mk-compare-table .row>div {
    padding: 14px 18px;
}

.bcx-mk-compare-table .row.head {
    background: var(--bg);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bcx-mk-compare-table .ok {
    color: #22c55e;
    font-weight: 600;
}

.bcx-mk-compare-table .meh {
    color: var(--muted);
}

/* Pricing teaser */
.bcx-mk-pricing .bcx-plan {
    position: relative;
}

.bcx-mk-pricing .bcx-plan.featured {
    border-color: var(--accent);
    transform: translateY(-6px);
}

.bcx-plan-tag {
    position: absolute;
    top: -12px;
    right: 14px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bcx-mk-pricing-foot {
    text-align: center;
    margin-top: 20px;
}

/* FAQ */
.bcx-mk-faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: var(--panel);
}

.bcx-mk-faq-item summary {
    cursor: pointer;
    font-weight: 600;
}

.bcx-mk-faq-item[open] summary {
    color: var(--accent);
}

.bcx-mk-faq-item p {
    margin: 10px 0 0;
    color: var(--muted);
}

/* Final CTA */
.bcx-mk-cta-final {
    background: linear-gradient(135deg, rgba(79, 140, 255, .15), rgba(34, 197, 94, .10));
}

.bcx-mk-cta-final h2 {
    font-size: 32px;
    margin: 0 0 12px;
}

.bcx-cta.center {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .bcx-mk-section {
        padding: 48px 18px;
    }

    .bcx-mk-hero-grid,
    .bcx-mk-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bcx-mk-hero-copy h1 {
        font-size: 32px;
    }

    .bcx-mk-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bcx-mk-grid-3 {
        grid-template-columns: 1fr;
    }

    .bcx-mk-compare-table .row {
        grid-template-columns: 1fr;
    }

    .bcx-mk-split.reverse .bcx-mk-split-copy {
        order: 1;
    }

    .bcx-mk-split.reverse .bcx-mk-split-visual {
        order: 2;
    }
}

/* === Phase 8: Logo strip + showcase + company prose ====================== */
.bcx-mk-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px 18px;
    align-items: center;
    padding: 8px 0;
}

.bcx-svc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: .82;
    transition: opacity .15s ease;
}

.bcx-svc:hover {
    opacity: 1;
}

.bcx-svc svg {
    width: 28px;
    height: 28px;
    color: var(--text);
}

.bcx-svc label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

@media (max-width: 900px) {
    .bcx-mk-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Showcase / slideshow tabs (pure CSS, radio-driven) */
.bcx-showcase {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.bcx-showcase>input[type=radio] {
    display: none;
}

.bcx-showcase-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.bcx-showcase-nav label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
    cursor: pointer;
    border-right: 1px solid var(--border);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    position: relative;
}

.bcx-showcase-nav label:last-child {
    border-right: 0;
}

.bcx-showcase-nav label:hover {
    background: var(--panel);
}

.bcx-showcase-nav .num {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .12em;
    transition: color .18s ease;
}

.bcx-showcase-nav label>span:last-child {
    font-weight: 700;
    font-size: 15px;
}

.bcx-showcase-stage {
    position: relative;
    min-height: 340px;
    padding: 36px 36px 40px;
}

.bcx-showcase-pane {
    display: none;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    animation: bcxFadeIn .3s ease;
}

.bcx-showcase-pane .copy h3 {
    margin: 0 0 14px;
    font-size: 22px;
}

.bcx-showcase-pane .visual .bcx-hero-mock {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

#bcx-tab-1:checked~.bcx-showcase-stage [data-pane='1'],
#bcx-tab-2:checked~.bcx-showcase-stage [data-pane='2'],
#bcx-tab-3:checked~.bcx-showcase-stage [data-pane='3'],
#bcx-tab-4:checked~.bcx-showcase-stage [data-pane='4'] {
    display: grid;
}

/* Active tab: filled accent-tinted panel + accent number + inset top/bottom accent bars. */
#bcx-tab-1:checked~.bcx-showcase-nav label[for='bcx-tab-1'],
#bcx-tab-2:checked~.bcx-showcase-nav label[for='bcx-tab-2'],
#bcx-tab-3:checked~.bcx-showcase-nav label[for='bcx-tab-3'],
#bcx-tab-4:checked~.bcx-showcase-nav label[for='bcx-tab-4'] {
    background: linear-gradient(180deg, rgba(79, 140, 255, .22), rgba(79, 140, 255, .04));
    box-shadow: inset 0 3px 0 0 var(--accent), inset 0 -1px 0 0 var(--accent);
    color: #fff;
}

#bcx-tab-1:checked~.bcx-showcase-nav label[for='bcx-tab-1'] .num,
#bcx-tab-2:checked~.bcx-showcase-nav label[for='bcx-tab-2'] .num,
#bcx-tab-3:checked~.bcx-showcase-nav label[for='bcx-tab-3'] .num,
#bcx-tab-4:checked~.bcx-showcase-nav label[for='bcx-tab-4'] .num {
    color: var(--accent);
    font-weight: 700;
}

@keyframes bcxFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 900px) {
    .bcx-showcase-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .bcx-showcase-nav label {
        border-bottom: 1px solid var(--border);
    }

    .bcx-showcase-pane {
        grid-template-columns: 1fr;
    }
}

/* Company prose */
.bcx-mk-prose {
    font-size: 16px;
    line-height: 1.7;
}

.bcx-mk-prose p {
    margin: 0 0 16px;
}

/* Tighten landing scroll height */
.bcx-mk-section {
    padding: 56px 24px;
}

.bcx-mk-hero {
    padding-top: 56px;
    padding-bottom: 64px;
}

.bcx-mk-logos {
    padding: 28px 24px;
}

/* === Phase 9: Heatmap mode switcher + BYO LLM form ====================== */
.bcx-heatmap-modes {
    padding: 16px 18px;
}

.bcx-modes-head h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.bcx-modes-head p {
    margin: 0 0 12px;
    font-size: 13px;
}

.bcx-modes-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bcx-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.bcx-mode-tab:hover {
    border-color: var(--accent);
}

.bcx-mode-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.bcx-mode-tab.is-locked {
    opacity: .55;
    cursor: not-allowed;
}

.bcx-mode-tier {
    font-size: 10px;
    font-weight: 700;
    opacity: .7;
    letter-spacing: .04em;
}

.btn.is-locked {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: auto;
}

/* BYO LLM form */
.bcx-byo-card {
    padding: 18px;
}

.bcx-byo-head h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.bcx-byo-head p {
    margin: 0 0 14px;
    font-size: 13px;
}

.bcx-byo-locked {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.bcx-byo-locked p {
    margin: 0 0 6px;
}

.bcx-byo-form .bcx-form-row {
    margin-bottom: 12px;
}

.bcx-byo-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.bcx-byo-form select,
.bcx-byo-form input[type=password] {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    max-width: 420px;
}

.bcx-byo-form .bcx-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 13px;
    margin: 6px 0 12px;
}

.bcx-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bcx-form-actions small {
    max-width: 480px;
}

/* ============================================================
   Phase 12 - Mobile + responsive scaling pass (single source)
   ============================================================ */
@media (max-width: 980px) {
    .bcx-content {
        padding: 14px;
        gap: 14px;
    }

    .bcx-page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bcx-topbar {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .bcx-topbar-left,
    .bcx-topbar-right {
        gap: 12px;
        flex-wrap: wrap;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }

    .bcx-card {
        padding: 14px;
    }
}

@media (max-width: 760px) {
    .bcx-table {
        font-size: 13px;
    }

    .bcx-table th,
    .bcx-table td {
        padding: 8px 6px;
    }

    .bcx-card .bcx-table {
        display: block;
        overflow-x: auto;
    }

    .bcx-funnel .bar {
        height: 32px;
        font-size: 12px;
        padding: 0 8px;
    }

    .bcx-mode-tab {
        padding: 6px 10px;
        font-size: 12px;
    }

    .bcx-heatmap-range,
    .bcx-modes-tabs {
        flex-wrap: wrap;
    }

    .btn {
        padding: 8px 12px;
        font-size: 14px;
    }

    .btn.lg {
        padding: 10px 14px;
        font-size: 15px;
    }

    .bcx-footer {
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px;
        text-align: center;
    }

    .bcx-footer-version {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .bcx-content {
        padding: 10px;
    }

    .bcx-card {
        padding: 12px;
        border-radius: 10px;
    }

    .bcx-user {
        display: none;
    }

    .bcx-locale-picker>summary {
        padding: .25rem .45rem;
        font-size: .75rem;
    }

    h1 {
        font-size: 20px;
    }

    .bcx-grid-2,
    .bcx-grid-3,
    .bcx-grid-4 {
        gap: 12px;
    }
}

/* Tap targets - WCAG 2.5.5 AAA: minimum 44x44 hit area */
@media (hover: none) and (pointer: coarse) {

    .btn,
    .pill,
    .bcx-mode-tab,
    .bcx-inbox-pill,
    .bcx-tag {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    .bcx-side-section li a {
        padding: 12px 14px;
    }

    .bcx-heatmap-card {
        --bcx-heatmap-cell: 18px;
    }
}

/* ============================================================
   Phase 12 - Modal (used by license reveal, deactivate, ToS)
   ============================================================ */
.bcx-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bcx-modal[hidden] {
    display: none;
}

.bcx-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 11, 22, .68);
    backdrop-filter: blur(2px);
}

.bcx-modal-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: auto;
    padding: 22px;
}

.bcx-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bcx-modal-head h3 {
    margin: 0;
    font-size: 18px;
}

.bcx-modal-body label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin: 12px 0 6px;
}

.bcx-modal-body input[type="password"],
.bcx-modal-body input[type="text"],
.bcx-modal-body input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 15px;
    margin-bottom: 12px;
}

.bcx-modal-body .btn {
    margin-top: 6px;
}

.bcx-reveal-error {
    background: rgba(239, 68, 68, .18);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, .4);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
}

.bcx-reveal-key {
    display: block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 12px 14px;
    border-radius: 8px;
    user-select: all;
    word-break: break-all;
    margin: 8px 0;
}

/* Account page (Phase 12) */
.bcx-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bcx-danger-zone {
    border-color: rgba(239, 68, 68, .4);
}

.bcx-danger-zone h3 {
    color: #fca5a5;
}

.bcx-tos-summary {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.bcx-tos-summary summary {
    cursor: pointer;
    padding: 4px 0;
}

.bcx-tos-summary ul {
    margin: 8px 0 4px 18px;
    padding: 0;
    font-size: 13px;
}

.bcx-tos-summary li {
    margin: 4px 0;
}

.bcx-checkrow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    margin: 12px 0;
}

.bcx-checkrow input {
    margin-top: 3px;
}

.bcx-modal-body textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 12px;
    resize: vertical;
}

.bcx-card textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 12px;
    resize: vertical;
}

a.bcx-user {
    color: var(--text);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
}

a.bcx-user:hover {
    background: var(--panel);
    text-decoration: none;
}

/* ============================================================
   Phase 12 Batch A � meters, approx-currency, geo reference,
   global gentle transitions for data-swap ergonomics.
   ============================================================ */
.bcx-seats-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 110px;
}

.bcx-seats-meter small {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.bcx-seats-meter small strong {
    color: var(--text);
}

.bcx-seats-bar {
    flex: 1;
    height: 6px;
    min-width: 60px;
    background: rgba(255, 255, 255, .06);
    border-radius: 3px;
    overflow: hidden;
}

.bcx-seats-bar>span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--lead-engaged, #38bdf8), var(--lead-converted, #22c55e));
    transition: width .35s ease;
}

.bcx-approx-note {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    background: rgba(250, 204, 21, .14);
    color: #fde68a;
    border: 1px solid rgba(250, 204, 21, .35);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
}

.bcx-geo-reference {
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
}

.bcx-geo-reference h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bcx-geo-reference ul {
    margin: 0;
    padding-left: 18px;
}

.bcx-geo-reference li {
    margin: 4px 0;
    line-height: 1.5;
}

/* Global gentle transitions: only on properties that swap data values
   (no layout thrash). Honours prefers-reduced-motion via earlier rule. */
.bcx-kpi .value,
.bcx-kpi .delta,
.bcx-share-bar>span,
.bcx-funnel .bar>span,
[data-bcx-fade] {
    transition: width .35s ease, color .25s ease, opacity .2s ease;
}

[data-bcx-fade].is-swapping {
    opacity: .35;
}

@media (prefers-reduced-motion: reduce) {

    .bcx-seats-bar>span,
    .bcx-kpi .value,
    .bcx-kpi .delta,
    .bcx-share-bar>span,
    .bcx-funnel .bar>span,
    [data-bcx-fade] {
        transition: none;
    }
}

/* Phase 12 Batch B � profile form grid + invoice download button */
.bcx-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 22px;
}

.bcx-form-grid .bcx-form-actions {
    grid-column: 1 / -1;
    padding-top: 4px;
}

.bcx-form-grid label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.bcx-form-grid input,
.bcx-form-grid select,
.bcx-form-grid textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.bcx-form-grid p.muted {
    font-size: 12px;
    margin: 6px 0 0;
}

/* Phase 12 Batch C � table tools (filter + sort + revert) */
.bcx-tabletools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    flex-wrap: wrap;
}

.bcx-tt-input {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
    padding: 7px 11px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
}

.bcx-tt-count {
    font-size: 12px;
}

.bcx-tt-sortable {
    user-select: none;
    position: relative;
    padding-right: 18px;
}

.bcx-tt-sortable::after {
    content: '\2195';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .35;
    font-size: 11px;
}

.bcx-tt-sortable.is-sorted::after {
    content: '\25b2';
    opacity: 1;
}

.bcx-tt-sortable.is-sorted.is-sorted-desc::after {
    content: '\25bc';
}

/* Phase 12 Batch F � floating AI assistant */
.bcx-aiassist-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--lead-engaged), var(--lead-converted));
    color: #fff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    font: 600 13px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.bcx-aiassist-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.bcx-aiassist-fab-label {
    letter-spacing: .03em;
}

.bcx-aiassist-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
}

.bcx-aiassist-modal[hidden] {
    display: none;
}

.bcx-aiassist-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    max-height: 78vh;
}

.bcx-aiassist-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.bcx-aiassist-card header h3 {
    margin: 0;
    font-size: 15px;
}

.bcx-aiassist-close {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.bcx-aiassist-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
}

.bcx-aiassist-log .ai-msg,
.bcx-aiassist-log .user-msg {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
}

.bcx-aiassist-log .user-msg {
    background: rgba(125, 125, 125, .16);
}

.bcx-aiassist-log .ai-msg {
    background: rgba(72, 153, 255, .14);
    white-space: pre-wrap;
}

.bcx-aiassist-card form {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.bcx-aiassist-card textarea {
    width: 100%;
    resize: vertical;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

.bcx-aiassist-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 10px;
}

@media (max-width: 540px) {
    .bcx-aiassist-fab-label {
        display: none;
    }

    .bcx-aiassist-modal {
        padding: 0;
    }

    .bcx-aiassist-card {
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

/* ===== Phase 12 batch I — avatar topbar, icon-only buttons, footer 3-col, number centering ===== */
.bcx-avatar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.bcx-avatar-link:hover {
    background: var(--panel);
    text-decoration: none;
}

.bcx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex: 0 0 34px;
    box-shadow: var(--shadow);
    object-fit: cover;
}

.bcx-avatar-gen {
    background: linear-gradient(135deg,
            hsl(var(--bcx-avatar-h, 200) 65% 48%),
            hsl(calc(var(--bcx-avatar-h, 200) + 40) 65% 38%));
    letter-spacing: .02em;
}

.bcx-avatar-meta {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    font-size: 13px;
}

.bcx-avatar-meta strong {
    font-weight: 600;
}

.bcx-avatar-meta em {
    color: var(--accent-2);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.bcx-badge.bcx-badge-on-avatar {
    position: absolute;
    top: -2px;
    left: 24px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 999px;
    background: var(--danger, #e74c3c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-2);
}

/* Icon-only buttons (no text label) — used for download arrows etc. */
.bcx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}

.bcx-icon-btn:hover {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.bcx-icon-btn:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* Consistent number centering in pills/badges */
.pill,
.bcx-badge,
.bcx-count {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .bcx-avatar-meta {
        display: none;
    }

    .bcx-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bcx-footer-links,
    .bcx-footer-copy,
    .bcx-footer-version {
        justify-self: center;
        text-align: center;
    }
}

/* ===== Phase 12 batch L — checkbox filter chips ===== */
.bcx-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
}

.bcx-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease, border-color .18s ease;
}

.bcx-filter-chip input {
    accent-color: var(--accent);
}

.bcx-filter-chip:hover {
    border-color: var(--accent-2);
}

/* ===== Phase 12 batch P - visual hot-fixes ===== */
/* Spike cards: stop hardcoding light background */
.bcx-spike {
    background: var(--panel) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
}

.bcx-spike:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.bcx-spike.is-focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.bcx-spike-count {
    color: var(--muted) !important;
}

/* Top-up CTA: keep inline width, do not stretch */
.bcx-stack>section.card .bcx-row .btn,
.bcx-cta-inline {
    display: inline-flex !important;
    width: auto !important;
}

/* FAQ + tall text pages: footer pinned to viewport bottom when content short */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bcx-app,
main,
.bcx-marketing {
    flex: 1 0 auto;
}

.bcx-footer {
    flex-shrink: 0;
}

/* Red badge: cap to 9+, keep centered */
.bcx-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Download icon: bigger gap between arrow and the underscore baseline */
.bcx-icon-btn {
    font-size: 16px;
    line-height: 1;
    letter-spacing: -1px;
}

.bcx-icon-btn .bcx-icon-dl::before {
    content: "\2193";
    display: block;
    margin-bottom: 3px;
}

.bcx-icon-btn .bcx-icon-dl::after {
    content: "\2581";
    display: block;
    font-size: 10px;
}

/* View seats: person + chevron icon — row layout, vertically centred */
.bcx-icon-seat {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}

.bcx-icon-seat .seat,
.bcx-icon-seat .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bcx-icon-seat .seat::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Ccircle cx='6.5' cy='3' r='2.3' fill='%2394a3b8'/%3E%3Cpath d='M1.5 13c0-2.8 2.2-4.8 5-4.8s5 2 5 4.8' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    vertical-align: middle;
}

.bcx-icon-seat .arrow::after {
    content: '\203A';
    font-size: 13px;
    line-height: 1;
    opacity: 0.7;
}

/* Sticky footer fix - shell-aware */
.bcx-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bcx-shell>.bcx-marketing,
.bcx-shell>main,
.bcx-shell>.bcx-app {
    flex: 1 0 auto;
}

.bcx-shell>.bcx-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

/* ===== Phase 12 batch Q - 4-tab marketing flow polish ===== */
/* Remove blue outlines/box, add slide animation, keep idle tabs visible */
.bcx-showcase-nav label {
    opacity: 0.55;
    transition: opacity .25s ease, color .25s ease, background .25s ease, transform .25s ease !important;
    box-shadow: none !important;
}

.bcx-showcase-nav label:hover {
    opacity: 0.85;
}

#bcx-tab-1:checked~.bcx-showcase-nav label[for='bcx-tab-1'],
#bcx-tab-2:checked~.bcx-showcase-nav label[for='bcx-tab-2'],
#bcx-tab-3:checked~.bcx-showcase-nav label[for='bcx-tab-3'],
#bcx-tab-4:checked~.bcx-showcase-nav label[for='bcx-tab-4'] {
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.0)) !important;
    box-shadow: inset 0 -2px 0 0 var(--accent) !important;
    color: var(--ink) !important;
    transform: translateY(-1px);
}

.bcx-showcase-pane {
    animation: bcxSlide .42s cubic-bezier(.22, .7, .25, 1) !important;
}

@keyframes bcxSlide {
    0% {
        opacity: 0;
        transform: translateX(24px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Phase 12 batch R - profile redesign ===== */
.bcx-profile-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 28px;
    align-items: center;
    padding: 28px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 18px;
}

.bcx-profile-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.bcx-profile-avatar-gen {
    background: hsl(var(--bcx-avatar-h, 220), 60%, 50%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -1px;
}

.bcx-profile-id h1 {
    margin: 0 0 6px;
    font-size: 26px;
}

.bcx-profile-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.bcx-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.bcx-profile-tile {
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .18s ease;
}

.bcx-profile-tile:hover {
    border-color: var(--accent);
}

.bcx-profile-tile h4 {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.bcx-profile-tile p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 640px) {
    .bcx-profile-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bcx-profile-actions {
        justify-content: center;
    }
}

/* Phase 12 batch T - focused heatmap cell */
.bcx-heatmap-cell.is-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    z-index: 2;
    position: relative;
    transform: scale(1.4);
    transition: transform .18s ease;
}

/* Phase 12 batch T - heatmap responsive cell sizing */
.bcx-heatmap-card {
    overflow: hidden;
}

.bcx-heatmap-scroll {
    overflow-x: auto;
}

@media (max-width: 1100px) {
    .bcx-heatmap-card {
        --bcx-heatmap-cell: 13px;
    }
}

@media (max-width: 900px) {
    .bcx-heatmap-card {
        --bcx-heatmap-cell: 11px;
    }
}

@media (max-width: 720px) {
    .bcx-heatmap-card {
        --bcx-heatmap-cell: 9px;
    }
}

/* Phase 12 batch W - upsell card on lower tiers */
.bcx-upsell-card {
    border: 1px dashed var(--accent) !important;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), transparent) !important;
}

.bcx-upsell-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 12px;
    display: grid;
    gap: 4px;
    font-size: 13px;
}

.bcx-upsell-list li::before {
    content: "+ ";
    color: var(--accent);
    font-weight: 700;
}

/* Phase 12 batch Z - geo decluster + country list interactivity */
.bcx-geo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.bcx-country-row {
    transition: background 120ms ease;
}

.bcx-country-row:hover {
    background: rgba(99, 102, 241, 0.10);
}

.bcx-country-row.is-active,
.bcx-state-row:hover {
    background: rgba(99, 102, 241, 0.16);
}

.bcx-rows-toggle {
    text-align: center;
    margin-top: 6px;
}

.bcx-geo-bubble.is-active {
    stroke: var(--accent);
    stroke-width: 2;
}

.bcx-geo-state-bubble {
    fill: rgba(245, 158, 11, 0.85);
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 0.5;
}

.bcx-geo-state-label {
    font-size: 4px;
    fill: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 0.4;
}

/* Phase 12 batch AA - heatmap tooltip + popup + spike filters */
.bcx-heatmap-tip {
    position: absolute;
    z-index: 9999;
    background: var(--panel, #1a2030);
    color: var(--ink, #e6e9f2);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    padding: 6px 9px;
    font-size: 12px;
    border-radius: 6px;
    pointer-events: none;
    transform: translate(-50%, -100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 100ms ease;
    white-space: nowrap;
    max-width: 320px;
}

.bcx-heatmap-tip.is-visible {
    opacity: 1;
}

.bcx-heatmap-pop {
    position: absolute;
    z-index: 9998;
    background: var(--panel, #1a2030);
    color: var(--ink, #e6e9f2);
    border: 1px solid var(--accent);
    padding: 12px 14px 10px;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    min-width: 220px;
    max-width: 320px;
    display: none;
}

.bcx-heatmap-pop.is-visible {
    display: block;
}

.bcx-heatmap-pop-x {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.bcx-heatmap-cell:hover {
    z-index: 5;
    position: relative;
}

.bcx-spike-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.bcx-spike-filter {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.bcx-spike-filter:hover {
    border-color: var(--accent);
}

.bcx-spike-filter.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ============================================================
 * Phase A10 � Locality map polish (May 2026)
 * Top metric legend (clickable swatches), country grid/tab view,
 * decluttered country list, KB module styling.
 * ============================================================ */

/* #179 — metric chips → map gap: 12px (was 18px) */
.bcx-geo-metric-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.bcx-geo-metric-legend .label {
    align-self: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-right: 4px;
}

.bcx-geo-metric-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.bcx-geo-metric-swatch:hover {
    background: rgba(255, 255, 255, .06);
}

.bcx-geo-metric-swatch.is-active {
    background: rgba(56, 189, 248, .14);
    border-color: var(--accent);
}

.bcx-geo-metric-swatch .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Country list view tabs (Grid / Table / Overview) */
.bcx-view-tabs {
    display: inline-flex;
    gap: 4px;
    background: rgba(255, 255, 255, .03);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.bcx-view-tab {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    color: var(--muted);
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: background .12s ease, color .12s ease;
}

.bcx-view-tab:hover {
    color: var(--text);
}

.bcx-view-tab.is-active {
    background: var(--accent);
    color: #fff;
}

.bcx-view-pane {
    display: none;
}

.bcx-view-pane.is-active {
    display: block;
}

/* Country icon grid (medium tiles, flag + code + hits) */
.bcx-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
}

.bcx-country-tile {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform .1s ease, border-color .12s ease, background .12s ease;
}

.bcx-country-tile:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    background: rgba(56, 189, 248, .06);
}

.bcx-country-tile.is-active {
    border-color: var(--accent);
    background: rgba(56, 189, 248, .12);
}

.bcx-country-tile .flag {
    font-size: 26px;
    line-height: 1;
}

.bcx-country-tile .code {
    margin-top: 6px;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 13px;
}

.bcx-country-tile .hits {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* Tile detail popover (replaces the modal for the grid view) */
.bcx-country-detail {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: none;
}

.bcx-country-detail.is-open {
    display: block;
}

.bcx-country-detail h5 {
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.bcx-country-detail .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 0 4px;
}

.bcx-country-detail .stats>div {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.bcx-country-detail .stats .label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bcx-country-detail .stats .value {
    font-weight: 600;
    margin-top: 2px;
}

/* Make zoomed country bubbles fade out so they stop encompassing the country shape */
.bcx-geo-map.is-zoomed .bcx-geo-bubble:not(.is-active) {
    opacity: .15;
    transition: opacity .25s ease;
}

.bcx-geo-map.is-zoomed-deep .bcx-geo-bubble {
    opacity: .08;
}

/* State decluster bubbles (already exists � tighten label legibility) */
.bcx-geo-state-bubble {
    fill: var(--accent);
    fill-opacity: .55;
    stroke: #fff;
    stroke-width: .6;
}

.bcx-geo-state-label {
    fill: #fff;
    font-size: 4px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(8, 12, 22, .85);
    stroke-width: 1.2;
    pointer-events: none;
}

/* KB (knowledge base) reader */
.bcx-kb-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
}

@media (max-width: 800px) {
    .bcx-kb-shell {
        grid-template-columns: 1fr;
    }
}

.bcx-kb-nav {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.bcx-kb-nav h4 {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.bcx-kb-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.bcx-kb-nav li {
    margin-bottom: 4px;
}

.bcx-kb-nav a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
}

.bcx-kb-nav a:hover {
    background: rgba(255, 255, 255, .04);
}

.bcx-kb-nav a.on {
    background: var(--accent);
    color: #fff;
}

.bcx-kb-article {
    line-height: 1.65;
}

.bcx-kb-article h1 {
    margin-top: 0;
}

.bcx-kb-article h2 {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.bcx-kb-article code {
    background: rgba(255, 255, 255, .05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.bcx-kb-article pre {
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    font-size: 12px;
}

.bcx-kb-meta {
    margin-top: 28px;
    font-size: 11px;
    color: var(--muted);
}

/* KB admin editor */
.bcx-kb-editor textarea {
    width: 100%;
    min-height: 360px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    color: var(--text);
}

/* ---------- A8 :: i18n disclaimer banner --------------------------------- */
.bcx-i18n-disclaimer {
    background: linear-gradient(180deg, #2a3144, #1f2638);
    border-bottom: 1px solid #3a4258;
    color: #e6ecff;
    padding: 10px 20px;
}

.bcx-i18n-disclaimer-form {
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.bcx-i18n-disclaimer-body {
    flex: 1;
    min-width: 240px;
    font-size: 12.5px;
    line-height: 1.45;
}

.bcx-i18n-disclaimer-body strong {
    color: #ffd166;
}

.bcx-i18n-disclaimer-body p {
    margin: 4px 0 6px;
    color: #c8d1e6;
}

.bcx-i18n-disclaimer-ack {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #c8d1e6;
    font-size: 12px;
}

.bcx-i18n-disclaimer .btn {
    white-space: nowrap;
}

/* ---------- A8 :: Report-an-issue widget --------------------------------- */
.bcx-report-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #4b3a1a;
    background: #ffd166;
    color: #2a1d05;
    font-weight: 800;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: transform .18s ease, box-shadow .18s ease;
}

.bcx-report-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

.bcx-report-fab:focus-visible {
    outline: 2px solid #6ea8ff;
    outline-offset: 2px;
}

.bcx-report-modal[hidden] {
    display: none;
}

/* ── QA fixes (May 2026) ─────────────────────────────────────────── */

/* Ollama live chat shell — replace inline styles */
.bcx-ollama-shell {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 60vh;
    min-height: 420px;
}

.bcx-ollama-stream {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.bcx-ollama-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.bcx-ollama-input {
    flex: 1;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
}

.bcx-ollama-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Normalise locale dropdown z-index to shared scale */
:root {
    --z-dropdown: 200;
    --z-modal: 400;
    --z-toast: 600;
    --z-tip: 800;
}

.bcx-locale-dropdown {
    z-index: var(--z-dropdown) !important;
}

/* Pill inline spacing via class instead of inline style */
.bcx-pill-inline {
    margin-left: 6px;
}

/* Focus-visible for heatmap cells and geo bubbles */
.bcx-heatmap-cell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    transform: scale(1.5);
}

.bcx-geo-bubble:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Top-margin utility to replace inline style="margin-top:14/16px" */
.bcx-mt {
    margin-top: 14px;
}

/* Zero-margin and vertical-margin utilities */
.bcx-mt-0 {
    margin-top: 0;
}

.bcx-my {
    margin-top: 14px;
    margin-bottom: 14px;
}

.bcx-report-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    background: rgba(8, 12, 22, .45);
}

.bcx-report-card {
    width: min(440px, 100%);
    background: #1b2233;
    color: #e6ecff;
    border: 1px solid #2c3650;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.bcx-report-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bcx-report-card h3 {
    margin: 0;
    font-size: 16px;
}

.bcx-report-close {
    background: transparent;
    color: #c8d1e6;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.bcx-report-form label {
    display: block;
    margin: 8px 0;
    font-size: 12.5px;
    color: #b9c2db;
}

.bcx-report-form label>span {
    display: block;
    margin-bottom: 4px;
}

.bcx-report-form select,
.bcx-report-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0f1626;
    color: #e6ecff;
    border: 1px solid #2c3650;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
}

.bcx-report-form textarea {
    resize: vertical;
    min-height: 90px;
}

.bcx-report-meta {
    font-size: 11.5px;
    color: #8794b3;
    margin: 6px 0 12px;
    line-height: 1.45;
}

.bcx-report-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ---------- A8 :: Geo polish (tiles, quickview, transitions, cursors) ---- */
.bcx-country-tile {
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s ease, box-shadow .25s ease;
}

.bcx-country-tile .code {
    color: #e6ecff;
    font-weight: 700;
    letter-spacing: .04em;
}

.bcx-country-tile .hits {
    display: none;
    color: #c8d1e6;
    font-size: 11.5px;
    margin-top: 4px;
}

.bcx-country-tile.is-active {
    background: #20304a;
    box-shadow: inset 0 0 0 1px #6ea8ff;
}

.bcx-country-tile.is-active .hits {
    display: block;
}

/* Country detail panel: hidden until a tile click */
.bcx-country-detail {
    display: none;
    margin-top: 16px;
}

.bcx-country-detail.is-open {
    display: block;
    animation: bcxFadeIn .25s ease;
}

@keyframes bcxFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Share bar centred content */
.bcx-share-bar {
    display: flex;
    align-items: center;
}

.bcx-share-bar>span {
    display: block;
}

/* Smoother map transitions � no startle */
#bcxGeoViewport {
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.bcx-geo-bubble {
    transition: r .35s ease, opacity .35s ease, fill .35s ease;
}

/* Cursor fixes � no I-beam, default cursor on map background, grab only when zoom > 1 */
.bcx-geo-map svg,
.bcx-geo-map svg * {
    user-select: none;
    -webkit-user-select: none;
}

.bcx-geo-map svg {
    cursor: default;
}

.bcx-geo-map.is-zoomable.is-zoomed svg {
    cursor: grab;
}

.bcx-geo-map.is-zoomable.is-zoomed svg:active {
    cursor: grabbing;
}

.bcx-geo-map .bcx-geo-bubble {
    cursor: pointer;
}

/* Quick-view popup (left of map, NO backdrop blur) */
.bcx-geo-map {
    position: relative;
}

.bcx-geo-quickview {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 12;
    background: rgba(15, 22, 38, .92);
    border: 1px solid #2c3650;
    border-radius: 10px;
    padding: 10px 14px 12px;
    min-width: 200px;
    max-width: 240px;
    color: #e6ecff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    animation: bcxFadeIn .2s ease;
}

.bcx-geo-quickview[hidden] {
    display: none;
}

.bcx-geo-quickview-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.bcx-geo-quickview-head .flag {
    font-size: 18px;
}

.bcx-geo-quickview-head strong {
    font-size: 14px;
}

.bcx-geo-quickview-head small {
    font-size: 10.5px;
    margin-left: auto;
}

.bcx-geo-quickview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.bcx-geo-quickview-stats .label {
    font-size: 10px;
    color: #8794b3;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bcx-geo-quickview-stats .value {
    font-size: 14px;
    font-weight: 700;
}

.bcx-geo-quickview-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: #8794b3;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

.bcx-geo-quickview-close:hover {
    color: #e6ecff;
}

/* ---------- A10 :: Region badges + checkout modal ----------------------- */
.bcx-region-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bcx-region-asia {
    background: rgba(255, 176, 76, .16);
    color: #ffb04c;
    border: 1px solid rgba(255, 176, 76, .4);
}

/* ---------- A10 :: Geo deep panels + bubble clusters + hover isolate ---- */

/* Deep panels stack below the quickview on the left of the map */
/* #179 — deep panel padding 16px (was 12px 14px) */
.bcx-geo-deep {
    position: absolute;
    left: 18px;
    top: 200px;
    z-index: 11;
    width: 240px;
    background: rgba(15, 22, 38, .92);
    border: 1px solid #2c3650;
    border-radius: 10px;
    padding: 16px;
    color: #e6ecff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    animation: bcxFadeIn .2s ease;
}

.bcx-geo-deep[hidden] {
    display: none;
}

.bcx-geo-deep-state {
    top: 410px;
}

.bcx-geo-deep-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bcx-geo-deep-head strong {
    font-size: 13px;
    flex: 1;
}

.bcx-geo-deep-sub {
    font-size: 11px;
    margin: 6px 0 8px;
}

.bcx-geo-deep-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 180px;
    overflow: auto;
}

.bcx-geo-deep-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px;
    border-bottom: 1px dashed rgba(124, 140, 180, .18);
}

.bcx-geo-deep-list li:last-child {
    border-bottom: 0;
}

.bcx-geo-deep-list li.muted {
    color: #8794b3;
    justify-content: center;
}

.bcx-geo-deep-list strong {
    color: #6ea8ff;
}

.bcx-geo-deep-upsell {
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 11.5px;
    background: rgba(110, 168, 255, .08);
    border-radius: 6px;
}

.bcx-geo-deep-upsell[hidden] {
    display: none;
}

/* Bubble clusters: parent halo + micro-bubbles inside */
.bcx-geo-cluster-halo {
    fill: rgba(110, 168, 255, .06);
    stroke: rgba(110, 168, 255, .32);
    stroke-width: 0.6;
}

.bcx-geo-cluster.b1 .bcx-geo-cluster-halo {
    fill: rgba(255, 202, 138, .06);
    stroke: rgba(255, 202, 138, .30);
}

.bcx-geo-cluster.b2 .bcx-geo-cluster-halo {
    fill: rgba(255, 176, 76, .07);
    stroke: rgba(255, 176, 76, .34);
}

.bcx-geo-cluster.b3 .bcx-geo-cluster-halo {
    fill: rgba(255, 120, 80, .08);
    stroke: rgba(255, 120, 80, .40);
}

.bcx-geo-cluster.b4 .bcx-geo-cluster-halo {
    fill: rgba(255, 90, 90, .10);
    stroke: rgba(255, 90, 90, .50);
}

.bcx-geo-micro {
    transition: opacity .25s ease, transform .25s ease, fill .25s ease;
}

.bcx-geo-micro.b1 {
    fill: #ffca8a;
}

.bcx-geo-micro.b2 {
    fill: #ffb04c;
}

.bcx-geo-micro.b3 {
    fill: #ff7850;
}

.bcx-geo-micro.b4 {
    fill: #ff5a5a;
}

.bcx-geo-micro.is-core {
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 0.45;
}

.bcx-geo-cluster:hover .bcx-geo-micro {
    transform-origin: center;
}

/* Hover-isolation: dim everything that isn't the hovered cluster */
.bcx-geo-bubbles.is-isolating .bcx-geo-bubble:not(.is-hover) {
    opacity: 0.18;
}

.bcx-geo-bubbles.is-isolating .bcx-geo-bubble.is-hover {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(110, 168, 255, .55));
}

/* State ring bubbles (decluster overlay) — soft glow halo, no hard outline. */
.bcx-geo-state-cluster {
    cursor: pointer;
}

.bcx-geo-state-halo {
    fill: rgba(56, 189, 248, .06);
    stroke: rgba(56, 189, 248, .32);
    stroke-width: 0.5;
    pointer-events: none;
    transition: fill .25s ease, stroke .25s ease;
}

.bcx-geo-state-micro {
    pointer-events: none;
    transition: fill .25s ease, opacity .25s ease;
}

.bcx-geo-state-bubble {
    fill: rgba(110, 168, 255, .85);
    stroke: none;
    cursor: pointer;
    transition: r .25s ease, fill .25s ease;
    filter: drop-shadow(0 0 1.6px rgba(110, 168, 255, .65));
}

.bcx-geo-state-bubble:hover,
.bcx-geo-state-cluster:hover .bcx-geo-state-bubble {
    fill: rgba(255, 176, 76, .95) !important;
    filter: drop-shadow(0 0 2.4px rgba(255, 176, 76, .9));
}

.bcx-geo-state-label {
    fill: #e6ecff;
    font-size: 3px;
    font-weight: 700;
    pointer-events: none;
    text-shadow: 0 0 2px rgba(0, 0, 0, .85);
}

/* ===== Geo layout: countries sidebar (ear + collapsible content) + map card ===== */
/* When the sidebar is collapsed its content width becomes 0, returning the map card
   to the full row width. The ear (toggle only) stays in-flow at 28 px so there is
   always a handle to reopen it without the arrow overlapping the map. */
.bcx-geo-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    position: relative;
}

.bcx-geo-card {
    flex: 1;
    min-width: 0;
    transition: none;
    /* map fills leftover space naturally as sidebar transitions */
}

/* --- Sidebar outer wrapper: flex row (ear | content) ---- */
/* #177 — ear removed from flex flow; positioned absolutely on right edge */
.bcx-countries-sidebar {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 80px);
    z-index: 10;
    overflow: visible;
    /* allow ear to protrude outside box */
}

/* #177 — toggle ear: absolutely positioned, straddles the sidebar/map border */
.bcx-sidebar-ear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 20;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The collapsible content panel */
/* #179 — inner padding 16px (was 14px) */
.bcx-sidebar-content {
    width: 240px;
    overflow: hidden;
    background: var(--bcx-card, #141e30);
    border: 1px solid #2c3650;
    border-radius: 10px;
    padding: 16px;
    margin-right: 14px;
    /* gap between content and map card */
    max-height: inherit;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2c3650 transparent;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    /* Push/pull transition: width + associated spacing collapse smoothly */
    transition:
        width .3s cubic-bezier(.4, 0, .2, 1),
        padding-left .3s cubic-bezier(.4, 0, .2, 1),
        padding-right .3s cubic-bezier(.4, 0, .2, 1),
        margin-right .3s cubic-bezier(.4, 0, .2, 1),
        opacity .2s ease,
        border-color .25s ease;
}

.bcx-sidebar-content::-webkit-scrollbar {
    width: 4px;
}

.bcx-sidebar-content::-webkit-scrollbar-thumb {
    background: #2c3650;
    border-radius: 2px;
}

/* Collapsed: content slides out of flow, map expands to fill */
.bcx-countries-sidebar.is-collapsed .bcx-sidebar-content {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    opacity: 0;
    border-color: transparent;
    pointer-events: none;
    overflow: hidden;
}

/* --- Sidebar head: title left, tabs right, no wrapping --- */
.bcx-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    white-space: nowrap;
}

.bcx-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #e6ecff;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Toggle button (sits in the ear, always visible) --- */
.bcx-sidebar-toggle {
    width: 28px;
    height: 28px;
    background: rgba(30, 45, 70, 0.85);
    border: 1.5px solid #4a90d9;
    border-radius: 5px;
    color: #c8d8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: color .2s, border-color .2s, background .2s;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.bcx-sidebar-toggle:hover {
    color: #e6ecff;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, .15);
}

/* Sidebar view tabs — tighter than standard */
.bcx-sidebar-content .bcx-view-tabs {
    gap: 4px;
    flex-shrink: 0;
}

.bcx-sidebar-content .bcx-view-tab {
    padding: 3px 8px;
    font-size: 11px;
}

/* Country grid: max 2 columns (min 1 on narrow screens) */
.bcx-sidebar-content .bcx-country-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    transition: opacity .15s ease;
}

/* At viewport ≤ 800 px the sidebar drops to 1 column to stay readable */
@media (max-width: 800px) {
    .bcx-sidebar-content .bcx-country-grid {
        grid-template-columns: 1fr;
    }
}

.bcx-sidebar-content .bcx-country-tile {
    padding: 6px 4px;
}

.bcx-sidebar-content .bcx-country-tile .flag img {
    width: 24px;
    height: 18px;
}

.bcx-sidebar-content .bcx-country-tile .code {
    font-size: 9px;
    margin-top: 2px;
}

/* Table in sidebar — compact */
.bcx-sidebar-content .bcx-table th,
.bcx-sidebar-content .bcx-table td {
    padding: 5px 6px;
    font-size: 11.5px;
}

/* Table pane: content scrollable within sidebar height */
.bcx-sidebar-content [data-view-pane="table"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bcx-table-scroll {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #2c3650 transparent;
}

/* --- < > pager for grid and table overflow --- */
.bcx-geo-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 2px;
    font-size: 11px;
    color: var(--muted, #8794b3);
}

/* ================================================================
 * #176 — Decluttered country table
 * ================================================================ */
.bcx-sidebar-content .bcx-countries-table {
    width: 100%;
    border-collapse: collapse;
}

.bcx-sidebar-content .bcx-countries-table thead th {
    position: sticky;
    top: 0;
    background: var(--bcx-card, #141e30);
    z-index: 1;
    padding: 4px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8794b3;
    border-bottom: 1px solid #2c3650;
    white-space: nowrap;
}

.bcx-sidebar-content .bcx-countries-table thead th.num,
.bcx-sidebar-content .bcx-countries-table td.num {
    text-align: right;
}

.bcx-sidebar-content .bcx-countries-table tr {
    height: 32px;
}

.bcx-sidebar-content .bcx-countries-table td {
    padding: 0 6px;
    font-size: 12px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(44, 54, 80, .5);
}

.bcx-sidebar-content .bcx-countries-table td.flag-cell {
    padding: 0 4px;
    width: 24px;
    text-align: center;
}

.bcx-sidebar-content .bcx-countries-table td.flag-cell img {
    display: block;
    margin: auto;
    border-radius: 1px;
}

.bcx-sidebar-content .bcx-countries-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.08);
    cursor: pointer;
}

.bcx-sidebar-content .bcx-countries-table tbody tr.is-active {
    box-shadow: inset 3px 0 0 var(--accent, #38bdf8);
    background: rgba(56, 189, 248, 0.10);
}

/* ================================================================
 * #178 — Multi-area region tab strip in deep panel
 * ================================================================ */
.bcx-geo-region-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 6px;
    overflow: hidden;
}

.bcx-geo-region-tab-inner {
    display: flex;
    flex: 1;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
}

.bcx-geo-region-tab-inner::-webkit-scrollbar {
    display: none;
}

.bcx-geo-region-nav {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: none;
    border: 1px solid #2c3650;
    border-radius: 4px;
    color: #8794b3;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color .15s, border-color .15s;
}

.bcx-geo-region-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.bcx-geo-region-nav:not(:disabled):hover {
    border-color: var(--accent, #38bdf8);
    color: #e6ecff;
}

.bcx-geo-region-tab {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #2c3650;
    background: transparent;
    color: #8794b3;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}

.bcx-geo-region-tab:hover {
    color: #e6ecff;
}

.bcx-geo-region-tab.is-active {
    background: rgba(56, 189, 248, 0.14);
    border-color: var(--accent, #38bdf8);
    color: #e6ecff;
}

/* ================================================================
 * #179 — Mobile: below 720px stack layout
 * ================================================================ */
@media (max-width: 720px) {
    .bcx-geo-layout {
        flex-direction: column;
    }

    .bcx-countries-sidebar {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    .bcx-sidebar-ear {
        display: none;
        /* collapse toggle hidden on mobile — always-expanded */
    }

    .bcx-sidebar-content {
        width: 100% !important;
        margin-right: 0 !important;
        opacity: 1 !important;
        border-color: #2c3650 !important;
        pointer-events: auto !important;
        overflow-y: visible;
        max-height: none;
    }

    .bcx-countries-sidebar.is-collapsed .bcx-sidebar-content {
        /* Always show on mobile regardless of collapsed state */
        width: 100% !important;
        padding: 16px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.bcx-geo-pager-btn {
    background: none;
    border: 1px solid #2c3650;
    border-radius: 4px;
    color: #8794b3;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, color .15s;
    padding: 0;
    line-height: 1;
}

.bcx-geo-pager-btn:hover:not(:disabled) {
    border-color: #38bdf8;
    color: #e6ecff;
}

.bcx-geo-pager-btn:disabled {
    opacity: .3;
    cursor: default;
}

.bcx-geo-pager-info {
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
    .bcx-geo-layout {
        flex-direction: column;
        gap: 0;
    }

    .bcx-countries-sidebar {
        position: static;
        max-height: none;
        width: 100%;
        flex-direction: column;
    }

    .bcx-sidebar-ear {
        flex-direction: row;
        width: 100%;
        padding: 8px 12px 0;
        justify-content: flex-start;
    }

    .bcx-sidebar-content {
        width: 100% !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-color: #2c3650 !important;
        margin-right: 0;
        margin-bottom: 14px;
        overflow: visible;
        max-height: none;
        padding: 12px;
    }

    .bcx-sidebar-content .bcx-country-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1100px) {
    .bcx-geo-deep {
        width: 200px;
    }

    .bcx-geo-deep-state {
        top: 380px;
    }
}

/* ---------- A10 batch 2 :: report KPI grid + tools card buttons + geo panel stack ---- */

/* Tenant report KPI grid */
.bcx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

.bcx-kpi-card {
    background: rgba(20, 28, 46, .65);
    border: 1px solid #2c3650;
    border-radius: 10px;
    padding: 14px 16px;
}

.bcx-kpi-card .bcx-kpi-label {
    font-size: 11.5px;
    color: #8794b3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.bcx-kpi-card .bcx-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #e6ecff;
    line-height: 1.1;
}

.bcx-kpi-card .bcx-kpi-delta {
    font-size: 12px;
    margin-top: 4px;
}

/* Tools card buttons: bottom-aligned in a flex column for consistency */
.bcx-grid-2>.bcx-card {
    display: flex;
    flex-direction: column;
}

.bcx-grid-2>.bcx-card>p:last-child {
    margin-top: auto;
    padding-top: 6px;
}

/* Geo: group the left rail panels closer (no big vertical gap). Quickview
   sits at top:18px; deep panel directly under it; state-deep below that. */
.bcx-geo-quickview {
    z-index: 12;
}

.bcx-geo-deep {
    top: 138px !important;
}

.bcx-geo-deep-state {
    top: 318px !important;
}

/* When the country path is "active" (focused via deep load), give it a tinted
   highlight so the user can see what they drilled into. */
.bcx-geo-countries path.is-active {
    fill: #6ea8ff !important;
    opacity: 0.55;
}

/* ---- Integrations + Store (Phase 12 add-on tidy) ---- */
.bcx-integration-section {
    padding: 22px 24px;
}

.bcx-section-head {
    margin-bottom: 16px;
}

.bcx-section-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.bcx-section-head p {
    margin: 0;
    font-size: 13px;
}

.bcx-integration-card {
    display: flex;
    flex-direction: column;
}

.bcx-integration-card h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0;
}

.bcx-integration-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.bcx-addon-card.is-active {
    border-color: var(--bcx-accent, #3aa);
}

.bcx-addon-caps {
    margin: 8px 0 14px;
    padding-left: 18px;
    font-size: 13px;
    color: var(--bcx-muted, #8a93a4);
}

.bcx-addon-caps li {
    margin: 2px 0;
}

.bcx-store-card {
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bcx-store-card.is-in-cart {
    border-color: var(--bcx-accent, #3aa);
    box-shadow: 0 0 0 1px var(--bcx-accent, #3aa) inset;
}

.bcx-store-card h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0;
}

.bcx-store-card form {
    margin-top: auto;
}

.bcx-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bcx-accent, #3aa);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
}

.bcx-cart-pill:hover {
    filter: brightness(1.1);
}

.bcx-cart-pill .bcx-cart-total {
    opacity: .85;
    font-weight: 500;
}

.bcx-cart-table tfoot th {
    background: rgba(58, 170, 170, 0.06);
}

.bcx-cart-qty {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.bcx-cart-qty input {
    width: 70px;
}

.bcx-cart-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    align-items: center;
}

.bcx-cart-actions form {
    margin: 0;
}

.btn.small {
    padding: 4px 10px;
    font-size: 12px;
}

/* Provenance pill (Gwen GAI-lens spec) � tags AI-touched form slots on /sites/{id}/edit. */
.bcx-slot {
    position: relative;
    display: block;
}

.bcx-ai-pill {
    position: absolute;
    top: 0;
    right: 0;
    background: #8ecae6;
    color: #0b1320;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 8px;
    letter-spacing: .3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    pointer-events: none;
    user-select: none;
}

/* Dashboard empty-state hero (Phase 13 S7) - first-time tenant guidance. */
.bcx-empty-hero {
    border-left: 4px solid #6ea8fe;
    background: linear-gradient(135deg, rgba(110, 168, 254, .06), rgba(168, 85, 247, .04));
}

.bcx-empty-hero h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.bcx-empty-steps {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 10px;
}

.bcx-empty-steps li {
    padding: 10px 14px;
    border: 1px dashed var(--line);
    border-radius: 8px;
}

.bcx-empty-steps li strong {
    color: #6ea8fe;
    margin-right: 6px;
}

/* ===== Phase 14 S4 CSS overrides ===== */

/* Overview mode: uniform sky-blue on all volume buckets */
.bcx-geo-bubbles.is-overview-mode .bcx-geo-bubble,
.bcx-geo-bubbles.is-overview-mode .bcx-geo-bubble.b1,
.bcx-geo-bubbles.is-overview-mode .bcx-geo-bubble.b2,
.bcx-geo-bubbles.is-overview-mode .bcx-geo-bubble.b3,
.bcx-geo-bubbles.is-overview-mode .bcx-geo-bubble.b4 {
    fill: #38bdf8 !important;
}

/* Overview mode: also force micro-circles and cluster halos to sky-blue */
.bcx-geo-bubbles.is-overview-mode .bcx-geo-micro {
    fill: #38bdf8 !important;
}

.bcx-geo-bubbles.is-overview-mode .bcx-geo-cluster-halo {
    fill: rgba(56, 189, 248, 0.06) !important;
    stroke: rgba(56, 189, 248, 0.32) !important;
}

/* Focused state: hide non-selected country bubbles once a country is drilled into */
.bcx-geo-bubbles.has-focus .bcx-geo-bubble:not(.is-active),
.bcx-geo-bubbles.has-focus .bcx-geo-cluster:not(.is-active) {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
}

/* State-ring bubbles: slightly larger dots + white stroke for legibility */
.bcx-geo-state-bubble {
    fill: #38bdf8;
    stroke: #fff;
    stroke-width: 0.5;
    opacity: 0.9;
}

.bcx-geo-state-label {
    font-size: 3.5px;
    fill: #e2e8f0;
    font-weight: 600;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Campaigns heartbeat: pulsing purple ring on bubbles with campaign   */
/* activity when the Campaigns metric filter is active.                */
/* ------------------------------------------------------------------ */
@keyframes bcxGeoHeartbeat {
    0% {
        r: 0;
        opacity: 0.8;
    }

    60% {
        r: 1;
        opacity: 0.5;
    }

    100% {
        r: 2.2;
        opacity: 0;
    }
}

/* The halo ring is injected as a <circle class="bcx-camp-ring"> sibling
   inside the cluster <g> by JS when has-campaigns is toggled on.     */
.bcx-geo-bubble.has-campaigns .bcx-camp-ring,
.bcx-geo-cluster.has-campaigns .bcx-camp-ring {
    fill: none;
    stroke: #7c3aed;
    stroke-width: 1.2;
    animation: bcxGeoHeartbeat 1.6s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* Make the cluster halo itself tinted purple when campaigns is selected */
.bcx-geo-cluster.has-campaigns .bcx-geo-cluster-halo {
    stroke: #7c3aed;
    stroke-width: 1.0;
    stroke-opacity: 0.7;
}

/* bcx-icon-seat: duplicate block removed (consolidated above) */

/* ─── Navigation chevron icons (replaces raw ← → text glyphs) ─── */
.bcx-back-link::before {
    content: '\2039';
    margin-right: 4px;
    font-style: normal;
    opacity: 0.8;
}

.bcx-fwd-link::after {
    content: '\203A';
    margin-left: 4px;
    font-style: normal;
    opacity: 0.8;
}

/* ─── Lock icon for tier-gated elements ─── */
.bcx-icon-lock::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none'%3E%3Crect x='1' y='6' width='10' height='8' rx='1.5' fill='%2394a3b8'/%3E%3Cpath d='M3.5 6V3.5a2.5 2.5 0 0 1 5 0V6' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Country tile flag img */
.bcx-country-tile .flag img {
    width: 32px;
    height: 24px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Score badges (#158) — color-coded 0-100 engagement score
   ───────────────────────────────────────────────────────────────────────── */
.bcx-score-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.6;
    white-space: nowrap;
}

.bcx-score-badge.is-unscored {
    background: #f1f5f9;
    color: #94a3b8;
}

.bcx-score-badge.is-cold {
    background: #f1f5f9;
    color: #64748b;
}

.bcx-score-badge.is-warm {
    background: #fef9c3;
    color: #a16207;
}

.bcx-score-badge.is-engaged {
    background: #dbeafe;
    color: #1d4ed8;
}

.bcx-score-badge.is-hot {
    background: #dcfce7;
    color: #15803d;
}

.bcx-score-badge.is-fire {
    background: linear-gradient(90deg, #fde68a, #fca5a5);
    color: #7f1d1d;
}

.bcx-score-badge.is-lg {
    padding: 3px 12px;
    font-size: 1.1em;
    border-radius: 14px;
}

/* Lead card top row — name + score badge side by side */
.bcx-lead-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.bcx-lead-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.bcx-lead-card:hover {
    box-shadow: 0 4px 16px #1f2d4428;
    border-color: #4f8cff44;
}

.bcx-kanban-count {
    display: inline-block;
    background: #e2e8f0;
    color: #475569;
    border-radius: 8px;
    font-size: 0.78em;
    padding: 0 6px;
    margin-left: 6px;
    font-weight: 600;
    vertical-align: middle;
}

.bcx-kanban-empty {
    color: #94a3b8;
    font-size: 0.9em;
    text-align: center;
    padding: 24px 0 8px;
}

.bcx-leads-top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bcx-leads-search-form {
    flex: 1;
}

.bcx-leads-search-input {
    width: 100%;
    max-width: 320px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.97em;
    background: #fff;
    color: #1f2d44;
}

.bcx-lead-link {
    color: #1f2d44;
    text-decoration: none;
    font-weight: 500;
}

.bcx-lead-link:hover {
    color: #4f8cff;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   Lead detail page (#103)
   ───────────────────────────────────────────────────────────────────────── */
.bcx-lead-detail-wrap {
    padding: 0 0 40px 0;
}

.bcx-lead-detail-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 820px) {
    .bcx-lead-detail-grid {
        grid-template-columns: 1fr;
    }
}

.bcx-lead-profile-card {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 24px 20px 20px;
    text-align: center;
    position: sticky;
    top: 80px;
}

.bcx-lead-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f8cff, #7c3aed);
    color: #fff;
    font-size: 2em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.bcx-lead-profile-name {
    font-size: 1.18em;
    font-weight: 700;
    margin: 0 0 2px;
    color: #1f2d44;
}

.bcx-lead-profile-title {
    color: #4b5c77;
    font-size: 0.93em;
    margin-bottom: 2px;
}

.bcx-lead-profile-company {
    color: #64748b;
    font-size: 0.93em;
    margin-bottom: 14px;
    font-weight: 500;
}

.bcx-lead-profile-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 16px;
}

.bcx-lead-score-label {
    font-size: 0.82em;
    color: #94a3b8;
}

.bcx-lead-profile-meta {
    text-align: left;
    font-size: 0.9em;
    color: #4b5c77;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    margin-top: 4px;
}

.bcx-lead-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.bcx-lead-meta-row a {
    color: #4f8cff;
    text-decoration: none;
}

.bcx-lead-meta-row a:hover {
    text-decoration: underline;
}

.bcx-meta-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    opacity: 0.7;
    margin-top: 1px;
}

.bcx-lead-status-control {
    margin-top: 18px;
    text-align: left;
}

.bcx-lead-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.bcx-status-pill {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.83em;
    font-weight: 600;
    border: 1.5px solid #d1d5db;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.bcx-status-pill:hover {
    border-color: #4f8cff;
    color: #4f8cff;
    background: #eff6ff;
}

.bcx-status-pill.is-active {
    border-color: #4f8cff;
    background: #4f8cff;
    color: #fff;
}

/* Activity timeline */
.bcx-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bcx-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.92em;
}

.bcx-timeline-item:last-child {
    border-bottom: none;
}

.bcx-timeline-icon {
    flex-shrink: 0;
    font-size: 1.1em;
    margin-top: 1px;
}

.bcx-timeline-body {
    flex: 1;
    color: #1f2d44;
}

.bcx-timeline-label {
    font-weight: 600;
}

.bcx-timeline-meta {
    display: block;
    color: #64748b;
    font-size: 0.9em;
    word-break: break-all;
}

.bcx-timeline-ts {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.86em;
    white-space: nowrap;
}

/* Notes */
.bcx-notes-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.bcx-note-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.bcx-note-item:last-child {
    border-bottom: none;
}

.bcx-note-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 0.84em;
}

.bcx-note-author {
    font-weight: 600;
    color: #1f2d44;
}

.bcx-note-ts {
    color: #94a3b8;
}

.bcx-note-body {
    font-size: 0.93em;
    color: #334155;
    white-space: pre-wrap;
    line-height: 1.6;
}

.bcx-note-form {
    margin-top: 16px;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}

.bcx-note-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.93em;
    resize: vertical;
    background: #f9fafb;
    color: #1f2d44;
    font-family: inherit;
    box-sizing: border-box;
}

.bcx-note-textarea:focus {
    border-color: #4f8cff;
    outline: none;
    background: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   Campaign stats inline panel (#105)
   ───────────────────────────────────────────────────────────────────────── */
.bcx-campaign-stats-cell {
    padding: 0 !important;
}

.bcx-campaign-stats-panel {
    background: #f8fafc;
    border-top: 1px solid #e3e8ee;
    padding: 16px 20px;
}

.bcx-stats-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.bcx-stats-kpi {
    min-width: 80px;
}

.bcx-stats-kpi-val {
    font-size: 1.6em;
    font-weight: 700;
    color: #1f2d44;
    line-height: 1.1;
}

.bcx-stats-kpi-label {
    font-size: 0.8em;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.4;
}

.bcx-stats-kpi-label small {
    display: block;
    font-size: 0.9em;
    color: #4f8cff;
    font-weight: 600;
}

.pill-channel {
    background: #eff6ff;
    color: #1d4ed8;
    border: none;
}

.bcx-stats-toggle {
    min-width: 64px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Landing: social proof stats bar
   ───────────────────────────────────────────────────────────────────────── */
.bcx-mk-stats-bar {
    background: #0d1f38;
    padding: 20px 0 !important;
    border-top: 1px solid #1f3050;
    border-bottom: 1px solid #1f3050;
}

.bcx-mk-stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

.bcx-mk-stat {
    flex: 1 1 160px;
    text-align: center;
    padding: 12px 20px;
    border-right: 1px solid #1f3050;
}

.bcx-mk-stat:last-child {
    border-right: none;
}

.bcx-mk-stat strong {
    display: block;
    font-size: 1.7em;
    font-weight: 800;
    color: #4f8cff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.bcx-mk-stat span {
    display: block;
    font-size: 0.82em;
    color: #94a3b8;
    margin-top: 3px;
}

@media (max-width: 640px) {
    .bcx-mk-stats-grid {
        flex-direction: column;
    }

    .bcx-mk-stat {
        border-right: none;
        border-bottom: 1px solid #1f3050;
    }

    .bcx-mk-stat:last-child {
        border-bottom: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Landing: comparison table
   ───────────────────────────────────────────────────────────────────────── */
.bcx-compare-wrap {
    overflow-x: auto;
    margin-top: 28px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.bcx-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93em;
}

.bcx-compare-table th,
.bcx-compare-table td {
    padding: 11px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bcx-compare-table th:first-child,
.bcx-compare-table td:first-child {
    text-align: left;
    color: #cbd5e1;
    font-weight: 500;
}

.bcx-compare-table thead th {
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.88em;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bcx-compare-table th.bcx-compare-us {
    background: rgba(79, 140, 255, 0.18);
    color: #93c5fd;
}

.bcx-compare-table td.bcx-compare-us {
    background: rgba(79, 140, 255, 0.08);
    color: #86efac;
    font-weight: 700;
}

.bcx-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.bcx-compare-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}
/* ============================================================
   CRM Pipeline Kanban  (#187)
   ============================================================ */

.bcx-crm-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 24px;
    min-height: 520px;
    align-items: flex-start;
}
.bcx-crm-col {
    min-width: 250px;
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.bcx-crm-col.is-over { background: rgba(79, 140, 255, 0.06); }
.bcx-crm-col-head { padding: 14px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.bcx-crm-col-title {
    font-size: .82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bcx-crm-col-accent {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bcx-crm-col-meta { font-size: .76em; color: var(--muted); margin-top: 6px; }
.bcx-crm-col-body {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}
.bcx-crm-card {
    background: var(--bg-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 11px 13px;
    cursor: grab;
    user-select: none;
    transition: transform .15s, box-shadow .15s;
}
.bcx-crm-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.bcx-crm-card.is-dragging { opacity: .35; cursor: grabbing; }
.bcx-crm-card-title { font-size: .88em; font-weight: 600; margin-bottom: 5px; line-height: 1.35; }
.bcx-crm-card-value { font-size: .84em; color: var(--accent); font-weight: 700; margin-bottom: 5px; }
.bcx-crm-card-meta {
    font-size: .75em;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.bcx-crm-win-prob {
    font-size: .72em;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(79, 140, 255, .12);
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}
.bcx-crm-won {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .25);
}
.bcx-crm-won .bcx-crm-card-title { color: #10b981; }
.bcx-crm-lost { opacity: .4; filter: grayscale(.6); }
.bcx-pipeline-value { font-size: 1.05em; font-weight: 700; color: var(--accent); }

/* CRM slide-in panel */
.bcx-crm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 490;
}
.bcx-crm-overlay.is-open { display: block; }
.bcx-crm-panel {
    position: fixed;
    top: 0;
    right: -430px;
    width: 400px;
    height: 100vh;
    background: var(--bg-2);
    border-left: 1px solid rgba(255, 255, 255, .1);
    z-index: 500;
    transition: right .25s ease;
    overflow-y: auto;
    padding: 24px;
    box-shadow: -8px 0 32px rgba(0,0,0,.35);
}
.bcx-crm-panel.is-open { right: 0; }
.bcx-crm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.bcx-crm-panel-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
}
.bcx-crm-panel-close:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* Won / Lost action buttons in panel */
.bcx-crm-btn-won {
    background: rgba(16, 185, 129, .12);
    color: #10b981;
    border-color: rgba(16, 185, 129, .3);
}
.bcx-crm-btn-won:hover { background: rgba(16, 185, 129, .22); }
.bcx-crm-btn-lost {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, .25);
}
.bcx-crm-btn-lost:hover { background: rgba(239, 68, 68, .2); }

/* Add opportunity modal */
.bcx-crm-add-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: 96vw;
    background: var(--bg-2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 28px;
    z-index: 610;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}