/* Bot Factory — component styles. RTL-first: logical properties only (inline-start = right in Persian). */

/* ---------- Base ---------- */
.bf-root, .bf-scope { font-family: var(--font-sans); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 28px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.bf-root *, .bf-scope * { box-sizing: border-box; }
.bf-root h1, .bf-root h2, .bf-root h3, .bf-root h4, .bf-root p, .bf-scope h1, .bf-scope h2, .bf-scope h3, .bf-scope p { margin: 0; }
.bf-root a, .bf-scope a { color: var(--link); text-decoration: none; }
.bf-root a.bf-card, .bf-scope a.bf-card { color: var(--ink); }
.bf-root button, .bf-scope button, .bf-root input, .bf-scope input, .bf-root textarea, .bf-scope textarea { font-family: inherit; }
.bf-muted { color: var(--ink-muted); }
.bf-subtle { color: var(--ink-subtle); }
.bf-grow { flex: 1; }
.bf-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bf-ltr { direction: ltr; unicode-bidi: isolate; }
.bf-mono { font-family: var(--font-mono); font-size: .9em; letter-spacing: .02em; }
.bf-num { font-variant-numeric: tabular-nums; }
:where(.bf-root, .bf-scope) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-icon { flex: none; display: inline-block; vertical-align: middle; }
[dir="ltr"] .bf-icon-dir { transform: scaleX(-1); }
.bf-kbd { font-family: var(--font-mono); font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: var(--radius-xs); border: 1px solid var(--line); color: var(--ink-subtle); background: var(--surface-1); }
.bf-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-text); background: var(--accent-soft); padding: 2px 12px; border-radius: var(--radius-pill); }
.bf-textbtn { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding: 0; color: var(--link); font: 600 14px/22px var(--font-sans); cursor: pointer; }
.bf-textbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
.bf-count-pill { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-accent); font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bf-root *, .bf-scope * { animation-duration: 0s !important; transition-duration: 0s !important; } }

/* ---------- Wordmark ---------- */
.bf-logo { display: inline-flex; flex-direction: column; line-height: 1; color: var(--ink) !important; gap: 4px; }
.bf-logo-fa { white-space: nowrap; font-size: 20px; font-weight: 900; line-height: 24px; letter-spacing: 0; }
.bf-logo-en { font-size: 9.5px; letter-spacing: .28em; color: var(--ink-subtle); font-weight: 700; }
.bf-logo-compact .bf-logo-fa { font-size: 18px; font-family: var(--font-sans); direction: ltr; }

/* ---------- Buttons ---------- */
.bf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); block-size: var(--control-h); padding-inline: 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 14px/22px var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast); text-decoration: none !important; }
.bf-btn:active:not(:disabled) { transform: translateY(1px); }
.bf-btn-sm { block-size: var(--control-h-sm); padding-inline: 12px; font-size: 13px; border-radius: 8px; }
.bf-btn-lg { block-size: var(--control-h-lg); padding-inline: 24px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.bf-btn-block { inline-size: 100%; }
.bf-btn-primary { background: var(--primary); color: var(--on-accent) !important; }
.bf-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.bf-btn-cta { background: var(--cta); color: var(--on-accent) !important; font-weight: 700; }
.bf-btn-cta:hover:not(:disabled) { background: var(--cta-hover); box-shadow: var(--shadow-glow-cta); }
.bf-btn-accent { background: var(--accent); color: var(--on-violet) !important; }
.bf-btn-secondary { background: var(--surface-2); color: var(--ink) !important; border-color: var(--line-control); }
.bf-btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--ink-subtle); }
.bf-btn-ghost { background: transparent; color: var(--ink-muted) !important; }
.bf-btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink) !important; }
.bf-btn-danger { background: var(--danger-soft); color: var(--danger) !important; border-color: transparent; }
.bf-btn-danger:hover:not(:disabled) { border-color: var(--danger); }
.bf-btn-danger-solid { background: var(--danger); color: var(--on-accent) !important; }
.bf-btn:disabled, .bf-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.bf-btn.is-loading { opacity: 1; cursor: progress; }
.bf-btn.is-loading .bf-spinner { border-color: currentColor; border-inline-end-color: transparent; }

.bf-iconbtn { position: relative; display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--ink-muted); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.bf-iconbtn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.bf-iconbtn-sm { inline-size: 32px; block-size: 32px; border-radius: 8px; }
.bf-iconbtn-secondary { background: var(--surface-2); border-color: var(--line-control); color: var(--ink); }
.bf-iconbtn:disabled { opacity: .38; cursor: not-allowed; }
.bf-iconbtn-badge { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; min-inline-size: 16px; block-size: 16px; padding: 0 3px; border-radius: var(--radius-pill); background: var(--danger); color: var(--on-accent); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface-1); }

.bf-spinner { inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid var(--line-control); border-inline-end-color: var(--focus-ring); animation: bf-spin .8s linear infinite; display: inline-block; flex: none; }
.bf-spinner-lg { inline-size: 32px; block-size: 32px; border-width: 3px; }
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* ---------- Badges & status ---------- */
.bf-badge { display: inline-flex; align-items: center; gap: var(--space-1); block-size: 26px; padding-inline: 10px; border-radius: var(--radius-pill); font: 600 13px/22px var(--font-sans); white-space: nowrap; background: var(--neutral-soft); color: var(--ink-muted); }
.bf-badge-sm { block-size: 22px; padding-inline: 8px; font-size: 12px; }
.bf-badge.is-info { background: var(--info-soft); color: var(--info); }
.bf-badge.is-progress { background: var(--primary-soft); color: var(--link); }
.bf-badge.is-success { background: var(--success-soft); color: var(--success); }
.bf-badge.is-warning { background: var(--warning-soft); color: var(--warning); }
.bf-badge.is-danger { background: var(--danger-soft); color: var(--danger); }
.bf-badge.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.bf-badge.is-solid.is-accent { background: var(--accent); color: var(--on-violet); }
.bf-badge.is-solid.is-warning { background: var(--cta); color: var(--on-accent); }
.bf-badge-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.bf-badge-dot.is-pulse { box-shadow: 0 0 0 0 currentColor; animation: bf-pulse 2.4s var(--ease-out) infinite; }
@keyframes bf-pulse { 0% { box-shadow: 0 0 0 0 rgba(33,199,168,.5); } 70% { box-shadow: 0 0 0 6px rgba(33,199,168,0); } 100% { box-shadow: 0 0 0 0 rgba(33,199,168,0); } }

/* ---------- Avatar ---------- */
.bf-avatar { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 14px; flex: none; }
.bf-avatar-sm { inline-size: 32px; block-size: 32px; font-size: 12px; }

/* ---------- Public header / footer ---------- */
.bf-pheader { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--glass-fill); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); border-block-end: 1px solid var(--line); }
.bf-pheader-inner { max-inline-size: var(--container-marketing); margin-inline: auto; block-size: var(--header-h); padding-inline: var(--space-8); display: flex; align-items: center; gap: var(--space-8); }
.bf-pheader-nav { display: flex; gap: var(--space-1); flex: 1; }
.bf-pheader-link { color: var(--ink-muted) !important; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; }
.bf-pheader-link:hover, .bf-pheader-link.is-active { color: var(--ink) !important; background: var(--surface-3); }
.bf-pheader-actions { display: flex; gap: var(--space-2); align-items: center; }
.bf-pheader-menu { display: none !important; }
.bf-pheader-sheet { display: none; }
@container bfpage (max-width: 1000px) { .bf-pheader-nav { display: none; } .bf-pheader-inner { justify-content: space-between; padding-inline: var(--space-6); } .bf-pheader-menu { display: inline-grid !important; } }
@container bfpage (max-width: 640px) {
  .bf-pheader-inner { block-size: 64px; padding-inline: var(--space-4); gap: var(--space-2); }
  .bf-hide-mobile { display: none !important; }
  .bf-pheader-cta { block-size: 38px; padding-inline: 14px; font-size: 13px; }
}
.bf-pheader-sheet { display: flex; flex-direction: column; padding: var(--space-2) var(--space-4) var(--space-6); border-block-start: 1px solid var(--line); background: var(--surface-1); }
.bf-pheader-sheet-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; color: var(--ink) !important; font-size: 17px; font-weight: 500; border-block-end: 1px solid var(--line); }
.bf-pheader-sheet-actions { display: grid; gap: var(--space-3); margin-block-start: var(--space-6); }
.bf-pfooter { border-block-start: 1px solid var(--line); background: var(--surface-1); margin-block-start: var(--space-24); }
.bf-pfooter-inner { max-inline-size: var(--container-marketing); margin-inline: auto; padding: var(--space-16) var(--space-8) var(--space-10); display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-8); }
.bf-pfooter-brand p { color: var(--ink-muted); margin-block-start: var(--space-4); max-inline-size: 320px; }
.bf-pfooter-col { display: flex; flex-direction: column; gap: var(--space-3); }
.bf-pfooter-col h3 { color: var(--ink-subtle); }
.bf-pfooter-col a { color: var(--ink-muted) !important; font-size: 15px; }
.bf-pfooter-col a:hover { color: var(--ink) !important; }
.bf-pfooter-base { max-inline-size: var(--container-marketing); margin-inline: auto; padding: var(--space-6) var(--space-8); display: flex; justify-content: space-between; color: var(--ink-subtle); border-block-start: 1px solid var(--line); }
@container bfpage (max-width: 760px) { .bf-pfooter-inner { grid-template-columns: 1fr 1fr; padding-inline: var(--space-4); } .bf-pfooter-brand { grid-column: 1 / -1; } .bf-pfooter-base { flex-direction: column; gap: var(--space-2); padding-inline: var(--space-4); } }

/* ---------- Sidebar / topbar / app shells ---------- */
.bf-sidebar { inline-size: var(--sidebar-w); flex: none; background: var(--surface-1); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; block-size: 100%; min-block-size: 100%; }
.bf-sidebar-crm { inline-size: var(--sidebar-w-crm); }
.bf-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 20px var(--space-5); block-size: var(--topbar-h); box-sizing: content-box; }
.bf-sidebar-crm .bf-sidebar-head { padding-block: 12px; }
.bf-env-chip { white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 2px 8px; }
.bf-sidebar-nav { flex: 1; padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; }
.bf-sidebar-group { display: flex; flex-direction: column; gap: 2px; }
.bf-sidebar-group-label { color: var(--ink-subtle); padding: 4px 12px; }
.bf-sidebar-item { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-muted) !important; font-size: 15px; font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast); }
.bf-sidebar-crm .bf-sidebar-item { padding: 7px 10px; font-size: 14px; gap: 10px; }
.bf-sidebar-item:hover { background: var(--surface-3); color: var(--ink) !important; }
.bf-sidebar-item.is-active { background: var(--surface-selected); color: var(--ink) !important; font-weight: 600; }
.bf-sidebar-item.is-active .bf-icon { color: var(--link); }
.bf-sidebar-crm .bf-sidebar-item.is-active::before { content: ""; position: absolute; inset-inline-start: -12px; inset-block: 8px; inline-size: 3px; border-radius: 3px; background: var(--accent); }
.bf-sidebar-crm .bf-sidebar-item.is-active .bf-icon { color: var(--accent-text); }
.bf-sidebar-label { flex: 1; }
.bf-sidebar-badge { min-inline-size: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--ink-muted); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.bf-sidebar-badge.is-warning { background: var(--warning-soft); color: var(--warning); }
.bf-sidebar-badge.is-info { background: var(--info-soft); color: var(--info); }
.bf-sidebar-dot { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--warning); }
.bf-sidebar-foot { padding: var(--space-3); border-block-start: 1px solid var(--line); }
.bf-sidebar-user { display: flex; gap: var(--space-3); align-items: center; padding: 6px; }
.bf-sidebar-user span { display: flex; flex-direction: column; line-height: 20px; font-size: 13px; }
.bf-sidebar-user small { color: var(--ink-subtle); font-size: 12px; }
.bf-sidebar.is-collapsed { inline-size: var(--rail-w); }
.bf-sidebar.is-collapsed .bf-sidebar-item { justify-content: center; }
.bf-sidebar-context { margin: 0 var(--space-3) var(--space-2); }

.bf-topbar { display: flex; align-items: center; gap: var(--space-4); block-size: var(--topbar-h); padding-inline: var(--space-8); border-block-end: 1px solid var(--line); background: var(--surface-1); position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
.bf-layout-admin .bf-topbar { padding-inline: var(--space-6); block-size: 56px; }
.bf-topbar-menu { display: none !important; }
.bf-topbar-search { flex: 1; max-inline-size: 560px; margin-inline-start: var(--space-4); }
.bf-topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.bf-topbar-user { display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; color: var(--ink); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); min-inline-size: 0; max-inline-size: 220px; }
.bf-topbar-user-name { font-size: 14px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.bf-topbar-user:hover { background: var(--surface-3); }
.bf-topbar-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 18px; font-size: 13px; }
.bf-topbar-user-text small { color: var(--ink-subtle); font-size: 12px; }

.bf-root.bf-layout-app { display: flex; min-block-size: 100vh; container: bfpage / inline-size; }
.bf-app-col { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.bf-app-main { flex: 1; padding: var(--space-8); inline-size: 100%; max-inline-size: calc(var(--container-app) + 2 * var(--space-8)); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); }
.bf-layout-admin .bf-app-main { max-inline-size: var(--container-crm); padding: var(--space-6); gap: var(--space-5); }
.bf-bottomnav { display: none; }
.bf-layout-app > .bf-sidebar { position: sticky; inset-block-start: 0; block-size: 100vh; }

/* ---------- Breadcrumb / tabs / pagination ---------- */
.bf-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 22px; }
.bf-breadcrumb li { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-subtle); }
.bf-breadcrumb a { color: var(--ink-muted) !important; }
.bf-breadcrumb a:hover { color: var(--ink) !important; }
.bf-breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.bf-breadcrumb-sep { color: var(--ink-subtle); }

.bf-tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.bf-tabs-line { border-block-end: 1px solid var(--line); gap: var(--space-5); }
.bf-tab { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; cursor: pointer; color: var(--ink-muted); font: 600 14px/22px var(--font-sans); white-space: nowrap; transition: color var(--dur-fast), background var(--dur-fast); }
.bf-tabs-line .bf-tab { padding: 10px 2px 12px; border-block-end: 2px solid transparent; margin-block-end: -1px; }
.bf-tabs-line .bf-tab.is-active { color: var(--ink); border-block-end-color: var(--primary); }
.bf-tabs-segmented { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px; display: inline-flex; }
.bf-tabs-segmented .bf-tab { padding: 6px 16px; border-radius: var(--radius-pill); }
.bf-tabs-segmented .bf-tab.is-active { background: var(--surface-selected); color: var(--ink); }
.bf-tab:hover { color: var(--ink); }
.bf-tab:disabled { opacity: .4; cursor: not-allowed; }
.bf-tab-count { font-size: 12px; min-inline-size: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--ink-muted); line-height: 20px; text-align: center; }
.bf-tab-count.is-warning { background: var(--warning-soft); color: var(--warning); }
.bf-tab-count.is-danger { background: var(--danger-soft); color: var(--danger); }

.bf-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.bf-pagination-info { color: var(--ink-subtle); }
.bf-pagination-pages { display: flex; align-items: center; gap: 4px; }
.bf-page { min-inline-size: 32px; block-size: 32px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink-muted); font: 600 13px/1 var(--font-sans); cursor: pointer; }
.bf-page:hover { background: var(--surface-3); color: var(--ink); }
.bf-page.is-active { background: var(--surface-selected); color: var(--ink); border-color: var(--line-control); }
.bf-pagination-gap { color: var(--ink-subtle); padding-inline: 4px; }
.bf-pagination-compact { display: none; color: var(--ink-muted); padding-inline: 8px; }

/* ---------- Stepper ---------- */
.bf-stepper { container: bfstep / inline-size; }
.bf-stepper-list { display: flex; list-style: none; margin: 0; padding: 0; }
.bf-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; text-align: center; min-inline-size: 0; }
.bf-step::before { content: ""; position: absolute; inset-block-start: 15px; inset-inline-start: calc(50% + 22px); inline-size: calc(100% - 44px); block-size: 2px; background: var(--line-strong); border-radius: 2px; }
.bf-step:last-child::before { display: none; }
.bf-step.is-done::before { background: var(--primary); }
.bf-step-dot { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--surface-2); border: 1.5px solid var(--line-control); color: var(--ink-muted); position: relative; z-index: 1; transition: all var(--dur-base) var(--ease-out); }
.bf-step.is-done .bf-step-dot { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.bf-step.is-current .bf-step-dot { border-color: var(--primary); color: var(--ink); background: var(--primary-soft); box-shadow: 0 0 0 4px var(--primary-soft); }
.bf-step.is-error .bf-step-dot { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.bf-step.is-warning .bf-step-dot { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.bf-step-text { display: flex; flex-direction: column; line-height: 20px; }
.bf-step-label { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.bf-step.is-current .bf-step-label, .bf-step.is-done .bf-step-label { color: var(--ink); }
.bf-step-text small { font-size: 12px; color: var(--ink-subtle); }
.bf-stepper-mobile { display: none; }
.bf-stepper-mobile-row { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--space-2); }
.bf-stepper-mobile-row .t-overline { color: var(--ink-subtle); }
@container bfstep (max-width: 620px) { .bf-stepper-list { display: none; } .bf-stepper-mobile { display: block; } }
.bf-stepper.is-compact .bf-stepper-list { display: none; }
.bf-stepper.is-compact .bf-stepper-mobile { display: block; }
.bf-stepper-lifecycle .bf-step-dot { inline-size: 24px; block-size: 24px; font-size: 11px; }
.bf-stepper-lifecycle .bf-step::before { inset-block-start: 11px; inset-inline-start: calc(50% + 16px); inline-size: calc(100% - 32px); }
.bf-stepper-lifecycle .bf-step-label { font-size: 12px; }

/* ---------- Forms ---------- */
.bf-field { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.bf-field-top { display: flex; align-items: baseline; gap: var(--space-2); }
.bf-label { font: 600 14px/22px var(--font-sans); color: var(--ink); }
.bf-req { color: var(--danger); }
.bf-optional { font-size: 12px; line-height: 20px; color: var(--ink-subtle); background: var(--neutral-soft); padding: 0 8px; border-radius: var(--radius-pill); }
.bf-counter { margin-inline-start: auto; color: var(--ink-subtle); }
.bf-field-msg { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 22px; color: var(--ink-subtle); margin: 0; }
.bf-field-msg .bf-icon { margin-block-start: 3px; }
.bf-field-msg.is-error { color: var(--danger); }
.bf-field-msg.is-success { color: var(--success); }
.bf-input-wrap { position: relative; display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--radius-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); min-block-size: var(--control-h); }
.bf-input-wrap:hover { border-color: var(--ink-subtle); }
.bf-input-wrap:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(56,217,255,.18); }
.bf-input-wrap.is-error { border-color: var(--danger); background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--surface-2); }
.bf-input-wrap.is-error:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); }
.bf-input-wrap.is-success { border-color: var(--success); }
.bf-input-wrap.is-disabled { opacity: .5; cursor: not-allowed; }
.bf-input-sm { min-block-size: var(--control-h-sm); }
.bf-input { flex: 1; min-inline-size: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: 400 15px/24px var(--font-sans); padding: 9px 14px; block-size: 100%; }
.bf-input-sm .bf-input { padding-block: 6px; font-size: 14px; }
.bf-input::placeholder { color: var(--ink-subtle); }
.bf-input:disabled { cursor: not-allowed; }
.bf-input-ltr { direction: ltr; text-align: right; letter-spacing: .02em; }
.bf-input-ltr::placeholder { text-align: right; }
.bf-input-adorn { display: inline-grid; place-items: center; color: var(--ink-subtle); padding-inline: 12px 0; }
.bf-input-adorn.is-end { padding-inline: 0 12px; }
.bf-input-adorn.is-button { background: none; border: 0; cursor: pointer; block-size: 100%; }
.bf-input-adorn.is-button:hover { color: var(--ink); }
.bf-input-wrap .bf-input-adorn.is-start + .bf-input { padding-inline-start: 8px; }
.bf-input-prefix { margin-inline-end: 8px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-muted); background: var(--surface-3); border-radius: var(--radius-xs); line-height: 24px; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
.bf-input-wrap .bf-kbd { margin-inline-end: 10px; }
.bf-textarea-wrap { position: relative; }
.bf-textarea { inline-size: 100%; display: block; background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--radius-sm); resize: vertical; min-block-size: 112px; line-height: 28px; padding: 10px 14px 28px; }
.bf-textarea:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(56,217,255,.18); }
.bf-textarea-wrap.is-error .bf-textarea { border-color: var(--danger); }
.bf-textarea-count { position: absolute; inset-block-end: 6px; inset-inline-end: 12px; color: var(--ink-subtle); }
.bf-strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-block-start: 8px; }
.bf-strength > span { block-size: 4px; border-radius: 4px; background: var(--line-strong); }
.bf-strength small { color: var(--ink-subtle); margin-inline-start: 6px; }
.bf-strength[data-level="1"] > span:nth-child(-n+1) { background: var(--danger); }
.bf-strength[data-level="2"] > span:nth-child(-n+2) { background: var(--warning); }
.bf-strength[data-level="3"] > span:nth-child(-n+3) { background: var(--info); }
.bf-strength[data-level="4"] > span:nth-child(-n+4) { background: var(--success); }

.bf-select, .bf-datepicker, .bf-dropdown { position: relative; }
.bf-select-trigger { inline-size: 100%; display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-h); background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--radius-sm); color: var(--ink); font: 400 15px/24px var(--font-sans); padding: 6px 14px; cursor: pointer; text-align: start; }
.bf-input-sm .bf-select-trigger, .bf-select.bf-input-sm .bf-select-trigger { min-block-size: var(--control-h-sm); font-size: 14px; padding-block: 4px; }
.bf-select-trigger:hover { border-color: var(--ink-subtle); }
.bf-select.is-open .bf-select-trigger { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(56,217,255,.18); }
.bf-select.is-error .bf-select-trigger { border-color: var(--danger); }
.bf-select.is-disabled { opacity: .5; }
.bf-select-trigger > .bf-icon:first-child { color: var(--ink-subtle); }
.bf-select-trigger > .bf-icon:last-child { color: var(--ink-subtle); margin-inline-start: auto; }
.bf-select-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-select-value.is-placeholder { color: var(--ink-subtle); }
.bf-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.bf-chip { display: inline-flex; align-items: center; gap: 4px; padding-inline: 10px 4px; block-size: 28px; border-radius: var(--radius-pill); background: var(--surface-selected); color: var(--ink); font-size: 13px; font-weight: 500; }
.bf-chip.is-filter { background: var(--primary-soft); color: var(--link); }
.bf-chip-x { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; }
.bf-chip-x:hover { background: rgba(255,255,255,.08); }

.bf-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 220px; z-index: var(--z-popover); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 6px; list-style: none; margin: 0; animation: bf-pop var(--dur-base) var(--ease-out); }
.bf-select-menu { inset-inline-end: 0; }
.bf-dropdown.is-align-start .bf-menu, .bf-dropdown .bf-menu { inset-inline-start: auto; inset-inline-end: 0; }
@keyframes bf-pop { from { opacity: 0; transform: translateY(-4px); } }
.bf-menu-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; cursor: pointer; }
.bf-menu-item:hover { background: var(--surface-selected); }
.bf-menu-item.is-selected { color: var(--link); }
.bf-menu-item.is-danger { color: var(--danger); }
.bf-menu-item.is-disabled { opacity: .4; pointer-events: none; }
.bf-menu-item .bf-icon { color: currentColor; opacity: .9; }
.bf-menu-text { flex: 1; display: flex; flex-direction: column; line-height: 22px; }
.bf-menu-text small { color: var(--ink-subtle); font-size: 12px; line-height: 18px; }
.bf-menu-divider { block-size: 1px; background: var(--line); margin: 6px 4px; }
.bf-menu-heading { color: var(--ink-subtle); padding: 6px 10px 2px; }

