/*
  Breakout AI Solutions — authenticated product experience
  Presentation-only layer. The existing dashboard markup, IDs, inline handlers,
  API calls, and state transitions remain the source of truth.
*/

:root {
  color-scheme: dark;
  --bai-bg: #07101d;
  --bai-bg-raised: #0b1626;
  --bai-surface: #101d2e;
  --bai-surface-raised: #15243a;
  --bai-surface-soft: rgba(255, 255, 255, 0.035);
  --bai-line: rgba(148, 163, 184, 0.18);
  --bai-line-strong: rgba(148, 163, 184, 0.30);
  --bai-ink: #f3f7fb;
  --bai-ink-soft: #d7e1ec;
  --bai-muted: #9eafc3;
  --bai-muted-strong: #b9c8d8;
  --bai-cyan: #55d7ef;
  --bai-cyan-soft: rgba(85, 215, 239, 0.12);
  --bai-orange: #ff9b52;
  --bai-orange-strong: #ff7c2f;
  --bai-orange-soft: rgba(255, 155, 82, 0.12);
  --bai-green: #4dd6a0;
  --bai-green-soft: rgba(77, 214, 160, 0.12);
  --bai-red: #ff8e98;
  --bai-red-soft: rgba(255, 142, 152, 0.12);
  --bai-yellow: #f7cf71;
  --bai-radius-sm: 10px;
  --bai-radius-md: 14px;
  --bai-radius-lg: 18px;
  --bai-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  --bai-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.12);
}

html,
body {
  background: var(--bai-bg) !important;
  color: var(--bai-ink) !important;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.55 !important;
}

body {
  overflow-x: hidden;
}

body::before {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(85, 215, 239, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 215, 239, 0.04) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(85, 215, 239, 0.72) !important;
  outline-offset: 2px !important;
}

.hidden {
  display: none !important;
}

