/*
  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: 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-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 18px 48px rgba(30, 58, 95, 0.12);
  --bai-shadow-soft: 0 4px 16px rgba(30, 58, 95, 0.07);
}

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,
.comm-back-link,
.modal-back-control,
.modal-close-x {
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px !important;
  border: 1px solid rgba(85, 215, 239, 0.5) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0b6f91 0%, #1557a6 100%) !important;
  color: #ffffff !important;
  cursor: pointer;
  font: inherit;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(3, 42, 73, 0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
}

.back-link:hover,
.back-btn:hover,
.comm-back-link:hover,
.modal-back-control:hover,
.modal-close-x:hover {
  color: #ffffff !important;
  border-color: #8eeeff !important;
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(3, 42, 73, 0.36), inset 0 1px 0 rgba(255,255,255,0.18);
}

.back-link:focus-visible,
.back-btn:focus-visible,
.comm-back-link:focus-visible,
.modal-back-control:focus-visible,
.modal-close-x:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.95);
  outline-offset: 3px;
}

/* 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-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
  margin-bottom: 16px;
}

.modal-close-x {
  flex: 0 0 auto;
}

.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;
  }
}

/* ============================================================
   Phase 8A — Communications workspace
   Calm operator desk: a clear next action, then record context.
   ============================================================ */
.comm-workspace {
  --comm-ink: var(--bai-ink);
  --comm-ink-soft: var(--bai-ink-soft);
  --comm-muted: var(--bai-muted);
  --comm-line: var(--bai-line);
  --comm-surface: var(--bai-surface);
  --comm-soft: #f4f8fb;
  --comm-cyan-ink: #17677a;
  --comm-orange-ink: var(--bai-orange-ink);
  width: 100%;
  color: var(--comm-ink);
}

.comm-back-row,
.comm-header,
.comm-layout {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.comm-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  margin-bottom: 14px;
}

.comm-text-action,
.comm-inline-action {
  border: 0;
  background: transparent;
  color: var(--comm-cyan-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  text-align: left;
}

.comm-back-link {
  flex: 0 0 auto;
}

.comm-back-link::before {
  content: none;
}

.comm-back-link:hover,
.comm-text-action:hover,
.comm-inline-action:hover {
  color: var(--bai-orange-ink);
  text-decoration: underline;
}

.comm-context-note,
.comm-panel-count {
  color: var(--comm-muted);
  font-size: 12px;
  font-weight: 700;
}

.comm-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 12px 0 24px;
}

.comm-header > div:first-child {
  max-width: 760px;
}

.comm-eyebrow,
.comm-card-kicker {
  color: var(--comm-cyan-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.comm-header h1 {
  margin: 8px 0 10px;
  color: var(--comm-ink) !important;
  font-family: "Syne", sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -1.3px;
  line-height: 1.02;
}

.comm-header p {
  max-width: 700px;
  color: var(--comm-muted);
  font-size: 16px;
  line-height: 1.55;
}

.comm-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.comm-header-actions .bsm {
  min-height: 46px !important;
}

.comm-source-note {
  width: min(100%, 1240px);
  margin: 0 auto 18px;
  padding: 11px 14px;
  border: 1px solid rgba(85, 215, 239, .28);
  border-radius: 10px;
  background: rgba(85, 215, 239, .08);
  color: var(--comm-cyan-ink);
  font-size: 13px;
  line-height: 1.45;
}

.comm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(285px, .75fr);
  gap: 18px;
  align-items: start;
}

.comm-main-column,
.comm-side-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.comm-next-card,
.comm-panel,
.comm-safety-panel {
  border: 1px solid var(--comm-line);
  border-radius: var(--bai-radius-lg);
  background: var(--comm-surface);
  box-shadow: var(--bai-shadow-soft);
}

.comm-next-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-color: rgba(255, 155, 82, .32);
  background: linear-gradient(145deg, #fffdfb, #fff8f2);
}

.comm-next-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--bai-orange-strong);
}

.comm-card-kicker {
  margin-bottom: 10px;
}

.comm-next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(190px, .55fr);
  gap: 24px;
}

.comm-next-grid h3 {
  margin: 13px 0 4px;
  color: var(--comm-ink) !important;
  font-family: "Syne", sans-serif;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.12;
}

.comm-next-detail {
  max-width: 680px;
  color: var(--comm-muted);
  font-size: 15px;
  line-height: 1.5;
}

.comm-action-state,
.comm-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--comm-line);
  border-radius: 999px;
  background: var(--comm-soft);
  color: var(--comm-muted-strong);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.comm-action-state.followup,
.comm-status-chip.followup {
  border-color: rgba(255, 155, 82, .42);
  background: var(--bai-orange-soft);
  color: var(--comm-orange-ink);
}

.comm-action-state.email,
.comm-status-chip.email,
.comm-action-state.schedule,
.comm-status-chip.schedule {
  border-color: rgba(85, 215, 239, .42);
  background: var(--bai-cyan-soft);
  color: var(--comm-cyan-ink);
}

.comm-action-state.sms,
.comm-status-chip.sms {
  border-color: rgba(77, 214, 160, .42);
  background: var(--bai-green-soft);
  color: var(--bai-green-ink);
}

.comm-context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.comm-context-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(30, 58, 95, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .62);
}

.comm-context-grid span,
.comm-status-row span {
  display: block;
  color: var(--comm-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.comm-context-grid strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--comm-ink-soft);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-sequence-note {
  margin-top: 12px;
  color: var(--comm-orange-ink);
  font-size: 13px;
  font-weight: 750;
}

.comm-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.comm-action-button {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--comm-line-strong);
  border-radius: 10px;
  background: var(--comm-surface);
  color: var(--comm-ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.comm-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(85, 215, 239, .55);
  background: var(--bai-cyan-soft);
  color: var(--comm-cyan-ink);
}

.comm-action-button.is-primary {
  border-color: var(--bai-orange-strong);
  background: var(--bai-orange-strong);
  color: #211307;
}

.comm-action-button.is-primary:hover {
  border-color: #ffac69;
  background: #ffac69;
  color: #211307;
}

.comm-action-button.is-danger {
  border-color: rgba(255, 142, 152, .38);
  background: var(--bai-red-soft);
  color: var(--bai-red-ink);
}

.comm-action-button.is-danger:hover {
  border-color: rgba(255, 142, 152, .58);
  background: rgba(255, 142, 152, .18);
  color: var(--bai-red-ink);
}

.comm-next-aside {
  align-self: stretch;
  padding: 14px;
  border-left: 1px solid rgba(164, 85, 32, .18);
}

.comm-next-aside-label {
  color: var(--comm-orange-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.comm-next-aside p {
  margin: 9px 0 16px;
  color: var(--comm-muted);
  font-size: 13px;
  line-height: 1.55;
}

.comm-panel {
  padding: 20px;
}

.comm-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.comm-panel h2,
.comm-safety-panel h2 {
  margin: 0;
  color: var(--comm-ink) !important;
  font-family: "Syne", sans-serif;
  font-size: 21px;
  line-height: 1.2;
}

.comm-work-list,
.comm-history-list {
  display: grid;
  gap: 9px;
}

.comm-work-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--comm-line);
}

.comm-work-row:first-child,
.comm-history-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.comm-work-index {
  align-self: start;
  color: var(--comm-muted);
  font-family: "Syne", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.comm-work-copy,
.comm-history-copy {
  min-width: 0;
}

.comm-work-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.comm-work-title strong,
.comm-history-copy strong {
  color: var(--comm-ink);
  font-size: 15px;
  line-height: 1.3;
}

.comm-work-copy p {
  overflow: hidden;
  margin: 4px 0 3px;
  color: var(--comm-ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-work-copy small {
  color: var(--comm-muted);
  font-size: 12px;
}

.comm-work-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.comm-work-actions .comm-action-button {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 12px;
}

.comm-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0;
}

.comm-stat {
  padding: 12px;
  border: 1px solid var(--comm-line);
  border-radius: 11px;
  background: var(--comm-soft);
}

.comm-stat strong {
  display: block;
  color: var(--comm-ink);
  font-family: "Syne", sans-serif;
  font-size: 23px;
  line-height: 1.1;
}

.comm-stat strong.is-unavailable {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.comm-stat span {
  display: block;
  margin-top: 6px;
  color: var(--comm-muted);
  font-size: 11px;
  line-height: 1.3;
}

.comm-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid var(--comm-line);
}

.comm-status-row strong {
  color: var(--comm-ink-soft);
  font-size: 13px;
  text-align: right;
}

.comm-tools-panel h2 {
  margin-bottom: 14px;
}

.comm-tool-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--comm-line);
  background: transparent;
  color: var(--comm-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.comm-tool-row:hover strong {
  color: var(--comm-cyan-ink);
}

.comm-tool-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(85, 215, 239, .32);
  border-radius: 10px;
  background: var(--bai-cyan-soft);
  color: var(--comm-cyan-ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
}

.comm-tool-row strong,
.comm-tool-row small {
  display: block;
}

.comm-tool-row strong {
  font-size: 14px;
  line-height: 1.3;
}

.comm-tool-row small {
  margin-top: 3px;
  color: var(--comm-muted);
  font-size: 12px;
  line-height: 1.4;
}

.comm-safety-panel {
  padding: 20px;
  border-color: rgba(255, 155, 82, .28);
  background: #fffaf5;
}

.comm-safety-panel p {
  margin-top: 10px;
  color: var(--comm-muted);
  font-size: 13px;
  line-height: 1.55;
}

.comm-history-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  gap: 11px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--comm-line);
}

.comm-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bai-cyan);
}

.comm-history-copy span,
.comm-history-copy p {
  display: block;
}

