/* ============================================================
   BizRatings — common.css  ★ SSOT — PROJECT-WIDE RULES ONLY ★
   ------------------------------------------------------------
   This file is the single source of truth for design tokens,
   font-faces, base reset, typography, buttons, forms, modals,
   pills/cards/cookie banner, and dark mode that apply to EVERY
   page in the project (public + post-login).

   ⚠ DO NOT add page-specific rules here. If a rule applies to
   one page (or one feature on one page), it belongs in
   `assets/css/<page-key>.css` and must be loaded via the
   `[PAGE_CSS]` slot in masterlayout.html (post-login pages) or
   the equivalent <link> on public pages.

   See also: assets/css/account.css (SSOT post-login shell only).
   v3.11
   ============================================================ */

/* ---------- @font-face: Nacelle ---------- */
/* v3.36 — Inter weights 100–800 loaded so .br-ai-accent (font-weight:200,
   Extra-Light) renders correctly. Page-level <link> tags must mirror this
   weight set (see survey-setup.html, survey-responses.html). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Nacelle';
    src: url('/fonts/nacelle-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nacelle';
    src: url('/fonts/nacelle-regular.woff2') format('woff2'), url('/fonts/nacelle-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nacelle';
    src: url('/fonts/nacelle-semibold.woff2') format('woff2'), url('/fonts/nacelle-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nacelle';
    src: url('/fonts/nacelle-bold.woff2') format('woff2'), url('/fonts/nacelle-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- CSS Variables (Design Tokens) ---------- */
:root {
    --bg: hsl(120, 4%, 91%);
    --fg: hsl(211, 97%, 11%);
    --card: hsl(0, 0%, 100%);
    --card-fg: hsl(211, 97%, 11%);
    --primary: hsl(223, 46%, 45%);
    --primary-fg: hsl(0, 0%, 100%);
    --secondary: hsl(120, 4%, 95%);
    --secondary-fg: hsl(211, 97%, 11%);
    --muted: hsl(120, 4%, 87%);
    --muted-fg: hsl(223, 20%, 45%);
    --accent: hsl(96, 66%, 47%);
    --accent-fg: hsl(0, 0%, 100%);
    --destructive: hsl(355, 73%, 52%);
    --border: hsl(120, 4%, 82%);
    --ring: hsl(222, 100%, 60%);
    --radius: 0.75rem;
    --brand-blue: hsl(222, 100%, 60%);
    --brand-navy: hsl(213, 100%, 11%);
    --brand-yellow: hsl(44, 98%, 62%);
    --brand-green: hsl(96, 66%, 47%);
    --brand-orange: hsl(16, 100%, 50%);
    --sidebar-bg: hsl(211, 60%, 14%);
    --sidebar-fg: hsl(0, 0%, 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Nacelle', sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.br-heading, .br-form-title, .br-hero-title,
.br-auth-title, .br-card-title,
.br-page-header-title, .br-step-title,
.br-value-title, .br-feature-title {
    font-family: 'Inter', 'Nacelle', sans-serif;
    font-weight: 600;
}

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

    a:hover {
        text-decoration: underline;
        color: var(--brand-blue);
    }

img {
    max-width: 100%;
}

.br-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- Utility classes ---------- */
.text-accent {
    color: var(--accent) !important;
}

.text-brand-blue {
    color: var(--brand-blue) !important;
}

.text-brand-yellow {
    color: var(--brand-yellow) !important;
}

.text-white {
    color: #fff !important;
}

.text-white-70 {
    color: rgba(255,255,255,0.7) !important;
}

.text-white-50 {
    color: rgba(255,255,255,0.5) !important;
}

.text-muted {
    color: var(--muted-fg) !important;
}

.bg-brand-blue-light {
    background: hsla(222,100%,60%,0.1);
    color: var(--brand-blue);
}

.bg-accent-light {
    background: hsla(96,66%,47%,0.1);
    color: var(--accent);
}

.bg-rainbow {
    background: linear-gradient(135deg, #FF0000, #FF8800, #FFDD00, #00CC44, #0088FF, #8800FF);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-br-blue {
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
}

    .btn-br-blue:hover, .btn-br-blue:focus {
        background: hsl(222, 100%, 50%);
        color: #fff;
    }

.btn-br-green {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}

    .btn-br-green:hover, .btn-br-green:focus {
        background: hsl(96, 66%, 40%);
        color: #fff;
    }

.btn-outline-blue {
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
}

    .btn-outline-blue:hover {
        background: var(--brand-blue);
        color: #fff;
    }

.btn-outline-default {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
}

    .btn-outline-default:hover {
        background: var(--secondary);
    }

.btn-br-orange {
    background: #FF6B35;
    color: #fff;
    border: 1px solid #FF6B35;
}

    .btn-br-orange:hover {
        background: #e85a25;
        color: #fff;
    }

.btn-br-navy {
    background: hsl(213,100%,11%);
    color: #fff;
    border: 1px solid hsla(213,100%,30%,0.3);
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
}

    .btn-br-navy:hover {
        background: hsl(213,100%,16%);
        color: #fff;
    }

.btn i {
    margin-right: 4px;
}

/* ---------- Navbar ---------- */
.br-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.br-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.br-logo-img {
    height: 40px;
}

.br-nav-links {
    display: flex;
    gap: 32px;
}

.br-nav-link {
    color: var(--muted-fg);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s;
}

    .br-nav-link:hover {
        color: var(--fg);
        text-decoration: none;
    }

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

.br-hamburger {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--muted-fg);
    cursor: pointer;
    padding: 4px 8px;
}

.br-mobile-menu {
    padding: 12px 0 20px;
    border-top: 1px solid var(--border);
}

.br-mobile-link {
    display: block;
    padding: 8px 0;
    color: var(--muted-fg);
    font-weight: 500;
    font-size: 15px;
}

    .br-mobile-link:hover {
        color: var(--fg);
        text-decoration: none;
    }

/* ---------- Navbar Logo (rounded rect for dark bg compatibility) ---------- */
.br-navbar-logo-box {
    display: inline-block;
    border-radius: 10px;
    background: #fff;
    padding: 6px 10px;
}

    .br-navbar-logo-box img {
        height: 32px;
        display: block;
    }

/* ---------- Pill / Badge ---------- */
.br-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    background: hsla(222,100%,60%,0.12);
    color: var(--brand-blue);
    border: 1px solid hsla(222,100%,60%,0.25);
}

.br-pill-light {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.1);
}