/* Command bar */
.topnav {
  background: rgba(7, 16, 29, 0.94) !important;
  border-bottom: 1px solid var(--bai-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 30px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.topnav-inner {
  max-width: 1500px;
  min-height: 68px !important;
  height: auto !important;
  padding: 10px 24px !important;
  gap: 18px !important;
}

.brand {
  gap: 11px !important;
  min-width: max-content;
}

.brand-icon {
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 0 0 1px rgba(85, 215, 239, 0.42), 0 6px 18px rgba(0, 0, 0, 0.34) !important;
}

.brand-name {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.1px !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}

.brand-accent {
  color: var(--bai-cyan) !important;
}

.top-links {
  align-items: center;
  gap: 4px !important;
  min-width: 0;
}

.top-link {
  min-height: 46px !important;
  padding: 10px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--bai-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease !important;
}

.top-link:hover {
  color: var(--bai-ink) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.top-link.active {
  color: var(--bai-ink) !important;
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.34) !important;
}

.nav-status {
  gap: 8px !important;
  color: var(--bai-green) !important;
  font-size: 13px !important;
}

.nav-status::before {
  width: 8px !important;
  height: 8px !important;
  background: var(--bai-green) !important;
  box-shadow: 0 0 10px rgba(77, 214, 160, 0.8) !important;
}

#navUserLabel {
  color: var(--bai-muted-strong) !important;
  font-size: 14px !important;
}

/* Main workspace frame */
.main {
  min-height: calc(100vh - 68px);
}

.shell {
  width: min(100% - 48px, 1440px) !important;
  max-width: 1440px !important;
  padding: 34px 0 100px !important;
}

.shell.wide-list-shell {
  width: min(100% - 48px, 1720px) !important;
  max-width: 1720px !important;
}

.station-panel.centered-mode,
.station-panel.list-mode {
  max-width: none !important;
  margin: 0 !important;
}

/* Every workspace opens at its own beginning, not at the previous page's scroll offset. */
.main {
  scroll-margin-top: 80px;
}

.hero {
  max-width: 850px;
  padding: 16px 0 34px !important;
  text-align: left !important;
}

.hero-logo {
  justify-content: flex-start !important;
  margin-bottom: 18px !important;
}

.hero-logo img {
  width: 76px !important;
  height: 76px !important;
  box-shadow: 0 0 0 1px rgba(85, 215, 239, 0.42), 0 12px 26px rgba(0, 0, 0, 0.36) !important;
}

.hero h1,
.hero-title {
  max-width: 780px;
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: clamp(34px, 5vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.8px !important;
  line-height: 1.1 !important;
  padding: 0 !important;
}

.gtxt {
  background: none !important;
  color: var(--bai-cyan) !important;
  -webkit-text-fill-color: var(--bai-cyan) !important;
}

.hero-pill {
  margin-top: 18px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(85, 215, 239, 0.26) !important;
  border-radius: 999px !important;
  background: var(--bai-cyan-soft) !important;
  color: var(--bai-cyan) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.hero-pill::before {
  width: 8px !important;
  height: 8px !important;
  background: var(--bai-green) !important;
  box-shadow: 0 0 9px rgba(77, 214, 160, 0.78) !important;
}

.back-row {
  min-height: 48px;
  margin-bottom: 18px !important;
}

.back-link,
.back-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bai-muted) !important;
  font-size: 15px !important;
  font-weight: 600;
}

.back-link:hover,
.back-btn:hover {
  color: var(--bai-cyan) !important;
}

/* Overview: mission control */
.home-split {
  gap: 22px !important;
  align-items: stretch !important;
}

.home-side {
  padding: 20px !important;
  background: rgba(11, 22, 38, 0.76) !important;
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-lg) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.home-side-head {
  padding: 0 2px 18px !important;
  margin-bottom: 18px !important;
  border-bottom-color: var(--bai-line) !important;
}

.home-side-title {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.home-side-sub {
  margin-top: 7px;
  color: var(--bai-muted) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.home-side.b2c-side {
  border-color: rgba(255, 155, 82, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 155, 82, 0.055), rgba(11, 22, 38, 0.76)) !important;
}

.home-side.b2c-side .home-side-title {
  color: var(--bai-orange) !important;
}

.metric-bar {
  gap: 0 !important;
  margin-bottom: 18px !important;
  background: var(--bai-surface) !important;
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-md) !important;
  box-shadow: none !important;
}

.metric {
  min-height: 104px;
  padding: 20px 14px !important;
  border-right-color: var(--bai-line) !important;
}

.metric strong {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  padding: 0 !important;
}

.metric span {
  margin-top: 9px;
  color: var(--bai-muted) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
}

.dashboard-grid {
  gap: 14px !important;
}

.station-card {
  min-height: 214px !important;
  padding: 20px !important;
  background: var(--bai-surface) !important;
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-md) !important;
  box-shadow: none !important;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}