.comm-history-copy span {
  margin-top: 2px;
  color: var(--comm-cyan-ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}

.comm-history-copy p {
  margin-top: 3px;
  color: var(--comm-muted);
  font-size: 13px;
  line-height: 1.4;
}

.comm-history-row time {
  color: var(--comm-muted);
  font-size: 11px;
  white-space: nowrap;
}

.comm-history-row .comm-text-action {
  font-size: 12px;
  white-space: nowrap;
}

.comm-list-foot {
  padding-top: 10px;
  color: var(--comm-muted);
  font-size: 12px;
}

.comm-empty {
  display: grid;
  gap: 7px;
  padding: 20px 4px 4px;
  color: var(--comm-muted);
  font-size: 13px;
  line-height: 1.5;
}

.comm-empty-strong {
  padding: 8px 0;
}

.comm-empty strong {
  color: var(--comm-ink-soft);
  font-size: 15px;
}

.comm-loading-block {
  display: grid;
  gap: 10px;
  max-width: 560px;
}

.comm-loading-block span {
  display: block;
  height: 14px;
  border-radius: 5px;
  background: #eef3f6;
  animation: comm-skeleton 1.2s ease-in-out infinite;
}

.comm-loading-block span:nth-child(1) { width: 38%; height: 28px; }
.comm-loading-block span:nth-child(2) { width: 78%; }
.comm-loading-block span:nth-child(3) { width: 62%; }

@keyframes comm-skeleton {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 980px) {
  .comm-layout {
    grid-template-columns: 1fr;
  }

  .comm-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .comm-safety-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .comm-header {
    display: block;
    padding-top: 6px;
  }

  .comm-header-actions {
    justify-content: flex-start;
    margin-top: 18px;
  }

  .comm-next-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .comm-next-aside {
    padding: 14px 0 0;
    border-top: 1px solid rgba(164, 85, 32, .18);
    border-left: 0;
  }

  .comm-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comm-work-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .comm-work-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .comm-side-column {
    grid-template-columns: 1fr;
  }

  .comm-safety-panel {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .comm-back-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .comm-context-note {
    padding-bottom: 8px;
  }

  .comm-header h1 {
    font-size: 38px;
  }

  .comm-header-actions,
  .comm-header-actions .bsm,
  .comm-action-row,
  .comm-action-row .comm-action-button {
    width: 100%;
  }

  .comm-header-actions .bsm,
  .comm-action-row .comm-action-button {
    flex: 1 1 100%;
  }

  .comm-next-card,
  .comm-panel,
  .comm-safety-panel {
    padding: 16px;
  }

  .comm-context-grid {
    grid-template-columns: 1fr;
  }

  .comm-context-grid strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .comm-history-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .comm-history-row time,
  .comm-history-row .comm-text-action {
    grid-column: 2;
    justify-self: start;
  }
}

/* ============================================================
   Phase 7 Settings consolidation
   A single operator launchpad; existing modals and workspaces own
   the detailed forms, data, permissions, and status checks.
   ============================================================ */
#viewSettings {
  max-width: 1040px;
  margin: 0 auto;
}

.settings-intro {
  padding: 4px 0 28px;
}

.settings-back-row {
  min-height: 38px;
  margin-bottom: 24px !important;
}

.settings-role-note {
  color: var(--bai-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.settings-kicker,
.settings-section-kicker {
  color: var(--bai-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-transform: uppercase;
}

.settings-title {
  margin-top: 8px;
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.05;
  padding: 0;
}

.settings-lede {
  max-width: 690px;
  margin-top: 12px;
  color: var(--bai-muted);
  font-size: 17px;
  line-height: 1.55;
}

.settings-section {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-lg);
  background: var(--bai-surface);
  box-shadow: var(--bai-shadow-soft);
}

.settings-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.settings-section-head h2 {
  margin-top: 7px;
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
  padding: 0;
}

.settings-section-note {
  padding: 6px 9px;
  border: 1px solid rgba(85, 215, 239, 0.24);
  border-radius: 999px;
  color: var(--bai-cyan);
  background: var(--bai-cyan-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-launch-list {
  display: grid;
  gap: 10px;
}

.settings-launch-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-md);
  background: var(--bai-surface-raised);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.settings-launch-row:hover {
  border-color: rgba(85, 215, 239, 0.36);
  background: #f8fcfe;
  transform: translateY(-1px);
}

.settings-launch-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bai-line);
  border-radius: 12px;
  font-family: "Syne", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.settings-mark-cyan {
  color: #147f99;
  border-color: rgba(85, 215, 239, 0.34);
  background: var(--bai-cyan-soft);
}

.settings-mark-slate {
  color: var(--bai-muted-strong);
  background: rgba(88, 112, 137, 0.08);
}

.settings-mark-orange {
  color: #b65b23;
  border-color: rgba(255, 155, 82, 0.34);
  background: var(--bai-orange-soft);
}

.settings-launch-copy {
  min-width: 0;
}

.settings-launch-copy h3 {
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  padding: 0;
}

.settings-launch-copy p {
  margin-top: 6px;
  color: var(--bai-ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.settings-launch-copy small {
  display: block;
  margin-top: 6px;
  color: var(--bai-muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-launch-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-launch-button {
  min-width: 126px;
  white-space: nowrap;
}

.settings-status-inline {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--bai-line);
  border-radius: 999px;
  color: var(--bai-muted);
  background: var(--bai-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.settings-status-inline.connected {
  color: #16815e;
  border-color: rgba(77, 214, 160, 0.36);
  background: var(--bai-green-soft);
}

.settings-status-inline.disconnected,
.settings-status-inline.pending {
  color: var(--bai-muted-strong);
  border-color: var(--bai-line-strong);
  background: rgba(148, 163, 184, 0.08);
}

.settings-status-inline.error {
  color: #b94c5a;
  border-color: rgba(255, 142, 152, 0.38);
  background: var(--bai-red-soft);
}

.settings-context {
  margin-top: 4px;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-md);
  background: rgba(255, 255, 255, 0.58);
}

.settings-context summary {
  padding: 15px 18px;
  color: var(--bai-ink-soft);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style-position: inside;
}

.settings-context summary:hover {
  color: var(--bai-cyan);
}

.settings-context-body {
  max-width: 850px;
  padding: 0 18px 17px 37px;
  color: var(--bai-muted);
  font-size: 13px;
  line-height: 1.55;
}

.settings-context-body p + p {
  margin-top: 8px;
}

@media (max-width: 720px) {
  #viewSettings {
    width: 100%;
  }

  .settings-intro {
    padding-bottom: 22px;
  }

  .settings-back-row {
    align-items: flex-start;
    margin-bottom: 20px !important;
  }

  .settings-role-note {
    max-width: 180px;
    font-size: 12px;
  }

  .settings-lede {
    font-size: 16px;
  }

  .settings-section {
    padding: 16px;
  }

  .settings-section-head {
    align-items: flex-start;
  }

  .settings-launch-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .settings-launch-mark {
    width: 40px;
    height: 40px;
  }

  .settings-launch-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 2px;
  }

  .settings-launch-button {
    flex: 1 1 150px;
  }

  .settings-status-inline {
    flex: 0 1 auto;
  }
}

/* Phase 6 — relationship workspace. This is an orientation layer above the
   existing CRM and coaching administration surfaces; it does not replace them. */
.relationship-surface {
  margin: 0 0 18px;
  padding: 22px;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-lg);
  background:
    linear-gradient(145deg, rgba(85, 215, 239, 0.07), transparent 38%),
    var(--bai-surface);
  box-shadow: var(--bai-shadow-soft);
}

.relationship-surface-b2c {
  background:
    linear-gradient(145deg, rgba(255, 155, 82, 0.08), transparent 38%),
    var(--bai-surface);
  border-color: rgba(255, 155, 82, 0.26);
}

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

.relationship-kicker,
.relationship-eyebrow,
.relationship-panel-label,
.relationship-next-label {
  display: block;
  color: var(--bai-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.relationship-surface-b2c .relationship-kicker,
.relationship-surface-b2c .relationship-eyebrow {
  color: var(--bai-orange-ink, #bb5d24);
}

.relationship-head h2 {
  max-width: 680px;
  margin-top: 6px;
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.relationship-head p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--bai-muted);
  font-size: 14px;
  line-height: 1.5;
}

.relationship-table-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.relationship-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.relationship-picker,
.relationship-detail {
  min-width: 0;
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-md);
  background: var(--bai-surface-raised);
}

.relationship-picker {
  padding: 14px;
}

.relationship-panel-label {
  margin: 2px 2px 12px;
  color: var(--bai-muted-strong);
  letter-spacing: 0.08em;
}

.relationship-picker-list {
  display: grid;
  gap: 7px;
}

.relationship-person {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--bai-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.relationship-person:hover {
  background: var(--bai-cyan-soft);
  border-color: rgba(85, 215, 239, 0.28);
  transform: translateX(2px);
}

.relationship-surface-b2c .relationship-person:hover,
.relationship-surface-b2c .relationship-person.is-selected {
  background: var(--bai-orange-soft);
  border-color: rgba(255, 155, 82, 0.34);
}

.relationship-person.is-selected {
  background: var(--bai-cyan-soft);
  border-color: rgba(85, 215, 239, 0.4);
}

.relationship-person-name {
  overflow: hidden;
  color: var(--bai-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relationship-person-meta,
.relationship-person-status {
  min-width: 0;
  overflow: hidden;
  color: var(--bai-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relationship-person-status {
  grid-column: 1 / -1;
  color: var(--bai-cyan);
  font-weight: 750;
}

.relationship-surface-b2c .relationship-person-status {
  color: var(--bai-orange-ink, #bb5d24);
}

.relationship-picker-more {
  margin: 12px 2px 0;
}

.relationship-detail {
  padding: 18px;
}

.relationship-detail-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bai-line);
}

.relationship-detail h3 {
  margin-top: 5px;
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.4px;
  line-height: 1.1;
}

.relationship-detail-top p {
  max-width: 620px;
  margin-top: 6px;
  color: var(--bai-muted);
  font-size: 14px;
}

.relationship-status-stack {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 6px;
}

.relationship-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--bai-line-strong);
  border-radius: 999px;
  color: var(--bai-muted-strong);
  background: var(--bai-surface-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.relationship-pill.is-positive {
  color: #187653;
  background: var(--bai-green-soft);
  border-color: rgba(77, 214, 160, 0.34);
}

.relationship-pill.is-attention {
  color: var(--bai-orange-ink, #bb5d24);
  background: var(--bai-orange-soft);
  border-color: rgba(255, 155, 82, 0.36);
}

.relationship-pill.is-negative {
  color: #a23e4a;
  background: var(--bai-red-soft);
  border-color: rgba(255, 142, 152, 0.34);
}

.relationship-context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 0;
}

.relationship-context-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--bai-line);
  border-radius: 10px;
  background: var(--bai-surface-soft);
}

.relationship-context-grid span,
.relationship-context-grid strong {
  display: block;
}

.relationship-context-grid span {
  margin-bottom: 5px;
  color: var(--bai-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.relationship-context-grid strong {
  overflow-wrap: anywhere;
  color: var(--bai-ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.relationship-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 16px;
  padding-top: 2px;
}

.relationship-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--bai-ink);
  font-size: 14px;
  font-weight: 800;
}

.relationship-section-title small {
  color: var(--bai-muted);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.relationship-activity-list,
.relationship-outstanding-list {
  display: grid;
  gap: 7px;
}

.relationship-activity-row,
.relationship-outstanding-row {
  display: grid;
  align-items: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--bai-line);
  border-radius: 10px;
  background: var(--bai-surface-soft);
}

.relationship-activity-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
}

.relationship-activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--bai-cyan);
}

.relationship-activity-row strong,
.relationship-outstanding-row strong {
  display: block;
  color: var(--bai-ink-soft);
  font-size: 13px;
  line-height: 1.3;
}

.relationship-activity-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.relationship-activity-title strong {
  display: inline;
}

.email-status-pill,
.ih-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bai-line);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--bai-muted);
  background: var(--bai-surface);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .35px;
  line-height: 1.2;
  text-transform: uppercase;
}

.email-status-delivered,
.email-status-opened,
.email-status-clicked,
.email-status-accepted {
  color: #087f5b;
  border-color: rgba(8,127,91,.24);
  background: rgba(8,127,91,.08);
}

.email-status-bounced,
.email-status-dropped,
.email-status-spam_report,
.email-status-unsubscribe {
  color: #b42318;
  border-color: rgba(180,35,24,.24);
  background: rgba(180,35,24,.07);
}

.email-status-unsubscribed {
  color: #b42318;
  border-color: rgba(180,35,24,.24);
  background: rgba(180,35,24,.07);
}

.email-status-deferred {
  color: #9a6700;
  border-color: rgba(154,103,0,.24);
  background: rgba(154,103,0,.08);
}

.relationship-activity-dot-email {
  background: #0f9f78;
}

.relationship-activity-row p,
.relationship-outstanding-row span,
.relationship-activity-row time {
  display: block;
  margin-top: 3px;
  color: var(--bai-muted);
  font-size: 12px;
  line-height: 1.4;
}

.relationship-activity-row time {
  margin-top: 0;
  white-space: nowrap;
}

.relationship-outstanding-row {
  grid-template-columns: 8px minmax(0, 1fr);
}

.relationship-outstanding-mark {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--bai-cyan);
}

.relationship-outstanding-mark.is-attention { background: var(--bai-orange); }
.relationship-outstanding-mark.is-negative { background: var(--bai-red); }
.relationship-outstanding-mark.is-positive { background: var(--bai-green); }

.relationship-note {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--bai-line);
  border-radius: 10px;
  background: var(--bai-surface-soft);
  color: var(--bai-ink-soft);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.relationship-muted {
  color: var(--bai-muted);
  font-size: 12px;
  line-height: 1.45;
}

.relationship-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bai-line);
}