.bf-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 24px; color: var(--ink); }
.bf-check.is-disabled { opacity: .45; cursor: not-allowed; }
.bf-check-box { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 2px; border-radius: var(--radius-xs); border: 1.5px solid var(--line-control); background: var(--surface-2); display: grid; place-items: center; color: var(--on-accent); transition: all var(--dur-fast); }
.bf-check-box.is-on { background: var(--primary); border-color: var(--primary); }
.bf-check:hover .bf-check-box:not(.is-on) { border-color: var(--ink-muted); }
.bf-check input:focus-visible + .bf-check-box, .bf-radio input:focus-visible + .bf-radio-dot { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-check.is-error .bf-check-box { border-color: var(--danger); }
.bf-check-text { display: flex; flex-direction: column; }
.bf-check-text small { color: var(--ink-subtle); font-size: 13px; line-height: 22px; }
.bf-radio-group { display: flex; flex-direction: column; gap: var(--space-3); }
.bf-radio-group.is-inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }
.bf-radio-dot { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 2px; border-radius: 50%; border: 1.5px solid var(--line-control); background: var(--surface-2); display: grid; place-items: center; transition: all var(--dur-fast); }
.bf-radio-dot.is-on { border-color: var(--primary); border-width: 6px; background: var(--ink); }

.bf-option { display: flex; align-items: flex-start; gap: var(--space-4); inline-size: 100%; text-align: start; background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--radius-md); padding: var(--space-5); cursor: pointer; color: var(--ink); font-family: var(--font-sans); transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-base); }
.bf-option:hover:not(:disabled) { border-color: var(--ink-subtle); background: var(--surface-3); }
.bf-option.is-selected { border-color: var(--primary); background: linear-gradient(var(--primary-soft), var(--primary-soft)), var(--surface-2); box-shadow: var(--shadow-glow); }
.bf-option:disabled { opacity: .45; cursor: not-allowed; }
.bf-option.is-compact { padding: var(--space-3) var(--space-4); align-items: center; }
.bf-option-icon { flex: none; inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.bf-option.is-selected .bf-option-icon { background: var(--primary-soft); color: var(--link); }
.bf-option-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bf-option-title { display: flex; align-items: center; gap: var(--space-2); font-size: 16px; font-weight: 700; line-height: 26px; }
.bf-option-desc { color: var(--ink-muted); font-size: 14px; line-height: 24px; }
.bf-option-meta { color: var(--ink-subtle); font-size: 13px; line-height: 22px; margin-block-start: 4px; }

.bf-upload { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); border: 1.5px dashed var(--line-control); border-radius: var(--radius-md); background: var(--surface-1); cursor: pointer; text-align: center; transition: all var(--dur-fast); }
.bf-upload:hover, .bf-upload.is-dragging { border-color: var(--focus-ring); background: var(--info-soft); }
.bf-upload.is-error { border-color: var(--danger); }
.bf-upload-icon { inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); }
.bf-upload-title { font-weight: 600; font-size: 15px; }
.bf-upload-hint { color: var(--ink-subtle); }
.bf-upload .is-error, .bf-upload-file .is-error { color: var(--danger); }
.bf-upload-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-2); }
.bf-upload-file.is-done { border-color: var(--success); }
.bf-upload-file.is-error { border-color: var(--danger); }
.bf-upload-thumb { inline-size: 48px; block-size: 48px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; color: var(--ink-muted); flex: none; }
.bf-upload-meta { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.bf-upload-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.bf-upload-meta small { font-size: 13px; color: var(--ink-subtle); }

.bf-cal { inline-size: 312px; padding: var(--space-3); }
.bf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-2); }
.bf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.bf-cal-wd { font-size: 12px; color: var(--ink-subtle); font-weight: 700; line-height: 32px; }
.bf-cal-day { block-size: 38px; border-radius: 10px; border: 0; background: none; color: var(--ink); font: 500 14px/1 var(--font-sans); cursor: pointer; }
.bf-cal-day:hover { background: var(--surface-selected); }
.bf-cal-day.is-holiday, .bf-cal-wd.is-holiday { color: var(--danger); }
.bf-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--focus-ring); }
.bf-cal-day.is-selected { background: var(--primary); color: var(--on-accent); font-weight: 700; }
.bf-cal-foot { display: flex; justify-content: flex-start; margin-block-start: var(--space-2); border-block-start: 1px solid var(--line); padding-block-start: var(--space-2); }

/* ---------- Cards ---------- */
.bf-card { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-2); color: var(--ink); min-inline-size: 0; }
.is-dense .bf-card { padding: var(--space-4); gap: var(--space-3); }
.bf-card-glass { background: var(--glass-fill); border-color: var(--glass-line); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.bf-card-outline { background: transparent; box-shadow: none; border-color: var(--line-strong); }
.bf-card-flat { box-shadow: none; }
.bf-card-interactive { cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.bf-card-interactive:hover { border-color: var(--line-control); transform: translateY(-2px); }
.bf-pad-lg { padding: var(--space-8); }
.bf-pad-none { padding: 0; }
.bf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.bf-card-titles { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bf-card-title { font-size: 17px; line-height: 28px; font-weight: 700; }
.bf-card-sub { color: var(--ink-muted); font-size: 14px; line-height: 24px; }
.bf-card-actions { display: flex; gap: var(--space-2); flex: none; }
.bf-card-foot { border-block-start: 1px solid var(--line); padding-block-start: var(--space-4); display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; }

.bf-stat { gap: var(--space-2); text-decoration: none; }
.bf-stat.is-link:hover { border-color: var(--line-control); background: var(--surface-3); }
.bf-stat-top { display: flex; align-items: center; gap: var(--space-2); }
.bf-stat-label { color: var(--ink-muted); font-size: 14px; font-weight: 500; flex: 1; }
.bf-stat-icon { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--info-soft); color: var(--info); }
.bf-stat-icon.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.bf-stat-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.bf-stat-icon.is-success { background: var(--success-soft); color: var(--success); }
.bf-stat-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.bf-stat-icon.is-progress { background: var(--primary-soft); color: var(--link); }
.bf-stat-value { font-variant-numeric: tabular-nums; color: var(--ink); }
.bf-stat-value small { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.is-dense .bf-stat-value { font-size: 26px; line-height: 34px; }
.bf-stat-foot { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 22px; color: var(--ink-subtle); }
.bf-stat-go { margin-inline-start: auto; color: var(--ink-subtle); }
.bf-stat.has-attention { border-color: rgba(255,185,20,.45); }
.bf-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--ink-muted); }
.bf-delta.is-good { color: var(--success); }
.bf-delta.is-bad { color: var(--danger); }

/* ---------- Progress ---------- */
.bf-progress { display: flex; flex-direction: column; gap: 6px; }
.bf-progress-top { display: flex; justify-content: space-between; color: var(--ink-muted); }
.bf-progress-track { block-size: 8px; border-radius: 8px; background: var(--primary-soft); overflow: hidden; }
.bf-progress-sm .bf-progress-track { block-size: 5px; }
.bf-progress-bar { display: block; block-size: 100%; border-radius: inherit; background: var(--primary); transition: inline-size var(--dur-slow) var(--ease-out); }
.bf-progress.is-warning .bf-progress-track { background: var(--warning-soft); } .bf-progress.is-warning .bf-progress-bar { background: var(--warning); }
.bf-progress.is-success .bf-progress-track { background: var(--success-soft); } .bf-progress.is-success .bf-progress-bar { background: var(--success); }
.bf-progress.is-accent .bf-progress-track { background: var(--accent-soft); } .bf-progress.is-accent .bf-progress-bar { background: var(--accent); }
.bf-progress.is-danger .bf-progress-track { background: var(--danger-soft); } .bf-progress.is-danger .bf-progress-bar { background: var(--danger); }
.bf-ring { position: relative; display: inline-grid; place-items: center; }
.bf-ring svg { transform: rotate(-90deg) scaleY(-1); }
.bf-ring-track { fill: none; stroke: var(--line-strong); stroke-width: 6; }
.bf-ring-bar { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.bf-ring.is-accent .bf-ring-bar { stroke: var(--accent-text); } .bf-ring.is-warning .bf-ring-bar { stroke: var(--warning); } .bf-ring.is-success .bf-ring-bar { stroke: var(--success); } .bf-ring.is-danger .bf-ring-bar { stroke: var(--danger); }
.bf-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; text-align: center; }

/* ---------- List / timeline / key-value / accordion ---------- */
.bf-list { list-style: none; margin: 0; padding: 0; }
.bf-list li + li { border-block-start: 1px solid var(--line); }
.bf-list-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 4px; color: var(--ink) !important; }
.bf-list.is-dense .bf-list-row { padding-block: 8px; }
.bf-list-row.is-link { border-radius: var(--radius-sm); }
.bf-list-row.is-link:hover { background: var(--surface-3); }
.bf-list-icon { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-muted); flex: none; }
.bf-list-icon.is-info { background: var(--info-soft); color: var(--info); } .bf-list-icon.is-warning { background: var(--warning-soft); color: var(--warning); } .bf-list-icon.is-success { background: var(--success-soft); color: var(--success); } .bf-list-icon.is-accent { background: var(--accent-soft); color: var(--accent-text); } .bf-list-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.bf-list-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.bf-list-title { font-size: 15px; font-weight: 600; line-height: 24px; }
.bf-list-sub { font-size: 13px; line-height: 22px; color: var(--ink-muted); }
.bf-list-meta { font-size: 13px; color: var(--ink-subtle); white-space: nowrap; }
.bf-list-go { color: var(--ink-subtle); }

.bf-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.bf-tl-item { position: relative; display: flex; gap: var(--space-3); padding-block-end: var(--space-5); }
.bf-tl-item::before { content: ""; position: absolute; inset-inline-start: 13px; inset-block: 30px 0; inline-size: 2px; background: var(--line); }
.bf-tl-item:last-child::before { display: none; }
.bf-tl-dot { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-muted); flex: none; border: 1px solid var(--line); }
.bf-tl-item.is-info .bf-tl-dot { background: var(--info-soft); color: var(--info); border-color: transparent; }
.bf-tl-item.is-success .bf-tl-dot { background: var(--success-soft); color: var(--success); border-color: transparent; }
.bf-tl-item.is-warning .bf-tl-dot { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.bf-tl-item.is-danger .bf-tl-dot { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.bf-tl-item.is-accent .bf-tl-dot { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.bf-tl-item.is-progress .bf-tl-dot { background: var(--primary-soft); color: var(--link); border-color: transparent; }
.bf-tl-body { flex: 1; min-inline-size: 0; padding-block-start: 2px; }
.bf-tl-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; line-height: 24px; }
.bf-tl-head time { color: var(--ink-subtle); white-space: nowrap; }
.bf-tl-text { color: var(--ink-muted); font-size: 14px; line-height: 24px; margin-block-start: 2px; }
.bf-tl-item.is-note .bf-tl-text { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--ink); margin-block-start: 6px; }

.bf-kv { display: grid; gap: 0; margin: 0; }
.bf-kv.is-2col { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
.bf-kv-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: 10px; border-block-end: 1px solid var(--line); font-size: 14px; line-height: 24px; }
.bf-kv dt { color: var(--ink-muted); }
.bf-kv dd { margin: 0; font-weight: 600; text-align: end; display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
@container bfpage (max-width: 640px) { .bf-kv.is-2col { grid-template-columns: 1fr; } }

.bf-accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.bf-acc-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.bf-acc-item.is-open { border-color: var(--line-control); }
.bf-acc-q { inline-size: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: none; border: 0; color: var(--ink); font: 600 16px/28px var(--font-sans); cursor: pointer; text-align: start; }
.bf-acc-q .bf-icon { color: var(--ink-subtle); }
.bf-acc-a { padding: 0 var(--space-5) var(--space-5); color: var(--ink-muted); }

/* ---------- Table ---------- */
.bf-table-wrap { container: bftable / inline-size; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.bf-table-wrap > .bf-filterbar { padding: var(--space-4); border-block-end: 1px solid var(--line); }
.bf-table-scroll { overflow-x: auto; }
.bf-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 22px; }
.bf-table th { position: sticky; inset-block-start: 0; background: var(--surface-1); color: var(--ink-muted); font-weight: 600; font-size: 13px; text-align: start; padding: 10px var(--space-4); border-block-end: 1px solid var(--line-strong); white-space: nowrap; }
.bf-table td { padding: 0 var(--space-4); block-size: var(--row-h); border-block-end: 1px solid var(--line); color: var(--ink-muted); vertical-align: middle; }
.bf-table tr:last-child td { border-block-end: 0; }
.is-dense .bf-table td { block-size: var(--row-h-dense); padding-inline: var(--space-3); }
.is-dense .bf-table th { padding: 8px var(--space-3); }
.bf-table td.is-primary { color: var(--ink); font-weight: 600; }
.bf-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
.bf-table .is-center { text-align: center; }
.bf-table .is-end { text-align: end; }
.bf-table tbody tr { transition: background var(--dur-fast); }
.bf-table tbody tr:hover { background: var(--surface-3); }
.bf-table tbody tr.is-clickable { cursor: pointer; }
.bf-table tbody tr.is-selected { background: var(--surface-selected); }
.bf-table tbody tr.is-selected td { color: var(--ink); }
.bf-table tbody tr.is-warning td:first-child { box-shadow: inset -3px 0 0 var(--warning); }
.bf-table tbody tr.is-danger td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.bf-td-check { inline-size: 44px; }
.bf-td-check .bf-check { gap: 0; }
.bf-td-actions { inline-size: 1%; white-space: nowrap; text-align: end; }
.bf-th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.bf-th-sort:hover, .bf-th-sort.is-sorted { color: var(--ink); }
.bf-th-sort .bf-icon { opacity: .7; }
.bf-table-foot { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); }
.bf-bulkbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--primary-soft); border-block-end: 1px solid var(--line); }
.bf-mcards { display: none; list-style: none; margin: 0; padding: var(--space-3); flex-direction: column; gap: var(--space-2); }
.bf-mcard { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.bf-mcard.is-warning { border-color: rgba(255,185,20,.45); }
.bf-mcard.is-danger { border-color: rgba(255,107,107,.45); }
.bf-mcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.bf-mcard-title { font-weight: 700; font-size: 15px; line-height: 24px; color: var(--ink); }
.bf-mcard-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-muted); }
.bf-mcard-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.bf-mcard-meta dt { color: var(--ink-subtle); }
.bf-mcard-meta dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.bf-mcard-actions { display: flex; gap: var(--space-2); border-block-start: 1px solid var(--line); padding-block-start: var(--space-2); margin-block-start: 2px; }
@container bftable (max-width: 900px) { .bf-hide-tablet { display: none; } }
@container bftable (max-width: 600px) { .bf-table-scroll { display: none; } .bf-mcards { display: flex; } .bf-table-foot .bf-page, .bf-table-foot .bf-pagination-gap, .bf-table-foot .bf-pagination-info { display: none; } .bf-table-foot .bf-pagination-compact { display: inline; } .bf-table-foot .bf-pagination { justify-content: center; } }

.bf-filterbar { display: flex; flex-direction: column; gap: var(--space-3); container: bffilter / inline-size; }
.bf-filterbar-row { display: flex; gap: var(--space-2); align-items: center; }
.bf-filterbar-search { flex: 1 1 280px; max-inline-size: 360px; }
.bf-filterbar-filters { display: flex; gap: var(--space-2); }
.bf-filterbar-filters .bf-select { inline-size: 160px; }
.bf-filterbar-row > .bf-select { inline-size: 170px; margin-inline-start: auto; }
.bf-filterbar-actions { display: flex; gap: var(--space-2); }
.bf-filterbar-mobile { display: none !important; }
.bf-filterbar-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@container bffilter (max-width: 760px) { .bf-filterbar-filters, .bf-filterbar-row > .bf-select { display: none; } .bf-filterbar-mobile { display: inline-flex !important; } .bf-filterbar-search { max-inline-size: none; } }

/* ---------- Feedback ---------- */
.bf-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; background: var(--info-soft); }
.bf-alert-icon { margin-block-start: 3px; }
.bf-alert.is-info { border-color: rgba(56,217,255,.3); } .bf-alert.is-info .bf-alert-icon { color: var(--info); }
.bf-alert.is-success { background: var(--success-soft); border-color: rgba(33,199,168,.3); } .bf-alert.is-success .bf-alert-icon { color: var(--success); }
.bf-alert.is-warning { background: var(--warning-soft); border-color: rgba(255,185,20,.35); } .bf-alert.is-warning .bf-alert-icon { color: var(--warning); }
.bf-alert.is-danger { background: var(--danger-soft); border-color: rgba(255,107,107,.35); } .bf-alert.is-danger .bf-alert-icon { color: var(--danger); }
.bf-alert.is-accent { background: var(--accent-soft); border-color: rgba(129,116,255,.35); } .bf-alert.is-accent .bf-alert-icon { color: var(--accent-text); }
.bf-alert-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 24px; }
.bf-alert-title { font-size: 15px; }
.bf-alert-text { color: var(--ink-muted); }
.bf-alert-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); flex-wrap: wrap; }
.bf-banner { background: var(--info-soft); border-block-end: 1px solid var(--line); }
.bf-banner-inner { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-8); font-size: 14px; line-height: 22px; }
.bf-banner-text { flex: 1; }
.bf-banner.is-info .bf-icon { color: var(--info); } .bf-banner.is-warning { background: var(--warning-soft); } .bf-banner.is-warning > div > .bf-icon { color: var(--warning); }
.bf-banner.is-danger { background: var(--danger-soft); } .bf-banner.is-danger > div > .bf-icon { color: var(--danger); }
.bf-banner.is-accent { background: var(--accent-soft); } .bf-banner.is-accent > div > .bf-icon { color: var(--accent-text); }
.bf-toast-stack { position: fixed; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); inline-size: min(400px, calc(100vw - 32px)); }
.bf-toast-stack.is-inline { position: static; }
.bf-toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-3); animation: bf-pop var(--dur-base) var(--ease-out); }
.bf-toast-icon { margin-block-start: 3px; }
.bf-toast.is-success .bf-toast-icon { color: var(--success); } .bf-toast.is-danger .bf-toast-icon { color: var(--danger); } .bf-toast.is-info .bf-toast-icon { color: var(--info); } .bf-toast.is-warning .bf-toast-icon { color: var(--warning); }
.bf-toast-body { flex: 1; display: flex; flex-direction: column; font-size: 14px; line-height: 22px; }
.bf-toast-body span { color: var(--ink-muted); }
.bf-tip-wrap { position: relative; display: inline-flex; }
.bf-tooltip { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%); background: var(--ink); color: var(--navy-950); font-size: 13px; line-height: 20px; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-xs); white-space: nowrap; z-index: var(--z-popover); box-shadow: var(--shadow-2); pointer-events: none; }
.bf-tooltip::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(50%); border: 5px solid transparent; border-block-start-color: var(--ink); }
.bf-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-selected) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: bf-shimmer 1.4s linear infinite; }
.bf-skel-lines { display: flex; flex-direction: column; gap: 10px; }
.bf-skel-lines .bf-skel { block-size: 14px; }
@keyframes bf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.bf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); max-inline-size: 520px; margin-inline: auto; }
.bf-empty.is-page { padding-block: var(--space-16); }
.bf-empty.is-inline { flex-direction: row; text-align: start; padding: var(--space-4); max-inline-size: none; gap: var(--space-4); }
.bf-empty.is-inline .bf-empty-art { transform: scale(.6); margin: -18px; }
.bf-empty-title { font-size: 18px; line-height: 30px; font-weight: 700; margin-block-start: var(--space-3) !important; }
.bf-empty-body { color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.bf-empty-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-4); }
.bf-empty-help { color: var(--ink-subtle); margin-block-start: var(--space-2); }
.bf-empty-art { position: relative; inline-size: 96px; block-size: 96px; display: grid; place-items: center; --ea: var(--ink-muted); }
.bf-empty-art svg { position: absolute; inset: 0; }
.bf-empty-art.is-info { --ea: var(--info); } .bf-empty-art.is-accent { --ea: var(--accent-text); } .bf-empty-art.is-warning { --ea: var(--warning); } .bf-empty-art.is-danger { --ea: var(--danger); } .bf-empty-art.is-progress { --ea: var(--link); }
.ea-line { fill: none; stroke: var(--line-control); stroke-width: 1.5; stroke-linecap: round; }
.ea-dash { stroke-dasharray: 4 6; }
.ea-tile { fill: var(--surface-3); stroke: var(--line); }
.ea-faint { opacity: .5; }
.ea-accent { fill: var(--accent-text); }
.ea-info { fill: var(--info); }
.ea-info-fill { fill: var(--info-soft); stroke: var(--ea); stroke-opacity: .5; }
.ea-danger { fill: none; stroke: var(--danger); stroke-width: 2; stroke-linecap: round; }
.bf-empty-glyph { position: relative; inline-size: 52px; block-size: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-control); color: var(--ea); box-shadow: var(--shadow-2); }
.bf-empty-art.is-broken .bf-empty-glyph { display: none; }

/* ---------- Overlays ---------- */
.bf-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); }
.bf-overlay.is-inline { position: relative; inset: auto; min-block-size: 100%; block-size: 100%; }
.bf-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(4px); animation: bf-fade var(--dur-base); }
@keyframes bf-fade { from { opacity: 0; } }
.bf-modal { position: relative; inline-size: 100%; max-block-size: calc(100% - 32px); overflow: auto; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); animation: bf-rise var(--dur-slow) var(--ease-out); }
@keyframes bf-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.bf-modal-sm { max-inline-size: 440px; } .bf-modal-md { max-inline-size: 560px; } .bf-modal-lg { max-inline-size: 800px; }
.bf-modal-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-3); }
.bf-modal-titles { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bf-modal-icon { inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.bf-modal-icon.is-danger { background: var(--danger-soft); color: var(--danger); } .bf-modal-icon.is-warning { background: var(--warning-soft); color: var(--warning); } .bf-modal-icon.is-success { background: var(--success-soft); color: var(--success); } .bf-modal-icon.is-info { background: var(--info-soft); color: var(--info); }
.bf-modal-body { padding: var(--space-2) var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.bf-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); }
.bf-overlay.is-drawer { place-items: stretch; padding: 0; }
.bf-drawer { position: absolute; inset-block: 0; inline-size: min(440px, 100%); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); display: flex; flex-direction: column; }
.bf-drawer.is-end { inset-inline-end: 0; animation: bf-slide-end var(--dur-slow) var(--ease-out); }
.bf-drawer.is-start { inset-inline-start: 0; animation: bf-slide-start var(--dur-slow) var(--ease-out); }
.bf-drawer.is-bottom { inset-block: auto 0; inset-inline: 0; inline-size: 100%; max-block-size: 85%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: bf-rise var(--dur-slow) var(--ease-out); }
@keyframes bf-slide-end { from { transform: translateX(-24px); opacity: 0; } }
@keyframes bf-slide-start { from { transform: translateX(24px); opacity: 0; } }
.bf-drawer-grip { inline-size: 40px; block-size: 4px; border-radius: 4px; background: var(--line-control); margin: 10px auto 0; }
.bf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line); }
.bf-drawer-body { flex: 1; overflow: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.bf-drawer-foot { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--line); }
.bf-drawer-foot > * { flex: 1; }
.bf-popover { inline-size: 300px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bf-popover-title { color: var(--ink); }

/* ---------- Page header / sections / hero ---------- */
.bf-pagehead { display: flex; flex-direction: column; gap: var(--space-3); }
.bf-pagehead-row { display: flex; align-items: flex-start; gap: var(--space-4); }
.bf-pagehead-titles { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.bf-pagehead-titleline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bf-pagehead-meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); color: var(--ink-subtle); }
.bf-pagehead-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@container bfpage (max-width: 640px) { .bf-pagehead-row { flex-direction: column; } .bf-pagehead-actions { inline-size: 100%; } .bf-pagehead-actions > * { flex: 1; } .bf-pagehead .t-h1 { font-size: 24px; line-height: 38px; } }

.bf-section { max-inline-size: var(--container-marketing); margin-inline: auto; padding: var(--space-24) var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-10); }
.bf-sechead { display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: 680px; }
.bf-sechead > .bf-eyebrow { align-self: flex-start; }
.bf-sechead.is-center { margin-inline: auto; text-align: center; align-items: center; }
.bf-sechead.is-center > .bf-eyebrow { align-self: center; }
.bf-sechead-actions { margin-block-start: var(--space-3); display: flex; gap: var(--space-2); }
@container bfpage (max-width: 640px) { .bf-section { padding: var(--space-12) var(--space-4) 0; gap: var(--space-6); } .bf-sechead .t-h1 { font-size: 26px; line-height: 40px; } }

.bf-hero { position: relative; overflow: hidden; }
.bf-hero-ambient { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(600px 360px at 20% 30%, rgba(22,140,255,.20), transparent 70%),
  radial-gradient(480px 320px at 8% 80%, rgba(102,85,255,.14), transparent 70%),
  radial-gradient(900px 500px at 90% -10%, rgba(56,217,255,.06), transparent 70%); animation: bf-drift var(--dur-ambient) ease-in-out infinite alternate; }