.station-card.live:hover {
  transform: translateY(-2px) !important;
  background: var(--bai-surface-raised) !important;
  border-color: rgba(85, 215, 239, 0.42) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.station-icon {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(85, 215, 239, 0.28) !important;
  border-radius: 12px !important;
  background: var(--bai-cyan-soft) !important;
  color: var(--bai-cyan) !important;
  font-size: 20px !important;
}

.station-title {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.station-desc {
  min-height: 0 !important;
  margin-top: 8px;
  color: var(--bai-muted) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.station-tag {
  margin-top: 15px !important;
  min-height: 30px;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  letter-spacing: 0.07em !important;
  line-height: 1.2 !important;
}

.station-tag.live {
  color: var(--bai-green) !important;
  background: var(--bai-green-soft) !important;
  border-color: rgba(77, 214, 160, 0.28) !important;
}

.station-tag.soon {
  color: var(--bai-muted) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: var(--bai-line) !important;
}

.station-bottom {
  margin-top: 18px !important;
}

.station-mini-grid {
  gap: 8px !important;
}

.station-mini,
.station-last,
.b2c-recent {
  background: var(--bai-surface-soft) !important;
  border-color: var(--bai-line) !important;
  border-radius: 11px !important;
}

.station-mini {
  min-height: 68px !important;
  padding: 12px 10px !important;
}

.station-mini strong {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
  padding: 0 !important;
}

.station-mini span,
.station-last .label,
.b2c-recent-title {
  color: var(--bai-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

.station-last .value,
.b2c-recent-row {
  color: var(--bai-ink-soft) !important;
  font-size: 14px !important;
}

/* Shared workspace surfaces */
.section-wrap,
.doc-template-card,
.doc-preview-wrap,
.b2c-list-card,
.social-empty,
.marketing-summary,
.social-summary {
  background: var(--bai-surface) !important;
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-lg) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.section-wrap {
  padding: 24px !important;
  margin-bottom: 18px !important;
}

.section-head {
  align-items: flex-start !important;
  margin-bottom: 20px !important;
}

.section-title {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: clamp(24px, 3vw, 30px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.5px !important;
  padding: 0 !important;
}

.section-sub {
  max-width: 850px;
  margin-top: 9px !important;
  color: var(--bai-muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Site Copy: treat the editor as a focused creation workspace. */
#viewSiteCopy .section-wrap {
  margin-bottom: 14px !important;
}

#viewSiteCopy .site-copy-toolbar {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-md);
  background: var(--bai-surface-soft);
}

#viewSiteCopy .site-copy-toolbar .bsm {
  background: var(--bai-surface-raised) !important;
}

#viewSiteCopy #scStatus {
  color: var(--bai-muted) !important;
  font-size: 14px !important;
  font-weight: 600;
}

#viewSiteCopy #scForm {
  max-width: 960px !important;
  padding: 8px 24px 10px !important;
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-lg) !important;
  background: var(--bai-surface) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

#viewSiteCopy #scForm > div[style*="letter-spacing"] {
  margin: 16px -24px 0 !important;
  padding: 14px 24px 10px !important;
  border-top: 1px solid var(--bai-line) !important;
  color: var(--bai-cyan) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}

#viewSiteCopy #scForm > div[style*="letter-spacing"]:first-child {
  margin-top: 0 !important;
  border-top: 0 !important;
}

#viewSiteCopy #scForm > div:not([style*="letter-spacing"]) {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--bai-line) !important;
}

#viewSiteCopy #scForm > div:not([style*="letter-spacing"]):last-child {
  border-bottom: 0 !important;
}

#viewSiteCopy #scForm .flabel {
  color: var(--bai-muted-strong) !important;
  font-size: 15px !important;
}

#viewSiteCopy #scForm .edit-input {
  width: 100% !important;
  background: var(--bai-bg-raised) !important;
}

#viewSiteCopy .site-copy-actions {
  max-width: 960px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-md);
  background: var(--bai-surface-soft);
}

#viewSiteCopy .site-copy-actions .btn-main {
  max-width: 240px;
}

.controls,
.action-row {
  gap: 10px !important;
}