/* ---------- Sections ---------- */
.br-section {
    padding: 40px 0;
}

.br-section-alt {
    background: var(--secondary);
}

.br-section-navy {
    background: var(--brand-navy);
    color: #fff;
}

.br-section-border {
    border-bottom: 1px solid var(--border);
}

.br-section-header {
    margin-bottom: 48px;
}

.br-heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.br-subheading {
    font-size: 17px;
    color: var(--muted-fg);
    max-width: 640px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

.br-overline {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted-fg);
    margin-bottom: 8px;
}

/* ---------- Plan type cards (shared between pricing & userhome) ---------- */
.br-plan-type-card {
    display: block;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s;
    position: relative;
    color: var(--fg);
    text-decoration: none;
    height: 100%;
}

    .br-plan-type-card:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-color: hsla(96,66%,47%,0.3);
        text-decoration: none;
        color: var(--fg);
    }

    .br-plan-type-card h3 {
        font-family: 'Nacelle', sans-serif;
        font-size: 20px;
        font-weight: 600;
        margin: 16px 0 8px;
    }

    .br-plan-type-card p {
        color: var(--muted-fg);
        font-size: 14px;
        margin: 0;
    }

.br-plan-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.br-plan-popular {
    border-color: hsla(96,66%,47%,0.4);
    background: hsla(96,66%,47%,0.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.br-popular-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #FF4300;
}

/* Plan features list */
.br-plan-features-list {
    margin: 16px 0;
    text-align: left;
}

    .br-plan-features-list div {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 4px 0;
        font-size: 13px;
        color: var(--fg);
    }

/* ---------- Integrations ---------- */
.br-integrations-grid .col-xs-4, .br-integrations-grid .col-sm-3, .br-integrations-grid .col-md-2 {
    margin-bottom: 16px;
}

.br-integration-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .br-integration-card img {
        height: 80px;
        width: 120px;
        object-fit: contain;
        padding: 12px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        opacity: 0.7;
        transition: all 0.3s;
    }

    .br-integration-card:hover img {
        opacity: 1;
        border-color: hsla(96,66%,47%,0.4);
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .br-integration-card span {
        font-size: 12px;
        color: var(--muted-fg);
        font-weight: 500;
    }

/* ---------- CTA ---------- */
.br-cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ---------- Footer ---------- */
.br-footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: 0;
}

.br-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0;
    gap: 16px;
}