[data-theme="crm"] .bf-hero-ambient { display: none; }
@keyframes bf-drift { to { transform: translate3d(-24px, 12px, 0); } }
.bf-hero-inner { position: relative; max-inline-size: var(--container-marketing); margin-inline: auto; padding: var(--space-24) var(--space-8) var(--space-16); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-12); align-items: center; }
.bf-hero.is-compact .bf-hero-inner { padding-block: var(--space-16) var(--space-10); }
.bf-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.bf-hero-body { max-inline-size: 560px; }
.bf-hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-2); }
.bf-hero-tertiary { color: var(--ink-muted); }
.bf-hero-trust { list-style: none; display: flex; gap: var(--space-5); flex-wrap: wrap; padding: 0; margin: 0; color: var(--ink-muted); }
.bf-hero-trust li { display: flex; align-items: center; gap: 6px; }
.bf-hero-trust .bf-icon { color: var(--success); }
.bf-hero-visual { position: relative; }
@container bfpage (max-width: 900px) { .bf-hero-inner { grid-template-columns: 1fr; } }
@container bfpage (max-width: 640px) {
  .bf-hero-inner { padding: var(--space-12) var(--space-4) var(--space-10); gap: var(--space-8); }
  .bf-hero .t-display-xl { font-size: 34px; line-height: 52px; }
  .bf-hero .t-display { font-size: 30px; line-height: 46px; }
  .bf-hero-ctas { inline-size: 100%; flex-direction: column; } .bf-hero-ctas > * { inline-size: 100%; }
}

.bf-mascot-slot { display: grid; place-items: center; aspect-ratio: 1; inline-size: 100%; max-inline-size: 360px; margin-inline: auto; border-radius: var(--radius-xl); border: 1.5px dashed var(--glass-line); background: radial-gradient(closest-side, rgba(102,85,255,.16), transparent); color: var(--ink-subtle); }
.bf-mascot-slot.is-sm { max-inline-size: 140px; } .bf-mascot-slot.is-md { max-inline-size: 240px; }

.bf-product { gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); }
.bf-product.is-highlight { border-color: rgba(53,185,255,.45); box-shadow: var(--shadow-glow); background: linear-gradient(180deg, rgba(22,140,255,.08), transparent 40%), var(--surface-2); }
.bf-product-head { display: flex; flex-direction: column; gap: 4px; }
.bf-product-kicker { display: flex; justify-content: space-between; align-items: center; min-block-size: 24px; }
.bf-product-price { display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; padding-block: var(--space-4); border-block: 1px solid var(--line); }
.bf-product-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bf-product-features li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 26px; }
.bf-product-features .bf-icon { color: var(--success); margin-block-start: 5px; }
.bf-product-features li.is-off { color: var(--ink-subtle); } .bf-product-features li.is-off .bf-icon { color: var(--ink-subtle); }
.bf-product-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

.bf-statushero { flex-direction: row; gap: var(--space-8); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--glass-fill); border-color: var(--glass-line); position: relative; overflow: hidden; }
.bf-statushero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px 240px at 90% 0%, var(--primary-soft), transparent 70%); }
.bf-statushero.is-accent::before { background: radial-gradient(500px 240px at 90% 0%, var(--accent-soft), transparent 70%); }
.bf-statushero.is-warning::before { background: radial-gradient(500px 240px at 90% 0%, var(--warning-soft), transparent 70%); }
.bf-statushero.is-danger::before { background: radial-gradient(500px 240px at 90% 0%, var(--danger-soft), transparent 70%); }
.bf-statushero.is-success::before { background: radial-gradient(500px 240px at 90% 0%, var(--success-soft), transparent 70%); }
.bf-statushero.is-danger { border-color: rgba(255,107,107,.4); }
.bf-statushero-main { position: relative; flex: 1; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.bf-statushero-top { display: flex; gap: var(--space-3); align-items: center; }
.bf-statushero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-2); }
.bf-statushero-visual { position: relative; flex: none; display: grid; place-items: center; }
@container bfpage (max-width: 700px) { .bf-statushero { flex-direction: column; padding: var(--space-5); gap: var(--space-5); } .bf-statushero-ctas { inline-size: 100%; } .bf-statushero-ctas > * { flex: 1; } .bf-statushero-visual { order: -1; place-items: start; } }

.bf-checklist ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.bf-checklist-item { display: flex; align-items: center; gap: var(--space-3); padding-block: 10px; border-block-end: 1px solid var(--line); font-size: 15px; }
.bf-checklist-item:last-child { border-block-end: 0; }
.bf-checklist-mark { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1.5px dashed var(--line-control); display: grid; place-items: center; flex: none; }
.bf-checklist-item.is-done .bf-checklist-mark { background: var(--success); border: 0; color: var(--on-accent); }
.bf-checklist-item.is-done .bf-checklist-text > span { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--ink-subtle); }
.bf-checklist-text { flex: 1; display: flex; flex-direction: column; line-height: 24px; }
.bf-checklist-text small { font-size: 13px; color: var(--ink-subtle); line-height: 20px; }

.bf-system { min-block-size: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-4); padding: var(--space-12) var(--space-4); max-inline-size: 560px; margin-inline: auto; }
.bf-system-code { font-size: 96px; line-height: 1; font-weight: 900; color: var(--surface-selected); -webkit-text-stroke: 1.5px var(--line-control); letter-spacing: 0; display: grid; place-items: center; }
.bf-system-code .bf-icon { color: var(--info); } .bf-system.is-danger .bf-system-code .bf-icon { color: var(--danger); } .bf-system.is-warning .bf-system-code .bf-icon { color: var(--warning); }
.bf-system:not(:has(.bf-icon)) .bf-system-code { font-size: 120px; }
.bf-system-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-2); }

/* ---------- Layout shells ---------- */
.bf-layout-marketing { container: bfpage / inline-size; min-block-size: 100%; }
.bf-layout-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-block-size: 100vh; container: bfpage / inline-size; }
.bf-auth-main { display: flex; flex-direction: column; padding: var(--space-8); gap: var(--space-8); }
.bf-auth-top { display: flex; justify-content: space-between; align-items: center; }
.bf-auth-card { inline-size: 100%; max-inline-size: 420px; margin: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.bf-auth-legal { text-align: center; }
.bf-auth-aside { background: var(--surface-1); border-inline-start: 1px solid var(--line); position: relative; overflow: hidden; display: grid; place-items: center; padding: var(--space-12); }
.bf-auth-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 300px at 60% 30%, rgba(22,140,255,.16), transparent 70%), radial-gradient(360px 260px at 30% 90%, rgba(102,85,255,.14), transparent 70%); }
.bf-auth-aside-inner { position: relative; display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 420px; }
@container bfpage (max-width: 900px) { .bf-layout-auth { grid-template-columns: 1fr; } .bf-auth-aside { display: none; } .bf-auth-main { padding: var(--space-4); } }

.bf-layout-order { min-block-size: 100vh; display: flex; flex-direction: column; container: bfpage / inline-size; }
.bf-order-top { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-8); border-block-end: 1px solid var(--line); background: var(--surface-1); }
.bf-order-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-subtle); margin-inline-start: auto; }
.bf-order-saved .bf-icon { color: var(--success); }
.bf-order-stepper { max-inline-size: 1080px; inline-size: 100%; margin-inline: auto; padding: var(--space-8) var(--space-8) var(--space-6); }
.bf-order-body { max-inline-size: 1080px; inline-size: 100%; margin-inline: auto; padding: 0 var(--space-8) var(--space-12); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; flex: 1; }
.bf-order-body.is-single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.bf-order-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); box-shadow: var(--shadow-2); }
.bf-order-summary { position: sticky; inset-block-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.bf-order-foot { position: sticky; inset-block-end: 0; background: var(--glass-fill); backdrop-filter: blur(var(--blur-glass)); border-block-start: 1px solid var(--line); z-index: var(--z-sticky); }
.bf-order-foot-inner { max-inline-size: 1080px; margin-inline: auto; padding: var(--space-3) var(--space-8); display: flex; align-items: center; gap: var(--space-3); }
@container bfpage (max-width: 860px) { .bf-order-body { grid-template-columns: 1fr; } .bf-order-summary { position: static; order: -1; } }
@container bfpage (max-width: 640px) {
  .bf-order-top { padding-inline: var(--space-4); } .bf-order-top .bf-btn { display: none; }
  .bf-order-stepper { padding: var(--space-4); } .bf-order-body { padding: 0 var(--space-4) var(--space-8); }
  .bf-order-panel { padding: var(--space-5); border-radius: var(--radius-md); }
  .bf-order-foot-inner { padding: var(--space-3) var(--space-4); } .bf-order-foot-inner .bf-btn-primary, .bf-order-foot-inner .bf-btn-cta { flex: 1; }
}

@container bfpage (max-width: 1100px) {
  .bf-layout-app > .bf-sidebar { inline-size: var(--rail-w); }
  .bf-layout-app > .bf-sidebar .bf-sidebar-label, .bf-layout-app > .bf-sidebar .bf-sidebar-group-label, .bf-layout-app > .bf-sidebar .bf-sidebar-badge, .bf-layout-app > .bf-sidebar .bf-env-chip, .bf-layout-app > .bf-sidebar .bf-logo-en, .bf-layout-app > .bf-sidebar .bf-sidebar-user span { display: none; }
  .bf-layout-app > .bf-sidebar .bf-sidebar-item { justify-content: center; }
  .bf-layout-app > .bf-sidebar .bf-sidebar-head { justify-content: center; padding-inline: 0; }
  .bf-layout-app > .bf-sidebar .bf-logo-img { display: none; } .bf-layout-app > .bf-sidebar .bf-logo-symbol { display: block; }
  .bf-sidebar-crm .bf-sidebar-item.is-active::before { display: none; }
  .bf-app-main { padding: var(--space-6); }
}
@container bfpage (max-width: 640px) {
  .bf-layout-app > .bf-sidebar { display: none; }
  .bf-layout-app.is-nav-open > .bf-sidebar { display: flex; position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 280px; z-index: var(--z-drawer); box-shadow: var(--shadow-3); }
  .bf-layout-app.is-nav-open > .bf-sidebar .bf-sidebar-label, .bf-layout-app.is-nav-open > .bf-sidebar .bf-sidebar-group-label { display: initial; }
  .bf-topbar { padding-inline: var(--space-4); gap: var(--space-2); }
  .bf-topbar-menu { display: inline-grid !important; }
  .bf-topbar-user-name, .bf-topbar-user > .bf-icon { display: none; }
  .bf-topbar-search { display: none; }
  .bf-app-main, .bf-layout-admin .bf-app-main { padding: var(--space-4); gap: var(--space-4); padding-block-end: 88px; }
  .bf-layout-dashboard .bf-bottomnav { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); background: var(--glass-fill); backdrop-filter: blur(var(--blur-glass)); border-block-start: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .bf-banner-inner { padding-inline: var(--space-4); }
}
.bf-bottomnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 11px; line-height: 16px; color: var(--ink-subtle) !important; border-radius: var(--radius-sm); }
.bf-bottomnav-item.is-active { color: var(--ink) !important; } .bf-bottomnav-item.is-active .bf-icon { color: var(--link); }

/* ---------- Grids used by patterns ---------- */
.bf-grid { display: grid; gap: var(--space-6); }
.is-dense .bf-grid { gap: var(--space-4); }
.bf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bf-grid-main-aside { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.bf-grid-aside-main { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.bf-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.bf-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
@container bfpage (max-width: 1100px) { .bf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-grid-main-aside, .bf-grid-aside-main { grid-template-columns: 1fr; } }
@container bfpage (max-width: 760px) { .bf-grid-3 { grid-template-columns: 1fr; } .bf-grid-2 { grid-template-columns: 1fr; } }
@container bfpage (max-width: 480px) { .bf-grid-4.bf-grid-keep2 { grid-template-columns: 1fr 1fr; } .bf-grid-4:not(.bf-grid-keep2) { grid-template-columns: 1fr; } }

/* ---------- Reference-driven refinements (liquid glass edge, tinted KPI, charts, slots, pipeline) ---------- */
.bf-card-glass, .bf-statushero, .bf-pheader, .bf-order-foot { box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-2); }
.bf-card { box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-2); }
.bf-btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-glow-primary); }
.bf-btn-primary, .bf-btn-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.bf-layout-dashboard .bf-sidebar-item.is-active { background: linear-gradient(270deg, var(--primary-soft), transparent 90%), var(--surface-selected); box-shadow: inset 0 1px 0 var(--edge-light); }
.bf-layout-dashboard .bf-sidebar-item.is-active .bf-icon { filter: drop-shadow(0 0 6px rgba(53,185,255,.55)); }
.bf-sidebar-promo { padding: 0 var(--space-3) var(--space-3); }
.bf-promo { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: var(--radius-md); background: radial-gradient(160px 120px at 90% 0%, var(--accent-soft), transparent 70%), var(--surface-2); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--edge-light); }
.bf-promo-icon { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-block-end: 4px; }
.bf-promo .bf-btn { margin-block-start: 6px; }

.bf-stat { position: relative; overflow: hidden; }
.bf-stat.is-tinted { --tint: var(--info); --tint-soft: var(--info-soft); border-color: color-mix(in srgb, var(--tint) 45%, transparent); background: linear-gradient(160deg, var(--tint-soft), transparent 65%), var(--surface-2); }
.bf-stat.is-tinted.is-success { --tint: var(--success); --tint-soft: var(--success-soft); }
.bf-stat.is-tinted.is-warning { --tint: var(--warning); --tint-soft: var(--warning-soft); }
.bf-stat.is-tinted.is-danger { --tint: var(--danger); --tint-soft: var(--danger-soft); }
.bf-stat.is-tinted.is-accent { --tint: var(--accent-text); --tint-soft: var(--accent-soft); }
.bf-stat.is-tinted.is-progress { --tint: var(--link); --tint-soft: var(--primary-soft); }
[data-theme="crm"] .bf-stat.is-tinted { background: var(--surface-2); border-color: var(--line); }
.bf-stat-spark { position: absolute; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: 34px; stroke: var(--tint, var(--info)); opacity: .55; pointer-events: none; }
.bf-stat:has(.bf-stat-spark) .bf-stat-foot { padding-block-end: 22px; }

.bf-chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
.bf-chart-head { display: flex; flex-direction: column; gap: 2px; }
.bf-chart-svg { inline-size: 100%; block-size: auto; overflow: visible; }
.bf-chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bf-chart-tick { fill: var(--ink-subtle); font: 500 15px var(--font-sans); }
.bf-chart-legend { display: flex; gap: var(--space-4); color: var(--ink-muted); }
.bf-chart-legend span, .bf-slots-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bf-chart-legend i { inline-size: 10px; block-size: 10px; border-radius: 3px; }
.bf-donut-body { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.bf-donut-ring { position: relative; display: grid; place-items: center; }
.bf-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; min-inline-size: 140px; font-size: 14px; }
.bf-donut-legend li { display: flex; align-items: center; gap: 8px; }
.bf-donut-legend i { inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none; }
.bf-donut-legend span { flex: 1; color: var(--ink-muted); }
.bf-bars-plot { display: flex; align-items: flex-end; gap: var(--space-3); padding-block-start: 20px; }
.bf-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; block-size: 100%; justify-content: flex-end; min-inline-size: 0; }
.bf-bar-fill { inline-size: 100%; max-inline-size: 36px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--chart-1), color-mix(in srgb, var(--chart-1) 25%, transparent)); min-block-size: 4px; }
.bf-bar.is-highlight .bf-bar-fill { background: linear-gradient(180deg, var(--chart-2), color-mix(in srgb, var(--chart-2) 25%, transparent)); }
.bf-bar-val { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bf-bar-label { color: var(--ink-subtle); white-space: nowrap; }

.bf-slots { display: flex; flex-direction: column; gap: var(--space-3); }
.bf-slots-label { color: var(--ink-muted); }
.bf-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-block-start: 6px; }
.bf-slots.is-compact .bf-slots-grid { grid-template-columns: repeat(3, 1fr); }
.bf-slot { block-size: 38px; border-radius: 10px; border: 1px solid transparent; font: 700 14px/1 var(--font-sans); cursor: pointer; transition: all var(--dur-fast); }
.bf-slot.is-free { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.bf-slot.is-free:hover { background: color-mix(in srgb, var(--success) 26%, transparent); }
.bf-slot.is-booked { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; opacity: .8; }
.bf-slot.is-selected { background: var(--primary); color: var(--on-accent); box-shadow: var(--shadow-glow-primary); }
.bf-slots-legend { display: flex; gap: var(--space-4); color: var(--ink-subtle); }
.bf-slots-legend i { inline-size: 10px; block-size: 10px; border-radius: 3px; }
.bf-slots-legend i.is-free { background: var(--success); } .bf-slots-legend i.is-booked { background: var(--danger); } .bf-slots-legend i.is-selected { background: var(--primary); }

.bf-pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--space-3); overflow-x: auto; padding-block-end: 4px; }
.bf-pipe-col { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 240px; }
.bf-pipe-head { display: flex; align-items: center; gap: var(--space-2); padding-block-end: var(--space-2); border-block-end: 2px solid var(--line-strong); }
.bf-pipe-col.is-info .bf-pipe-head { border-block-end-color: var(--info); } .bf-pipe-col.is-progress .bf-pipe-head { border-block-end-color: var(--primary); } .bf-pipe-col.is-warning .bf-pipe-head { border-block-end-color: var(--warning); } .bf-pipe-col.is-accent .bf-pipe-head { border-block-end-color: var(--accent); } .bf-pipe-col.is-success .bf-pipe-head { border-block-end-color: var(--success); }
.bf-pipe-count { min-inline-size: 22px; text-align: center; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--ink-muted); }
.bf-pipe-value { margin-inline-start: auto; }
.bf-pipe-list { display: flex; flex-direction: column; gap: var(--space-2); }
.bf-pipe-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink) !important; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.bf-pipe-card:hover { border-color: var(--line-control); transform: translateY(-1px); }
.bf-pipe-card.is-overdue { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.bf-pipe-card-top { display: flex; gap: 10px; align-items: center; }
.bf-pipe-card-titles { display: flex; flex-direction: column; line-height: 20px; min-inline-size: 0; font-size: 14px; }
.bf-pipe-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--ink-subtle); }
.bf-pipe-card-meta .is-overdue { color: var(--danger); font-weight: 600; }
.bf-pipe-empty { color: var(--ink-subtle); text-align: center; padding: var(--space-4); border: 1px dashed var(--line); border-radius: var(--radius-sm); }

.bf-float-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--glass-fill); border: 1px solid var(--glass-line); backdrop-filter: blur(var(--blur-glass)); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-2); font-size: 13px; line-height: 18px; white-space: nowrap; z-index: 1; }
.bf-float-chip b { font-size: 16px; }
@container bfpage (max-width: 640px) { .bf-float-chip { display: none; } }

/* ---------- Mascot (supplied renders) ---------- */
.bf-mascot { position: relative; margin: 0; display: grid; place-items: end center; inline-size: 100%; max-inline-size: 420px; margin-inline: auto; isolation: isolate; }
.bf-mascot img { position: relative; z-index: 1; inline-size: 100%; block-size: auto; display: block; filter: drop-shadow(0 24px 40px rgba(3,6,24,.55)); }
.bf-mascot-halo { position: absolute; z-index: 0; inset-inline: 8%; inset-block-end: 2%; block-size: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(22,140,255,.35), transparent); filter: blur(8px); }
.bf-mascot.is-sm { max-inline-size: 180px; } .bf-mascot.is-md { max-inline-size: 300px; } .bf-mascot.is-lg { max-inline-size: 520px; }