.row2,
.b2c-form-grid {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.flabel,
.doc-form-label,
.social-modal-label {
  margin-bottom: 7px !important;
  color: var(--bai-muted-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.inp,
.sel,
.edit-input,
.crm-select,
.crm-textarea,
.doc-input,
.social-modal-input,
.social-rail-search,
.social-overlay-text {
  min-height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--bai-line-strong) !important;
  border-radius: var(--bai-radius-sm) !important;
  background: var(--bai-bg-raised) !important;
  color: var(--bai-ink) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.crm-textarea,
textarea.inp,
textarea.edit-input,
textarea.social-modal-input {
  min-height: 116px !important;
}

.inp::placeholder,
.sel::placeholder,
.edit-input::placeholder,
.crm-textarea::placeholder,
.doc-input::placeholder,
.social-modal-input::placeholder,
.social-rail-search::placeholder {
  color: #7890a8 !important;
  opacity: 1 !important;
}

.inp:focus,
.sel:focus,
.edit-input:focus,
.crm-select:focus,
.crm-textarea:focus,
.doc-input:focus,
.social-modal-input:focus,
.social-rail-search:focus,
.social-overlay-text:focus {
  border-color: var(--bai-cyan) !important;
  box-shadow: 0 0 0 3px rgba(85, 215, 239, 0.14) !important;
}

.btn-main,
.bsm,
.link-btn,
.muted-btn,
.quick-filter-pill,
.b2c-tab,
.social-tab,
.social-week-btn,
.doc-tab,
.team-tab {
  min-height: 46px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

.btn-main {
  min-height: 52px !important;
  padding: 13px 18px !important;
  background: var(--bai-orange-strong) !important;
  border: 1px solid var(--bai-orange-strong) !important;
  border-radius: var(--bai-radius-sm) !important;
  color: #1b1108 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(255, 124, 47, 0.16) !important;
}

.btn-main:hover {
  background: #ffac69 !important;
  border-color: #ffac69 !important;
}

.bsm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 10px 14px !important;
  background: var(--bai-surface-raised) !important;
  border: 1px solid var(--bai-line-strong) !important;
  border-radius: var(--bai-radius-sm) !important;
  color: var(--bai-ink-soft) !important;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.bsm:hover {
  color: var(--bai-ink) !important;
  background: #1b2d46 !important;
  border-color: rgba(85, 215, 239, 0.46) !important;
}

.bsm.ok {
  color: #baf3dd !important;
  background: var(--bai-green-soft) !important;
  border-color: rgba(77, 214, 160, 0.38) !important;
}

.bsm.ok:hover {
  background: rgba(77, 214, 160, 0.2) !important;
}

.bsm.ora,
.bsm.ai,
.crm-actions-btn {
  color: #ffd5b5 !important;
  background: var(--bai-orange-soft) !important;
  border-color: rgba(255, 155, 82, 0.42) !important;
}

.bsm.red {
  color: #ffc2c8 !important;
  background: var(--bai-red-soft) !important;
  border-color: rgba(255, 142, 152, 0.38) !important;
}

.link-btn {
  color: var(--bai-cyan) !important;
}

.muted-btn {
  color: var(--bai-muted) !important;
}

.quick-filter-bar {
  gap: 8px !important;
  padding: 6px 0 16px !important;
}

.quick-filter-pill {
  padding: 9px 14px !important;
  color: var(--bai-muted) !important;
  background: transparent !important;
  border-color: var(--bai-line-strong) !important;
  border-radius: 999px !important;
}

.quick-filter-pill:hover,
.quick-filter-pill.active {
  color: var(--bai-cyan) !important;
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.48) !important;
}

.quick-filter-pill.won-active {
  color: #baf3dd !important;
  background: var(--bai-green-soft) !important;
  border-color: rgba(77, 214, 160, 0.42) !important;
}

.quick-filter-pill.lost-active {
  color: #ffc2c8 !important;
  background: var(--bai-red-soft) !important;
  border-color: rgba(255, 142, 152, 0.42) !important;
}

/* Lists, cards, tables, and operational states */
.results-grid {
  gap: 18px !important;
}

.lead-card,
.crm-card {
  min-height: 440px;
  padding: 20px !important;
  gap: 16px !important;
  background: var(--bai-surface) !important;
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-lg) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.lead-card:hover,
.crm-card:hover {
  border-color: rgba(85, 215, 239, 0.34) !important;
}

.lead-title,
.crm-title {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.lead-sub,
.crm-sub,
.crm-mini {
  color: var(--bai-muted) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.block,
.crm-workspace-box,
.secondary-pill,
.social-field,
.social-caption,
.social-prompt-box,
.social-note-box,
.b2c-empty {
  background: var(--bai-surface-soft) !important;
  border-color: var(--bai-line) !important;
  border-radius: var(--bai-radius-sm) !important;
}

.block {
  min-height: 76px !important;
  padding: 13px !important;
}

.block-label,
.social-field .label {
  color: var(--bai-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

.block-value,
.social-field .value {
  color: var(--bai-ink-soft) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.badge,
.phone-badge,
.doc-status,
.seq-badge,
.b2c-tier-pill,
.b2c-stage-pill,
.social-status-pill {
  min-height: 28px;
  padding: 5px 9px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.badge {
  color: var(--bai-ink-soft) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--bai-line) !important;
}

.badge.ok,
.social-status-pill.green {
  color: #baf3dd !important;
  background: var(--bai-green-soft) !important;
  border-color: rgba(77, 214, 160, 0.34) !important;
}

.badge.ora,
.social-status-pill.orange {
  color: #ffd5b5 !important;
  background: var(--bai-orange-soft) !important;
  border-color: rgba(255, 155, 82, 0.34) !important;
}

.badge.red,
.social-status-pill.red {
  color: #ffc2c8 !important;
  background: var(--bai-red-soft) !important;
  border-color: rgba(255, 142, 152, 0.34) !important;
}

.list-wrap {
  border: 1px solid var(--bai-line) !important;
  border-radius: var(--bai-radius-md) !important;
  background: var(--bai-surface) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.crm-table,
.b2c-table {
  font-size: 15px !important;
}

.crm-table th,
.b2c-table th {
  min-height: 48px;
  padding: 15px !important;
  color: var(--bai-muted-strong) !important;
  background: var(--bai-surface-raised) !important;
  border-bottom: 1px solid var(--bai-line) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}

.crm-table td,
.b2c-table td {
  padding: 16px 15px !important;
  color: var(--bai-ink-soft) !important;
  border-top-color: var(--bai-line) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.crm-table tbody tr:hover td,
.b2c-table tbody tr:hover td {
  background: rgba(85, 215, 239, 0.055) !important;
}

.crm-thumb-strip {
  gap: 12px !important;
  margin: 8px 0 18px !important;
}

.crm-thumb-card {
  min-height: 220px !important;
  padding: 18px 14px !important;
  background: var(--bai-surface) !important;
  border-color: var(--bai-line) !important;
  border-radius: var(--bai-radius-md) !important;
}

.crm-thumb-card:hover,
.crm-thumb-card.selected {
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.48) !important;
}

.crm-thumb-name {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.crm-thumb-line {
  color: var(--bai-muted) !important;
  font-size: 14px !important;
}

.crm-thumb-action {
  min-height: 42px;
  color: var(--bai-cyan) !important;
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.28) !important;
  font-size: 14px !important;
}

.progress-wrap,
.summary,
.marketing-summary,
.social-summary {
  box-shadow: none !important;
}

.progress-wrap {
  padding: 18px !important;
  background: var(--bai-surface) !important;
  border-color: rgba(255, 155, 82, 0.28) !important;
  border-radius: var(--bai-radius-md) !important;
}

.progress-head {
  color: var(--bai-orange) !important;
  font-size: 15px !important;
}

.progress-sub {
  color: var(--bai-muted) !important;
  font-size: 14px !important;
}

.progress-track {
  height: 10px !important;
  background: var(--bai-bg-raised) !important;
}

.progress-fill {
  background: var(--bai-orange) !important;
}

.ebar {
  padding: 14px 16px !important;
  color: #ffc2c8 !important;
  background: var(--bai-red-soft) !important;
  border-color: rgba(255, 142, 152, 0.34) !important;
  border-radius: var(--bai-radius-sm) !important;
  font-size: 15px !important;
}

.summary,
.marketing-summary,
.social-summary {
  overflow-x: auto !important;
  border-color: var(--bai-line) !important;
}

.summary-box,
.marketing-summary-box,
.social-summary-box {
  min-height: 84px;
  padding: 18px 14px !important;
}

.summary-box strong,
.marketing-summary-box strong,
.social-summary-box strong {
  color: var(--bai-cyan) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  padding: 0 !important;
}

.summary-box span,
.marketing-summary-box span,
.social-summary-box span {
  margin-top: 8px;
  color: var(--bai-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* Documents and B2C */
.doc-tabs,
.b2c-tabs,
.social-tabs {
  gap: 8px !important;
  border-bottom-color: var(--bai-line) !important;
}

.doc-tab,
.b2c-tab,
.social-tab {
  padding: 11px 16px !important;
  border: 1px solid transparent !important;
  border-radius: var(--bai-radius-sm) var(--bai-radius-sm) 0 0 !important;
  color: var(--bai-muted) !important;
}

.doc-tab:hover,
.b2c-tab:hover,
.social-tab:hover,
.doc-tab.active,
.b2c-tab.active,
.social-tab.active {
  color: var(--bai-cyan) !important;
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.28) !important;
}

.doc-template-card,
.doc-preview-wrap {
  padding: 20px !important;
}

.doc-template-card h3,
.docs-panel-title,
.social-graphic-title,
.social-rail-title,
.social-memory-title {
  color: var(--bai-cyan) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.doc-template-card .doc-template-sub,
.doc-preview-title,
.social-week-sub {
  color: var(--bai-muted) !important;
  font-size: 14px !important;
}

.b2c-list-card {
  padding: 20px !important;
}

.b2c-class-row {
  min-height: 76px;
  padding: 16px 8px !important;
  border-top-color: var(--bai-line) !important;
}

.b2c-class-when {
  color: var(--bai-orange) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.b2c-class-meta,
.b2c-class-meta .b2c-class-where,
.b2c-class-when .b2c-class-time {
  color: var(--bai-muted-strong) !important;
  font-size: 14px !important;
}

/* Social and schedule workspace */
.social-tabs {
  margin-bottom: 18px !important;
}

.social-logo-bar,
.social-overlay-bar,
.social-sched-toolbar,
.social-memory-panel,
.social-library-panel,
.social-graphic-panel,
.social-rail {
  background: var(--bai-surface) !important;
  border-color: var(--bai-line) !important;
  border-radius: var(--bai-radius-md) !important;
}

.social-logo-bar,
.social-overlay-bar,
.social-sched-toolbar {
  padding: 16px !important;
}

.social-logo-zone-box {
  width: 76px !important;
  height: 76px !important;
  border-color: var(--bai-line-strong) !important;
  background: var(--bai-surface-soft) !important;
  border-radius: 12px !important;
}

.social-grid {
  gap: 18px !important;
}

.social-post-card {
  min-height: 540px !important;
  padding: 20px !important;
  background: var(--bai-surface) !important;
  border-color: var(--bai-line) !important;
  border-radius: var(--bai-radius-lg) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.social-post-title,
.social-week-title {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.social-post-meta,
.social-caption,
.social-prompt-box,
.social-note-box {
  color: var(--bai-ink-soft) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.social-caption,
.social-prompt-box {
  padding: 14px !important;
}

.social-rail {
  width: 300px !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

.social-rail-header,
.social-rail-filters,
.social-rail-sched-section {
  border-color: var(--bai-line) !important;
}

.social-rail-item {
  min-height: 76px;
  padding: 10px !important;
  background: var(--bai-surface-soft) !important;
  border-color: var(--bai-line) !important;
}

.social-rail-item:hover,
.social-rail-item.is-current {
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.38) !important;
}

.social-rail-date,
.social-mini-date {
  color: var(--bai-cyan) !important;
  font-size: 12px !important;
}

.social-rail-id,
.social-rail-topic,
.social-rail-lane,
.social-rail-badge,
.social-mini-lane,
.social-mini-badge {
  font-size: 12px !important;
}

/* Modals, dialogs, toasts */
.modal-backdrop {
  padding: 24px !important;
  background: rgba(2, 8, 18, 0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.modal,
.social-post-modal {
  max-height: min(90vh, 920px) !important;
  padding: 26px !important;
  background: var(--bai-surface) !important;
  border: 1px solid var(--bai-line-strong) !important;
  border-radius: var(--bai-radius-lg) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42) !important;
}

.modal h3,
.social-modal-title {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}

.modal-sub {
  color: var(--bai-muted) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.modal-topbar {
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
  background: var(--bai-surface) !important;
  border-bottom: 1px solid var(--bai-line) !important;
}

.modal-close-x {
  min-height: 44px !important;
  padding: 10px 14px !important;
  color: var(--bai-ink-soft) !important;
  background: var(--bai-surface-raised) !important;
  border: 1px solid var(--bai-line-strong) !important;
  border-radius: var(--bai-radius-sm) !important;
  font-size: 14px !important;
}

.modal-close-x:hover {
  color: var(--bai-ink) !important;
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.42) !important;
}

.contact-row,
.history-row,
.search-history-row,
.dup-row,
.task-row {
  padding: 14px !important;
  background: var(--bai-surface-soft) !important;
  border-color: var(--bai-line) !important;
  border-radius: var(--bai-radius-sm) !important;
}

.divider-title {
  color: var(--bai-cyan) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}

.toast {
  min-width: min(360px, calc(100vw - 36px)) !important;
  padding: 16px !important;
  background: var(--bai-surface-raised) !important;
  border-color: rgba(77, 214, 160, 0.36) !important;
  border-radius: var(--bai-radius-md) !important;
  box-shadow: var(--bai-shadow) !important;
}

.toast-title {
  color: var(--bai-green) !important;
  font-family: "Syne", sans-serif !important;
  font-size: 16px !important;
  padding: 0 !important;
}

.toast-body {
  color: var(--bai-ink-soft) !important;
  font-size: 14px !important;
}

/* Auth surfaces */
#loginModalWrap .modal,
#recoveryRequestModalWrap .modal,
#recoveryConfirmModalWrap .modal {
  max-width: 480px !important;
}

#loginModalWrap .modal > div:first-child {
  padding-bottom: 6px;
}

#loginModalWrap input,
#recoveryRequestModalWrap input,
#recoveryConfirmModalWrap input {
  min-height: 52px !important;
}

#loginModalWrap .modal h3 {
  text-align: left !important;
}

/* Tablet landscape is the primary operating target. */
@media (max-width: 1180px) {
  .topnav-inner {
    padding-inline: 18px !important;
  }

  .top-links {
    overflow-x: auto !important;
  }

  .top-link {
    flex: 0 0 auto;
  }

  .shell,
  .shell.wide-list-shell {
    width: min(100% - 36px, 1100px) !important;
  }

  .home-split {
    grid-template-columns: 1fr !important;
  }

  .social-p4-layout {
    flex-direction: column !important;
  }

  .social-rail {
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    top: auto !important;
    max-height: 480px !important;
    margin-top: 18px;
  }
}

@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .doc-split,
  .card-columns,
  .results-grid {
    grid-template-columns: 1fr !important;
  }

  .metric-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .social-summary.p2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .topnav-inner {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
  }

  .brand {
    flex: 1 0 auto;
  }

  .nav-status {
    margin-left: auto;
  }

  .top-links {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    padding-bottom: 2px;
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 4px !important;
  }

  .top-link {
    min-height: 48px !important;
  }

  .shell,
  .shell.wide-list-shell {
    width: calc(100% - 28px) !important;
    padding-top: 24px !important;
  }

  .hero {
    padding-bottom: 26px !important;
  }

  .hero h1,
  .hero-title {
    font-size: 34px !important;
    letter-spacing: -1px !important;
  }

  .section-wrap,
  .home-side {
    padding: 18px !important;
  }

  .section-title {
    font-size: 25px !important;
  }

  .section-sub {
    font-size: 15px !important;
  }

  .dashboard-grid,
  .b2c-form-grid,
  .doc-template-grid,
  .social-modal-grid,
  .social-overlay-controls {
    grid-template-columns: 1fr !important;
  }

  .metric-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  .metric {
    min-height: 92px;
  }

  .metric strong {
    font-size: 26px !important;
  }

  .metric span {
    font-size: 12px !important;
  }

  .row2 > * {
    min-width: 100% !important;
  }

  .controls,
  .action-row,
  .lead-bulk-bar,
  .crm-bulk-bar {
    align-items: stretch !important;
  }

  .controls > button,
  .controls > a,
  .action-row > button,
  .action-row > a,
  .lead-bulk-actions > button {
    flex: 1 1 180px;
  }

  .btn-main {
    width: 100% !important;
  }

  .modal-backdrop {
    padding: 12px !important;
  }

  .modal,
  .social-post-modal {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .modal h3,
  .social-modal-title {
    font-size: 21px !important;
  }

  .social-summary,
  .social-summary.p2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .social-post-card {
    min-height: 0 !important;
  }

  .toast-wrap {
    right: 14px !important;
    left: 14px !important;
    bottom: 14px !important;
  }

  .toast {
    min-width: 0 !important;
    max-width: none !important;
  }

  #viewSiteCopy .site-copy-toolbar,
  #viewSiteCopy .site-copy-actions {
    align-items: stretch !important;
  }

  #viewSiteCopy .site-copy-toolbar > *,
  #viewSiteCopy .site-copy-actions > * {
    flex: 1 1 100% !important;
    max-width: none !important;
  }

  #viewSiteCopy #scForm {
    padding-inline: 16px !important;
  }

  #viewSiteCopy #scForm > div[style*="letter-spacing"] {
    margin-inline: -16px !important;
    padding-inline: 16px !important;
  }

}

@media (max-width: 480px) {
  .brand-name {
    font-size: 14px !important;
  }

  #navUserLabel {
    display: none !important;
  }

  .hero-logo img {
    width: 64px !important;
    height: 64px !important;
  }

  .hero h1,
  .hero-title {
    font-size: 30px !important;
  }

  .metric {
    padding: 16px 10px !important;
  }

  .metric strong {
    font-size: 24px !important;
  }

  .station-card {
    min-height: 0 !important;
  }

  .top-link {
    padding-inline: 12px !important;
    font-size: 13px !important;
  }

  .top-links .top-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* An intentional light appearance for users whose system requests it. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bai-bg: #f3f7fb;
    --bai-bg-raised: #ffffff;
    --bai-surface: #ffffff;
    --bai-surface-raised: #f7fafc;
    --bai-surface-soft: rgba(30, 58, 95, 0.035);
    --bai-line: rgba(30, 58, 95, 0.14);
    --bai-line-strong: rgba(30, 58, 95, 0.25);
    --bai-ink: #12243a;
    --bai-ink-soft: #29445f;
    --bai-muted: #587089;
    --bai-muted-strong: #3d5872;
    --bai-shadow: 0 18px 48px rgba(30, 58, 95, 0.12);
    --bai-shadow-soft: 0 4px 16px rgba(30, 58, 95, 0.07);
  }

  body::before {
    opacity: 0.65;
    background-image:
      linear-gradient(rgba(30, 58, 95, 0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30, 58, 95, 0.028) 1px, transparent 1px) !important;
  }

  .topnav {
    background: rgba(255, 255, 255, 0.92) !important;
  }

  .home-side,
  .home-side.b2c-side {
    background: var(--bai-surface) !important;
    background-image: none !important;
  }

  .home-side.b2c-side .home-side-title {
    color: #b66a29 !important;
  }

  .btn-main {
    color: #ffffff !important;
  }

  .bsm.ok,
  .social-status-pill.green {
    color: #176044 !important;
  }

  .bsm.ok:hover {
    color: #0f3f2d !important;
  }

  .station-card.live:hover,
  .crm-thumb-card:hover,
  .crm-thumb-card.selected {
    background: #f0fbfd !important;
  }

  .modal-backdrop {
    background: rgba(18, 36, 58, 0.44) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}