.br-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.br-footer-logo {
    height: 32px;
}

.br-footer-brand span {
    font-size: 13px;
    color: var(--muted-fg);
}

.br-footer-links {
    display: flex;
    gap: 24px;
}

    .br-footer-links a {
        font-size: 13px;
        color: var(--muted-fg);
    }

        .br-footer-links a:hover {
            color: var(--fg);
            text-decoration: none;
        }

.br-footer-copy {
    font-size: 12px;
    color: var(--muted-fg);
    margin: 0;
}

/* ---------- Auth layout (shared w/ userhome) ---------- */
.br-auth-circle {
    position: absolute;
    border-radius: 50%;
}

.br-auth-circle-top {
    top: -96px;
    right: -96px;
    width: 320px;
    height: 320px;
    background: hsla(222,100%,60%,0.08);
    filter: blur(48px);
}

.br-auth-circle-bottom {
    bottom: -128px;
    left: -128px;
    width: 384px;
    height: 384px;
    background: hsla(96,66%,47%,0.04);
    filter: blur(48px);
}

/* ---------- Auth form styles (login, register) ---------- */
.br-form {
    margin-top: 0;
}

    .br-form .form-group {
        margin-bottom: 16px;
    }

    .br-form label {
        font-size: 13px;
        font-weight: 500;
        color: var(--fg);
        margin-bottom: 6px;
    }

.br-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.br-input-icon {
    position: relative;
}

    .br-input-icon i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted-fg);
        font-size: 14px;
        z-index: 2;
    }

    .br-input-icon input {
        padding-left: 40px;
    }

.br-input-lg {
    height: 48px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 14px;
}

    .br-input-lg:focus {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px hsla(222,100%,60%,0.12);
    }

.br-input-md {
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 14px;
}

    .br-input-md:focus {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px hsla(222,100%,60%,0.12);
    }

.br-input-password input {
    padding-right: 44px;
}

.br-eye-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--muted-fg);
    cursor: pointer;
    z-index: 2;
}

    .br-eye-btn:hover {
        color: var(--fg);
    }

.br-form-footer {
    margin-top: 20px;
    font-size: 14px;
    color: var(--muted-fg);
}

.br-form-section-label {
    font-family: 'Nacelle', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 20px 0 12px;
}

/* ---------- Proof card ---------- */
.br-proof-card {
    margin-top: 32px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
}

.br-proof-stars {
    color: var(--brand-yellow);
    font-size: 14px;
    margin-bottom: 8px;
}

.br-proof-quote {
    font-size: 13px;
    color: var(--muted-fg);
    line-height: 1.7;
    margin: 0 0 8px;
}

.br-proof-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
}

/* ---------- Inquiry modal (shared) ---------- */
.br-inquiry-modal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

.br-inquiry-modal .modal-header {
    background: linear-gradient(135deg, hsl(213,100%,11%) 0%, hsl(222,100%,25%) 100%);
    color: #fff;
    border-bottom: none;
    padding: 24px 28px 20px;
}

    .br-inquiry-modal .modal-header .close {
        color: #fff;
        text-shadow: none;
        opacity: 0.7;
    }

        .br-inquiry-modal .modal-header .close:hover {
            opacity: 1;
        }