/* ---------- Phone mockup + Telegram bot screen ---------- */
.bf-phone { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); --pw: 300px; }
.bf-phone.is-xs { --pw: 200px; } .bf-phone.is-sm { --pw: 240px; } .bf-phone.is-lg { --pw: 340px; }
.bf-phone.is-tilt .bf-phone-body { transform: perspective(1200px) rotateY(10deg) rotateZ(-2deg); }
.bf-phone-body { position: relative; inline-size: var(--pw); aspect-ratio: 9 / 19; border-radius: calc(var(--pw) * .15); padding: 10px; background: linear-gradient(145deg, #2b3350, #0b0f22 45%, #1b2240); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 0 0 1px #05081a, 0 30px 70px rgba(3,6,24,.7), 0 0 60px rgba(22,140,255,.18); }
.bf-phone-notch { position: absolute; z-index: 3; inset-block-start: 18px; inset-inline-start: 50%; transform: translateX(50%); inline-size: 30%; block-size: 22px; border-radius: 14px; background: #03050f; }
.bf-phone-status { position: absolute; z-index: 2; inset-block-start: 18px; inset-inline: 30px; display: flex; justify-content: space-between; font: 600 11px/22px var(--font-sans); color: #e9ecff; }
.bf-phone-screen { position: relative; inline-size: 100%; block-size: 100%; border-radius: calc(var(--pw) * .12); overflow: hidden; background: #0e1628; }
.bf-phone-shot { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; display: block; }
.bf-phone-caption { color: var(--ink-muted); text-align: center; max-inline-size: var(--pw); }
.bf-tg { display: flex; flex-direction: column; block-size: 100%; background: radial-gradient(120% 60% at 50% 0%, #17223f, #0d1426 60%); color: #e9ecff; font-size: 11.5px; line-height: 19px; padding-block-start: 40px; }
.bf-tg-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; border-block-end: 1px solid rgba(255,255,255,.06); background: rgba(13,20,38,.8); }
.bf-tg-avatar { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 var(--font-sans); color: #fff; background: linear-gradient(145deg, var(--blue-400), var(--blue-500)); }
.bf-tg-title { display: flex; flex-direction: column; flex: 1; line-height: 15px; } .bf-tg-title b { font-size: 12.5px; text-align: right; } .bf-tg-title small { color: #8f9bc4; font-size: 10.5px; }
.bf-tg-chat { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.bf-tg-msg { background: #1c2742; border-radius: 12px 12px 12px 4px; padding: 8px 10px; }
.bf-tg-muted { color: #8f9bc4; }
.bf-tg-slots .bf-slots { gap: 6px; } .bf-tg-slots .bf-slots-label { color: #c9d0ee; text-align: center; font-size: 11px; line-height: 16px; } .bf-tg-slots .bf-slots-grid { gap: 4px; margin: 2px 0 0; }
.bf-tg-slots .bf-slot { block-size: 26px; font-size: 11.5px; border-radius: 6px; }
.bf-tg-slots .bf-slot.is-free { background: #1f9d58; color: #fff; border: 0; } .bf-tg-slots .bf-slot.is-booked { background: #d9534f; color: #fff; text-decoration: none; opacity: 1; } .bf-tg-slots .bf-slot.is-selected { background: var(--blue-500); color: #fff; box-shadow: 0 0 0 2px #fff inset; }
.bf-tg-kb { display: flex; flex-direction: column; gap: 4px; }
.bf-tg-kb-row { display: flex; gap: 4px; }
.bf-tg-key { flex: 1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-block-size: 28px; padding: 2px 4px; border-radius: 7px; background: rgba(40,56,94,.9); color: #e9ecff; font-size: 10.5px; font-weight: 600; text-align: center; }
.bf-tg-key.is-on { background: rgba(22,140,255,.35); } .bf-tg-key.is-danger .bf-icon { color: #ff6b81; }
.bf-tg-input { display: flex; gap: 8px; align-items: center; margin: 8px; padding: 7px 12px; border-radius: 18px; background: #1a2440; color: #7f8bb5; font-size: 12px; }

/* ---------- Symmetry & rhythm: siblings in a row share one height; one gap per context ---------- */
.bf-grid { align-items: stretch; }
.bf-grid > .bf-card, .bf-grid > .bf-stat, .bf-grid > .bf-product, .bf-grid > a.bf-card, .bf-grid > .bf-stack > .bf-card:only-child { block-size: 100%; }
.bf-grid-main-aside, .bf-grid-aside-main { align-items: stretch; }
.bf-grid-main-aside > .bf-stack, .bf-grid-aside-main > .bf-stack { justify-content: stretch; }
.bf-grid-main-aside > .bf-stack > .bf-card:last-child, .bf-grid-aside-main > .bf-stack > .bf-card:last-child { flex: 1; }
.bf-card > .bf-card-foot { margin-block-start: auto; }
.bf-stat { justify-content: space-between; min-block-size: 148px; }
.is-dense .bf-stat { min-block-size: 132px; }
.bf-product .bf-product-foot { margin-block-start: auto; }
.bf-option { block-size: 100%; }

/* ---------- OptionCard — premium tone treatment (pricing / subscription choice) ---------- */
.bf-option { --tone: var(--primary); --tone-text: var(--link); --tone-soft: var(--primary-soft); position: relative; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--tone) 28%, var(--line-control)); background: radial-gradient(260px 140px at 100% 0%, var(--tone-soft), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--surface-2); box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-1); transition: border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.bf-option.is-tone-accent { --tone: var(--accent); --tone-text: var(--accent-text); --tone-soft: var(--accent-soft); }
.bf-option.is-tone-success { --tone: var(--success); --tone-text: var(--success); --tone-soft: var(--success-soft); }
.bf-option.is-tone-warning { --tone: var(--cta); --tone-text: var(--warning); --tone-soft: var(--warning-soft); }
.bf-option.is-tone-info { --tone: var(--info); --tone-text: var(--info); --tone-soft: var(--info-soft); }
.bf-option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tone) 55%, var(--line-control)); background: radial-gradient(280px 160px at 100% 0%, var(--tone-soft), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--surface-3); transform: translateY(-2px); }
.bf-option.is-selected { border-color: var(--tone); background: radial-gradient(320px 180px at 100% 0%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%), var(--surface-2); box-shadow: inset 0 1px 0 var(--edge-light), 0 0 0 1px var(--tone), 0 14px 36px color-mix(in srgb, var(--tone) 24%, transparent); }
[data-theme="crm"] .bf-option.is-selected { box-shadow: 0 0 0 1px var(--tone); }
.bf-option-icon { inline-size: 48px; block-size: 48px; border-radius: 14px; background: linear-gradient(145deg, var(--tone-soft), color-mix(in srgb, var(--tone) 8%, transparent)); color: var(--tone-text); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); box-shadow: inset 0 1px 0 var(--edge-light); }
.bf-option.is-selected .bf-option-icon { background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 32%, transparent), var(--tone-soft)); color: var(--tone-text); border-color: color-mix(in srgb, var(--tone) 60%, transparent); }
.bf-option-title { font-size: 17px; font-weight: 800; }
.bf-option-price { display: flex; align-items: baseline; gap: 6px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px dashed color-mix(in srgb, var(--tone) 30%, var(--line)); font-variant-numeric: tabular-nums; }
.bf-option-price b { font-size: 22px; line-height: 30px; font-weight: 800; color: var(--ink); }
.bf-option.is-selected .bf-option-price b { color: var(--tone-text); }
.bf-option-price small { font-size: 13px; color: var(--ink-muted); }
.bf-option-mark { margin-block-start: 2px; }
.bf-option .bf-radio-dot.is-on { border-color: var(--tone); }
.bf-option .bf-check-box.is-on { background: var(--tone); border-color: var(--tone); }
.bf-option.is-tone-accent .bf-check-box.is-on { color: var(--on-violet); }
.bf-option.is-compact .bf-option-icon { inline-size: 40px; block-size: 40px; }
.bf-option.is-compact .bf-option-title { font-size: 15px; font-weight: 700; }
.bf-option:not(.is-compact) { flex-wrap: wrap; align-items: flex-start; align-content: flex-start; row-gap: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-5); }
.bf-option:not(.is-compact) .bf-option-mark { order: 2; margin-inline-start: auto; align-self: flex-start; }
.bf-option:not(.is-compact) .bf-option-body { order: 3; flex-basis: 100%; }
.bf-option-price small { white-space: nowrap; }
.bf-option-title { flex-wrap: wrap; }


/* =====================================================================
   NEBULA — the Bot Factory visual language (default)
   Depth = colour + surface + light + transparency + shadow + type + scale + motion.
   Same components and IA; this layer restyles the shared parts so every route inherits it.
   ===================================================================== */
:root:not(.bf-legacy), .bf-scope, [data-theme] {
  --bf-slots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Crect x='6' y='8' width='32' height='18' rx='7' fill='white' fill-opacity='.05'/%3E%3C/svg%3E");
  --bf-lit: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 42%);
}
/* tone kits: k1 light stop, k2 deep stop, kt text, kg glow */
.bf-root, .bf-scope, [data-theme] { --k1: #5FD8FF; --k2: #1C7FE0; --kt: var(--cyan-400); --kg: rgba(56,217,255,.55); }
:is(.is-info, .is-cyan, .is-tone-info, .is-tone-cyan) { --k1: #6FE3FF; --k2: #178DD6; --kt: var(--cyan-400); --kg: rgba(56,217,255,.55); }
:is(.is-progress, .is-blue, .is-primary, .is-tone-primary, .is-tone-blue) { --k1: #5DB6FF; --k2: #1164D6; --kt: var(--blue-400); --kg: rgba(22,140,255,.6); }
:is(.is-accent, .is-violet, .is-tone-accent, .is-tone-violet) { --k1: #9C92FF; --k2: #4B3BE0; --kt: var(--violet-300); --kg: rgba(102,85,255,.65); }
:is(.is-success, .is-mint, .is-tone-success, .is-tone-mint) { --k1: #6FEAD3; --k2: #0E9E84; --kt: var(--mint-400); --kg: rgba(33,199,168,.5); }
:is(.is-warning, .is-amber, .is-tone-warning, .is-tone-amber) { --k1: #FFD65A; --k2: #E08F00; --kt: var(--amber-500); --kg: rgba(255,185,20,.55); }
:is(.is-danger, .is-rose, .is-tone-danger, .is-tone-rose) { --k1: #FF9A9A; --k2: #D93A3A; --kt: var(--rose-400); --kg: rgba(255,107,107,.5); }
:is(.is-magenta, .is-tone-magenta) { --k1: #F59BE3; --k2: #B7359F; --kt: var(--magenta-300); --kg: rgba(225,84,200,.5); }
:is(.is-trial, .is-id-trial) { --k1: #FFE07A; --k2: #C98A08; --kt: var(--amber-500); --kg: rgba(242,176,30,.55); --idg: var(--grad-trial); }
:is(.is-solo, .is-id-solo) { --k1: #8BF07A; --k2: #1F9A1A; --kt: #6BE05B; --kg: rgba(60,200,46,.5); --idg: var(--grad-solo); }
:is(.is-pro, .is-id-pro) { --k1: #C58CFF; --k2: #8030F0; --kt: #C9A2FF; --kg: rgba(160,64,224,.65); --idg: var(--grad-pro); }

/* ---------- Atmosphere ---------- */
.bf-root { position: relative; isolation: isolate; background: var(--bg); }
.bf-root > :where(:not(.bf-ambient)) { position: relative; z-index: 1; }
.bf-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bf-amb-field { position: absolute; border-radius: 50%; }
.bf-amb-field.is-a { inline-size: 1100px; block-size: 900px; inset-block-start: -380px; inset-inline-start: -260px; background: radial-gradient(closest-side, rgba(22,140,255,.30), rgba(56,217,255,.08) 55%, transparent); }
.bf-amb-field.is-b { inline-size: 1000px; block-size: 1000px; inset-block-start: 22%; inset-inline-end: -420px; background: radial-gradient(closest-side, rgba(102,85,255,.30), rgba(155,92,255,.10) 55%, transparent); }
.bf-amb-field.is-c { inline-size: 900px; block-size: 700px; inset-block-end: -260px; inset-inline-start: 20%; background: radial-gradient(closest-side, rgba(225,84,200,.10), rgba(56,217,255,.05) 60%, transparent); }
.bf-amb-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(167,180,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(167,180,255,.055) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 50% at 60% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 50% at 60% 0%, #000, transparent 75%); }
.bf-amb-form { position: absolute; }
.bf-amb-form.is-ring { inline-size: 520px; block-size: 520px; inset-block-start: 380px; inset-inline-end: -140px; border-radius: 50%; border: 1.5px solid rgba(129,116,255,.22); box-shadow: inset 0 0 60px rgba(102,85,255,.12); transform: perspective(900px) rotateX(68deg) rotateZ(-20deg); }
.bf-amb-form.is-tile { inline-size: 120px; block-size: 120px; inset-block-start: 1180px; inset-inline-end: -48px; border-radius: 28px; background: linear-gradient(145deg, rgba(56,217,255,.20), rgba(102,85,255,.08)); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); transform: perspective(600px) rotateX(24deg) rotateY(-28deg) rotateZ(12deg); box-shadow: 0 30px 60px -30px rgba(2,3,18,.9); }
.bf-amb-form.is-orb { inline-size: 64px; block-size: 64px; inset-block-start: 96px; inset-inline-start: 46%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #9C92FF 16%, #4B3BE0 55%, #1A1450 100%); opacity: .55; box-shadow: 0 20px 40px -10px rgba(102,85,255,.6); }
.bf-ambient.is-crm .bf-amb-field.is-a { opacity: .45; } .bf-ambient.is-crm .bf-amb-field.is-b { opacity: .35; } .bf-ambient.is-crm .bf-amb-field.is-c, .bf-ambient.is-crm .bf-amb-grid { display: none; }
.bf-ambient.is-app .bf-amb-grid { -webkit-mask-image: radial-gradient(60% 35% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(60% 35% at 50% 0%, #000, transparent 75%); }
@media (prefers-reduced-motion: no-preference) {
  .bf-amb-field.is-a { animation: nb-drift-a 22s ease-in-out infinite alternate; } .bf-amb-field.is-b { animation: nb-drift-b 26s ease-in-out infinite alternate; }
}
@keyframes nb-drift-a { to { transform: translate3d(-60px, 40px, 0) scale(1.06); } }
@keyframes nb-drift-b { to { transform: translate3d(50px, -30px, 0) scale(1.05); } }
.bf-hero-ambient { display: none; }

/* ---------- Typography presence ---------- */
.t-display-xl { font-size: 62px; line-height: 84px; font-weight: 900; }
.t-display { font-weight: 900; }
.bf-sechead .t-h1, .bf-pagehead .t-h1, .bf-pagehead .t-h2 { font-weight: 800; }
.bf-card-title, .bf-option-title, .bf-product-head .t-h2 { font-weight: 800; }
.bf-muted { color: var(--ink-muted); }
.bf-eyebrow { background: none; padding: 0; color: var(--kt, var(--accent-text)); gap: 10px; font-weight: 700; }
.bf-eyebrow::before { content: ""; inline-size: 26px; block-size: 3px; border-radius: 3px; background: var(--grad-signal); box-shadow: 0 0 10px rgba(56,217,255,.5); }

/* ---------- Surfaces: glass cards float above the atmosphere ---------- */
.bf-card { background: var(--bf-lit), var(--surface-glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--border-default); border-block-start-color: var(--border-highlight); border-radius: 20px; box-shadow: var(--elev-2); }
.is-dense .bf-card { border-radius: 16px; }
.bf-card.is-tone-info, .bf-card.is-tone-primary, .bf-card.is-tone-accent, .bf-card.is-tone-success, .bf-card.is-tone-warning, .bf-card.is-tone-danger, .bf-card.is-tone-magenta { background: radial-gradient(320px 160px at 100% 0%, color-mix(in srgb, var(--kt) 16%, transparent), transparent 70%), var(--bf-lit), var(--surface-glass); border-block-start-color: color-mix(in srgb, var(--kt) 55%, transparent); }
.bf-card-glass { background: var(--bf-lit), var(--surface-glass-strong); border-color: var(--border-strong); border-block-start-color: rgba(255,255,255,.24); }
.bf-card-outline { background: transparent; backdrop-filter: none; box-shadow: none; border-color: var(--border-strong); }
.bf-card-flat { background: var(--bf-lit), rgba(255,255,255,.025); box-shadow: none; backdrop-filter: none; }
.bf-card-interactive, a.bf-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.bf-card-interactive:hover, a.bf-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); border-color: var(--border-strong); border-block-start-color: rgba(255,255,255,.28); }
.bf-card-foot { border-block-start-color: var(--border-subtle); }
[data-theme="crm"] .bf-card { backdrop-filter: none; background: var(--bf-lit), var(--surface-2); }

/* ---------- Keycap tiles: every meaning has a colour and a little depth ---------- */
:is(.bf-stat-icon, .bf-list-icon, .bf-option-icon, .bf-promo-icon, .bf-upload-icon, .bf-modal-icon, .bf-empty-glyph, .bf-tl-dot) { color: #fff; background: linear-gradient(150deg, var(--k1) 0%, var(--k2) 100%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.22), 0 8px 18px -8px var(--kg); }
.bf-stat-icon, .bf-list-icon { border-radius: 12px; inline-size: 40px; block-size: 40px; }
.bf-list-icon:not([class*="is-"]) { --k1: #4A5A9E; --k2: #252F6E; --kg: rgba(0,0,0,.4); }
.bf-promo-icon { --k1: #B69CFF; --k2: #6A2FC9; --kg: rgba(155,92,255,.6); }
.bf-upload-icon { --k1: #5DB6FF; --k2: #1164D6; --kg: rgba(22,140,255,.6); }
.bf-tl-dot { inline-size: 30px; block-size: 30px; }
.bf-tl-item.is-neutral .bf-tl-dot { --k1: #4A5A9E; --k2: #252F6E; --kg: transparent; }
.bf-tl-item::before { background: linear-gradient(180deg, var(--border-strong), transparent); }
.bf-modal-icon.is-danger { --k1: #FF9A9A; --k2: #D93A3A; } .bf-modal-icon.is-warning { --k1: #FFD65A; --k2: #E08F00; } .bf-modal-icon.is-success { --k1: #6FEAD3; --k2: #0E9E84; }
[data-theme="crm"] :is(.bf-stat-icon, .bf-list-icon, .bf-tl-dot) { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.2); }
@media (prefers-reduced-motion: no-preference) { .bf-stat:hover .bf-stat-icon, .bf-card-interactive:hover .bf-stat-icon { transform: translateY(-2px) rotate(-6deg); transition: transform var(--dur-base) var(--ease-out); } }

/* ---------- Glyph3D & Orb3D ---------- */
.bf-g3d { --s: 64px; position: relative; display: inline-block; inline-size: var(--s); block-size: var(--s); transform: perspective(420px) rotateX(14deg) rotateY(-18deg); transform-style: preserve-3d; flex: none; }
.bf-g3d.is-lg { --s: 92px; } .bf-g3d.is-sm { --s: 44px; }
.bf-g3d-depth { position: absolute; inset: 0; border-radius: 30%; background: linear-gradient(150deg, var(--k2), #0B0F31); transform: translate3d(5px, 7px, -12px); filter: brightness(.7); box-shadow: 0 22px 34px -12px var(--kg); }
.bf-g3d-face { position: absolute; inset: 0; border-radius: 30%; display: grid; place-items: center; color: #fff; background: var(--idg, linear-gradient(150deg, var(--k1), var(--k2))); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.22); }
.bf-g3d-face .bf-icon { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.bf-g3d-shine { position: absolute; inset: 0; border-radius: 30%; background: linear-gradient(125deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .bf-g3d.is-float { animation: nb-float 6s ease-in-out infinite; } }
@keyframes nb-float { 50% { transform: perspective(420px) rotateX(10deg) rotateY(-12deg) translateY(-8px); } }

.bf-orb { --orb: 180px; position: relative; inline-size: var(--orb); block-size: var(--orb); display: inline-block; flex: none; }
.bf-orb-halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, var(--kg), transparent 70%); opacity: .7; }
.bf-orb-core { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, var(--k1) 14%, var(--k2) 52%, #120E44 88%); box-shadow: inset -10px -14px 30px rgba(10,6,40,.55), inset 6px 8px 18px rgba(255,255,255,.18), 0 30px 50px -20px var(--kg); }
.bf-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--k1) 70%, transparent); transform: rotateX(72deg) rotateZ(-18deg); box-shadow: 0 0 18px var(--kg); }
.bf-orb-ring.is-front { clip-path: inset(50% 0 0 0); border-color: color-mix(in srgb, var(--k1) 90%, #fff); }
.bf-orb-ring i { position: absolute; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--kg); }
.bf-orb-ring i:nth-child(1) { inset-block-start: 10%; inset-inline-start: 12%; } .bf-orb-ring i:nth-child(2) { inset-block-end: 4%; inset-inline-end: 30%; background: var(--amber-500); } .bf-orb-ring i:nth-child(3) { inset-block-start: 44%; inset-inline-end: -4px; background: var(--cyan-400); }
@media (prefers-reduced-motion: no-preference) { .bf-orb-core { animation: nb-breathe 5s ease-in-out infinite; } }
@keyframes nb-breathe { 50% { box-shadow: inset -10px -14px 30px rgba(10,6,40,.55), inset 6px 8px 18px rgba(255,255,255,.22), 0 30px 64px -16px var(--kg); } }

/* ---------- Actions ---------- */
.bf-btn { border-radius: 12px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base), border-color var(--dur-fast), color var(--dur-fast); }
.bf-btn-lg { border-radius: 14px; }
.bf-btn-primary { background: var(--grad-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(0,0,0,.16), var(--glow-blue); }
.bf-btn-primary:hover:not(:disabled) { background: var(--grad-primary); filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.16), 0 14px 30px -10px rgba(22,140,255,.9); }
.bf-btn-cta { background: var(--grad-cta); font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,70,0,.25), var(--glow-amber); }
.bf-btn-cta:hover:not(:disabled) { background: var(--grad-cta); filter: brightness(1.05); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,70,0,.25), 0 18px 36px -10px rgba(255,185,20,.85); }
.bf-btn-accent { background: linear-gradient(180deg, #9084FF 0%, #6655FF 60%, #5341EA 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--glow-violet); }
.bf-btn-secondary { background: var(--bf-lit), var(--surface-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--border-strong); border-block-start-color: rgba(255,255,255,.22); box-shadow: var(--elev-1); }
.bf-btn-secondary:hover:not(:disabled) { background: var(--bf-lit), var(--surface-glass-strong); border-color: rgba(167,180,255,.45); transform: translateY(-1px); }
.bf-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.bf-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: brightness(.96); }
.bf-iconbtn:hover:not(:disabled) { background: rgba(255,255,255,.07); }
.bf-iconbtn-secondary { background: var(--surface-glass); border-color: var(--border-strong); }

/* ---------- Header & navigation ---------- */
.bf-pheader { background: linear-gradient(180deg, rgba(10,14,48,.72), rgba(10,14,48,.45)); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border-block-end-color: var(--border-subtle); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -20px rgba(0,0,0,.8); }
.bf-pheader-link.is-active, .bf-pheader-link:hover { background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.bf-logo-fa { font-weight: 900; }
.bf-sidebar { background: var(--bf-lit), linear-gradient(180deg, rgba(16,21,66,.82), rgba(10,14,46,.9)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-inline-end: 1px solid var(--border-subtle); box-shadow: 1px 0 0 rgba(255,255,255,.03), 20px 0 60px -40px rgba(0,0,0,.8); }
.bf-layout-dashboard .bf-sidebar-item.is-active { background: linear-gradient(270deg, rgba(22,140,255,.38) 0%, rgba(102,85,255,.22) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -14px rgba(22,140,255,.9); color: #fff !important; }
.bf-layout-dashboard .bf-sidebar-item.is-active .bf-icon { color: #fff; filter: drop-shadow(0 0 6px rgba(56,217,255,.8)); }
.bf-sidebar-crm { background: #0A1030; backdrop-filter: none; }
.bf-sidebar-crm .bf-sidebar-item.is-active { background: linear-gradient(270deg, rgba(102,85,255,.30), rgba(102,85,255,.06)); }
.bf-topbar { background: rgba(10,14,46,.55); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-block-end-color: var(--border-subtle); }
.bf-layout-admin .bf-topbar { background: rgba(11,17,51,.92); }
.bf-tabs-segmented { background: rgba(5,8,32,.5); border-color: var(--border-subtle); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.bf-tabs-segmented .bf-tab.is-active { background: var(--bf-lit), var(--surface-glass-strong); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(0,0,0,.6), 0 0 0 1px var(--border-strong); }
.bf-tabs-line .bf-tab.is-active { border-block-end-color: transparent; background: var(--grad-signal) bottom / 100% 3px no-repeat; }
.bf-tabs-line { border-block-end-color: var(--border-subtle); }
.bf-page.is-active { background: var(--grad-primary); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-blue); }
.bf-step.is-done .bf-step-dot { background: var(--grad-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--glow-blue); }
.bf-step.is-current .bf-step-dot { background: radial-gradient(circle, rgba(56,217,255,.25), rgba(22,140,255,.1)); border-color: var(--cyan-400); box-shadow: 0 0 0 5px rgba(56,217,255,.12), 0 0 20px rgba(56,217,255,.45); }
.bf-step.is-done::before { background: var(--grad-signal); }
.bf-bottomnav-item.is-active .bf-icon { filter: drop-shadow(0 0 6px rgba(56,217,255,.8)); }

/* ---------- Hero ---------- */
.bf-hero-visual { position: relative; }
.bf-hero-visual::before { content: ""; position: absolute; inset: 4% 2% -2% 8%; border-radius: 40px; background: radial-gradient(60% 55% at 70% 25%, rgba(56,217,255,.35), transparent 70%), radial-gradient(50% 50% at 20% 90%, rgba(225,84,200,.22), transparent 70%), var(--grad-stage); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 50px 100px -40px rgba(26,40,140,.95); z-index: 0; }
.bf-hero-visual::after { content: ""; position: absolute; inset: 4% 2% -2% 8%; border-radius: 40px; background: var(--bf-slots); background-size: 44px 34px; -webkit-mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 80%); mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 80%); z-index: 0; pointer-events: none; }
.bf-hero-visual > * { position: relative; z-index: 1; }
.bf-float-chip { background: var(--bf-lit), var(--surface-glass-strong); border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--elev-3); }
@media (prefers-reduced-motion: no-preference) {
  .bf-hero-copy > * { animation: nb-rise .8s var(--ease-out) both; }
  .bf-hero-copy > *:nth-child(2) { animation-delay: .07s; } .bf-hero-copy > *:nth-child(3) { animation-delay: .14s; } .bf-hero-copy > *:nth-child(n+4) { animation-delay: .21s; }
  .bf-hero-visual { animation: nb-stage-in 1s .12s var(--ease-out) both; }
  .bf-float-chip { animation: nb-bob 7s ease-in-out infinite; } .bf-float-chip + .bf-float-chip { animation-delay: -3.5s; }
}
@keyframes nb-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes nb-stage-in { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes nb-bob { 50% { transform: translateY(-8px); } }

/* ---------- Product cards: three members of one family ---------- */
.bf-product { padding: 0; gap: 0; overflow: hidden; border-radius: 24px; background: var(--bf-lit), var(--surface-glass); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.bf-product > :not(.bf-product-stage) { padding-inline: var(--space-6); }
.bf-product-head { padding-block-start: var(--space-5); }
.bf-product-price { margin-inline: var(--space-6); padding-inline: 0 !important; border-block-color: var(--border-subtle); }
.bf-product-features { padding-block: var(--space-2); }
.bf-product-foot { padding-block: var(--space-2) var(--space-6); }
.bf-product-stage { position: relative; block-size: 148px; display: flex; align-items: center; padding-inline: var(--space-6); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--k1) 40%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--k2) 45%, #0B0F31), rgba(11,15,49,.2)); border-block-end: 1px solid var(--border-subtle); overflow: hidden; }
.bf-product-stage::after { content: ""; position: absolute; inset: 0; background: var(--bf-slots); background-size: 44px 34px; -webkit-mask-image: radial-gradient(80% 120% at 0% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 120% at 0% 0%, #000, transparent 75%); }
.bf-product-stage .bf-g3d { position: relative; z-index: 1; }
.bf-product-price b { font-size: 40px; line-height: 52px; font-weight: 900; }
.bf-product-features .bf-icon { color: var(--kt) !important; }
.bf-product:hover { transform: translateY(-6px); box-shadow: var(--elev-3), 0 30px 60px -30px var(--kg); border-color: color-mix(in srgb, var(--kt) 40%, var(--border-default)); }
.bf-product.is-id-trial .bf-product-stage { background: radial-gradient(120% 140% at 0% 0%, rgba(242,176,30,.30), transparent 60%), linear-gradient(180deg, #3A2A12, rgba(11,15,49,.2)); }
.bf-product.is-id-solo .bf-product-stage { background: radial-gradient(120% 140% at 0% 0%, rgba(60,200,46,.30), transparent 60%), linear-gradient(180deg, #12402E, rgba(11,15,49,.2)); }
.bf-product.is-id-pro .bf-product-stage { block-size: 172px; background: radial-gradient(90% 140% at 0% 0%, rgba(192,64,208,.42), transparent 60%), radial-gradient(90% 120% at 100% 100%, rgba(128,48,240,.45), transparent 60%), linear-gradient(180deg, #2E1270, rgba(11,15,49,.2)); }
.bf-product.is-highlight { border: 1.5px solid transparent; background: var(--bf-lit) padding-box, linear-gradient(rgba(34,30,110,.72), rgba(22,24,84,.72)) padding-box, var(--grad-pro) border-box; box-shadow: var(--elev-3), var(--glow-violet); transform: translateY(-10px); }
.bf-product.is-highlight:hover { transform: translateY(-14px); }

.bf-product.is-compact .bf-product-head { padding-block-start: var(--space-6); }

/* ---------- OptionCard (subscription choice) joins the identity system ---------- */
.bf-option { border-radius: 20px; background: radial-gradient(260px 140px at 100% 0%, color-mix(in srgb, var(--tone, var(--kt)) 20%, transparent), transparent 70%), var(--bf-lit), var(--surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-block-start-color: var(--border-highlight); }
.bf-option-icon { border-radius: 14px; }
.bf-option.is-tone-primary .bf-option-icon { --k1: #6FE3FF; --k2: #1164D6; }
.bf-option.is-tone-accent .bf-option-icon { --k1: #B69CFF; --k2: #8E2FB3; }
.bf-option.is-tone-success .bf-option-icon { --k1: #6DF0B8; --k2: #1BA6C9; }
.bf-option.is-selected { box-shadow: inset 0 1px 0 var(--edge-light), 0 0 0 1px var(--tone), 0 18px 44px -14px color-mix(in srgb, var(--tone) 55%, transparent); transform: translateY(-3px); }
.bf-option-price b { font-weight: 900; font-size: 26px; }

/* ---------- Statistics: each metric owns a colour (tone) ---------- */
.bf-stat { border-color: color-mix(in srgb, var(--kt) 30%, var(--border-default)); border-block-start-color: color-mix(in srgb, var(--kt) 55%, transparent); background: radial-gradient(260px 150px at 100% 0%, color-mix(in srgb, var(--kt) 20%, transparent), transparent 72%), var(--bf-lit), var(--surface-glass); color: var(--kt); }
.bf-stat > *:not(.bf-stat-spark) { color: var(--ink); }
.bf-stat .bf-stat-label { color: var(--ink-muted); }
.bf-stat .bf-stat-hint, .bf-stat .bf-stat-foot { color: var(--ink-subtle); }
.bf-stat .bf-delta.is-good { color: var(--success); } .bf-stat .bf-delta.is-bad { color: var(--danger); }
.bf-stat-value { font-size: 38px; line-height: 48px; font-weight: 900; letter-spacing: 0; }
.is-dense .bf-stat-value { font-size: 30px; line-height: 38px; }
.bf-stat-spark { block-size: 44px; opacity: 1; stroke: none; color: var(--kt); filter: drop-shadow(0 -2px 6px color-mix(in srgb, var(--kt) 50%, transparent)); }
.bf-stat:has(.bf-stat-spark) .bf-stat-foot { padding-block-end: 30px; }
.bf-stat.is-link:hover { transform: translateY(-4px); box-shadow: var(--elev-3), 0 20px 40px -24px var(--kg); background: radial-gradient(280px 170px at 100% 0%, color-mix(in srgb, var(--kt) 28%, transparent), transparent 72%), var(--bf-lit), var(--surface-glass-strong); }
.bf-stat.has-attention { border-color: color-mix(in srgb, var(--amber-500) 55%, transparent); }
[data-theme="crm"] .bf-stat { background: radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--kt) 12%, transparent), transparent 72%), var(--bf-lit), var(--surface-2); }
/* the stat's tone is carried by its icon class — mirror it onto the card */
.bf-stat:has(.bf-stat-icon.is-info) { --k1: #6FE3FF; --k2: #178DD6; --kt: var(--cyan-400); --kg: rgba(56,217,255,.55); }
.bf-stat:has(.bf-stat-icon.is-progress) { --k1: #5DB6FF; --k2: #1164D6; --kt: var(--blue-400); --kg: rgba(22,140,255,.6); }
.bf-stat:has(.bf-stat-icon.is-accent) { --k1: #9C92FF; --k2: #4B3BE0; --kt: var(--violet-300); --kg: rgba(102,85,255,.65); }
.bf-stat:has(.bf-stat-icon.is-success) { --k1: #6FEAD3; --k2: #0E9E84; --kt: var(--mint-400); --kg: rgba(33,199,168,.5); }
.bf-stat:has(.bf-stat-icon.is-warning) { --k1: #FFD65A; --k2: #E08F00; --kt: var(--amber-500); --kg: rgba(255,185,20,.55); }
.bf-stat:has(.bf-stat-icon.is-danger) { --k1: #FF9A9A; --k2: #D93A3A; --kt: var(--rose-400); --kg: rgba(255,107,107,.5); }

/* ---------- StatusHero & brand fields ---------- */
.bf-statushero { border-radius: 28px; background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--kt) 38%, transparent), transparent 70%), radial-gradient(420px 240px at 0% 100%, rgba(225,84,200,.16), transparent 70%), var(--grad-stage); border: 1px solid rgba(255,255,255,.14); border-block-start-color: rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--elev-3), 0 40px 80px -40px color-mix(in srgb, var(--kt) 60%, transparent); overflow: hidden; isolation: isolate; }
.bf-statushero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bf-slots); background-size: 44px 34px; -webkit-mask-image: radial-gradient(70% 100% at 0% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 100% at 0% 0%, #000, transparent 75%); }
.bf-statushero.is-danger { border-color: rgba(255,107,107,.5); }
.bf-statushero .bf-muted { color: #CBD3F7; }
.bf-statushero .t-h2 { font-size: 28px; line-height: 42px; font-weight: 900; }
.bf-statushero .bf-btn-ghost { color: #fff !important; }
[data-theme="crm"] .bf-statushero { background: var(--surface-2); box-shadow: var(--elev-2); }
.bf-promo, .bf-auth-aside { background: radial-gradient(260px 160px at 100% 0%, rgba(225,84,200,.30), transparent 70%), radial-gradient(260px 200px at 0% 100%, rgba(56,217,255,.20), transparent 70%), var(--grad-stage); border-color: rgba(255,255,255,.14); }
.bf-auth-aside::before { background: var(--bf-slots); background-size: 44px 34px; -webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent 80%); mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent 80%); }

/* ---------- Tables: solid for reading, lit for hierarchy ---------- */
.bf-table-wrap { background: var(--bf-lit), var(--surface-2); border-color: var(--border-default); border-block-start-color: var(--border-highlight); border-radius: 20px; box-shadow: var(--elev-2); }
.is-dense .bf-table-wrap { border-radius: 16px; }
.bf-table th { background: rgba(255,255,255,.03); border-block-end-color: var(--border-default); color: var(--ink-muted); }
.bf-table td { border-block-end-color: var(--border-subtle); }
.bf-table tbody tr:hover { background: linear-gradient(270deg, rgba(56,217,255,.08), rgba(102,85,255,.04) 60%, transparent); }
.bf-table tbody tr.is-selected { background: linear-gradient(270deg, rgba(22,140,255,.18), rgba(102,85,255,.08)); }
.bf-mcard { background: var(--bf-lit), var(--surface-glass); border-color: var(--border-default); border-block-start-color: var(--border-highlight); border-radius: 16px; }
.bf-bulkbar { background: linear-gradient(270deg, rgba(22,140,255,.2), rgba(102,85,255,.1)); }

/* ---------- Status badges ---------- */
.bf-badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); font-weight: 700; }
.bf-badge-dot { box-shadow: 0 0 8px currentColor; }
.bf-badge.is-solid.is-accent { background: var(--grad-pro); color: #fff; box-shadow: 0 6px 14px -6px rgba(155,92,255,.8); }

/* ---------- Forms ---------- */
.bf-input-wrap, .bf-select-trigger, .bf-textarea { background: rgba(5,8,32,.55); border-color: var(--border-strong); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); border-radius: 12px; }
.bf-input-wrap:hover, .bf-select-trigger:hover { border-color: rgba(167,180,255,.42); }
.bf-input-wrap:focus-within, .bf-select.is-open .bf-select-trigger, .bf-textarea:focus { border-color: var(--cyan-400); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 3px rgba(56,217,255,.16), 0 0 24px -6px rgba(56,217,255,.5); }
.bf-check-box.is-on { background: var(--grad-primary); border-color: transparent; box-shadow: var(--glow-blue); }
.bf-radio-dot.is-on { border-color: var(--blue-500); box-shadow: 0 0 12px -2px rgba(22,140,255,.8); }
.bf-menu { background: var(--bf-lit), var(--surface-glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border-color: var(--border-strong); border-block-start-color: rgba(255,255,255,.22); border-radius: 16px; box-shadow: var(--elev-4); }
.bf-menu-item:hover { background: rgba(255,255,255,.07); }
.bf-upload { background: rgba(5,8,32,.35); border-color: var(--border-strong); border-radius: 18px; }
.bf-upload:hover, .bf-upload.is-dragging { background: radial-gradient(60% 80% at 50% 0%, rgba(56,217,255,.14), transparent), rgba(5,8,32,.35); border-color: var(--cyan-400); }

/* ---------- Empty states ---------- */
.bf-empty-glyph { inline-size: 60px; block-size: 60px; border-radius: 18px; }
.bf-empty-art.is-info .bf-empty-glyph { --k1: #6FE3FF; --k2: #178DD6; --kg: rgba(56,217,255,.55); }
.bf-empty-art.is-accent .bf-empty-glyph { --k1: #9C92FF; --k2: #4B3BE0; --kg: rgba(102,85,255,.65); }
.bf-empty-art.is-warning .bf-empty-glyph { --k1: #FFD65A; --k2: #E08F00; --kg: rgba(255,185,20,.55); }
.bf-empty-art.is-progress .bf-empty-glyph { --k1: #5DB6FF; --k2: #1164D6; --kg: rgba(22,140,255,.6); }
.bf-empty-art.is-neutral .bf-empty-glyph { --k1: #5A6AAE; --k2: #262F72; --kg: rgba(0,0,0,.4); }
.ea-tile { fill: rgba(255,255,255,.05); stroke: var(--border-default); }
.bf-empty-art::before { content: ""; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(closest-side, var(--kg, rgba(56,217,255,.3)), transparent 70%); opacity: .35; }

/* ---------- Overlays ---------- */
.bf-scrim { background: rgba(3,5,22,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bf-modal, .bf-drawer { background: var(--bf-lit), linear-gradient(180deg, rgba(30,36,104,.85), rgba(18,22,70,.9)); -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); border-color: var(--border-strong); border-block-start-color: rgba(255,255,255,.24); box-shadow: var(--elev-4); }
.bf-modal { border-radius: 24px; }
.bf-toast { background: var(--bf-lit), var(--surface-glass-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-color: var(--border-strong); border-radius: 16px; box-shadow: var(--elev-4); }
.bf-alert { border-radius: 16px; background: radial-gradient(300px 120px at 100% 0%, color-mix(in srgb, var(--kt) 16%, transparent), transparent 70%), rgba(10,14,46,.55); border-color: color-mix(in srgb, var(--kt) 35%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bf-alert-icon { color: var(--kt) !important; filter: drop-shadow(0 0 6px var(--kg)); }
.bf-banner { background: linear-gradient(270deg, color-mix(in srgb, var(--kt) 24%, transparent), color-mix(in srgb, var(--kt) 8%, transparent)); border-block-end-color: color-mix(in srgb, var(--kt) 30%, transparent); }

/* ---------- Charts ---------- */
.bf-chart-grid { stroke: var(--border-subtle); }
.bf-chart-line { filter: drop-shadow(0 4px 10px currentColor); }
.bf-bar-fill { background: linear-gradient(180deg, #6FE3FF, rgba(22,140,255,.25)); box-shadow: 0 0 18px -4px rgba(56,217,255,.6); border-radius: 10px 10px 4px 4px; }
.bf-bar.is-highlight .bf-bar-fill { background: linear-gradient(180deg, #B69CFF, rgba(155,92,255,.25)); box-shadow: 0 0 18px -4px rgba(155,92,255,.7); }
.bf-donut-ring svg circle:not(.bf-ring-track) { filter: drop-shadow(0 0 5px rgba(56,217,255,.35)); }
.bf-progress-track { background: rgba(5,8,32,.6); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.bf-progress-bar { background: var(--grad-signal); box-shadow: 0 0 12px rgba(56,217,255,.55); }
.bf-progress.is-warning .bf-progress-bar { background: var(--grad-cta); box-shadow: 0 0 12px rgba(255,185,20,.5); }
.bf-progress.is-success .bf-progress-bar { background: var(--grad-trial); box-shadow: 0 0 12px rgba(33,199,168,.5); }
.bf-progress.is-accent .bf-progress-bar { background: var(--grad-pro); box-shadow: 0 0 12px rgba(155,92,255,.55); }
.bf-ring-bar { filter: drop-shadow(0 0 8px currentColor); }
.bf-ring.is-accent .bf-ring-bar { color: var(--violet-300); } .bf-ring.is-primary .bf-ring-bar { color: var(--blue-400); }
@media (prefers-reduced-motion: no-preference) { .bf-ring-bar { animation: nb-ring 1.2s .2s var(--ease-out) both; } .bf-progress-bar { animation: nb-grow 1s var(--ease-out) both; } }
@keyframes nb-ring { from { stroke-dashoffset: 999; } }
@keyframes nb-grow { from { inline-size: 0; } }

/* ---------- Detail pages, lists, key-value ---------- */
.bf-kv-row { border-block-end-color: var(--border-subtle); }
.bf-list li + li { border-block-start-color: var(--border-subtle); }
.bf-list-row.is-link:hover { background: rgba(255,255,255,.05); }
.bf-acc-item { background: var(--bf-lit), var(--surface-glass); border-color: var(--border-default); border-radius: 16px; }
.bf-acc-item.is-open { border-color: var(--border-strong); box-shadow: var(--elev-2); }
.bf-pipe-col { background: rgba(255,255,255,.025); border-color: var(--border-subtle); border-radius: 18px; }
.bf-pipe-card { background: var(--bf-lit), var(--surface-2); border-color: var(--border-default); border-block-start-color: var(--border-highlight); border-radius: 14px; box-shadow: var(--elev-1); }
.bf-pipe-card:hover { box-shadow: var(--elev-2); }
.bf-order-panel { background: var(--bf-lit), var(--surface-2); border-color: var(--border-default); border-block-start-color: var(--border-highlight); border-radius: 24px; box-shadow: var(--elev-3); }
.bf-order-top { background: rgba(10,14,46,.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-block-end-color: var(--border-subtle); }
.bf-order-foot { background: rgba(10,14,46,.72); }
.bf-auth-card { padding: var(--space-8); border-radius: 24px; background: var(--bf-lit), var(--surface-glass); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--border-default); border-block-start-color: var(--border-highlight); box-shadow: var(--elev-3); }
.bf-pfooter { background: linear-gradient(180deg, rgba(10,14,46,.6), rgba(8,13,43,.95)); border-block-start-color: var(--border-subtle); }
.bf-phone-body { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16), 0 0 0 1px #05081a, 0 40px 80px -20px rgba(3,6,24,.85), 0 0 80px -10px rgba(56,217,255,.28); }
.bf-mascot-halo { background: radial-gradient(closest-side, rgba(56,217,255,.45), rgba(102,85,255,.2) 50%, transparent); }

/* ---------- Density & calm for the CRM ---------- */
[data-theme="crm"] .bf-product, [data-theme="crm"] .bf-option { box-shadow: var(--elev-1); }
[data-theme="crm"] .bf-badge-dot { box-shadow: none; }
.bf-product-stage-label { position: absolute; z-index: 1; inset-inline-end: var(--space-6); inset-block-end: var(--space-4); font-size: 12px; font-weight: 700; line-height: 22px; padding: 0 10px; border-radius: var(--radius-pill); color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.bf-amb-form.is-tile, .bf-amb-form.is-orb { display: none; }
.bf-product.is-highlight .bf-product-kicker .bf-badge { background: var(--grad-pro); color: #fff; box-shadow: 0 6px 14px -6px rgba(155,92,255,.8); }
.bf-product.is-highlight .bf-product-features .bf-icon { color: #C7B8FF !important; }
/* keycap specificity: beat the base tone rules so every tile gets its gradient */
.bf-stat-icon[class], .bf-list-icon[class], .bf-tl-item[class] .bf-tl-dot, .bf-modal-icon[class], .bf-option .bf-option-icon[class] { color: #fff; background: linear-gradient(150deg, var(--k1) 0%, var(--k2) 100%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.22), 0 8px 18px -8px var(--kg); }
.bf-tl-item.is-info { --k1: #6FE3FF; --k2: #178DD6; --kg: rgba(56,217,255,.55); } .bf-tl-item.is-progress { --k1: #5DB6FF; --k2: #1164D6; --kg: rgba(22,140,255,.6); } .bf-tl-item.is-accent { --k1: #9C92FF; --k2: #4B3BE0; --kg: rgba(102,85,255,.65); } .bf-tl-item.is-success { --k1: #6FEAD3; --k2: #0E9E84; --kg: rgba(33,199,168,.5); } .bf-tl-item.is-warning { --k1: #FFD65A; --k2: #E08F00; --kg: rgba(255,185,20,.55); } .bf-tl-item.is-danger { --k1: #FF9A9A; --k2: #D93A3A; --kg: rgba(255,107,107,.5); } .bf-tl-item.is-neutral { --k1: #4A5A9E; --k2: #252F6E; --kg: transparent; }
[data-theme="crm"] .bf-stat-icon[class], [data-theme="crm"] .bf-list-icon[class], [data-theme="crm"] .bf-tl-item[class] .bf-tl-dot { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.2); }

/* ---------- Brand assets: logo, product wordmarks, glass icons, spheres ---------- */
.bf-logo.has-image { display: inline-flex; }
.bf-logo-img { block-size: 50px; inline-size: auto; display: block; filter: drop-shadow(0 4px 14px rgba(22,140,255,.35)); }
.bf-sidebar .bf-logo-img { block-size: 36px; }
.bf-auth-top .bf-logo-img { block-size: 44px; }
.bf-product-wordmark { position: relative; z-index: 1; block-size: 58px; inline-size: auto; max-inline-size: 72%; object-fit: contain; filter: drop-shadow(0 10px 24px var(--kg)); }
.bf-product.is-id-pro .bf-product-wordmark { block-size: 74px; }
@media (prefers-reduced-motion: no-preference) { .bf-product-wordmark.is-float { animation: nb-bob 6s ease-in-out infinite; } }
.bf-glass-icon { position: relative; display: inline-block; inline-size: 64px; block-size: 64px; flex: none; }
.bf-glass-icon.is-sm { inline-size: 48px; block-size: 48px; } .bf-glass-icon.is-lg { inline-size: 96px; block-size: 96px; } .bf-glass-icon.is-xl { inline-size: 140px; block-size: 140px; }
.bf-glass-icon img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(3,5,24,.55)) drop-shadow(0 0 16px rgba(129,116,255,.25)); transition: transform var(--dur-base) var(--ease-out); }
.bf-card-interactive:hover .bf-glass-icon img, a.bf-card:hover .bf-glass-icon img { transform: translateY(-4px) rotate(-6deg) scale(1.04); }
@media (prefers-reduced-motion: no-preference) { .bf-glass-icon.is-float img { animation: nb-bob 7s ease-in-out infinite; } }
.bf-sphere { position: absolute; pointer-events: none; z-index: 2; filter: drop-shadow(0 20px 30px rgba(3,5,24,.6)); }
@media (prefers-reduced-motion: no-preference) { .bf-sphere { animation: nb-bob 9s ease-in-out infinite; } }
@container bfpage (max-width: 640px) { .bf-sphere { display: none; } }
/* MiniBot — companion robot for customer state moments */
.bf-minibot { position: relative; display: inline-block; flex: none; inline-size: 112px; aspect-ratio: 400 / 270; }
.bf-minibot.is-sm { inline-size: 72px; } .bf-minibot.is-lg { inline-size: 156px; } .bf-minibot.is-xl { inline-size: 200px; }
.bf-minibot img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(3,5,24,.6)) drop-shadow(0 0 22px rgba(53,185,255,.22)); }
@media (prefers-reduced-motion: no-preference) { .bf-minibot.is-float img { animation: nb-bob 6s ease-in-out infinite; } }
.bf-system .bf-minibot { margin-block-end: 4px; }
/* Logo symbol — collapsed sidebar / rail */
.bf-logo-symbol { display: none; block-size: 36px; inline-size: 36px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(22,140,255,.4)); }
.bf-logo-compact .bf-logo-img { display: none; }
.bf-logo-compact .bf-logo-symbol { display: block; }
/* DatePicker — glass calendar (v2): top light bar + glow, round nav, circular days, vivid blue pick */
.bf-menu.bf-cal { --cal-pick: linear-gradient(145deg, #3A78FF 0%, #2255FF 50%, #1A3FE0 100%); --cal-pick-glow: 0 8px 22px rgba(34,85,255,.55), 0 0 0 1px rgba(140,180,255,.35) inset;
  inline-size: 336px; padding: 20px 18px 16px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(12,16,52,.72);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(160,190,255,.16); border-block-start-color: rgba(255,255,255,.24);
  box-shadow: 0 30px 60px -20px rgba(2,4,20,.8), 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); }
.bf-cal-glow { position: absolute; z-index: -1; inset-block-start: 0; inset-inline: 0; block-size: 150px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(47,110,255,.42), rgba(47,110,255,.12) 55%, transparent 80%); }
.bf-cal-glow::before { content: ""; position: absolute; inset-block-start: 0; left: 50%; transform: translateX(-50%); inline-size: 38%; block-size: 5px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #35B9FF, #2F6BFF); box-shadow: 0 0 18px rgba(47,107,255,.9); }
.bf-cal-glow::after { content: ""; position: absolute; inset-block-start: -40px; left: 50%; transform: translateX(-50%); inline-size: 150px; block-size: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(90,140,255,.35), transparent); }
.bf-menu.bf-cal .bf-cal-head { margin-block-end: 14px; }
.bf-cal-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.bf-cal-nav { inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: background var(--dur-fast), border-color var(--dur-fast); }
.bf-cal-nav:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.bf-cal-nav:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-menu.bf-cal .bf-cal-grid { gap: 4px 2px; }
.bf-menu.bf-cal .bf-cal-wd { font-size: 13px; line-height: 36px; color: var(--ink-subtle); font-weight: 700; }
.bf-menu.bf-cal .bf-cal-day { justify-self: center; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--font-sans); color: var(--ink); transition: background var(--dur-fast), transform var(--dur-fast); }
.bf-menu.bf-cal .bf-cal-day:hover { background: rgba(255,255,255,.08); }
.bf-menu.bf-cal .bf-cal-day.is-out { color: var(--ink-subtle); opacity: .45; cursor: default; }
.bf-menu.bf-cal .bf-cal-day.is-out:hover { background: none; }
.bf-menu.bf-cal .bf-cal-day.is-holiday { color: var(--danger); }
.bf-menu.bf-cal .bf-cal-day.is-today { box-shadow: inset 0 0 0 1.5px rgba(53,185,255,.8); }
.bf-menu.bf-cal .bf-cal-day.is-selected { background: var(--cal-pick); color: #fff; font-weight: 800; box-shadow: var(--cal-pick-glow); }
.bf-menu.bf-cal .bf-cal-day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-menu.bf-cal .bf-cal-foot { border-block-start-color: rgba(255,255,255,.08); margin-block-start: 10px; padding-block-start: 10px; }
[data-theme="crm"] .bf-menu.bf-cal { background: var(--surface-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="crm"] .bf-cal-glow { opacity: .5; }
.bf-menu.bf-cal .bf-cal-wd.is-holiday { color: var(--danger); }
.bf-btn .bf-count-pill { margin-inline-start: var(--space-2); vertical-align: 1px; }
.bf-badge { flex-shrink: 0; }
/* Badge legibility (v2): larger type and pill, same spacing rhythm */
.bf-badge { block-size: 30px; padding-inline: 12px; gap: 6px; font-size: 14px; line-height: 22px; }
.bf-badge-sm { block-size: 26px; padding-inline: 10px; gap: 5px; font-size: 13px; }
.bf-badge-dot { inline-size: 8px; block-size: 8px; }
/* Timeline: time column shares one start edge */
.bf-tl-head { display: grid; grid-template-columns: minmax(0, 1fr) 9.5em; align-items: baseline; }
.bf-tl-head time { text-align: start; font-variant-numeric: tabular-nums; }
/* Progress fixes: success is mint (not the trial gold), ring glow not clipped */
.bf-progress.is-success .bf-progress-bar { background: linear-gradient(90deg, #6FEAD3, #21C7A8); box-shadow: 0 0 12px rgba(33,199,168,.5); }
.bf-ring svg { overflow: visible; }
.bf-ring .bf-ring-bar { color: var(--blue-400); }
.bf-ring.is-success .bf-ring-bar { color: var(--success); } .bf-ring.is-warning .bf-ring-bar { color: var(--warning); } .bf-ring.is-danger .bf-ring-bar { color: var(--danger); } .bf-ring.is-accent .bf-ring-bar { color: var(--violet-300); }
/* Toast action: bordered, equal width, centred label */
.bf-toast { align-items: center; }
.bf-toast-action { flex: none; display: flex; }
.bf-toast-action .bf-btn { inline-size: 112px; justify-content: center; text-align: center; padding-inline: 8px; }
.bf-toast-close { flex: none; }
/* Alert actions sit beside the text (inline-end), vertically centred; wrap below only when the alert is narrow */
.bf-alert { container-type: inline-size; container-name: bfalert; }
.bf-alert.has-actions { align-items: center; flex-wrap: wrap; }
.bf-alert.has-actions .bf-alert-icon { align-self: flex-start; }
.bf-alert.has-actions .bf-alert-body { min-inline-size: 220px; }
.bf-alert .bf-alert-actions { margin-block-start: 0; flex: none; align-items: center; }
@container bfalert (max-width: 520px) { .bf-alert.has-actions .bf-alert-actions { flex-basis: 100%; padding-inline-start: 32px; } }
/* Button — amber glass (secondary action inside warning contexts) */
.bf-btn-glass-amber { color: #FFD37A; background: linear-gradient(180deg, rgba(255,205,70,.22), rgba(255,140,20,.10)), rgba(40,26,8,.35); border: 1px solid rgba(255,190,60,.6); box-shadow: inset 0 1px 0 rgba(255,235,170,.28), 0 6px 18px -8px rgba(255,160,20,.55); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
.bf-btn-glass-amber:hover { background: linear-gradient(180deg, rgba(255,210,80,.32), rgba(255,150,30,.16)), rgba(40,26,8,.35); border-color: rgba(255,205,90,.85); color: #FFE2A0; }
.bf-btn-glass-amber:active { transform: translateY(1px); }
/* Banner v2: rounded glass card like Alert, aligned to the page content column */
.bf-banner { --bn-pad: var(--space-8); border: 1px solid color-mix(in srgb, var(--kt) 38%, transparent); border-block-start-color: color-mix(in srgb, var(--kt) 55%, rgba(255,255,255,.2)); border-radius: 16px; overflow: hidden;
  background: linear-gradient(270deg, color-mix(in srgb, var(--kt) 22%, transparent), color-mix(in srgb, var(--kt) 7%, transparent)), rgba(10,14,46,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--kt) 60%, transparent); }
.bf-banner-inner { padding: 12px var(--space-5); }
.bf-app-col > .bf-banner { margin: var(--space-6) auto 0; inline-size: calc(100% - 2 * var(--bn-pad)); max-inline-size: var(--container-app); }
.bf-layout-admin .bf-app-col > .bf-banner { --bn-pad: var(--space-6); max-inline-size: calc(var(--container-crm) - 2 * var(--space-6)); }
.bf-app-col > .bf-banner + .bf-app-main { padding-block-start: var(--space-5); }
@container bfpage (max-width: 1100px) { .bf-app-col > .bf-banner { --bn-pad: var(--space-6); } }
@container bfpage (max-width: 640px) { .bf-app-col > .bf-banner { --bn-pad: var(--space-4); margin-block-start: var(--space-4); } .bf-banner-inner { padding-inline: var(--space-4); } }
.bf-banner .bf-btn { flex: none; }
/* Tone-matched glass buttons (for Banner / Alert actions) */
.bf-btn-glass-rose, .bf-btn-glass-violet, .bf-btn-glass-cyan { -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
.bf-btn-glass-rose { color: #FFB3C0; background: linear-gradient(180deg, rgba(255,107,107,.26), rgba(220,50,90,.12)), rgba(40,8,20,.35); border: 1px solid rgba(255,120,145,.6); box-shadow: inset 0 1px 0 rgba(255,200,210,.25), 0 6px 18px -8px rgba(255,80,110,.55); }
.bf-btn-glass-rose:hover { border-color: rgba(255,150,170,.85); color: #FFC9D3; background: linear-gradient(180deg, rgba(255,107,107,.36), rgba(220,50,90,.18)), rgba(40,8,20,.35); }
.bf-btn-glass-violet { color: #D9D2FF; background: linear-gradient(180deg, rgba(160,130,255,.30), rgba(120,70,240,.14)), rgba(20,12,50,.35); border: 1px solid rgba(170,150,255,.62); box-shadow: inset 0 1px 0 rgba(225,215,255,.28), 0 6px 18px -8px rgba(140,100,255,.6); }
.bf-btn-glass-violet:hover { border-color: rgba(195,180,255,.9); color: #EAE5FF; background: linear-gradient(180deg, rgba(160,130,255,.40), rgba(120,70,240,.20)), rgba(20,12,50,.35); }
.bf-btn-glass-cyan { color: #B8EEFF; background: linear-gradient(180deg, rgba(56,217,255,.24), rgba(22,140,255,.12)), rgba(6,22,40,.35); border: 1px solid rgba(90,210,255,.6); box-shadow: inset 0 1px 0 rgba(200,245,255,.25), 0 6px 18px -8px rgba(56,190,255,.55); }
.bf-btn-glass-cyan:hover { border-color: rgba(130,225,255,.9); color: #D6F6FF; }
[class*="bf-btn-glass-"]:active { transform: translateY(1px); }
[data-theme="crm"] .bf-banner { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
/* EmptyState art v3: white dashed square frame + centred tone tile with a large, dark (tone-deep) icon */
.bf-empty-art { inline-size: 104px; block-size: 104px; display: grid; place-items: center; }
.bf-empty-art::before { display: none; }
.bf-empty-frame { position: absolute; inset: 0; border: 1.5px dashed rgba(255,255,255,.7); border-radius: 22px; }
.bf-empty-art .bf-empty-glyph { position: relative; inline-size: 68px; block-size: 68px; border-radius: 18px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(150deg, var(--e1) 0%, var(--e2) 100%); color: var(--eink); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px -10px var(--eg); }
.bf-empty-art .bf-empty-glyph .bf-icon { position: static; inline-size: 34px; block-size: 34px; }
.bf-empty-art.is-info     { --e1: #A6EEFF; --e2: #4CC3F2; --eink: #03324C; --eg: rgba(56,217,255,.6); }
.bf-empty-art.is-progress { --e1: #A9D3FF; --e2: #4E97F2; --eink: #062A5C; --eg: rgba(22,140,255,.6); }
.bf-empty-art.is-accent   { --e1: #D2CCFF; --e2: #9A8CFF; --eink: #22126E; --eg: rgba(129,116,255,.6); }
.bf-empty-art.is-warning  { --e1: #FFE39A; --e2: #F5B52A; --eink: #4A2A00; --eg: rgba(255,185,20,.55); }
.bf-empty-art.is-danger   { --e1: #FFC2CC; --e2: #FF7A91; --eink: #5A0A1C; --eg: rgba(255,107,107,.55); }
.bf-empty-art.is-neutral  { --e1: #DCE2F7; --e2: #A3AED6; --eink: #1A2150; --eg: rgba(160,175,230,.35); }
.bf-empty.is-inline .bf-empty-art { transform: scale(.65); margin: -18px; }
[data-theme="crm"] .bf-empty-frame { border-color: rgba(255,255,255,.55); }
/* EmptyState: every action is a visible, bordered button (ghost gets the outline look), equal minimum width */
.bf-empty-actions .bf-btn { min-inline-size: 168px; }
.bf-empty-actions .bf-btn-ghost { background: rgba(255,255,255,.03); border: 1px solid var(--border-strong); color: var(--ink) !important; }
.bf-empty-actions .bf-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.bf-empty-actions { row-gap: var(--space-3); }
/* Customer sidebar active item: light blue (was lilac). Hover unchanged. */
.bf-sidebar:not(.bf-sidebar-crm) .bf-sidebar-item.is-active, .bf-layout-dashboard .bf-sidebar-item.is-active { background: linear-gradient(270deg, rgba(64,190,255,.42) 0%, rgba(40,150,255,.16) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(110,210,255,.28), 0 10px 24px -14px rgba(56,190,255,.9); color: #fff !important; }
.bf-sidebar:not(.bf-sidebar-crm) .bf-sidebar-item.is-active .bf-icon, .bf-layout-dashboard .bf-sidebar-item.is-active .bf-icon { color: #BFEFFF; filter: drop-shadow(0 0 6px rgba(56,217,255,.8)); }
/* Sidebar top light: light blue glow behind the logo (was a neutral/lilac sheen) */
.bf-sidebar { background: radial-gradient(120% 160px at 50% 0%, rgba(80,190,255,.20), rgba(56,150,255,.06) 60%, transparent 100%), linear-gradient(180deg, rgba(16,21,66,.82), rgba(10,14,46,.9)); }
.bf-sidebar .bf-logo-img, .bf-sidebar .bf-logo-symbol { filter: drop-shadow(0 4px 14px rgba(80,190,255,.45)); }
[data-theme="crm"] .bf-sidebar { background: radial-gradient(120% 140px at 50% 0%, rgba(80,190,255,.12), transparent 100%), var(--surface-1); }

/* =====================================================================
   BLUE FOUNDATION (v4) — every background, surface and stage is dark navy / blue.
   Colour (green, violet, amber, rose, magenta) lives only in small signals:
   icons, badges, status text, chart lines, product wordmarks, CTAs.
   ===================================================================== */
.bf-root { --blue-glow: rgba(30,120,255,.30); --blue-glow-soft: rgba(30,120,255,.10);
  background: radial-gradient(1100px 700px at 100% 0%, #0B2A6E 0%, rgba(11,42,110,.35) 45%, transparent 75%), linear-gradient(180deg, #0B1235 0%, var(--bg) 60%, #070B26 100%); }
/* ambient: blue only */
.bf-amb-field.is-a { background: radial-gradient(closest-side, rgba(30,130,255,.26), rgba(56,190,255,.06) 55%, transparent); }
.bf-amb-field.is-b { background: radial-gradient(closest-side, rgba(20,80,200,.22), rgba(20,80,200,.06) 55%, transparent); }
.bf-amb-field.is-c { background: radial-gradient(closest-side, rgba(40,150,255,.08), transparent 70%); }
.bf-amb-grid { background-image: linear-gradient(rgba(120,175,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,175,255,.05) 1px, transparent 1px); }
.bf-amb-form.is-ring { border-color: rgba(60,160,255,.20); box-shadow: inset 0 0 60px rgba(30,120,255,.10); }
/* cards: blue glass; tone only on the top edge hairline */
.bf-card.is-tone-info, .bf-card.is-tone-primary, .bf-card.is-tone-accent, .bf-card.is-tone-success, .bf-card.is-tone-warning, .bf-card.is-tone-danger, .bf-card.is-tone-magenta { background: radial-gradient(320px 160px at 100% 0%, var(--blue-glow-soft), transparent 70%), var(--bf-lit), var(--surface-glass); border-color: var(--border-default); border-block-start-color: color-mix(in srgb, var(--kt) 45%, rgba(120,175,255,.3)); }
.bf-card-glass { background: radial-gradient(360px 180px at 100% 0%, var(--blue-glow-soft), transparent 70%), var(--bf-lit), var(--surface-glass-strong); }
/* stat cards: neutral blue glass (icon + spark keep the meaning colour) */
.bf-stat, .bf-stat.is-tinted { background: radial-gradient(260px 150px at 100% 0%, var(--blue-glow-soft), transparent 72%), var(--bf-lit), var(--surface-glass); border-color: var(--border-default); border-block-start-color: rgba(140,190,255,.30); }
.bf-stat.is-link:hover { background: radial-gradient(280px 170px at 100% 0%, rgba(30,120,255,.18), transparent 72%), var(--bf-lit), var(--surface-glass); border-color: var(--border-strong); }
.bf-stat-spark { opacity: .85; }
[data-theme="crm"] .bf-stat, [data-theme="crm"] .bf-stat.is-tinted { background: var(--bf-lit), var(--surface-2); }
/* status hero: blue stage for every state; the state reads from the badge, icon and border */
.bf-statushero { background: radial-gradient(560px 280px at 100% 0%, rgba(40,140,255,.30), transparent 70%), radial-gradient(420px 240px at 0% 100%, rgba(20,70,190,.25), transparent 70%), var(--grad-stage); border-color: rgba(120,175,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--elev-3), 0 40px 80px -40px rgba(30,120,255,.55); }
.bf-statushero.is-danger { border-color: rgba(255,107,107,.55); }
.bf-statushero.is-warning { border-color: rgba(255,185,20,.45); }
/* brand fields: auth panel, promo, hero visual */
.bf-promo, .bf-auth-aside { background: radial-gradient(420px 300px at 70% 20%, rgba(40,140,255,.30), transparent 70%), radial-gradient(360px 260px at 20% 100%, rgba(20,80,200,.28), transparent 70%), var(--grad-stage); border-color: rgba(120,175,255,.18); }
.bf-hero-visual::before { background: radial-gradient(60% 55% at 70% 25%, rgba(56,190,255,.32), transparent 70%), radial-gradient(50% 50% at 20% 90%, rgba(30,100,230,.30), transparent 70%), var(--grad-stage); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 50px 100px -40px rgba(20,90,220,.8); }
/* product cards: navy stage for all three; identity colour stays in the wordmark, top edge and kicker */
.bf-product.is-id-trial .bf-product-stage, .bf-product.is-id-solo .bf-product-stage, .bf-product.is-id-pro .bf-product-stage, .bf-product-stage { background: radial-gradient(120% 140% at 0% 0%, rgba(40,140,255,.22), transparent 60%), linear-gradient(180deg, #0C1F55, rgba(8,19,51,.2)); }
/* selected / highlight grounds: blue */
.bf-option.is-selected { background-color: rgba(30,120,255,.10); }
/* Gradient headline words */
.bf-grad { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 100% 100%; padding-block: .06em; }
.bf-grad.is-blue { background-image: linear-gradient(270deg, #3FA2FF 0%, #2B7BFF 45%, #38D9FF 100%); filter: drop-shadow(0 2px 14px rgba(40,140,255,.35)); }
.bf-grad.is-violet { background-image: linear-gradient(270deg, #6F7BFF 0%, #A45CFF 50%, #E154C8 100%); filter: drop-shadow(0 2px 14px rgba(160,90,255,.35)); }
[data-theme="crm"] .bf-grad { filter: none; }

/* =====================================================================
   CLICKABLE = BORDERED (v4). Every standalone clickable control shows its edge.
   ===================================================================== */
/* text buttons become small outlined buttons */
.bf-textbtn { min-block-size: 34px; padding: 5px 14px; border: 1px solid rgba(80,170,255,.45); border-radius: 10px; background: rgba(30,120,255,.08); color: #8CCBFF; text-decoration: none; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); justify-content: center; }
.bf-textbtn:hover { text-decoration: none; background: rgba(30,120,255,.16); border-color: rgba(110,195,255,.75); color: #BFE3FF; }
.bf-textbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[data-theme="crm"] .bf-textbtn { color: var(--link); }
/* ghost buttons get an outline */
.bf-btn-ghost { background: rgba(255,255,255,.03); border-color: var(--border-strong); color: var(--ink) !important; }
.bf-btn-ghost:hover:not(:disabled) { background: rgba(120,175,255,.10); border-color: rgba(140,190,255,.55); }
.bf-statushero .bf-btn-ghost { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
/* icon buttons inside content are bordered (secondary look); chrome icons in headers, overlays, inputs and messages stay bare */
.bf-iconbtn-ghost { background: var(--surface-glass); border-color: var(--border-strong); color: var(--ink); }
.bf-iconbtn-ghost:hover:not(:disabled) { background: rgba(120,175,255,.12); border-color: rgba(140,190,255,.55); }
:is(.bf-topbar, .bf-pheader, .bf-modal-head, .bf-drawer-head, .bf-toast, .bf-alert, .bf-banner, .bf-chip, .bf-input-wrap, .bf-field-control, .bf-cal, .bf-tg, .bf-phone) .bf-iconbtn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
:is(.bf-topbar, .bf-pheader, .bf-modal-head, .bf-drawer-head, .bf-toast, .bf-alert, .bf-banner) .bf-iconbtn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.07); border-color: transparent; }
.bf-iconbtn:disabled { border-color: var(--border-default); }
.bf-table .bf-ltr, .bf-table time { white-space: nowrap; }

/* =====================================================================
   ADMIN CRM (v4): plain navy. Canvas #0B1236 flat, cards #151E50, brand blues #0083CC / #25AFFF;
   status colours (mint, amber, rose, magenta) only as signals.
   ===================================================================== */
.bf-root[data-theme="crm"] { background: var(--bg); }
[data-theme="crm"] .bf-ambient { display: none; }
[data-theme="crm"] .bf-sidebar, .bf-sidebar-crm { background: var(--surface-1); border-inline-end-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
[data-theme="crm"] .bf-topbar { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="crm"] .bf-sidebar .bf-logo-img, [data-theme="crm"] .bf-sidebar .bf-logo-symbol { filter: none; }
.bf-sidebar-crm .bf-sidebar-item.is-active { background: rgba(0,131,204,.24); color: #fff !important; box-shadow: none; }
.bf-sidebar-crm .bf-sidebar-item.is-active::before { background: #25AFFF; }
.bf-sidebar-crm .bf-sidebar-item.is-active .bf-icon { color: #25AFFF; filter: none; }
.bf-sidebar-crm .bf-sidebar-item:hover:not(.is-active) { background: var(--surface-3); }
[data-theme="crm"] .bf-env-chip { background: rgba(0,131,204,.22); color: #25AFFF; border-color: rgba(37,175,255,.35); }
[data-theme="crm"] :is(.bf-card, .bf-stat, .bf-stat.is-tinted, .bf-card-glass, .bf-table-wrap, .bf-filterbar, .bf-pipeline-col, .bf-statushero) { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); border-block-start-color: var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
[data-theme="crm"] .bf-card[class*="is-tone-"] { border-block-start: 2px solid color-mix(in srgb, var(--kt) 70%, transparent); }
[data-theme="crm"] .bf-stat:hover { background: var(--surface-3); }
[data-theme="crm"] :is(.bf-tabs .is-active, .bf-seg .is-active, .bf-pagination .is-active) { background: rgba(0,131,204,.28); color: #fff; border-color: rgba(37,175,255,.45); }
[data-theme="crm"] .bf-badge.is-accent { background: rgba(0,131,204,.22); color: #25AFFF; }
[data-theme="crm"] .bf-grad { filter: none; }
[data-theme="crm"] .bf-stat:has(.bf-stat-icon.is-accent), [data-theme="crm"] :is(.bf-stat-icon, .bf-list-icon, .bf-tl-dot, .bf-empty-glyph).is-accent { --k1: #6FD0FF; --k2: #0083CC; --kt: #25AFFF; --kg: rgba(37,175,255,.5); }
.bf-stat-top { flex-wrap: wrap; row-gap: 6px; }
.bf-stat-top .bf-badge { flex-shrink: 0; }
.is-dense .bf-table td, .is-dense .bf-table th { padding-inline: 10px; } .bf-td-actions .bf-iconbtn-sm { inline-size: 30px; block-size: 30px; } .bf-table td.is-primary b, .bf-table td.is-primary strong { white-space: nowrap; } .bf-td-actions { white-space: nowrap; }
.bf-textbtn { white-space: nowrap; }

/* List v2 — tiled rows, one rhythm; attention rows stand out */
.bf-list { display: flex; flex-direction: column; gap: 8px; }
.bf-list li + li { border-block-start: 0; }
.bf-list-row { min-block-size: 64px; padding: 10px 14px; gap: 14px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--border-subtle); transition: background var(--dur-fast), border-color var(--dur-fast); }
.bf-list.is-dense .bf-list-row { min-block-size: 56px; padding-block: 8px; }
.bf-list-row.is-link:hover { background: rgba(120,175,255,.08); border-color: var(--border-strong); }
.bf-list-row .bf-list-icon, .bf-list-row .bf-avatar { inline-size: 40px; block-size: 40px; flex: none; }
.bf-list-row .bf-avatar { font-size: 15px; }
.bf-list-body { gap: 2px; }
.bf-list-title { font-size: 15px; font-weight: 700; line-height: 24px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-list-sub { font-size: 13px; line-height: 20px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-list-meta { flex: none; font-size: 12px; font-weight: 600; line-height: 22px; padding: 0 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.05); border: 1px solid var(--border-default); color: var(--ink-muted); }
.bf-list-go { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--ink-muted); background: rgba(255,255,255,.03); }
.bf-list-row.is-link:hover .bf-list-go { color: var(--ink); border-color: rgba(140,190,255,.6); }
/* attention rows */
.bf-list-row.is-attention { position: relative; overflow: hidden; border-color: rgba(255,185,20,.55); background: linear-gradient(270deg, rgba(255,185,20,.16), rgba(255,185,20,.04) 70%); }
.bf-list-row.is-attention::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--amber-500); box-shadow: 0 0 12px rgba(255,185,20,.8); }
.bf-list-row.is-attention .bf-list-title { color: #FFE2A0; }
.bf-list-row.is-attention .bf-list-meta { color: var(--warning); border-color: rgba(255,185,20,.45); background: rgba(255,185,20,.10); }
.bf-list-row.is-attention .bf-list-go { color: var(--warning); border-color: rgba(255,185,20,.55); }
.bf-list-row.is-attention.is-danger { border-color: rgba(255,107,107,.55); background: linear-gradient(270deg, rgba(255,107,107,.16), rgba(255,107,107,.04) 70%); }
.bf-list-row.is-attention.is-danger::before { background: var(--danger); box-shadow: 0 0 12px rgba(255,107,107,.8); }
.bf-list-row.is-attention.is-danger .bf-list-title { color: #FFC2CC; }
.bf-list-row.is-attention.is-danger :is(.bf-list-meta, .bf-list-go) { color: var(--danger); border-color: rgba(255,107,107,.5); }
/* attention card */
.bf-card.is-attention { border-color: rgba(255,185,20,.40); border-block-start: 2px solid var(--amber-500); box-shadow: 0 20px 40px -28px rgba(255,185,20,.55), var(--elev-2); }
.bf-card.is-attention .bf-card-title { color: #FFE2A0; }
.bf-card-head { align-items: center; }
.bf-list-title { white-space: normal; }
.bf-list-subrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-inline-size: 0; }
.bf-list-subrow .bf-list-meta { line-height: 20px; padding: 0 8px; }

/* =====================================================================
   ProductCard v5 — neon-edged glass plan cards
   ===================================================================== */
.bf-pc { --pc: #2F8BFF; --pc2: #38D9FF; --pcg: rgba(47,139,255,.55);
  position: relative; overflow: visible; isolation: isolate; gap: 18px; padding: 28px 26px 24px; border-radius: 26px;
  background: radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(10,24,70,.92), rgba(6,14,44,.94));
  border: 1.5px solid color-mix(in srgb, var(--pc) 75%, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 22px -4px var(--pcg), 0 30px 60px -30px var(--pcg), inset 0 0 40px -20px var(--pcg); }
.bf-pc.is-id-trial { --pc: #2F8BFF; --pc2: #38D9FF; --pcg: rgba(47,139,255,.55); }
.bf-pc.is-id-pro   { --pc: #8B5CFF; --pc2: #5E7BFF; --pcg: rgba(139,92,255,.6); }
.bf-pc.is-id-solo  { --pc: #21C7A8; --pc2: #38D9FF; --pcg: rgba(33,199,168,.5); }
.bf-pc > * { position: relative; z-index: 1; }
.bf-pc.is-highlight { border-width: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 36px -2px var(--pcg), 0 40px 90px -30px var(--pcg), inset 0 0 60px -24px var(--pcg); }
@container bfpage (min-width: 900px) { .bf-grid > .bf-pc.is-highlight { margin-block: -18px; padding-block: 44px 34px; } }
/* tech corner brackets */
.bf-pc-corner { position: absolute; z-index: 2; inline-size: 34px; block-size: 34px; pointer-events: none; border: 2px solid var(--pc); filter: drop-shadow(0 0 6px var(--pcg)); }
.bf-pc-corner.is-a { inset-block-start: -2px; inset-inline-end: -2px; border-inline-start: 0; border-block-end: 0; border-start-end-radius: 26px; }
.bf-pc-corner.is-b { inset-block-end: -2px; inset-inline-start: -2px; border-inline-end: 0; border-block-start: 0; border-end-start-radius: 26px; }
/* ribbon */
.bf-pc-ribbon { position: absolute !important; z-index: 3; inset-block-start: 0; left: 50%; transform: translate(-50%, -50%); padding: 6px 26px; border-radius: 999px; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(90deg, var(--pc2), var(--pc)); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 20px var(--pcg); white-space: nowrap; }
/* head */
.bf-pc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 124px; }
.bf-pc-id { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-inline-size: 0; }
.bf-pc-wordmark { block-size: 46px; max-inline-size: 190px; object-fit: contain; object-position: right center; filter: drop-shadow(0 6px 18px var(--pcg)); }
.bf-pc-tag { font-size: 14px; font-weight: 700; line-height: 22px; padding: 4px 16px; border-radius: 999px; color: #fff; border: 1.5px solid var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); box-shadow: 0 0 12px -2px var(--pcg); white-space: nowrap; }
.bf-pc.is-id-solo .bf-pc-tag { color: #9FF5E0; }
/* holographic emblem */
.bf-pc-emblem { position: relative; flex: none; inline-size: 124px; block-size: 124px; display: grid; place-items: center; }
.bf-pc-emblem::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pc) 40%, transparent), transparent 68%); }
.bf-pc-ring { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); border: 1.5px solid color-mix(in srgb, var(--pc) 80%, transparent); box-shadow: 0 0 12px var(--pcg); }
.bf-pc-ring.is-1 { inline-size: 118px; block-size: 34px; bottom: 6px; }
.bf-pc-ring.is-2 { inline-size: 86px; block-size: 22px; bottom: 14px; border-color: color-mix(in srgb, var(--pc2) 70%, transparent); opacity: .8; }
.bf-pc-emblem .bf-g3d { position: relative; z-index: 1; margin-block-end: 16px; }
.bf-pc.is-id-trial .bf-g3d { --k1: #8FD0FF; --k2: #1164D6; --kg: rgba(47,139,255,.7); }
.bf-pc.is-id-solo  .bf-g3d { --k1: #8BF5DD; --k2: #0C9C82; --kg: rgba(33,199,168,.6); }
.bf-pc.is-id-pro   .bf-g3d { --k1: #C9A2FF; --k2: #6A3BF0; --kg: rgba(139,92,255,.7); }
/* title */
.bf-pc-title { display: flex; flex-direction: column; gap: 6px; }
.bf-pc-title h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; line-height: 30px; color: var(--ink); margin: 0; }
.bf-pc-title p { margin: 0; font-size: 14px; line-height: 24px; color: var(--ink-muted); min-block-size: 48px; }
.bf-pc.is-highlight .bf-pc-title p { color: #B9A8FF; }
/* price panel */
.bf-pc-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: 16px; background: rgba(4,10,34,.55); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); box-shadow: inset 0 0 24px -12px var(--pcg); min-block-size: 84px; }
.bf-pc-price b { font-size: 38px; line-height: 48px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px var(--pcg); }
.bf-pc.is-id-trial .bf-pc-price b { background: linear-gradient(270deg, #7CC4FF, #2F8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bf-pc-price span { font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
/* features */
.bf-pc-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bf-pc-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 22px; color: var(--ink); }
.bf-pc-check { flex: none; inline-size: 22px; block-size: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--pc2), var(--pc)); box-shadow: 0 0 10px -2px var(--pcg); }
.bf-pc-features li.is-off { color: var(--ink-subtle); }
.bf-pc-features li.is-off .bf-pc-check { background: rgba(255,255,255,.04); border: 1px solid var(--border-strong); color: var(--ink-subtle); box-shadow: none; }
/* footer */
.bf-pc-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-block-start: 6px; }
.bf-pc .bf-pc-cta { block-size: 54px; border-radius: 999px; font-size: 16px; font-weight: 800; color: #fff !important; background: color-mix(in srgb, var(--pc) 22%, rgba(6,14,44,.6)); border: 1.5px solid var(--pc); box-shadow: 0 0 18px -4px var(--pcg), inset 0 1px 0 rgba(255,255,255,.18); }
.bf-pc .bf-pc-cta:hover:not(:disabled) { background: color-mix(in srgb, var(--pc) 36%, rgba(6,14,44,.6)); box-shadow: 0 0 26px -2px var(--pcg); }
.bf-pc.is-highlight .bf-pc-cta { background: linear-gradient(90deg, var(--pc2), var(--pc)); border-color: rgba(255,255,255,.3); box-shadow: 0 10px 30px -8px var(--pcg), inset 0 1px 0 rgba(255,255,255,.3); }
.bf-pc-more { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding: 5px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; color: color-mix(in srgb, var(--pc2) 80%, #fff); border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); background: color-mix(in srgb, var(--pc) 8%, transparent); text-decoration: none; }
.bf-pc-more:hover { background: color-mix(in srgb, var(--pc) 18%, transparent); }
.bf-pc.is-id-solo .bf-pc-more { color: #7DF0D2; }
/* compact (other versions) */
.bf-pc.is-compact .bf-pc-head { min-block-size: 0; }
.bf-pc.is-compact .bf-pc-title p { min-block-size: 0; }
/* old stage styles off for v5 */
.bf-pc .bf-product-stage { display: none; }
[data-theme="crm"] .bf-pc { box-shadow: none; background: var(--surface-2); }
.bf-pc-head { display: grid; grid-template-columns: minmax(0, 1fr) 112px; }
.bf-pc-wordmark { max-inline-size: 100%; block-size: auto; max-block-size: 44px; }
.bf-pc-emblem { inline-size: 112px; block-size: 112px; }
.bf-pc-ring.is-1 { inline-size: 108px; }
.bf-pc-emblem .bf-g3d.is-lg { transform: scale(.86); }
.bf-pc.is-id-trial .bf-g3d.is-trial { --k1: #8FD0FF; --k2: #1164D6; --kg: rgba(47,139,255,.7); }
.bf-pc.is-id-solo .bf-g3d.is-solo { --k1: #8BF5DD; --k2: #0C9C82; --kg: rgba(33,199,168,.6); }
.bf-pc.is-id-pro .bf-g3d.is-pro { --k1: #C9A2FF; --k2: #6A3BF0; --kg: rgba(139,92,255,.7); }
.bf-pc-price { flex-wrap: wrap; row-gap: 2px; padding-inline: 18px; }
.bf-pc-price b { font-size: 34px; line-height: 44px; }
.bf-pc .bf-g3d { --idg: linear-gradient(150deg, var(--k1), var(--k2)); }
.bf-pc-price b { font-size: 32px; }
.bf-pc-head { column-gap: 10px; }

/* =====================================================================
   AuthLayout v2 — futuristic auth page
   ===================================================================== */
.bf-layout-auth.is-v2 { display: block; min-block-size: 100vh; overflow: hidden;
  background: radial-gradient(900px 600px at 50% 40%, rgba(30,110,255,.20), transparent 70%), radial-gradient(700px 500px at 0% 100%, rgba(110,70,255,.18), transparent 70%), radial-gradient(900px 600px at 100% 0%, #0B2A6E, transparent 70%), linear-gradient(180deg, #06102E, #040920); }
.bf-auth-waves { position: absolute; inset-inline: -10%; inset-block-end: -120px; block-size: 360px; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 15% 100%, rgba(120,70,255,.55), transparent 70%), radial-gradient(55% 50% at 85% 100%, rgba(30,120,255,.55), transparent 70%); filter: blur(30px); opacity: .7; }
.bf-layout-auth.is-v2 .bf-pheader { position: relative; z-index: 3; }
.bf-auth-stage { position: relative; z-index: 2; max-inline-size: 1320px; margin-inline: auto; padding: 40px 32px 56px;
  display: grid; grid-template-columns: 420px minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "card copy mascot" "card stats stats"; column-gap: 40px; row-gap: 28px; align-items: center; }
.bf-auth-cardwrap { grid-area: card; display: flex; flex-direction: column; gap: 12px; align-self: stretch; justify-content: center; }
.bf-layout-auth.is-v2 .bf-auth-card { max-inline-size: none; margin: 0; padding: 36px 32px; border-radius: 30px; gap: 18px; align-items: stretch;
  background: radial-gradient(420px 260px at 50% 0%, rgba(60,130,255,.22), transparent 70%), linear-gradient(180deg, rgba(16,34,98,.78), rgba(8,18,60,.86));
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1.5px solid rgba(90,160,255,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 40px -6px rgba(60,120,255,.6), 0 0 90px -30px rgba(130,90,255,.8), inset 0 1px 0 rgba(255,255,255,.2); }
.bf-layout-auth.is-v2 .bf-auth-card > .bf-glass-icon { align-self: center; }
.bf-layout-auth.is-v2 .bf-auth-card > h1, .bf-layout-auth.is-v2 .bf-auth-card > h1 + p { text-align: center; }
.bf-auth-copy { grid-area: copy; display: flex; flex-direction: column; gap: 18px; }
.bf-auth-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #6FB8FF; font-weight: 700; font-size: 15px; }
.bf-auth-eyebrow-line { inline-size: 40px; block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #38A8FF); box-shadow: 0 0 8px #38A8FF; }
.bf-auth-title { margin: 0; font-size: 46px; line-height: 70px; font-weight: 900; color: #fff; }
.bf-auth-lead { margin: 0; font-size: 16px; line-height: 30px; color: #C4CEF2; max-inline-size: 560px; }
.bf-auth-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block-start: 6px; }
.bf-auth-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 8px 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,40,110,.55), rgba(10,20,64,.55)); border: 1px solid rgba(90,160,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -18px rgba(40,120,255,.8); }
.bf-auth-feat-icon { inline-size: 46px; block-size: 46px; border-radius: 50%; display: grid; place-items: center; color: #7CC8FF; background: radial-gradient(circle at 40% 35%, rgba(80,160,255,.35), rgba(20,50,140,.4)); border: 1.5px solid rgba(90,170,255,.6); box-shadow: 0 0 16px -2px rgba(56,160,255,.7); margin-block-end: 4px; }
.bf-auth-feat b { font-size: 14px; color: #fff; }
.bf-auth-feat span:last-child { font-size: 12px; color: #9FB0E6; }
.bf-auth-mascot { grid-area: mascot; position: relative; margin: 0; display: grid; place-items: end center; align-self: end; min-block-size: 480px; }
.bf-auth-mascot img { position: relative; z-index: 1; inline-size: 100%; max-inline-size: 460px; block-size: auto; filter: drop-shadow(0 30px 60px rgba(20,60,200,.55)); }
.bf-auth-platform { position: absolute; z-index: 0; inset-inline: 8%; inset-block-end: 2%; block-size: 70px; border-radius: 50%; border: 2px solid rgba(80,170,255,.6); background: radial-gradient(closest-side, rgba(56,150,255,.35), transparent); box-shadow: 0 0 40px rgba(56,150,255,.5); }
.bf-auth-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0, 1.4fr); align-items: center; padding: 18px 24px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,38,108,.62), rgba(10,20,66,.62)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(90,160,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 50px -30px rgba(40,120,255,.9); }
.bf-auth-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-inline: 12px; }
.bf-auth-stat + .bf-auth-stat { border-inline-start: 1px solid rgba(120,175,255,.2); }
.bf-auth-stat b { font-size: 26px; line-height: 36px; font-weight: 900; color: #fff; text-shadow: 0 0 14px rgba(80,160,255,.6); font-variant-numeric: tabular-nums; }
.bf-auth-stat > span { font-size: 13px; color: #A9B6E8; }
.bf-auth-stat.is-secure { flex-direction: row; justify-content: center; gap: 12px; text-align: start; }
.bf-auth-stat.is-secure > div { display: flex; flex-direction: column; }
.bf-auth-stat.is-secure b { font-size: 16px; line-height: 26px; text-shadow: none; }
.bf-auth-stat.is-secure span:not(.bf-auth-shield) { font-size: 12px; color: #A9B6E8; }
.bf-auth-shield { inline-size: 50px; block-size: 50px; border-radius: 50%; display: grid; place-items: center; color: #6FC0FF; border: 1.5px solid rgba(90,170,255,.55); background: rgba(30,90,220,.2); box-shadow: 0 0 18px -2px rgba(56,160,255,.7); flex: none; }
@container bfpage (max-width: 1180px) {
  .bf-auth-stage { grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "card copy" "card stats"; }
  .bf-auth-mascot { display: none; }
  .bf-auth-stats { grid-template-columns: repeat(3, minmax(0,1fr)); } .bf-auth-stat.is-secure { display: none; }
}
@container bfpage (max-width: 900px) {
  .bf-auth-stage { grid-template-columns: 1fr; grid-template-areas: "card" "copy" "stats"; padding: 20px 16px 40px; }
  .bf-auth-title { font-size: 32px; line-height: 50px; } .bf-auth-feats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bf-layout-auth.is-v2 .bf-auth-card { padding: 28px 20px; }
}
.bf-layout-auth.is-v2 { container: bfpage / inline-size; }
.bf-auth-stage { grid-template-columns: 380px minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 36px; }
.bf-auth-title { font-size: 40px; line-height: 62px; }
.bf-auth-title .bf-grad { white-space: nowrap; }
.bf-auth-feat { padding: 14px 6px 12px; }
.bf-auth-feat b, .bf-auth-feat span:last-child { white-space: nowrap; }
@container bfpage (max-width: 1180px) { .bf-auth-stage { grid-template-columns: 380px minmax(0, 1fr); } }
@container bfpage (max-width: 900px) { .bf-auth-stage { grid-template-columns: 1fr; } }
.bf-auth-title { font-size: 36px; line-height: 58px; } .bf-auth-title-l2 { white-space: nowrap; }
.bf-auth-stage > * { min-inline-size: 0; }
@container bfpage (max-width: 900px) {
  .bf-auth-title { font-size: 28px; line-height: 46px; } .bf-auth-title-l2 { white-space: normal; }
  .bf-auth-stats { padding: 14px 8px; } .bf-auth-stat b { font-size: 20px; line-height: 30px; } .bf-auth-stat { padding-inline: 6px; }
  .bf-auth-feat b, .bf-auth-feat span:last-child { white-space: normal; }
}

/* Brand colour spec (v7): CTA uses --grad-cta + --on-yellow; pending status (orange) */
.bf-btn-cta { background: var(--grad-cta); color: var(--on-yellow) !important; box-shadow: var(--glow-cta), inset 0 1px 0 rgba(255,255,255,.35); }
.bf-btn-cta:hover:not(:disabled) { background: linear-gradient(135deg, #FFD24D, var(--amber-400)); box-shadow: 0 16px 34px -8px rgba(255,185,20,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.bf-badge.is-pending { background: var(--pending-soft); color: var(--status-pending); }
:is(.is-pending, .is-tone-pending) { --k1: #FFB27A; --k2: #E0661A; --kt: var(--orange-400); --kg: rgba(255,138,61,.55); }
.bf-alert.is-pending { border-color: rgba(255,138,61,.4); }

/* CRM buttons = public/customer buttons (v8): same fills, borders, glows and hover in both themes */
[data-theme="crm"] .bf-btn-primary { background: linear-gradient(180deg, #4FB0FF 0%, #168CFF 55%, #1277E0 100%); color: #080D2B !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(0,0,0,.16), 0 10px 30px -10px rgba(22,140,255,.75); }
[data-theme="crm"] .bf-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #4FB0FF 0%, #168CFF 55%, #1277E0 100%); filter: brightness(1.08) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.16), 0 14px 30px -10px rgba(22,140,255,.9); }
[data-theme="crm"] .bf-btn-cta { box-shadow: 0 12px 28px -8px rgba(255,185,20,.45), inset 0 1px 0 rgba(255,255,255,.35); }
[data-theme="crm"] .bf-btn-accent { background: linear-gradient(180deg, #9084FF 0%, #6655FF 60%, #5341EA 100%); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 34px -12px rgba(102,85,255,.8); }
[data-theme="crm"] .bf-btn-secondary { background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 42%), rgba(21,30,80,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: color-mix(in srgb, #263B78 55%, #35B9FF 45%); border-block-start-color: rgba(255,255,255,.22); }
[data-theme="crm"] .bf-btn-secondary:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 42%), rgba(26,37,96,.72); border-color: rgba(167,180,255,.45); }
[data-theme="crm"] .bf-btn-ghost { border-color: color-mix(in srgb, #263B78 55%, #35B9FF 45%); }
[data-theme="crm"] .bf-textbtn { color: #8CCBFF; }
/* StatusBadge (v8): larger type — status is the first thing read on every row */
.bf-badge.bf-status-badge { block-size: 34px; padding-inline: 14px; gap: 7px; font-size: 15.5px; line-height: 24px; font-weight: 700; }
.bf-badge.bf-status-badge .bf-icon { inline-size: 18px; block-size: 18px; }
.bf-badge.bf-status-badge .bf-badge-dot { inline-size: 9px; block-size: 9px; }
.bf-badge.bf-status-badge.bf-badge-sm { block-size: 30px; padding-inline: 12px; gap: 6px; font-size: 14.5px; line-height: 22px; }
.bf-badge.bf-status-badge.bf-badge-sm .bf-icon { inline-size: 16px; block-size: 16px; }
/* PRO wordmark is three heavy letters — at the same height it reads larger than SOLO / TRIAL; optically balance it */
.bf-pc.is-id-pro .bf-pc-wordmark { max-block-size: 34px; }
/* Tables: every cell stays on one line (v8) */
.bf-table th, .bf-table td, .bf-table td * { white-space: nowrap; }
.bf-table-scroll { overflow-x: auto; }
.is-dense .bf-table td, .is-dense .bf-table th { padding-inline: 8px; }
.bf-table td.is-primary .t-caption, .bf-table td.is-primary .bf-muted { display: block; max-inline-size: 104px; overflow: hidden; text-overflow: ellipsis; }
.bf-table .bf-badge.bf-status-badge.bf-badge-sm { padding-inline: 10px; }
.bf-td-actions .bf-iconbtn-sm { inline-size: 28px; block-size: 28px; } .is-dense .bf-table td.bf-td-check, .is-dense .bf-table th:first-child { padding-inline: 6px; }

/* =====================================================================
   DASHBOARD CARD TOKENS (--dc-*) — approved. Card + in-card list use ONLY these.
   ===================================================================== */
:root:not(.bf-legacy), .bf-scope {
  /* Surfaces — indigo-tinted navy (hue ~233, same as the accent). Page = brand --bg. */
  --dc-page:        #080D2B;   /* = --bg of every other page, L 0.51%     */
  --dc-card:        #141C55;   /* card surface, L 1.64% (3.2x page)       */
  --dc-raised:      #1D2770;   /* inner/elevated, L 2.88% (1.8x card)     */
  --dc-glass:       rgba(20,28,85,.40);  /* glass card: --dc-card at 40% */
  --dc-glass-blur:  24px;

  /* Borders — accent-tinted, so edges read indigo, not grey */
  --dc-border:        rgba(139,155,255,.14);
  --dc-border-hover:  rgba(139,155,255,.34);
  --dc-border-top:    rgba(139,155,255,.30);  /* fallback top edge */
  --dc-edge: linear-gradient(to left, var(--dc-accent), rgba(139,155,255,.35) 38%, transparent 78%); /* top edge: accent -> transparent, from inline-start (RTL) */

  /* Text — tinted toward the accent; AA on card (#141C55) and raised (#1D2770) */
  --dc-text:        #F0F2FF;   /* 14.20:1 card · 11.96:1 raised */
  --dc-text-2:      #B4BCE6;   /*  8.50:1 card ·  7.15:1 raised */
  --dc-text-3:      #9099D0;   /*  5.77:1 card ·  4.85:1 raised */

  /* Accent — one electric indigo, used with intent */
  --dc-accent:        #8B9BFF;               /* text/icon: 6.20:1 card · 5.22:1 raised */
  --dc-accent-fill:   #5865F2;               /* solid fill (button hover); white label 4.61:1 */
  --dc-accent-tint:   rgba(139,155,255,.16); /* chips, icon containers */
  --dc-accent-line:   rgba(139,155,255,.48); /* accent button border */
  --dc-on-accent:     #FFFFFF;               /* label on --dc-accent-fill: 4.61:1 */

  /* Avatar hues — cool range only, one per row; initials on a 16% tint of the same hue */
  --dc-hue-1: #8B9BFF;  /* indigo  4.72:1 on its tint */
  --dc-hue-2: #B49CFF;  /* violet  5.16:1 */
  --dc-hue-3: #7FB2FF;  /* sky     5.39:1 */
  --dc-hue-4: #5CC8FF;  /* cyan    6.00:1 */

  /* Glow — page-level light behind glass; never inside data cards */
  --dc-glow-1:    rgba(139,155,255,.70);  /* accent */
  --dc-glow-2:    rgba(92,200,255,.55);   /* cyan   */
  --dc-glow-blur: 40px;

  /* Semantic — text colour + 14% chip tint */
  --dc-success:      #3DD68C;  --dc-success-tint: rgba(61,214,140,.14);   /* 8.44:1 card · 6.47:1 on tint */
  --dc-warning:      #F5B83D;  --dc-warning-tint: rgba(245,184,61,.14);   /* 8.90:1 card · 6.85:1 on tint */
  --dc-danger:       #FF8A8A;  --dc-danger-tint:  rgba(255,138,138,.14);  /* 6.97:1 card · 5.60:1 on tint */

  /* Spacing — 8px grid (4 = half step for tight icon gaps) */
  --dc-space-0-5: 4px;  --dc-space-1: 8px;  --dc-space-1-5: 12px; --dc-space-2: 16px;
  --dc-space-3: 24px;   --dc-space-4: 32px; --dc-space-5: 40px;   --dc-space-6: 48px;

  /* Radius */
  --dc-radius-card:  16px;
  --dc-radius-inner: 10px;
  --dc-radius-chip:  999px;

  /* Typography — Vazirmatn, one step up from v1 */
  --dc-font: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
  --dc-stat:  800 34px/44px var(--dc-font);  /* hero number, tabular-nums */
  --dc-title: 700 18px/28px var(--dc-font);  /* card title   (was 16) */
  --dc-body:  400 15px/26px var(--dc-font);  /* body         (was 14) */
  --dc-label: 600 14px/22px var(--dc-font);  /* label, chip  (was 13) */
  --dc-meta:  400 13px/22px var(--dc-font);  /* meta         (13 = floor) */

  /* Motion */
  --dc-dur:  160ms;
  --dc-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---- Card v10 (tokens only) — indigo surfaces, accent top edge, accent actions ---- */
.bf-card { --dc-pad: var(--dc-space-3); --dc-b: var(--dc-border); --dc-edge-img: var(--dc-edge);
  position: relative; gap: var(--dc-space-2); padding: var(--dc-pad); border-radius: var(--dc-radius-card);
  background: var(--dc-card); border: 1px solid var(--dc-b);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--dc-text); font: var(--dc-body);
  transition: border-color var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
/* top edge: accent -> transparent ring segment that follows the corner radius */
.bf-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--dc-edge-img) top / 100% var(--dc-radius-card) no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bf-card:hover { --dc-b: var(--dc-border-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .bf-card:hover { transform: none; } }
.is-dense .bf-card { --dc-pad: var(--dc-space-2); border-radius: var(--dc-radius-card); }
.bf-card-head { align-items: flex-start; gap: var(--dc-space-2); }
.bf-card-titles { gap: var(--dc-space-0-5); }
.bf-card-title { font: var(--dc-title); color: var(--dc-text); margin: 0; }
.bf-card-sub { font: var(--dc-meta); color: var(--dc-text-2); margin: 0; }
.bf-card .t-overline { font: var(--dc-label); color: var(--dc-accent); letter-spacing: 0; }
.bf-card-foot { border-block-start: 1px solid var(--dc-border); padding-block-start: var(--dc-space-2); gap: var(--dc-space-1-5); font: var(--dc-meta); color: var(--dc-text-3); }
/* card actions («همه», «ویرایش») — accent outline, filled accent on hover */
.bf-card-actions .bf-btn:not(.bf-btn-primary), .bf-card-foot .bf-btn:not(.bf-btn-primary) {
  background: transparent; border: 1px solid var(--dc-accent-line); color: var(--dc-accent) !important; font: var(--dc-label);
  border-radius: var(--dc-radius-inner); padding-inline: var(--dc-space-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease); }
.bf-card-actions .bf-btn:not(.bf-btn-primary):hover:not(:disabled), .bf-card-foot .bf-btn:not(.bf-btn-primary):hover:not(:disabled) {
  background: var(--dc-accent-fill); border-color: var(--dc-accent-fill); color: var(--dc-on-accent) !important; transform: none; }
/* glass — semi-transparent surface + backdrop blur; place it in .bf-glass-stage so a glow sits behind it */
.bf-card.bf-card-glass { --dc-b: var(--dc-border-hover); background: var(--dc-glass);
  -webkit-backdrop-filter: blur(var(--dc-glass-blur)) saturate(140%); backdrop-filter: blur(var(--dc-glass-blur)) saturate(140%);
  box-shadow: inset 0 1px 0 var(--dc-border-top); }
.bf-card.bf-card-glass:hover { --dc-b: var(--dc-accent-line); }
.bf-glass-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.bf-glass-stage > .bf-card { flex: 1; }
.bf-glass-stage::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--dc-space-2) * -1) calc(var(--dc-space-3) * -1); pointer-events: none;
  background:
    radial-gradient(42% 38% at 66% 32%, var(--dc-glow-1), transparent),
    radial-gradient(40% 36% at 34% 72%, var(--dc-glow-2), transparent);
  filter: blur(var(--dc-glow-blur)); }
/* outline — transparent surface, same accent top edge, footer pinned */
.bf-card.bf-card-outline { --dc-b: var(--dc-border-hover); background: transparent; }
.bf-card.bf-card-outline:hover { --dc-b: var(--dc-accent-line); }
.bf-card > .bf-card-foot { margin-block-start: auto; }
/* tone cards — the tone replaces the accent on the top edge */
.bf-card[class*="is-tone-"] { --dc-edge-img: linear-gradient(to left, var(--kt), transparent 78%); background: var(--dc-card); border-color: var(--dc-b); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
/* ---- in-card list (divided) ---- */
.bf-list.is-divided { display: flex; flex-direction: column; gap: 0; }
.bf-list.is-divided li + li { border-block-start: 1px solid var(--dc-border); }
.bf-list.is-divided .bf-list-row { min-block-size: 0; padding: var(--dc-space-1-5) 0; gap: var(--dc-space-1-5); background: transparent; border: 0; border-radius: 0; }
.bf-list.is-divided li:first-child .bf-list-row { padding-block-start: 0; }
.bf-list.is-divided li:last-child .bf-list-row { padding-block-end: 0; }
.bf-list.is-divided .bf-avatar { --hue: var(--dc-hue-1); inline-size: var(--dc-space-5); block-size: var(--dc-space-5); border-radius: var(--dc-radius-chip);
  background: color-mix(in srgb, var(--hue) 16%, transparent); color: var(--hue); font: var(--dc-label);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent); border: 0; flex: none; }
.bf-avatar.is-hue-2 { --hue: var(--dc-hue-2); } .bf-avatar.is-hue-3 { --hue: var(--dc-hue-3); } .bf-avatar.is-hue-4 { --hue: var(--dc-hue-4); }
.bf-list.is-divided .bf-list-body { gap: 0; }
.bf-list.is-divided .bf-list-title { font: var(--dc-body); font-weight: 600; color: var(--dc-text); white-space: nowrap; }
.bf-list.is-divided .bf-list-sub { font: var(--dc-meta); color: var(--dc-text-2); }
.bf-list-chip { flex: none; margin-inline-start: auto; padding: var(--dc-space-0-5) var(--dc-space-1-5); border-radius: var(--dc-radius-chip); background: var(--dc-accent-tint); border: 1px solid var(--dc-border); font: var(--dc-label); color: var(--dc-text); font-variant-numeric: tabular-nums; }
.bf-list.is-divided .bf-list-row.is-link:hover { background: transparent; }
.bf-list.is-divided .bf-list-row.is-link:hover .bf-list-title { color: var(--dc-accent); }

/* ---- StatCard v5 — same language as OptionCard v6 (Card surface, glossy tile, centred gradient hero, thick hue line) ---- */
:root:not(.bf-legacy), .bf-scope {
  --sc-num: 900 44px/52px var(--dc-font);       /* hero number: extra-bold, centred */
  --sc-line-h: var(--dc-space-1);               /* thick hue line (8px), like the OptionCard level bar */
  --oc-tile-amber:        linear-gradient(180deg, #FFE08A 0%, #FFB914 55%, #D98A00 100%);
  --oc-tile-shadow-amber: 0 8px 18px -6px rgba(255,170,20,.6);
  --oc-title-amber:       linear-gradient(to left, #FFFFFF 0%, #FFE08A 55%, #FFB914 100%);
  --oc-title-blue:        var(--oc-title-solo);
  --oc-title-violet:      var(--oc-title-pro);
  --oc-title-green:       var(--oc-title-trial);
  --dc-focus-width: 2px;
}
.bf-stat-row::before { content: none; }   /* no row glow — the cards carry the colour now */
.bf-card.bf-sc { --tile: var(--oc-tile); --tile-shadow: var(--oc-tile-shadow); --hue: var(--primary); --num-grad: var(--oc-title-blue);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--dc-space-1); padding: var(--dc-space-3); text-align: center; text-decoration: none; color: var(--dc-text); outline: none; }
.bf-sc.is-tile-blue   { --tile: var(--oc-tile);        --tile-shadow: var(--oc-tile-shadow);        --hue: var(--primary);    --num-grad: var(--oc-title-blue); }
.bf-sc.is-tile-amber  { --tile: var(--oc-tile-amber);  --tile-shadow: var(--oc-tile-shadow-amber);  --hue: var(--amber-500);  --num-grad: var(--oc-title-amber); }
.bf-sc.is-tile-violet { --tile: var(--oc-tile-violet); --tile-shadow: var(--oc-tile-shadow-violet); --hue: var(--violet-400); --num-grad: var(--oc-title-violet); }
.bf-sc.is-tile-green  { --tile: var(--oc-tile-green);  --tile-shadow: var(--oc-tile-shadow-green);  --hue: var(--mint-400);   --num-grad: var(--oc-title-green); }
.bf-card.bf-sc.is-hover:not(.is-loading) { --dc-b: var(--dc-border-hover); transform: translateY(-2px); }
.bf-card.bf-sc:is(:focus-visible, .is-focus) { outline: var(--dc-focus-width) solid var(--focus-ring); outline-offset: calc(var(--dc-focus-width) + 1px); }
.bf-card.bf-sc.is-loading:hover { --dc-b: var(--dc-border); transform: none; }
/* head: glossy gradient tile at the inline-start, arrow fades in at the inline-end */
.bf-sc-head { display: flex; align-items: flex-start; justify-content: space-between; min-block-size: var(--dc-space-6); }
.bf-sc-icon { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; inline-size: var(--dc-space-6); block-size: var(--dc-space-6);
  border-radius: var(--oc-tile-radius); background: var(--tile); color: var(--oc-tile-ink);
  box-shadow: inset 0 1px 0 var(--oc-tile-rim), inset 0 -1px 0 rgba(0,0,0,.12), var(--tile-shadow); }
.bf-sc-icon::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; background: var(--oc-tile-shine); pointer-events: none; }
.bf-sc-icon svg { position: relative; color: var(--oc-tile-ink); stroke: var(--oc-tile-ink); }
.bf-sc-arrow { color: var(--dc-text-2); opacity: 0; transform: translateX(var(--dc-space-0-5)); transition: opacity var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
.bf-sc:is(:hover, .is-hover, :focus-visible, .is-focus) .bf-sc-arrow { opacity: 1; transform: none; }
/* hero number — centred, extra-bold, white → hue */
.bf-sc-num { display: flex; align-items: baseline; justify-content: center; gap: var(--dc-space-1); }
.bf-sc-num-text { font: var(--sc-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; padding-block: 2px;
  background: var(--num-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bf-sc-num small { font: var(--dc-body); color: var(--dc-text-2); }
.bf-sc.is-empty .bf-sc-num-text { background: none; -webkit-text-fill-color: var(--dc-text-3); color: var(--dc-text-3); font-weight: 400; }
/* label — centred, larger, under the number */
.bf-sc-label { font: var(--dc-body); color: var(--dc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* support — thick hue line (sparkline or bar) */
.bf-sc-support { display: flex; align-items: center; justify-content: center; gap: var(--dc-space-1-5); min-block-size: var(--dc-space-5); margin-block-start: var(--dc-space-1); min-inline-size: 0; }
.bf-sc-spark { flex: 1; min-inline-size: 0; block-size: var(--dc-space-3); overflow: visible; color: var(--hue); }
.bf-sc-trend { flex: none; font: var(--dc-meta); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-sc-trend.is-good { color: var(--dc-success); } .bf-sc-trend.is-bad { color: var(--dc-danger); }
.bf-sc-meter { flex: 1; display: flex; flex-direction: column; gap: var(--dc-space-1); min-inline-size: 0; }
.bf-sc-bar { display: block; block-size: var(--sc-line-h); border-radius: var(--dc-radius-chip); background: var(--dc-raised); overflow: hidden; }
.bf-sc-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--hue); }
.bf-sc-meter-row { display: flex; justify-content: space-between; font: var(--dc-meta); color: var(--dc-text-2); font-variant-numeric: tabular-nums; }
.bf-sc-note { font: var(--dc-meta); color: var(--dc-text-3); }
/* floating chip on the top border (same placement as «محبوب») */
.bf-sc-flag { position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: max-content; transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--dc-space-0-5); padding: var(--dc-space-0-5) var(--dc-space-1-5); border-radius: var(--dc-radius-chip);
  background: var(--oc-badge-bg); color: var(--oc-badge-ink); font: var(--dc-meta); font-weight: 800; white-space: nowrap;
  box-shadow: 0 0 0 3px var(--dc-page), 0 6px 16px -6px rgba(255,185,20,.6); }
/* loading */
.bf-sc-sk { display: block; border-radius: var(--dc-radius-chip); background-color: var(--dc-raised);
  background-image: linear-gradient(90deg, transparent 0%, var(--dc-accent-tint) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat;
  animation: bf-sc-shimmer 1.6s var(--dc-ease) infinite; }
.bf-sc-sk-icon { inline-size: var(--dc-space-6); block-size: var(--dc-space-6); border-radius: var(--oc-tile-radius); }
.bf-sc-sk-num { inline-size: calc(var(--dc-space-6) * 1.5); block-size: var(--dc-space-6); margin: var(--dc-space-0-5) auto 0; border-radius: var(--dc-radius-inner); }
.bf-sc-sk-label { inline-size: 50%; block-size: var(--dc-space-1-5); margin: var(--dc-space-1) auto; }
.bf-sc-sk-support { inline-size: 100%; block-size: var(--sc-line-h); }
@keyframes bf-sc-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .bf-sc-sk { animation: none; } .bf-sc-arrow { transition: none; } }

/* ---- OptionCard v6 — Card surface & border (same as .bf-card), tier colour only in icon tile, level bar and selection ---- */
:root:not(.bf-legacy), .bf-scope {
  /* icon tiles — filled gradient squircles: lighter top → saturated bottom, white line icon, glossy top, same-hue shadow */
  --oc-tile:               linear-gradient(180deg, #7CC8FF 0%, #2E8BFF 55%, #1162E0 100%);
  --oc-tile-shadow:        0 8px 18px -6px rgba(30,123,240,.65);
  --oc-tile-green:         linear-gradient(180deg, #7FE3A0 0%, #2FBF67 55%, #138A45 100%);
  --oc-tile-shadow-green:  0 8px 18px -6px rgba(31,170,90,.65);
  --oc-tile-violet:        linear-gradient(180deg, #C6A6FF 0%, #8A55FF 55%, #5B22D6 100%);
  --oc-tile-shadow-violet: 0 8px 18px -6px rgba(110,60,240,.65);
  --oc-tile-shine:  linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  --oc-tile-rim:    rgba(255,255,255,.5);
  --oc-tile-ink:    #FFFFFF;
  --oc-tile-radius: 14px;
  /* tier line colours (level bar, selected border, filled control) — existing palette */
  --oc-line-trial: var(--mint-400);
  --oc-line-solo:  var(--primary);
  --oc-line-pro:   var(--violet-400);
  --oc-mark:       var(--navy-950);
  --oc-title: 900 32px/42px var(--dc-font);   /* plan name: large, extra-bold, centred */
  --oc-price: 800 26px/34px var(--dc-font);   /* price: smaller, centred */
  --oc-title-trial: linear-gradient(to left, #FFFFFF 0%, #7FE3A0 55%, #2FD06C 100%);  /* white → icon hue (RTL: starts white) */
  --oc-title-solo:  linear-gradient(to left, #FFFFFF 0%, #8CC8FF 55%, #3D9BFF 100%);
  --oc-title-pro:   linear-gradient(to left, #FFFFFF 0%, #C6A6FF 55%, #9A6BFF 100%);
  --oc-badge-bg:    var(--amber-500);   /* «محبوب» */
  --oc-badge-ink:   var(--on-yellow);   /* 10.9:1 on amber */
  --oc-level-h:     var(--dc-space-1);  /* thicker colour line */
  --dc-disabled-alpha: .5;
  --dc-focus-width: 2px;
}
/* surface + border = Card */
.bf-oc { --b: var(--dc-border); --line: var(--oc-line-solo); --tile: var(--oc-tile); --tile-shadow: var(--oc-tile-shadow);
  position: relative; display: flex; inline-size: 100%; min-inline-size: 0; text-align: start; cursor: pointer; color: var(--dc-text);
  background: var(--dc-card); border: 1px solid var(--b); border-radius: var(--dc-radius-card);
  transition: border-color var(--dc-dur) var(--dc-ease), box-shadow var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
.bf-oc::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--dc-edge) top / 100% var(--dc-radius-card) no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bf-oc.is-tier-trial { --title-grad: var(--oc-title-trial); --line: var(--oc-line-trial); --tile: var(--oc-tile-green);  --tile-shadow: var(--oc-tile-shadow-green); }
.bf-oc.is-tier-solo  { --title-grad: var(--oc-title-solo); --line: var(--oc-line-solo);  --tile: var(--oc-tile);        --tile-shadow: var(--oc-tile-shadow); }
.bf-oc.is-tier-pro   { --title-grad: var(--oc-title-pro); --line: var(--oc-line-pro);   --tile: var(--oc-tile-violet); --tile-shadow: var(--oc-tile-shadow-violet); }
.bf-oc.is-tile-green { --tile: var(--oc-tile-green); --tile-shadow: var(--oc-tile-shadow-green); --line: var(--oc-line-trial); }
.bf-oc-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; pointer-events: none; }
/* states */
.bf-oc:is(:hover, .is-hover):not(.is-disabled) { --b: var(--dc-border-hover); transform: translateY(-2px); }
.bf-oc:has(.bf-oc-input:checked) { --b: var(--line); box-shadow: 0 0 0 1px var(--line); }
.bf-oc:has(.bf-oc-input:focus-visible), .bf-oc.is-focus { outline: var(--dc-focus-width) solid var(--focus-ring); outline-offset: calc(var(--dc-focus-width) + 1px); }
.bf-oc.is-disabled { opacity: var(--dc-disabled-alpha); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .bf-oc:hover { transform: none; } }
/* icon tile */
.bf-oc-icon { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; inline-size: var(--dc-space-6); block-size: var(--dc-space-6);
  border-radius: var(--oc-tile-radius); background: var(--tile); color: var(--oc-tile-ink);
  box-shadow: inset 0 1px 0 var(--oc-tile-rim), inset 0 -1px 0 rgba(0,0,0,.12), var(--tile-shadow); }
.bf-oc-icon::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; background: var(--oc-tile-shine); pointer-events: none; }
.bf-oc-icon svg { position: relative; color: var(--oc-tile-ink); stroke: var(--oc-tile-ink); }
.bf-oc.is-disabled .bf-oc-icon { filter: grayscale(1); }
/* control */
.bf-oc-control { flex: none; display: grid; place-items: center; inline-size: var(--dc-space-3); block-size: var(--dc-space-3); border: 2px solid var(--dc-text-3); background: transparent; color: var(--oc-mark);
  transition: background-color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease); }
.bf-oc-control.is-radio { border-radius: var(--dc-radius-chip); }
.bf-oc-control.is-check { border-radius: var(--dc-space-0-5); }
.bf-oc-control > * { opacity: 0; transform: scale(.6); transition: opacity var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
.bf-oc-control.is-radio i { inline-size: var(--dc-space-1); block-size: var(--dc-space-1); border-radius: var(--dc-radius-chip); background: var(--oc-mark); }
.bf-oc:is(:hover, .is-hover):not(.is-disabled) .bf-oc-control { border-color: var(--line); }
.bf-oc:has(.bf-oc-input:checked) .bf-oc-control { background: var(--line); border-color: var(--line); }
.bf-oc:has(.bf-oc-input:checked) .bf-oc-control > * { opacity: 1; transform: none; }
/* text */
.bf-oc-title { display: flex; align-items: center; gap: var(--dc-space-1); min-inline-size: 0; font: var(--oc-title); color: var(--dc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-oc-desc { display: block; min-inline-size: 0; font: var(--dc-meta); color: var(--dc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-oc-badge { flex: none; display: inline-flex; align-items: center; padding: 0 var(--dc-space-1); border-radius: var(--dc-radius-chip); background: var(--oc-badge-bg); color: var(--oc-badge-ink); font: var(--dc-meta); font-weight: 800; -webkit-text-fill-color: var(--oc-badge-ink); }
/* plan anatomy — unchanged slots */
.bf-oc.is-plan { flex-direction: column; gap: var(--dc-space-1-5); padding: var(--dc-space-3); }
.bf-oc-head { display: flex; align-items: flex-start; justify-content: space-between; }
.bf-oc-titlerow { display: flex; align-items: center; justify-content: center; gap: var(--dc-space-1); block-size: calc(var(--dc-space-5) + var(--dc-space-0-5)); min-inline-size: 0; }
.bf-oc.is-plan .bf-oc-title { font: var(--oc-title); background: var(--title-grad, var(--oc-title-solo)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-block: 2px; }
.bf-oc.is-plan .bf-oc-desc { text-align: center; font: var(--dc-body); color: var(--dc-text-2); }
.bf-oc.is-plan .bf-oc-feature { justify-content: center; }
.bf-oc-level { display: block; block-size: var(--oc-level-h); border-radius: var(--dc-radius-chip); background: var(--dc-raised); overflow: hidden; margin-block: var(--dc-space-0-5); }
.bf-oc-level > span { display: block; block-size: 100%; border-radius: inherit; background: var(--line); }
.bf-oc-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: var(--dc-space-1); min-inline-size: 0; }
.bf-oc-price b { font: var(--oc-price); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--dc-text); white-space: nowrap; }
.bf-oc-price small { font: var(--dc-meta); color: var(--dc-text-2); white-space: nowrap; }
.bf-oc-feature { display: flex; align-items: center; gap: var(--dc-space-0-5); font: var(--dc-meta); color: var(--dc-text-2); }
.bf-oc-feature svg { color: var(--line); flex: none; }
/* add-on row */
.bf-oc.is-addon { flex-direction: row; align-items: center; gap: var(--dc-space-1-5); padding: var(--dc-space-2); min-block-size: calc(var(--dc-space-6) + var(--dc-space-4)); }
.bf-oc.is-addon .bf-oc-icon { inline-size: calc(var(--dc-space-5) + var(--dc-space-0-5)); block-size: calc(var(--dc-space-5) + var(--dc-space-0-5)); }
.bf-oc.is-addon .bf-oc-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.bf-oc.is-addon .bf-oc-title { font: var(--dc-body); font-weight: 700; }
/* layout — unchanged */
.bf-oc-set { container-type: inline-size; display: flex; flex-direction: column; gap: var(--dc-space-3); }
.bf-oc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dc-space-2); }
@container (max-width: 640px) { .bf-oc-grid { grid-template-columns: minmax(0, 1fr); } }
.bf-oc-feature.is-empty { display: none; }  /* no reserved gap when no card has a feature line; slots above still align */

/* «محبوب» sits on the card's top border, centred */
.bf-oc-badge.is-floating { position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: max-content; transform: translateY(-50%); z-index: 1;
  padding: var(--dc-space-0-5) var(--dc-space-1-5); box-shadow: 0 0 0 3px var(--dc-page), 0 6px 16px -6px rgba(255,185,20,.6); }
/* price: number + «تومان» on one line, note («اشتراک ماهانه») under it */
.bf-oc-note { display: block; text-align: center; font: var(--dc-meta); color: var(--dc-text-2); margin-block-start: calc(var(--dc-space-1) * -1); }
.bf-oc-price small { font: var(--dc-body); }

/* EmptyState glyph v3 — deeper, saturated tiles with a white icon (lighter top → saturated bottom) */
.bf-empty-art.is-info     { --e1: #4FD2FF; --e2: #0B86C9; --eink: #FFFFFF; --eg: rgba(20,160,230,.6); }
.bf-empty-art.is-progress { --e1: #5EA8FF; --e2: #1259D9; --eink: #FFFFFF; --eg: rgba(22,110,240,.6); }
.bf-empty-art.is-accent   { --e1: #A48BFF; --e2: #5A2FE0; --eink: #FFFFFF; --eg: rgba(110,70,240,.6); }
.bf-empty-art.is-warning  { --e1: #FFC94A; --e2: #D98400; --eink: #FFFFFF; --eg: rgba(230,150,10,.55); }
.bf-empty-art.is-danger   { --e1: #FF8A9C; --e2: #D62E4F; --eink: #FFFFFF; --eg: rgba(220,50,80,.55); }
.bf-empty-art.is-neutral  { --e1: #7F8BC4; --e2: #3B4686; --eink: #FFFFFF; --eg: rgba(90,105,180,.45); }
.bf-empty-art .bf-empty-glyph, .bf-empty-art .bf-empty-glyph .bf-icon { color: var(--eink); }
.bf-empty-art .bf-empty-glyph { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.15), 0 10px 22px -8px var(--eg); }

/* ProductCard — centred title/tagline/price (same rules as OptionCard plans) */
.bf-pc { --pc-title: var(--oc-title-solo); }
.bf-pc.is-id-trial { --pc-title: var(--oc-title-blue); }   /* trial tile is blue here */
.bf-pc.is-id-solo  { --pc-title: var(--oc-title-green); }
.bf-pc.is-id-pro   { --pc-title: var(--oc-title-violet); }
.bf-pc-title { align-items: center; text-align: center; }
.bf-pc-title h3 { justify-content: center; font: var(--oc-title); }
.bf-pc-title h3 { background: var(--pc-title); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-block: 2px; }
.bf-pc-title h3 .bf-badge { display: none; }  /* «رایگان» badge dropped — the price already says it */
.bf-pc-title h3 { white-space: nowrap; }
.bf-pc-title p, .bf-pc.is-highlight .bf-pc-title p { font: var(--dc-body); font-size: 16px; line-height: 26px; color: var(--dc-text-2); text-align: center; }
.bf-pc-price { flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center; }
.bf-pc-price-line { display: flex; align-items: baseline; justify-content: center; gap: var(--dc-space-1); flex-wrap: wrap; }
.bf-pc .bf-pc-price b { font: var(--oc-price); text-shadow: none; }
.bf-pc-price-line span { font: var(--dc-body); color: var(--dc-text-2); }
.bf-pc-price-note { font: var(--dc-meta); color: var(--dc-text-2); }
.bf-pc-price-note.is-empty { display: none; }

/* PromoCard — same language as OptionCard v6: Card surface & border, glossy squircle, centred gradient title */
.bf-promo { position: relative; align-items: center; text-align: center; gap: var(--dc-space-1); padding: var(--dc-space-3) var(--dc-space-2);
  background: var(--dc-card); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-card); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bf-promo::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--dc-edge) top / 100% var(--dc-radius-card) no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bf-promo .bf-promo-icon[class] { position: relative; overflow: hidden; inline-size: var(--dc-space-6); block-size: var(--dc-space-6); margin-block-end: var(--dc-space-0-5);
  border-radius: var(--oc-tile-radius); background: var(--oc-tile-violet); color: var(--oc-tile-ink); border: 0;
  box-shadow: inset 0 1px 0 var(--oc-tile-rim), inset 0 -1px 0 rgba(0,0,0,.12), var(--oc-tile-shadow-violet); }
.bf-promo .bf-promo-icon::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; background: var(--oc-tile-shine); pointer-events: none; }
.bf-promo .bf-promo-icon svg { position: relative; color: var(--oc-tile-ink); stroke: var(--oc-tile-ink); }
.bf-promo-title { font: 900 20px/30px var(--dc-font); background: var(--oc-title-violet); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bf-promo-body { font: var(--dc-body); color: var(--dc-text-2); }
.bf-promo .bf-btn { margin-block-start: var(--dc-space-1); }