.relationship-next {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(85, 215, 239, 0.26);
  border-radius: 10px;
  background: var(--bai-cyan-soft);
}

.relationship-surface-b2c .relationship-next {
  border-color: rgba(255, 155, 82, 0.3);
  background: var(--bai-orange-soft);
}

.relationship-next-label {
  flex: 0 0 auto;
  color: var(--bai-muted-strong);
  letter-spacing: 0.08em;
}

.relationship-next strong {
  flex: 1 1 220px;
  color: var(--bai-ink);
  font-size: 13px;
}

.relationship-empty {
  padding: 22px;
  border: 1px dashed var(--bai-line-strong);
  border-radius: var(--bai-radius-md);
  background: var(--bai-surface-soft);
}

.relationship-empty h2 {
  margin-top: 6px;
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: 22px;
}

.relationship-empty p {
  margin-top: 6px;
  color: var(--bai-muted);
  font-size: 13px;
}

.relationship-skeleton {
  display: grid;
  gap: 9px;
}

.relationship-skeleton span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(85, 215, 239, 0.14);
  animation: relationship-skeleton-pulse 1.25s ease-in-out infinite;
}

.relationship-skeleton span:nth-child(1) { width: 34%; height: 16px; }
.relationship-skeleton span:nth-child(2) { width: 68%; }
.relationship-skeleton span:nth-child(3) { width: 52%; }

@keyframes relationship-skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

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

  .relationship-picker-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .relationship-person {
    flex: 0 0 190px;
  }
}