.modal-title {
    font-family: 'Nacelle', sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.br-inquiry-modal .modal-header .modal-title {
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.01em;
}

.br-inquiry-modal .modal-header .text-muted {
    color: rgba(255,255,255,0.7) !important;
}

.br-inquiry-modal .modal-body {
    padding: 28px;
}

    .br-inquiry-modal .modal-body .form-group {
        margin-bottom: 14px;
    }

    .br-inquiry-modal .modal-body label {
        font-size: 13px;
        font-weight: 600;
        color: var(--fg);
        margin-bottom: 6px;
    }

    .br-inquiry-modal .modal-body .form-control {
        border-radius: 10px;
        border: 1px solid var(--border);
        height: 44px;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .br-inquiry-modal .modal-body textarea.form-control {
        height: auto;
    }

    .br-inquiry-modal .modal-body .form-control:focus {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px hsla(222,100%,60%,0.12);
    }

.br-inquiry-modal .btn-submit-inquiry {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    padding: 12px;
    transition: all 0.2s;
    width: 100%;
}

    .br-inquiry-modal .btn-submit-inquiry:hover {
        background: hsl(96, 66%, 40%);
    }

/* ---------- Preview Banner ---------- */
.br-preview-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(90deg, hsl(222, 100%, 60%), hsl(260, 80%, 55%));
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
    position: relative;
    z-index: 100;
}

    .br-preview-banner i {
        font-size: 16px;
        opacity: 0.9;
    }

    .br-preview-banner strong {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* ---------- Cookie Banner (legacy) ---------- */
/* The old .br-cookie-banner / #cookie-banner has been replaced by
   the shared BR.cookieConsent module (assets/css/cookie-consent.css +
   assets/js/cookie-consent.js). This rule is kept only to suppress
   any stray legacy markup that still references the old class. */
.br-cookie-banner,
#cookie-banner {
    display: none !important;
}


/* ============================================================
   DARK MODE
   ============================================================ */
body.dark-mode {
    --bg: hsl(211, 97%, 6%);
    --fg: hsl(120, 4%, 91%);
    --card: hsl(211, 97%, 10%);
    --card-fg: hsl(120, 4%, 91%);
    --secondary: hsl(211, 80%, 16%);
    --muted: hsl(211, 80%, 16%);
    --muted-fg: hsl(120, 4%, 70%);
    --border: hsl(211, 80%, 16%);
}

    body.dark-mode .br-navbar {
        background: rgba(4,15,32,0.92);
    }

    /* Social proof dark */
    body.dark-mode .br-proof-card {
        background: var(--card);
        border-color: var(--border);
    }

    body.dark-mode .br-proof-quote {
        color: var(--fg);
    }

    body.dark-mode .br-proof-author {
        color: var(--muted-fg);
    }


/* ============================================================
   AOS FALLBACK — ensure content is never permanently hidden
   If AOS JS fails to load or initialize, elements stay visible
   ============================================================ */
[data-aos]:not(.aos-animate) {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================================
   RESPONSIVE — shared breakpoints
   ============================================================ */
@media (max-width: 767px) {
    .br-heading {
        font-size: 24px;
    }

    .br-section {
        padding: 48px 0;
    }

    .br-preview-banner {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* ============================================================
   ACCESSIBILITY — Skip link + base :focus-visible
   ============================================================ */
.br-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: #F97316;
    color: #fff;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    z-index: 10000;
    transition: top .15s;
}

    .br-skip-link:focus,
    .br-skip-link:focus-visible {
        top: 8px;
        outline: 2px solid #fff;
        outline-offset: 2px;
        color: #fff;
        text-decoration: none;
    }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #F97316;
    outline-offset: 2px;
}

/* ============================================================
   KPI RANGE CAPTION — "Showing: <range>" subtitle above KPI strips
   Used on survey-tracker, nps-view-comparison, my-reviews, userhome
   ============================================================ */
.br-kpi-range-caption {
    font-size: 12px;
    color: hsl(210, 17%, 50%);
    font-weight: 500;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

    .br-kpi-range-caption .bi {
        font-size: 13px;
        opacity: 0.75;
    }

body.dark-mode .br-kpi-range-caption {
    color: hsl(210, 17%, 70%);
}

/* ============================================================
   AI Affordance Standard (v3.30) — FLAT gradient pill, no glow
   ★ SSOT for every "AI-powered" button/badge/chip across BizRatings.
   ★ Always pair with a sparkle icon (.bi-stars or .bi-magic).
   ★ Canonical label: "AI Generate" (was "AI Suggestions" pre-v3.30).
   ★ See mem://style/ai-affordance-standard.
   ★ v3.30 palette change:
   ★   - Cool→warm sweep: violet · indigo · blue · teal · amber
   ★   - Orange + red removed — clashed with Survey Setup palette
   ★   - Font-weight 200 (Extra-Light) — v3.36 (was 100 in v3.33–v3.35)
   ★ NEVER reintroduce box-shadow (inset OR outer) — dated bevel
   ★ NEVER reintroduce animation/keyframes on this class
   ★ NEVER reintroduce font-weight ≥ 700
   ★ NEVER reintroduce orange/red/amber gradient stops (v3.32: ends at teal)
   ★ SPECIFICITY CONTRACT (v3.36): font-weight + font-family carry !important
   ★ because .br-ai-accent is frequently combined with .btn or
   ★ .ss-suggest-link (both single-class, specificity 0,0,1,0). Without
   ★ !important, whichever sibling rule loads later wins → button re-bolds.
   ★ Do NOT remove !important on font-weight or font-family.
   ============================================================ */
.br-ai-accent,
.br-ai-accent-pill {
    background-image: linear-gradient( 95deg, #6d28d9 0%, /* deep violet */
    #4f46e5 30%, /* indigo */
    #2563eb 65%, /* royal blue */
    #0d9488 100% /* teal — v3.32 terminal stop (amber removed) */
    ) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important; /* v3.36 — must beat .btn/.ss-suggest-link */
    font-weight: 200 !important; /* v3.36 — Extra-Light, !important required */
    border: 1px solid transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: filter .15s ease;
    min-height: 22px;
    padding: 4px 12px;
}

    .br-ai-accent i,
    .br-ai-accent-pill i {
        color: #ffffff !important;
        text-shadow: none !important;
        font-size: 13px;
    }

    .br-ai-accent:hover,
    .br-ai-accent-pill:hover {
        filter: brightness(1.06) saturate(1.05);
        box-shadow: none !important;
    }

    .br-ai-accent:focus-visible,
    .br-ai-accent-pill:focus-visible {
        outline: 2px solid #7c3aed;
        outline-offset: 2px;
    }

.br-ai-accent-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 200 !important;
    line-height: 1; /* v3.36 — Extra-Light, !important per Specificity Contract */
    letter-spacing: 0.5px;
    text-transform: uppercase; /* v3.35 — 0.5px so light uppercase reads cleanly */
}

/* Dark-mode parity — keep flat */
body.dark-mode .br-ai-accent,
body.dark-mode .br-ai-accent-pill {
    box-shadow: none !important;
}

/* ============================================================
   v3.32 — BR.busy overlay (per-component "Updating…" affordance)
   Apply to any container by calling BR.busy.show($el). The module
   adds .br-busy-host (sets relative positioning) and injects a
   .br-busy-veil child. Designed cheap (no layout reflow) and
   accessible (sets aria-busy="true").
   ============================================================ */
.br-busy-host {
    position: relative;
}

.br-busy-veil {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    pointer-events: all;
    animation: br-busy-fade .18s ease-out;
}

@keyframes br-busy-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.br-busy-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5eaf1;
    box-shadow: 0 4px 14px rgba(15,23,42,0.10);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0b1a2d;
}

.br-busy-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    animation: br-busy-spin .7s linear infinite;
}

@keyframes br-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

body.dark-mode .br-busy-veil {
    background: rgba(11,18,32,0.72);
}

body.dark-mode .br-busy-pill {
    background: #111a2e;
    border-color: #1f2a44;
    color: #e2e8f0;
}

body.dark-mode .br-busy-spinner {
    border-color: #334155;
    border-top-color: #60a5fa;
}

@media (prefers-reduced-motion: reduce) {
    .br-busy-veil {
        animation: none;
    }

    .br-busy-spinner {
        animation-duration: 1.4s;
    }
}