@media (max-width: 640px) {
  .relationship-surface {
    padding: 15px;
    border-radius: 14px;
  }

  .relationship-head,
  .relationship-detail-top {
    display: block;
  }

  .relationship-table-link {
    width: 100%;
    margin-top: 14px;
  }

  .relationship-status-stack {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .relationship-detail {
    padding: 14px;
  }

  .relationship-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .relationship-columns {
    grid-template-columns: 1fr;
  }

  .relationship-activity-row {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .relationship-activity-row time {
    grid-column: 2;
  }

  .relationship-actions .bsm {
    flex: 1 1 140px;
  }
}

@media (max-width: 420px) {
  .relationship-context-grid {
    grid-template-columns: 1fr;
  }

  .relationship-head h2 {
    font-size: 23px;
  }
}

/* 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;
  }
}

/* ============================================================
   Phase 1 Home Foundation
   Scoped Home-only composition. Existing view IDs, handlers, and
   server-backed widgets remain the source of truth.
   ============================================================ */
.home-hero.hero {
  width: 100%;
  max-width: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  gap: 30px;
  align-items: end;
  margin-bottom: 22px;
  padding: 26px 28px 28px !important;
  border: 1px solid rgba(85, 215, 239, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(85, 215, 239, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(16, 29, 46, 0.98), rgba(7, 16, 29, 0.96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  text-align: left !important;
}

.home-hero-copy {
  min-width: 0;
}

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

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

.home-eyebrow,
.home-section-kicker {
  color: var(--bai-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-hero .hero-title {
  max-width: 760px;
  margin-top: 10px;
  font-size: clamp(36px, 5vw, 58px) !important;
  letter-spacing: -2px !important;
}

.home-hero-sub {
  max-width: 680px;
  margin: 16px 0 0;
  color: var(--bai-ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.home-hero .hero-pill {
  display: inline-flex;
  margin-top: 18px !important;
}

.home-command-form {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(85, 215, 239, 0.24);
  border-radius: 16px;
  background: rgba(7, 16, 29, 0.5);
}

.home-command-label {
  display: block;
  margin-bottom: 10px;
  color: var(--bai-ink);
  font-size: 14px;
  font-weight: 800;
}

.home-command-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.home-command-input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 54px;
  padding: 14px 15px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 10px;
  background: rgba(11, 22, 38, 0.94);
  color: var(--bai-ink);
  font: inherit;
  font-size: 16px;
}

.home-command-input::placeholder {
  color: #8ea3ba;
}

.home-command-input:focus {
  border-color: var(--bai-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(85, 215, 239, 0.14);
}

.home-command-submit {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 12px 17px;
  border: 1px solid var(--bai-orange-strong);
  border-radius: 10px;
  background: var(--bai-orange-strong);
  color: #1b1108;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.home-command-submit:hover {
  background: #ffac69;
  transform: translateY(-1px);
}

.home-command-help {
  margin-top: 10px;
  color: var(--bai-muted);
  font-size: 12px;
  line-height: 1.45;
}

.home-command-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.home-command-examples button {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(85, 215, 239, 0.22);
  border-radius: 999px;
  background: rgba(85, 215, 239, 0.08);
  color: var(--bai-ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.home-command-examples button:hover {
  border-color: rgba(85, 215, 239, 0.52);
  color: var(--bai-cyan);
}

.home-command-status {
  min-height: 20px;
  margin-top: 10px;
  color: var(--bai-cyan);
  font-size: 12px;
  line-height: 1.45;
}

.home-panel,
.home-status-card,
.home-stations {
  border: 1px solid var(--bai-line);
  border-radius: var(--bai-radius-lg);
  background: rgba(11, 22, 38, 0.76);
  box-shadow: var(--bai-shadow-soft);
}

.home-panel {
  padding: 20px;
}

.home-panel-head,
.home-status-head,
.home-stations-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.home-panel h2,
.home-status-card h2,
.home-stations h2 {
  margin: 4px 0 0;
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.home-panel-note {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--bai-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.home-quick-actions {
  margin-bottom: 22px;
  border-color: rgba(255, 155, 82, 0.22);
}

.home-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.home-action {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid var(--bai-line);
  border-radius: 13px;
  background: var(--bai-surface);
  color: var(--bai-ink);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.home-action:hover {
  background: var(--bai-surface-raised);
  border-color: rgba(85, 215, 239, 0.44);
  transform: translateY(-2px);
}

.home-action-primary {
  border-color: rgba(85, 215, 239, 0.42);
  background: linear-gradient(135deg, rgba(85, 215, 239, 0.14), var(--bai-surface));
}

.home-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(85, 215, 239, 0.3);
  border-radius: 11px;
  background: var(--bai-cyan-soft);
  color: var(--bai-cyan);
  font-size: 18px;
  font-weight: 800;
}

.home-action strong,
.home-action small {
  display: block;
  min-width: 0;
}

.home-action strong {
  overflow: hidden;
  color: var(--bai-ink);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-action small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--bai-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-action-arrow,
.home-list-arrow {
  color: var(--bai-cyan);
  font-size: 18px;
  font-weight: 800;
  text-align: right;
}

.home-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 18px;
  margin-bottom: 22px;
}

.home-attention-panel {
  border-color: rgba(255, 155, 82, 0.28);
}

.home-list {
  display: grid;
  gap: 8px;
  margin-top: 17px;
}

.home-list-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 18px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid var(--bai-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--bai-ink);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.home-list-row:hover {
  background: rgba(85, 215, 239, 0.07);
  border-color: rgba(85, 215, 239, 0.34);
}

.home-list-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bai-cyan);
  box-shadow: 0 0 10px rgba(85, 215, 239, 0.55);
}

.home-list-row.tone-orange .home-list-mark {
  background: var(--bai-orange);
  box-shadow: 0 0 10px rgba(255, 155, 82, 0.55);
}

.home-list-row.tone-yellow .home-list-mark {
  background: var(--bai-yellow);
  box-shadow: 0 0 10px rgba(247, 207, 113, 0.45);
}

.home-list-copy {
  min-width: 0;
}

.home-list-copy strong,
.home-list-copy small {
  display: block;
}

.home-list-copy strong {
  overflow: hidden;
  color: var(--bai-ink);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--bai-muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-count {
  min-width: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bai-cyan-soft);
  color: var(--bai-cyan);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.home-list-empty {
  min-height: 62px;
  padding: 18px 14px;
  border: 1px dashed var(--bai-line-strong);
  border-radius: 11px;
  color: var(--bai-muted);
  font-size: 13px;
  line-height: 1.5;
}

.home-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.home-status-card {
  padding: 18px;
}

.b2c-status-card {
  border-color: rgba(255, 155, 82, 0.28);
  background: linear-gradient(135deg, rgba(255, 155, 82, 0.07), rgba(11, 22, 38, 0.76));
}

.b2c-status-card .home-section-kicker,
.b2c-status-card .home-inline-link {
  color: var(--bai-orange);
}

.home-inline-link {
  min-height: 42px;
  padding: 8px 0 8px 10px;
  border: 0;
  background: transparent;
  color: var(--bai-cyan);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.home-inline-link:hover {
  color: var(--bai-ink);
}

.home-metric-bar {
  margin: 18px 0 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.home-metric-bar .metric {
  min-height: 86px;
  padding: 14px 10px !important;
}

.home-metric-bar .metric-action {
  display: block;
  width: 100%;
  border: 0;
  border-right: 1px solid var(--bai-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 100ms ease;
}

.home-metric-bar .metric-action:last-child {
  border-right: 0;
}

.home-metric-bar .metric-action:hover {
  background: rgba(125, 211, 252, 0.09);
  color: var(--bai-ink);
}

.home-metric-bar .metric-action:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(125, 211, 252, 0.6);
  outline-offset: -3px;
}

.home-metric-bar .metric-action:active {
  background: rgba(125, 211, 252, 0.16);
  box-shadow: inset 0 2px 0 rgba(125, 211, 252, 0.28);
  transform: translateY(1px);
}

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

.b2c-filter-context {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 10px;
  background: rgba(251, 146, 60, 0.07);
  color: var(--bai-muted);
  font-size: 12px;
}

.b2c-filter-context strong {
  color: var(--bai-orange);
}

.b2c-filter-context span {
  flex: 1 1 220px;
}

.home-stations {
  padding: 22px;
  background: rgba(7, 16, 29, 0.38);
}

.home-stations-head {
  margin-bottom: 19px;
}

.home-stations-head p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--bai-muted);
  font-size: 14px;
}

.home-station-group {
  padding-top: 18px;
  border-top: 1px solid var(--bai-line);
}

.home-station-group + .home-station-group {
  margin-top: 24px;
}

.home-station-group .home-side-head {
  padding: 0 0 14px !important;
  margin-bottom: 14px !important;
}

.home-station-group .home-side-title {
  font-size: 18px !important;
}

.home-station-group .dashboard-grid {
  gap: 12px !important;
}

.home-station-group .station-card {
  min-height: 188px !important;
  padding: 16px !important;
}

.home-station-group .station-icon {
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 11px !important;
  font-size: 17px !important;
}

.home-station-group .station-title {
  font-size: 16px !important;
}

.home-station-group .station-desc {
  font-size: 13px !important;
}

.home-station-group .station-mini {
  min-height: 57px !important;
  padding: 9px 8px !important;
}

.home-station-group .station-mini strong {
  font-size: 18px !important;
}

.home-station-bookings {
  margin-top: 12px !important;
}

@media (max-width: 1120px) {
  .home-hero.hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: 20px;
    padding-inline: 22px !important;
  }

  .home-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .home-hero.hero,
  .home-work-grid,
  .home-status-grid {
    grid-template-columns: 1fr;
  }

  .home-hero.hero {
    align-items: stretch;
  }
}

@media (max-width: 720px) {
  .home-hero.hero {
    gap: 20px;
    padding: 20px 16px 17px !important;
    border-radius: 17px;
  }

  .home-hero .hero-title {
    font-size: 34px !important;
    letter-spacing: -1.1px !important;
  }

  .home-hero-sub {
    font-size: 14px;
  }

  .home-command-form,
  .home-panel,
  .home-status-card,
  .home-stations {
    padding: 16px;
  }

  .home-command-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-command-submit {
    width: 100%;
  }

  .home-actions-grid {
    grid-template-columns: 1fr;
  }

  .home-action {
    min-height: 72px;
  }

  .home-panel-head,
  .home-status-head,
  .home-stations-head {
    gap: 10px;
  }

  .home-panel h2,
  .home-status-card h2,
  .home-stations h2 {
    font-size: 20px;
  }

  .home-panel-note {
    white-space: normal;
    text-align: right;
  }

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

  .home-metric-bar .metric {
    min-height: 82px;
  }

  .home-list-row {
    grid-template-columns: 10px minmax(0, 1fr) auto 18px;
    padding-inline: 10px;
  }

  .home-list-copy small,
  .home-action small {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .home-hero .hero-logo img {
    width: 52px !important;
    height: 52px !important;
  }

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

  .home-command-examples {
    gap: 6px;
  }

  .home-command-examples button {
    flex: 1 1 45%;
    min-width: 0;
  }

  .home-action {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    gap: 9px;
  }

  .home-action-icon {
    width: 38px;
    height: 38px;
  }
}

/* ============================================================
   Phase 2 Navigation + application shell
   Light operator shell; existing workspace views remain intact.
   ============================================================ */
body.light-shell {
  background: var(--bai-bg) !important;
  color: var(--bai-ink) !important;
}

body.light-shell::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-inner {
  position: relative;
  min-height: 68px !important;
  height: auto !important;
  padding: 10px 24px !important;
}

.topnav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: var(--bai-line) !important;
  box-shadow: 0 1px 0 rgba(30, 58, 95, 0.04), 0 12px 30px rgba(30, 58, 95, 0.08) !important;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
}

.primary-nav > .top-link,
.nav-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px !important;
  padding: 9px 12px !important;
  color: var(--bai-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.primary-nav > .top-link:hover,
.nav-menu-trigger:hover {
  color: var(--bai-ink) !important;
  background: rgba(85, 215, 239, 0.08) !important;
}

.primary-nav > .top-link.active,
.nav-menu-group > .nav-menu-trigger.active {
  color: #123a50 !important;
  background: rgba(85, 215, 239, 0.18) !important;
  border-color: rgba(24, 151, 180, 0.28) !important;
}

.nav-menu-group {
  position: relative;
  flex: 0 0 auto;
}

.nav-menu-trigger .nav-caret {
  color: var(--bai-muted);
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}

.nav-menu-group.open > .nav-menu-trigger .nav-caret {
  transform: rotate(180deg) translateY(1px);
}

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  width: 270px;
  padding: 8px;
  border: 1px solid var(--bai-line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 45px rgba(30, 58, 95, 0.18);
}

.nav-menu-align-right {
  right: 0;
  left: auto;
}

.nav-menu-group.open > .nav-menu {
  display: grid;
  gap: 2px;
}

.nav-menu-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--bai-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-menu-item:hover,
.nav-menu-item:focus-visible {
  background: rgba(85, 215, 239, 0.10);
  border-color: rgba(85, 215, 239, 0.24);
}

.nav-menu-item strong {
  color: var(--bai-ink);
  font-size: 13px;
  line-height: 1.25;
}

.nav-menu-item small {
  color: var(--bai-muted);
  font-size: 11px;
  line-height: 1.35;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--bai-line-strong);
  border-radius: 10px;
  background: var(--bai-surface);
  color: var(--bai-ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: rgba(85, 215, 239, 0.45);
  color: #17647a;
}

.nav-toggle-icon {
  font-size: 17px;
  line-height: 1;
}

.nav-status {
  color: var(--bai-green) !important;
}

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

#navLogoutBtn {
  min-height: 40px !important;
  color: var(--bai-muted) !important;
}

#navLogoutBtn:hover {
  color: var(--bai-ink) !important;
}

body.light-shell .home-hero.hero {
  border-color: rgba(85, 215, 239, 0.28);
  background:
    radial-gradient(circle at 8% 0%, rgba(85, 215, 239, 0.16), transparent 40%),
    linear-gradient(135deg, #ffffff, #edf7fb) !important;
  box-shadow: 0 18px 48px rgba(30, 58, 95, 0.12);
}

body.light-shell .home-command-form,
body.light-shell .home-panel,
body.light-shell .home-status-card,
body.light-shell .home-stations {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--bai-line) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

body.light-shell .home-command-form {
  background: rgba(247, 250, 252, 0.92) !important;
}

body.light-shell .home-command-input {
  background: #ffffff !important;
  border-color: var(--bai-line-strong) !important;
  color: var(--bai-ink) !important;
}

body.light-shell .home-command-input::placeholder {
  color: #71869b;
}

body.light-shell .home-command-help,
body.light-shell .home-panel-note,
body.light-shell .home-list-empty {
  color: var(--bai-muted) !important;
}

body.light-shell .home-action,
body.light-shell .home-list-row {
  background: #ffffff !important;
  border-color: var(--bai-line) !important;
  color: var(--bai-ink) !important;
}

body.light-shell .home-action:hover,
body.light-shell .home-list-row:hover {
  background: #f0fbfd !important;
  border-color: rgba(85, 215, 239, 0.42) !important;
}

body.light-shell .home-action strong,
body.light-shell .home-list-copy strong,
body.light-shell .home-status-card h2,
body.light-shell .home-stations h2,
body.light-shell .home-panel h2 {
  color: var(--bai-ink) !important;
}

body.light-shell .home-action small,
body.light-shell .home-list-copy small {
  color: var(--bai-muted) !important;
}

body.light-shell .home-action-icon {
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.24) !important;
  color: #14718a !important;
}

body.light-shell .home-status-card.b2b-status-card {
  background: linear-gradient(145deg, #ffffff, #f5fbfd) !important;
}

body.light-shell .home-status-card.b2c-status-card {
  background: linear-gradient(145deg, #ffffff, #fff8f2) !important;
}

body.light-shell .section-wrap,
body.light-shell .station-card,
body.light-shell .doc-template-card,
body.light-shell .doc-preview-wrap,
body.light-shell .b2c-list-card,
body.light-shell .social-empty,
body.light-shell .marketing-summary,
body.light-shell .social-summary {
  background: var(--bai-surface) !important;
  border-color: var(--bai-line) !important;
  color: var(--bai-ink) !important;
}

body.light-shell .inp,
body.light-shell .sel,
body.light-shell .edit-input,
body.light-shell .crm-select,
body.light-shell .crm-textarea,
body.light-shell .social-modal-input {
  background: #ffffff !important;
  border-color: var(--bai-line-strong) !important;
  color: var(--bai-ink) !important;
}

body.light-shell .bsm:not(.ok):not(.ora):not(.red),
body.light-shell .quick-filter-pill {
  background: #ffffff !important;
  border-color: var(--bai-line-strong) !important;
  color: var(--bai-ink-soft) !important;
}

body.light-shell .bsm:not(.ok):not(.ora):not(.red):hover,
body.light-shell .quick-filter-pill:hover {
  background: #f0fbfd !important;
  border-color: rgba(85, 215, 239, 0.45) !important;
}

body.light-shell .modal,
body.light-shell .social-post-modal,
body.light-shell .crm-actions-popup {
  background: #ffffff !important;
  border-color: var(--bai-line-strong) !important;
  color: var(--bai-ink) !important;
  box-shadow: 0 22px 60px rgba(30, 58, 95, 0.20) !important;
}

body.light-shell .modal-topbar {
  background: #ffffff !important;
}

body.light-shell #loginModalWrap input,
body.light-shell #recoveryRequestModalWrap input,
body.light-shell #recoveryConfirmModalWrap input {
  background: #ffffff !important;
  border-color: var(--bai-line-strong) !important;
  color: var(--bai-ink) !important;
}


body.light-shell .modal-sub,
body.light-shell .flabel,
body.light-shell .social-modal-label {
  color: var(--bai-muted) !important;
}

@media (max-width: 1180px) {
  .topnav-inner {
    padding-inline: 18px !important;
  }

  .primary-nav {
    gap: 0;
  }

  .primary-nav > .top-link,
  .nav-menu-trigger {
    padding-inline: 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 1080px) {
  .topnav-inner {
    min-height: 64px !important;
    padding: 9px 14px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    z-index: 125;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--bai-line-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 18px 45px rgba(30, 58, 95, 0.18);
  }

  .primary-nav.open {
    display: flex;
  }

  .primary-nav > .top-link,
  .nav-menu-trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 44px !important;
    padding-inline: 12px !important;
  }

  .nav-menu-group {
    width: 100%;
  }

  .nav-menu {
    position: static;
    width: auto;
    margin: 0 8px 6px;
    border-color: var(--bai-line);
    box-shadow: none;
    background: #f7fafc;
  }

  .nav-menu-align-right {
    right: auto;
    left: auto;
  }
}

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

  .topnav-inner {
    gap: 8px !important;
  }

  .nav-toggle {
    min-height: 40px;
    padding-inline: 10px;
  }

  .nav-toggle-label {
    font-size: 12px;
  }

  #navUserLabel {
    display: none !important;
  }

  #navLogoutBtn {
    padding-inline: 9px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   Phase 3 Visual System Consolidation
   Presentation-only normalization for the existing operator UI.
   No view, handler, state, API, or permission behavior is changed.
   ============================================================ */
:root {
  --bai-cyan-ink: #17647a;
  --bai-orange-ink: #a45520;
  --bai-green-ink: #176044;
  --bai-red-ink: #a6404a;
  --bai-control-height: 46px;
  --bai-button-height: 44px;
  --bai-card-radius: 16px;
  --bai-control-radius: 10px;
  --bai-section-gap: 20px;
}

body.light-shell {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

body.light-shell h1,
body.light-shell h2,
body.light-shell h3,
body.light-shell h4,
body.light-shell h5 {
  color: var(--bai-ink) !important;
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.35px !important;
}

body.light-shell h1 {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.08 !important;
}

body.light-shell h2 {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.16 !important;
}

body.light-shell h3 {
  font-size: 20px !important;
  line-height: 1.22 !important;
}

body.light-shell h4,
body.light-shell h5 {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

body.light-shell .section-title {
  font-size: clamp(24px, 2.8vw, 30px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.6px !important;
}

body.light-shell .section-sub,
body.light-shell .home-hero-sub,
body.light-shell .home-side-sub,
body.light-shell .modal-sub {
  color: var(--bai-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.light-shell .home-eyebrow,
body.light-shell .home-section-kicker,
body.light-shell .home-side-title,
body.light-shell .divider-title,
body.light-shell .block-label,
body.light-shell .social-field .label {
  letter-spacing: 0.08em !important;
}

body.light-shell .section-wrap {
  padding: 24px !important;
  margin-bottom: var(--bai-section-gap) !important;
  border-radius: var(--bai-card-radius) !important;
}

body.light-shell .section-head {
  gap: 16px !important;
  margin-bottom: 18px !important;
}

body.light-shell .back-row {
  min-height: var(--bai-button-height) !important;
  margin-bottom: 16px !important;
}

body.light-shell .back-link,
body.light-shell .back-btn,
body.light-shell .comm-back-link,
body.light-shell .modal-back-control,
body.light-shell .modal-close-x {
  min-height: var(--bai-button-height) !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(23, 103, 122, 0.4) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0f7892 0%, #1d62b5 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}

body.light-shell .back-link:hover,
body.light-shell .back-btn:hover,
body.light-shell .comm-back-link:hover,
body.light-shell .modal-back-control:hover,
body.light-shell .modal-close-x:hover {
  color: #ffffff !important;
}

/* One control recipe across CRM, leads, documents, social, coaching, and modals. */
body.light-shell .inp,
body.light-shell .sel,
body.light-shell .edit-input,
body.light-shell .crm-select,
body.light-shell .crm-textarea,
body.light-shell .doc-input,
body.light-shell .social-modal-input,
body.light-shell .social-rail-search,
body.light-shell .social-overlay-text,
body.light-shell #loginModalWrap input,
body.light-shell #recoveryRequestModalWrap input,
body.light-shell #recoveryConfirmModalWrap input {
  min-height: var(--bai-control-height) !important;
  padding: 10px 13px !important;
  border: 1px solid var(--bai-line-strong) !important;
  border-radius: var(--bai-control-radius) !important;
  background: var(--bai-bg-raised) !important;
  color: var(--bai-ink) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

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

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

body.light-shell .flabel,
body.light-shell .doc-form-label,
body.light-shell .social-modal-label {
  margin-bottom: 6px !important;
  color: var(--bai-muted-strong) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

/* Action hierarchy: orange primary, cyan/neutral secondary, red destructive. */
body.light-shell .btn-main,
body.light-shell .bsm,
body.light-shell .link-btn,
body.light-shell .muted-btn,
body.light-shell .quick-filter-pill,
body.light-shell .b2c-tab,
body.light-shell .social-tab,
body.light-shell .social-week-btn,
body.light-shell .doc-tab,
body.light-shell .team-tab {
  min-height: var(--bai-button-height) !important;
  padding: 9px 13px !important;
  border-radius: var(--bai-control-radius) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

body.light-shell .btn-main {
  min-height: 48px !important;
  padding-inline: 17px !important;
  border-color: var(--bai-orange-strong) !important;
  border-radius: var(--bai-control-radius) !important;
  background: var(--bai-orange-strong) !important;
  color: #1b1108 !important;
  box-shadow: 0 7px 16px rgba(255, 124, 47, 0.16) !important;
}

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

body.light-shell .bsm {
  border-color: var(--bai-line-strong) !important;
  background: var(--bai-surface) !important;
  color: var(--bai-ink-soft) !important;
  box-shadow: none !important;
}

body.light-shell .bsm:hover,
body.light-shell .muted-btn:hover {
  border-color: rgba(85, 215, 239, 0.5) !important;
  background: var(--bai-cyan-soft) !important;
  color: var(--bai-cyan-ink) !important;
}

body.light-shell .bsm.ok {
  border-color: rgba(77, 214, 160, 0.42) !important;
  background: var(--bai-green-soft) !important;
  color: var(--bai-green-ink) !important;
}

body.light-shell .bsm.ok:hover {
  background: rgba(77, 214, 160, 0.2) !important;
  color: #0f3f2d !important;
}

body.light-shell .bsm.ora,
body.light-shell .bsm.ai,
body.light-shell .crm-actions-btn {
  border-color: rgba(255, 155, 82, 0.44) !important;
  background: var(--bai-orange-soft) !important;
  color: var(--bai-orange-ink) !important;
}

body.light-shell .crm-actions-popup-item:not(.red):not(:disabled) {
  color: var(--bai-ink-soft) !important;
  background: transparent !important;
}

body.light-shell .crm-actions-popup-item:not(.red):not(:disabled):hover,
body.light-shell .crm-actions-popup-item:not(.red):not(:disabled):focus-visible {
  color: var(--bai-cyan-ink) !important;
  background: var(--bai-cyan-soft) !important;
}

body.light-shell .crm-actions-popup-item:disabled {
  color: var(--bai-muted) !important;
  opacity: 0.52 !important;
  cursor: not-allowed !important;
}

body.light-shell .bsm.red,
body.light-shell .crm-actions-popup-item.red {
  border-color: rgba(255, 142, 152, 0.42) !important;
  background: var(--bai-red-soft) !important;
  color: var(--bai-red-ink) !important;
}

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

body.light-shell button:disabled,
body.light-shell .bsm:disabled,
body.light-shell .btn-main:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Shared card recipe and consistent internal rhythm. */
body.light-shell .section-wrap,
body.light-shell .home-panel,
body.light-shell .home-status-card,
body.light-shell .home-stations,
body.light-shell .home-side,
body.light-shell .list-wrap,
body.light-shell .lead-card,
body.light-shell .crm-card,
body.light-shell .doc-template-card,
body.light-shell .doc-preview-wrap,
body.light-shell .b2c-list-card,
body.light-shell .social-empty,
body.light-shell .social-summary,
body.light-shell .marketing-summary,
body.light-shell .social-post-card,
body.light-shell .social-rail {
  border-radius: var(--bai-card-radius) !important;
  border-color: var(--bai-line) !important;
  box-shadow: var(--bai-shadow-soft) !important;
}

body.light-shell .home-panel,
body.light-shell .home-status-card,
body.light-shell .home-stations,
body.light-shell .home-side,
body.light-shell .lead-card,
body.light-shell .crm-card,
body.light-shell .doc-template-card,
body.light-shell .doc-preview-wrap,
body.light-shell .b2c-list-card,
body.light-shell .social-post-card {
  background: var(--bai-surface) !important;
}

body.light-shell .home-side.b2c-side,
body.light-shell .home-status-card.b2c-status-card {
  border-color: rgba(255, 155, 82, 0.28) !important;
  background: linear-gradient(145deg, #ffffff, #fff8f2) !important;
}

body.light-shell .home-panel-head,
body.light-shell .home-status-head,
body.light-shell .home-stations-head,
body.light-shell .social-week-head {
  gap: 14px !important;
}

body.light-shell .home-panel h2,
body.light-shell .home-status-card h2,
body.light-shell .home-stations h2 {
  font-size: 21px !important;
  letter-spacing: -0.35px !important;
}

/* Consistent selected/active states across tabs, filters, cards, and rails. */
body.light-shell .top-link.active,
body.light-shell .primary-nav > .top-link.active,
body.light-shell .nav-menu-group > .nav-menu-trigger.active,
body.light-shell .quick-filter-pill.active,
body.light-shell .quick-filter-pill.won-active,
body.light-shell .doc-tab.active,
body.light-shell .b2c-tab.active,
body.light-shell .social-tab.active,
body.light-shell .team-tab.active,
body.light-shell .crm-thumb-card.selected,
body.light-shell .social-rail-item.is-current {
  border-color: rgba(85, 215, 239, 0.48) !important;
  background: var(--bai-cyan-soft) !important;
  color: var(--bai-cyan-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(85, 215, 239, 0.06) !important;
}

body.light-shell .quick-filter-pill.lost-active,
body.light-shell .bsm.red.active {
  border-color: rgba(255, 142, 152, 0.44) !important;
  background: var(--bai-red-soft) !important;
  color: var(--bai-red-ink) !important;
}

body.light-shell .crm-thumb-card:hover,
body.light-shell .social-rail-item:hover,
body.light-shell .station-card.live:hover,
body.light-shell .home-action:hover,
body.light-shell .home-list-row:hover {
  border-color: rgba(85, 215, 239, 0.42) !important;
  background: #f0fbfd !important;
}

/* Status chips use the same compact geometry and semantic color hierarchy. */
body.light-shell .badge,
body.light-shell .phone-badge,
body.light-shell .doc-status,
body.light-shell .seq-badge,
body.light-shell .b2c-tier-pill,
body.light-shell .b2c-stage-pill,
body.light-shell .social-status-pill,
body.light-shell .station-tag,
body.light-shell .hero-pill,
body.light-shell .home-list-count {
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.light-shell .badge,
body.light-shell .phone-badge,
body.light-shell .doc-status,
body.light-shell .seq-badge,
body.light-shell .b2c-tier-pill,
body.light-shell .b2c-stage-pill {
  border-color: var(--bai-line) !important;
  background: var(--bai-surface-soft) !important;
  color: var(--bai-ink-soft) !important;
}

body.light-shell .badge.ok,
body.light-shell .social-status-pill.green,
body.light-shell .station-tag.live {
  border-color: rgba(77, 214, 160, 0.4) !important;
  background: var(--bai-green-soft) !important;
  color: var(--bai-green-ink) !important;
}

body.light-shell .badge.ora,
body.light-shell .social-status-pill.orange,
body.light-shell .station-tag.soon {
  border-color: rgba(255, 155, 82, 0.4) !important;
  background: var(--bai-orange-soft) !important;
  color: var(--bai-orange-ink) !important;
}

body.light-shell .badge.red,
body.light-shell .social-status-pill.red {
  border-color: rgba(255, 142, 152, 0.4) !important;
  background: var(--bai-red-soft) !important;
  color: var(--bai-red-ink) !important;
}

/* Empty, loading, error, success, and confirmation surfaces. */
body.light-shell .crm-empty,
body.light-shell .b2c-empty,
body.light-shell .ih-empty,
body.light-shell .home-list-empty,
body.light-shell .social-empty,
body.light-shell .social-graphic-placeholder {
  min-height: 64px;
  padding: 18px !important;
  border: 1px dashed var(--bai-line-strong) !important;
  border-radius: var(--bai-control-radius) !important;
  background: var(--bai-surface-soft) !important;
  color: var(--bai-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.light-shell .progress-wrap {
  padding: 16px !important;
  border: 1px solid rgba(255, 155, 82, 0.32) !important;
  border-radius: var(--bai-card-radius) !important;
  background: var(--bai-surface) !important;
}

body.light-shell .progress-head {
  color: var(--bai-orange-ink) !important;
  font-weight: 800 !important;
}

body.light-shell .progress-track {
  height: 9px !important;
  border-radius: 999px !important;
  background: var(--bai-surface-raised) !important;
}

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

body.light-shell .ebar {
  padding: 13px 15px !important;
  border: 1px solid rgba(255, 142, 152, 0.42) !important;
  border-radius: var(--bai-control-radius) !important;
  background: var(--bai-red-soft) !important;
  color: var(--bai-red-ink) !important;
  font-size: 14px !important;
}

body.light-shell .toast {
  padding: 14px 16px !important;
  border: 1px solid rgba(77, 214, 160, 0.42) !important;
  border-radius: var(--bai-card-radius) !important;
  background: #ffffff !important;
  color: var(--bai-ink) !important;
  box-shadow: var(--bai-shadow) !important;
}

body.light-shell .toast-title {
  color: var(--bai-green-ink) !important;
  font-size: 15px !important;
}

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

/* Modal rhythm and touch targets. */
body.light-shell .modal-backdrop {
  padding: 20px !important;
  background: rgba(18, 36, 58, 0.44) !important;
}

body.light-shell .modal,
body.light-shell .social-post-modal {
  padding: 24px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border-color: var(--bai-line-strong) !important;
  box-shadow: 0 24px 70px rgba(30, 58, 95, 0.2) !important;
}

body.light-shell .modal-topbar {
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}

body.light-shell .modal-close-x {
  min-height: var(--bai-button-height) !important;
  padding: 9px 13px !important;
}

body.light-shell .contact-row,
body.light-shell .history-row,
body.light-shell .search-history-row,
body.light-shell .dup-row,
body.light-shell .task-row {
  padding: 13px !important;
  border-radius: var(--bai-control-radius) !important;
  background: var(--bai-surface-soft) !important;
}

body.light-shell .action-row,
body.light-shell .controls,
body.light-shell .crm-actions {
  gap: 8px !important;
}

@media (max-width: 1180px) {
  body.light-shell .shell,
  body.light-shell .shell.wide-list-shell {
    width: min(100% - 36px, 1440px) !important;
  }

  body.light-shell .section-wrap {
    padding: 20px !important;
  }
}

@media (max-width: 720px) {
  body.light-shell .shell,
  body.light-shell .shell.wide-list-shell {
    width: min(100% - 28px, 1440px) !important;
  }

  body.light-shell .section-wrap,
  body.light-shell .home-panel,
  body.light-shell .home-status-card,
  body.light-shell .home-stations,
  body.light-shell .home-side,
  body.light-shell .modal,
  body.light-shell .social-post-modal {
    padding: 16px !important;
  }

  body.light-shell .section-head,
  body.light-shell .home-panel-head,
  body.light-shell .home-status-head,
  body.light-shell .home-stations-head {
    flex-direction: column;
  }

  body.light-shell .section-title {
    font-size: 24px !important;
  }

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

  body.light-shell .action-row > button,
  body.light-shell .controls > button {
    min-height: var(--bai-button-height) !important;
  }
}

@media (max-width: 480px) {
  body.light-shell .shell,
  body.light-shell .shell.wide-list-shell {
    width: min(100% - 24px, 1440px) !important;
  }

  body.light-shell .section-title {
    font-size: 22px !important;
  }

  body.light-shell .section-sub,
  body.light-shell .home-hero-sub,
  body.light-shell .home-side-sub,
  body.light-shell .modal-sub {
    font-size: 13px !important;
  }
}

/* ============================================================
   Phase 4 Responsive + Touch Standard
   Presentation-only responsive behavior for the existing UI.
   Wide administrative tables remain available; card/list surfaces
   become easier to review at smaller widths.
   ============================================================ */
body.light-shell .list-wrap,
body.light-shell .audit-table-wrap,
body.light-shell .table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

body.light-shell .crm-table,
body.light-shell .b2c-table {
  min-width: 720px;
}

body.light-shell .crm-table th,
body.light-shell .b2c-table th {
  white-space: nowrap;
}

body.light-shell .crm-table td,
body.light-shell .b2c-table td {
  min-width: 96px;
}

body.light-shell .crm-table .link-btn,
body.light-shell .b2c-table .link-btn {
  min-height: 44px !important;
  padding: 8px 0 !important;
  text-align: left;
}

body.light-shell .crm-actions,
body.light-shell .lead-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
}

body.light-shell .crm-actions > button,
body.light-shell .lead-bulk-actions > button {
  min-height: 44px !important;
}

body.light-shell .crm-row-cb,
body.light-shell .crm-card-cb {
  width: 20px !important;
  height: 20px !important;
}

/* iPad landscape is the primary operator target. */
@media (max-width: 1120px) {
  body.light-shell .topnav-inner {
    min-height: 64px !important;
    padding-inline: 16px !important;
    flex-wrap: nowrap !important;
  }

  body.light-shell .nav-toggle {
    display: inline-flex !important;
    margin-left: auto;
  }

  body.light-shell .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    z-index: 125;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--bai-line-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 18px 45px rgba(30, 58, 95, 0.18);
  }

  body.light-shell .primary-nav.open {
    display: flex !important;
  }

  body.light-shell .primary-nav > .top-link,
  body.light-shell .nav-menu-trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 46px !important;
    padding-inline: 12px !important;
  }

  body.light-shell .nav-menu-group {
    width: 100%;
  }

  body.light-shell .nav-menu {
    position: static;
    width: auto;
    margin: 0 8px 6px;
    border-color: var(--bai-line);
    box-shadow: none;
    background: #f7fafc;
  }

  body.light-shell .shell,
  body.light-shell .shell.wide-list-shell {
    width: min(100% - 32px, 1440px) !important;
    padding-top: 26px !important;
  }

  body.light-shell .home-command-submit,
  body.light-shell .home-command-examples button,
  body.light-shell .home-inline-link {
    min-height: 44px !important;
  }

  body.light-shell .home-work-grid,
  body.light-shell .home-status-grid {
    gap: 16px !important;
  }

  body.light-shell .section-wrap {
    padding: 20px !important;
  }

  body.light-shell .section-head {
    gap: 14px !important;
  }

  body.light-shell .row2 {
    gap: 12px !important;
  }

  body.light-shell .crm-bulk-bar,
  body.light-shell .lead-bulk-bar {
    position: sticky;
    top: 68px;
    z-index: 30;
    padding: 10px !important;
    border: 1px solid var(--bai-line);
    border-radius: var(--bai-control-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--bai-shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.light-shell .crm-bulk-bar > button,
  body.light-shell .lead-bulk-bar > button,
  body.light-shell .lead-bulk-actions > button {
    min-height: 44px !important;
  }

  body.light-shell .crm-thumb-card {
    min-height: 190px !important;
    padding: 15px 13px !important;
  }

  body.light-shell .crm-thumb-action {
    min-height: 44px !important;
  }

  body.light-shell .social-p4-layout {
    gap: 16px !important;
  }

  body.light-shell .social-rail {
    max-height: 440px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.light-shell .social-rail-item {
    min-height: 72px !important;
  }
}

/* Smaller tablet and phone: prioritize scanable cards and touchable actions. */
@media (max-width: 720px) {
  body.light-shell .topnav-inner {
    padding-inline: 12px !important;
  }

  body.light-shell .nav-toggle {
    min-height: 44px !important;
  }

  body.light-shell .shell,
  body.light-shell .shell.wide-list-shell {
    width: calc(100% - 24px) !important;
    padding-top: 20px !important;
    padding-bottom: 72px !important;
  }

  body.light-shell .section-wrap,
  body.light-shell .home-panel,
  body.light-shell .home-status-card,
  body.light-shell .home-stations,
  body.light-shell .home-side {
    padding: 16px !important;
  }

  body.light-shell .home-hero.hero {
    padding: 20px 16px !important;
  }

  body.light-shell .home-hero .hero-title {
    font-size: 31px !important;
    letter-spacing: -1px !important;
  }

  body.light-shell .home-command-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.light-shell .home-command-submit {
    width: 100% !important;
  }

  body.light-shell .home-command-examples {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.light-shell .home-command-examples button {
    width: 100%;
    min-height: 44px !important;
  }

  body.light-shell .section-head,
  body.light-shell .home-panel-head,
  body.light-shell .home-status-head,
  body.light-shell .home-stations-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.light-shell .section-head .controls {
    width: 100%;
  }

  body.light-shell .section-head .controls > button {
    flex: 1 1 160px;
  }

  body.light-shell .row2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.light-shell .row2 > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.light-shell .controls,
  body.light-shell .action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
  }

  body.light-shell .controls > button,
  body.light-shell .controls > a,
  body.light-shell .action-row > button,
  body.light-shell .action-row > a {
    flex: 1 1 150px;
    min-width: 0;
    min-height: 44px !important;
  }

  body.light-shell .lead-bulk-bar,
  body.light-shell .crm-bulk-bar {
    top: 64px;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.light-shell .lead-bulk-bar > button,
  body.light-shell .crm-bulk-bar > button,
  body.light-shell .lead-bulk-actions > button {
    flex: 1 1 145px;
    min-width: 0;
    min-height: 44px !important;
  }

  body.light-shell .lead-bulk-actions {
    width: 100%;
  }

  body.light-shell .lead-card,
  body.light-shell .crm-card,
  body.light-shell .social-post-card {
    min-height: 0 !important;
    padding: 16px !important;
  }

  body.light-shell .crm-thumb-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.light-shell .crm-thumb-card {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  body.light-shell .crm-thumb-card .crm-thumb-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.light-shell .crm-list-wrap,
  body.light-shell #crmListWrap,
  body.light-shell #crmCardsWrap {
    min-width: 0;
  }

  body.light-shell .list-wrap,
  body.light-shell .audit-table-wrap {
    border-radius: var(--bai-control-radius) !important;
  }

  body.light-shell .crm-table,
  body.light-shell .b2c-table {
    min-width: 720px;
  }

  body.light-shell .crm-table th,
  body.light-shell .crm-table td,
  body.light-shell .b2c-table th,
  body.light-shell .b2c-table td {
    padding: 12px !important;
  }

  body.light-shell .summary,
  body.light-shell .marketing-summary,
  body.light-shell .social-summary,
  body.light-shell .metric-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.light-shell .summary-box,
  body.light-shell .marketing-summary-box,
  body.light-shell .social-summary-box {
    min-width: 118px;
  }

  body.light-shell .metric {
    min-width: 145px;
  }

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

  body.light-shell .doc-template-grid .full {
    grid-column: auto !important;
  }

  body.light-shell .social-logo-bar,
  body.light-shell .social-overlay-bar,
  body.light-shell .social-sched-toolbar {
    align-items: stretch !important;
  }

  body.light-shell .social-logo-bar > button,
  body.light-shell .social-overlay-bar > button,
  body.light-shell .social-sched-toolbar > button {
    width: 100%;
    min-height: 44px !important;
  }

  body.light-shell .social-rail {
    max-height: 380px !important;
  }

  body.light-shell .modal-backdrop {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  body.light-shell .modal,
  body.light-shell .social-post-modal {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px) !important;
    margin: auto 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }

  body.light-shell .modal-topbar {
    position: sticky;
    top: -16px;
    z-index: 2;
    padding-top: 4px !important;
    background: #ffffff !important;
  }

  body.light-shell .modal-close-x {
    min-height: 44px !important;
  }

  body.light-shell .toast-wrap {
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
  }

  body.light-shell .toast {
    width: 100%;
  }
}

@media (max-width: 480px) {
  body.light-shell .brand-name {
    max-width: 145px;
    overflow: hidden;
    font-size: 13px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.light-shell .nav-toggle-label {
    font-size: 12px !important;
  }

  body.light-shell .section-title {
    font-size: 22px !important;
  }

  body.light-shell .home-command-examples {
    gap: 6px !important;
  }

  body.light-shell .home-command-examples button {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  body.light-shell .controls > button,
  body.light-shell .controls > a,
  body.light-shell .action-row > button,
  body.light-shell .action-row > a,
  body.light-shell .lead-bulk-bar > button,
  body.light-shell .crm-bulk-bar > button {
    flex-basis: 100%;
    width: 100%;
  }

  body.light-shell .home-action {
    min-height: 70px;
  }
}

/* ============================================================
   Phase 5 Creation Workspace Standard
   Shared light-mode hierarchy for creation, compose, review,
   confirmation, and success surfaces. Existing handlers and
   persistence paths remain the source of truth.
   ============================================================ */
body.light-shell .creation-modal {
  gap: 0 !important;
}

body.light-shell .creation-modal .modal-topbar {
  align-items: flex-start !important;
  margin-bottom: 14px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--bai-line) !important;
}

body.light-shell .creation-modal .modal-headcopy {
  min-width: 0;
}

body.light-shell .creation-modal .modal-headcopy h3 {
  margin-bottom: 5px !important;
}

body.light-shell .creation-modal .modal-sub {
  max-width: 68ch;
}

body.light-shell .creation-meta-strip {
  margin: 0 0 16px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(85, 215, 239, 0.24) !important;
  border-radius: var(--bai-control-radius) !important;
  background: var(--bai-cyan-soft) !important;
  color: var(--bai-cyan-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

body.light-shell .creation-modal > .modal-sub {
  margin-bottom: 14px !important;
}

body.light-shell .creation-modal .action-row {
  align-items: stretch !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--bai-line) !important;
}

body.light-shell .creation-modal .action-row .bsm,
body.light-shell .creation-modal .action-row .btn-main {
  min-width: 132px;
  min-height: 46px !important;
}

body.light-shell .creation-modal .action-row .bsm.ok {
  order: 3;
}

body.light-shell .creation-modal .action-row .bsm.ora {
  order: 2;
}

body.light-shell .creation-modal .action-row .bsm.ai {
  order: 2;
}

body.light-shell .creation-modal .action-row .bsm:not(.ok):not(.ora):not(.ai) {
  order: 1;
}

body.light-shell .creation-modal .row2,
body.light-shell .creation-modal #docModalForm .doc-form-row {
  gap: 16px !important;
}

body.light-shell .creation-modal .row2 > div,
body.light-shell .creation-modal #docModalForm .doc-form-row > div {
  min-width: 0;
}

body.light-shell .creation-modal .flabel,
body.light-shell .creation-modal .doc-form-label {
  display: block;
}

body.light-shell .creation-modal .crm-textarea,
body.light-shell .creation-modal textarea.inp,
body.light-shell .creation-modal #docModalForm textarea {
  min-height: 132px !important;
}

body.light-shell .creation-modal .modal-close-x {
  flex: 0 0 auto;
}

/* Individual CRM email options stay compact so the editable draft remains
   visible on iPad, while keeping enough contrast for quick comparison. */
body.light-shell .creation-email-modal #composeDraftOptionsWrap {
  gap: 6px !important;
  margin: 0 0 10px !important;
}

body.light-shell .creation-email-modal .sms-draft-options-heading {
  color: var(--bai-muted-strong) !important;
  font-size: 10px !important;
}

body.light-shell .creation-email-modal #composeDraftOptions {
  display: grid;
  gap: 6px;
}

body.light-shell .creation-email-modal .sms-draft-option {
  display: block;
  min-height: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--bai-line-strong) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--bai-ink) !important;
  box-shadow: none !important;
}

body.light-shell .creation-email-modal .sms-draft-option:hover,
body.light-shell .creation-email-modal .sms-draft-option:focus-visible {
  border-color: var(--bai-cyan-ink) !important;
  background: #f3fbfd !important;
  color: var(--bai-ink) !important;
}

body.light-shell .creation-email-modal .sms-draft-option.active {
  border-color: var(--bai-cyan-ink) !important;
  background: var(--bai-cyan-soft) !important;
  box-shadow: 0 0 0 2px rgba(23, 103, 122, 0.14) !important;
}

body.light-shell .creation-email-modal .sms-draft-option-label {
  color: var(--bai-cyan-ink) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
}

body.light-shell .creation-email-modal .sms-draft-option-body {
  display: block;
  color: var(--bai-ink) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

body.light-shell .creation-email-modal .sms-draft-option-subject {
  display: block;
  overflow: hidden;
  color: var(--bai-ink) !important;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.light-shell .creation-email-modal .sms-draft-option-preview {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: var(--bai-muted-strong) !important;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.light-shell .creation-email-modal .crm-textarea {
  min-height: 116px !important;
}

body.light-shell .email-preview-modal {
  gap: 0;
}

body.light-shell .email-preview-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bai-line);
}

body.light-shell .email-preview-kicker,
body.light-shell .email-preview-field-label {
  color: var(--bai-muted-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.light-shell .email-preview-kicker {
  margin-top: 4px;
}

body.light-shell .email-preview-meta {
  flex-shrink: 0;
  margin-bottom: 10px;
  color: var(--bai-muted-strong);
  font-size: 12px;
  line-height: 1.45;
}

body.light-shell .email-preview-subject-card {
  flex-shrink: 0;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid var(--bai-line-strong);
  border-radius: 10px;
  background: #f8fbfd;
}

body.light-shell .email-preview-subject {
  margin-top: 3px;
  color: var(--bai-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

body.light-shell .email-preview-body-frame {
  min-height: 200px;
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--bai-line-strong);
  border-radius: 10px;
  background: #ffffff;
}

body.light-shell .email-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bai-line);
}

body.light-shell .email-preview-actions .bsm.ok {
  min-width: 148px;
  border-color: rgba(255, 155, 82, 0.58) !important;
  background: var(--bai-orange-soft) !important;
  color: var(--bai-orange-ink) !important;
  font-weight: 850;
}

body.light-shell .email-preview-actions .bsm.ok:hover {
  background: rgba(255, 155, 82, 0.22) !important;
}

/* Clear creation-stage language without changing existing states. */
body.light-shell .creation-contact-modal #addContactDuplicateWarning,
body.light-shell .creation-email-modal [id$="ErrorBar"],
body.light-shell .creation-sms-modal #smsTestBanner,
body.light-shell .creation-sms-modal #smsManualConfirmBar,
body.light-shell .creation-sms-modal #smsResultBar {
  line-height: 1.5 !important;
}

body.light-shell .creation-contact-modal #addContactDuplicateWarning {
  background: var(--bai-orange-soft) !important;
  border-color: rgba(255, 155, 82, 0.42) !important;
  color: var(--bai-orange-ink) !important;
}

body.light-shell .creation-sms-modal #smsTestBanner {
  background: var(--bai-orange-soft) !important;
  border-color: rgba(255, 155, 82, 0.42) !important;
  color: var(--bai-orange-ink) !important;
}

body.light-shell .creation-sms-modal #smsManualConfirmBar {
  background: var(--bai-cyan-soft) !important;
  border-color: rgba(85, 215, 239, 0.42) !important;
  color: var(--bai-cyan-ink) !important;
}

body.light-shell .creation-sms-modal #smsResultBar {
  background: var(--bai-green-soft) !important;
  border-color: rgba(77, 214, 160, 0.42) !important;
  color: var(--bai-green-ink) !important;
}

body.light-shell .creation-document-modal #docModalForm {
  margin-top: 2px !important;
  gap: 16px !important;
}

body.light-shell .creation-document-modal #docModalForm .doc-form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.light-shell .creation-document-modal #docModalForm .doc-form-row.full {
  grid-template-columns: 1fr;
}

body.light-shell .creation-document-modal #docModalForm .doc-input {
  width: 100%;
  box-sizing: border-box;
}

body.light-shell .creation-document-modal #docModalSendBtn {
  border-color: rgba(255, 155, 82, 0.52) !important;
  background: var(--bai-orange-soft) !important;
  color: var(--bai-orange-ink) !important;
}

/* Inline coaching creation cards use the same hierarchy as modals,
   while remaining lightweight in the list workspace. */
body.light-shell .b2c-creation-card {
  border-left: 3px solid rgba(255, 155, 82, 0.58) !important;
  background: linear-gradient(145deg, #fffdfb, #fff8f2) !important;
}

body.light-shell .creation-card-head {
  margin-bottom: 16px;
}

body.light-shell .creation-card-kicker {
  margin-bottom: 4px;
  color: var(--bai-orange-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.light-shell .creation-card-title {
  color: var(--bai-ink);
  font-family: "Syne", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

body.light-shell .creation-card-sub {
  max-width: 62ch;
  margin-top: 5px;
  color: var(--bai-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.light-shell .b2c-creation-card .b2c-form-grid {
  gap: 16px !important;
}

body.light-shell .b2c-creation-card .b2c-form-actions {
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--bai-line) !important;
}

body.light-shell .b2c-creation-card .b2c-form-actions .bsm {
  min-height: 46px !important;
}

body.light-shell .b2c-creation-card .b2c-form-actions .bsm.ok {
  min-width: 150px;
  border-color: rgba(255, 155, 82, 0.52) !important;
  background: var(--bai-orange-soft) !important;
  color: var(--bai-orange-ink) !important;
}

body.light-shell .b2c-creation-card .b2c-form-actions .bsm.ok:hover {
  background: rgba(255, 155, 82, 0.22) !important;
}

body.light-shell .b2c-creation-card input,
body.light-shell .b2c-creation-card select,
body.light-shell .b2c-creation-card textarea {
  min-height: 46px !important;
}

body.light-shell .b2c-creation-card textarea {
  min-height: 112px !important;
}

@media (max-width: 1120px) {
  body.light-shell .creation-modal .action-row {
    gap: 8px !important;
  }

  body.light-shell .creation-modal .action-row .bsm,
  body.light-shell .creation-modal .action-row .btn-main {
    flex: 1 1 145px;
  }

  body.light-shell .creation-modal .row2,
  body.light-shell .creation-modal #docModalForm .doc-form-row {
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  body.light-shell .creation-modal {
    max-height: calc(100dvh - 24px) !important;
  }

  body.light-shell .creation-modal .modal-topbar {
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }

  body.light-shell .creation-modal .action-row {
    position: sticky;
    bottom: -16px;
    z-index: 4;
    margin-inline: -16px !important;
    padding: 12px 16px 0 !important;
    background: #ffffff !important;
  }

  body.light-shell .creation-modal .action-row .bsm,
  body.light-shell .creation-modal .action-row .btn-main {
    flex-basis: 145px;
  }

  body.light-shell .creation-modal #docModalForm .doc-form-row {
    grid-template-columns: 1fr !important;
  }

  body.light-shell .creation-meta-strip {
    overflow-wrap: anywhere;
  }

  body.light-shell .email-preview-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.light-shell .email-preview-topbar .bsm,
  body.light-shell .email-preview-actions .bsm {
    width: 100%;
  }

  body.light-shell .email-preview-actions {
    flex-direction: column-reverse;
  }

  body.light-shell .creation-card-title {
    font-size: 19px;
  }

  body.light-shell .b2c-creation-card .b2c-form-actions {
    flex-wrap: wrap !important;
  }

  body.light-shell .b2c-creation-card .b2c-form-actions .bsm {
    flex: 1 1 150px;
  }
}

@media (max-width: 480px) {
  body.light-shell .creation-modal .action-row .bsm,
  body.light-shell .creation-modal .action-row .btn-main,
  body.light-shell .b2c-creation-card .b2c-form-actions .bsm {
    flex-basis: 100%;
    width: 100%;
  }

  body.light-shell .creation-modal .action-row .bsm.ok,
  body.light-shell .b2c-creation-card .b2c-form-actions .bsm.ok {
    order: 2;
  }

  body.light-shell .creation-modal .action-row .bsm:not(.ok):not(.ora):not(.ai) {
    order: 1;
  }
}

/* Phase 2 nav: prevent the legacy ≤720px flex-wrap:wrap rule from
   pushing the hamburger toggle and sign-out button onto separate rows. */
@media (max-width: 720px) {
  body.light-shell .topnav-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body.light-shell .nav-status {
    margin-left: 0 !important;
    flex-shrink: 0;
  }
}

/* App-wide Back control: the operator's primary way out of every
   authenticated workspace, detail view, and modal flow. Keep this final
   recipe last so legacy light-theme rules cannot shrink or flatten it. */
.back-link,
.back-btn,
.comm-back-link,
.modal-back-control,
.modal-close-x,
.crm-focused-back-link,
.internal-back-action,
body.light-shell .back-link,
body.light-shell .back-btn,
body.light-shell .comm-back-link,
body.light-shell .modal-back-control,
body.light-shell .modal-close-x,
body.light-shell .crm-focused-back-link,
body.light-shell .internal-back-action {
  min-height: 56px !important;
  min-width: 148px;
  padding: 14px 22px !important;
  border: 2px solid rgba(85, 215, 239, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #087a9a 0%, #1b5fba 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  box-shadow: 0 10px 28px rgba(3, 42, 73, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.back-link:hover,
.back-btn:hover,
.comm-back-link:hover,
.modal-back-control:hover,
.modal-close-x:hover,
.crm-focused-back-link:hover,
.internal-back-action:hover,
body.light-shell .back-link:hover,
body.light-shell .back-btn:hover,
body.light-shell .comm-back-link:hover,
body.light-shell .modal-back-control:hover,
body.light-shell .modal-close-x:hover,
body.light-shell .crm-focused-back-link:hover,
body.light-shell .internal-back-action:hover {
  color: #ffffff !important;
  border-color: #b2f5ff !important;
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.modal-back-row {
  min-height: 56px;
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .back-link,
  .back-btn,
  .comm-back-link,
  .modal-back-control,
  .modal-close-x,
  .crm-focused-back-link,
  .internal-back-action,
  body.light-shell .back-link,
  body.light-shell .back-btn,
  body.light-shell .comm-back-link,
  body.light-shell .modal-back-control,
  body.light-shell .modal-close-x,
  body.light-shell .crm-focused-back-link,
  body.light-shell .internal-back-action {
    width: 100%;
    min-height: 58px !important;
    justify-content: flex-start;
  }

  .back-row,
  .comm-back-row,
  .modal-back-row {
    width: 100%;
  }
}

/* Lead Center / Prospect Queue: lift the legacy navy operational surfaces
   without changing the surrounding light-shell treatment or any behavior. */
#viewLeads .list-wrap,
#viewProspects .intake-table-wrap {
  background: #1d3249 !important;
  border-color: rgba(84, 126, 166, 0.42) !important;
  box-shadow: 0 10px 26px rgba(29, 57, 88, 0.14) !important;
}

#viewLeads .crm-table,
#viewProspects .crm-table {
  background: #1d3249 !important;
}

#viewLeads .crm-table th,
#viewProspects .crm-table th {
  background: #2a4562 !important;
  color: #e0edf7 !important;
  border-bottom-color: rgba(205, 228, 244, 0.2) !important;
}

#viewLeads .crm-table td,
#viewProspects .crm-table td {
  color: #e4eef7 !important;
  border-top-color: rgba(205, 228, 244, 0.16) !important;
}

#viewLeads .crm-table tbody tr:nth-child(even) td,
#viewProspects .crm-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.035) !important;
}

#viewLeads .crm-table tbody tr:hover td,
#viewProspects .crm-table tbody tr:hover td {
  background: rgba(85, 215, 239, 0.11) !important;
}

#viewLeads .crm-mini,
#viewProspects .crm-mini {
  color: #b5c8da !important;
}

#viewLeads .crm-table .bsm,
#viewProspects .crm-table .bsm {
  background: #29435f !important;
  border-color: rgba(190, 220, 240, 0.28) !important;
  color: #e8f2fa !important;
}

#viewProspects .prospect-status-bar {
  background: linear-gradient(135deg, #2a4663 0%, #203950 100%) !important;
  border-color: rgba(84, 126, 166, 0.52) !important;
  box-shadow: 0 10px 26px rgba(29, 57, 88, 0.18) !important;
}

#viewProspects .prospect-status-bar.is-complete {
  background: linear-gradient(135deg, #2a504d 0%, #24424d 100%) !important;
}

#viewProspects .prospect-status-bar.is-failed {
  background: linear-gradient(135deg, #51472c 0%, #2f3a43 100%) !important;
}

#viewProspects .prospect-status-metric {
  background: rgba(8, 26, 45, 0.24) !important;
  border-color: rgba(205, 228, 244, 0.18) !important;
}

#viewProspects .prospect-status-progress-track {
  background: rgba(8, 24, 42, 0.38) !important;
}

#viewProspects .prospect-status-copy,
#viewProspects .prospect-status-progress-meta,
#viewProspects .prospect-status-secondary,
#viewProspects .prospect-status-safety {
  color: #c0d1df !important;
}

#viewProspects .prospect-status-progress-meta strong,
#viewProspects .prospect-status-secondary strong {
  color: #f0f7fb !important;
}