:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --surface-3: #f1f3f6;
  --line: #e4e7ec;
  --line-soft: #eef0f4;
  --text: #0f1722;
  --muted: #5b6573;
  --faint: #98a2b3;
  --primary: #eca117;
  --primary-strong: #c8860a;
  --gold: #d9930a;
  --gold-2: #d9930a;
  --warning: #d9930a;
  --green: #1fad75;
  --lime: #9cff57;
  --blue: #2563eb;
  --violet: #7c5cfc;
  --cyan: #0891b2;
  --red: #dc2626;
  --orange: #ea580c;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -10px rgba(16, 24, 40, 0.12);
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 44px -12px rgba(16, 24, 40, 0.16);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  --overlay: rgba(15, 23, 34, 0.45);
  --topbar-bg: rgba(255, 255, 255, 0.82);
  --app-bg:
    radial-gradient(circle at 88% -8%, rgba(236, 161, 23, 0.07), transparent 30rem),
    linear-gradient(180deg, #fbfcfe 0%, #f4f6f9 100%);
  --auth-bg:
    radial-gradient(circle at 50% 4%, rgba(236, 161, 23, 0.12), transparent 25rem),
    linear-gradient(180deg, #ffffff, #f4f6f8);
  --input-bg: #ffffff;
  --panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --card-bg: #ffffff;
  --kanban-bg: #f4f6f8;
  --lead-bg: #ffffff;
  --code-bg: #f3f4f6;
  --radius: 12px;
  --font-xs: 10px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 16px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --card-padding-compact: 10px;
  --button-height-compact: 30px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.panel.nested {
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: none;
}

.debug-box {
  max-height: 260px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
  white-space: pre-wrap;
}

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

  .closer-kpi-grid,
  .workspace-main-grid {
    grid-template-columns: 1fr;
  }

  .closer-hero .panel-header,
  .priority-lead-row {
    grid-template-columns: 1fr;
  }

  .closer-hero-meta {
    justify-items: start;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Premium gold-on-charcoal: warm neutral obsidian, not green-black. */
  --bg: #08080a;
  --bg-soft: #0b0b0e;
  --surface: #141416;
  --surface-2: #19191d;
  --surface-3: #202024;
  --line: #2a2a31;
  --line-soft: #1f1f24;
  --text: #f6f5f2;
  --muted: #a4a39c;
  --faint: #6f6e68;
  --primary: #eca117;
  --primary-strong: #f5b829;
  --gold: #eca117;
  --gold-2: #eca117;
  --warning: #eca117;
  --green: #34d399;
  --lime: #a3e635;
  --blue: #3b82f6;
  --violet: #a78bfa;
  --cyan: #38bdf8;
  --red: #f87171;
  --orange: #fb923c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 52px -14px rgba(0, 0, 0, 0.7);
  --shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 64px -16px rgba(0, 0, 0, 0.78);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
  --overlay: rgba(0, 0, 0, 0.74);
  --topbar-bg: rgba(12, 12, 14, 0.82);
  --app-bg:
    radial-gradient(circle at 86% -10%, rgba(236, 161, 23, 0.14), transparent 28rem),
    radial-gradient(circle at 8% 110%, rgba(236, 161, 23, 0.05), transparent 32rem),
    linear-gradient(180deg, #0b0b0e 0%, #08080a 60%, #060608 100%);
  --auth-bg:
    radial-gradient(circle at 50% 6%, rgba(236, 161, 23, 0.16), transparent 24rem),
    linear-gradient(180deg, #0b0b0e, #08080a);
  --input-bg: #0e0e11;
  --panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --card-bg: #141416;
  --kanban-bg: rgba(10, 10, 12, 0.9);
  --lead-bg: rgba(25, 25, 29, 0.94);
  --code-bg: #18181b;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

body {
  overflow-x: hidden;
}

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

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  background: var(--app-bg);
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  color: var(--muted);
}

.boot-screen span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--auth-bg);
}

.auth-card {
  width: min(560px, 100%);
  display: grid;
  gap: 20px;
  padding: 38px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.auth-logo {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: 900;
}

.auth-logo span {
  color: var(--muted);
  font-size: 13px;
}

.auth-logo strong {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0;
}

.auth-mark {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--primary) 62%, transparent);
  border-radius: 28px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  color: var(--primary-strong);
  font-size: 36px;
  box-shadow: inset 0 0 42px color-mix(in srgb, var(--primary) 10%, transparent);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-strong);
}

.auth-submit {
  min-height: 58px;
  margin-top: 14px;
  font-size: 18px;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 800;
}

.auth-message,
.reset-code-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  font-weight: 800;
}

.reset-code-box {
  display: grid;
  gap: 4px;
  text-align: center;
}

.reset-code-box span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.reset-code-box strong {
  font-size: 28px;
  letter-spacing: 0;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
  color: var(--primary-strong);
  font-weight: 900;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.brand > div {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap;
}

.brand p,
.eyebrow,
.micro,
.muted {
  margin: 0;
  color: var(--muted);
}

.brand p {
  font-size: 12px;
  line-height: 1.25;
  max-width: 260px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.top-actions select {
  width: 210px;
  min-height: 36px;
}

.top-actions .language-select {
  width: 62px;
  min-width: 62px;
  min-height: 34px;
  padding-inline: 10px 24px;
  font-size: var(--font-sm);
  font-weight: 800;
}

.main {
  padding: 16px clamp(10px, 1.2vw, 20px) 32px;
}

.period-shell {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.strategy-row {
  min-width: 0;
}

.period-row,
.tab-row,
.toolbar-row,
.segmented {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.period-row {
  margin-bottom: 0;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-soft);
}

.period-head {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.period-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.custom-period {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 8px;
  border-left: 1px solid var(--line-soft);
}

.custom-period label {
  width: 150px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.period-label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.period-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.period-btn {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
}

.period-shell .period-head {
  flex: 0 1 auto;
  justify-content: flex-start;
}

.tab-row {
  margin: 18px 0;
}

.nav-shell {
  display: grid;
  gap: 8px;
  margin: 16px 0 18px;
}

.main-nav,
.subtab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.main-nav {
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: var(--shadow-soft);
}

.main-nav-btn,
.subtab-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.main-nav-btn:hover,
.subtab-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

.main-nav-btn.active {
  color: #00150b;
  border-color: color-mix(in srgb, var(--primary) 76%, transparent);
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 16%, transparent);
}

.subtab-row {
  padding: 2px 0;
}

.subtab-btn {
  min-height: 32px;
  padding: 0 11px;
  font-size: 13px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border-color: var(--line-soft);
}

.subtab-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.btn,
.tab-btn,
.period-btn,
.ghost-btn,
.primary-btn,
.danger-btn,
.icon-btn,
.chip,
.status-pill {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover,
.tab-btn:hover,
.period-btn:hover,
.ghost-btn:hover,
.icon-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  transform: translateY(-1px);
}

.period-btn,
.tab-btn {
  color: var(--muted);
  min-width: 88px;
}

.period-btn.active,
.tab-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.tab-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.primary-btn {
  color: #00150b;
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  border-color: color-mix(in srgb, var(--primary) 82%, #000);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}

.danger-btn {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.ghost-btn {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.ghost-btn.active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}

.theme-toggle {
  min-width: 104px;
}

.icon-btn {
  width: 38px;
  padding: 0;
  color: var(--muted);
}

.chip,
.status-pill {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
  color: var(--muted);
}

.chip.gold {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.chip.green,
.status-pill.active {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.status-pill.inactive {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.grid {
  display: grid;
  /* Single-column stack by default, bounded so a wide child (tables, code
     blocks, nested grids) can't stretch the view past the viewport. Multi-column
     variants (.kpi-grid, .four-col, .two-col, .metric-row-6, ...) are defined
     after this and override the columns. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.kpi-grid {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  margin-bottom: 18px;
}

.kpi-card,
.panel,
.seller-card,
.lead-card,
.list-row,
.notice,
.link-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--panel-glow), var(--shadow-soft);
}

.kpi-card {
  min-height: 82px;
  padding: 15px 16px;
}

.kpi-card p {
  margin: 0 0 8px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.kpi-card strong {
  display: block;
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
}

.kpi-card small {
  color: var(--muted);
}

.kpi-card.green strong {
  color: var(--green);
}

.kpi-card.gold strong {
  color: var(--warning);
}

.kpi-card.red strong {
  color: var(--red);
}

.kpi-card.violet strong {
  color: var(--violet);
}

.kpi-card.cyan strong {
  color: var(--cyan);
}

.kpi-card.orange strong {
  color: var(--orange);
}

.content-view {
  min-height: 420px;
}

.content-view > .grid {
  align-content: start;
  gap: var(--space-2);
}

.panel {
  padding: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-header h2,
.panel-header h3,
.seller-card h3,
.link-card h3,
.modal-header h2 {
  margin: 0;
}

.panel-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.section-toolbar-panel {
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--panel-glow), var(--shadow-soft);
}

.highlight-panel {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--card-bg) 91%, transparent));
}

.two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.closer-workspace {
  gap: 12px;
}

.closer-hero {
  padding: 14px;
}

.closer-hero .panel-header {
  align-items: flex-start;
  margin-bottom: 10px;
}

.closer-hero-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 150px;
}

.closer-hero-meta small {
  color: var(--muted);
  font-weight: 800;
}

.seller-quote-mini .strategy-quote-strip {
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.seller-quote-mini .strategy-quote-strip strong {
  font-size: 12px;
}

.seller-quote-mini .strategy-quote-strip small {
  font-size: 10px;
}

.closer-kpi-grid {
  grid-template-columns: repeat(5, minmax(128px, 1fr));
}

.workspace-main-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.priority-panel {
  min-height: 100%;
}

.priority-lead-list {
  display: grid;
  gap: 8px;
}

.priority-lead-list.compact {
  gap: 7px;
}

.priority-lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.priority-lead-main {
  min-width: 0;
}

.priority-lead-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.priority-lead-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-lead-row p,
.priority-lead-row small,
.ai-brief-row p,
.ai-brief-row small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-lead-row p,
.ai-brief-row p {
  color: var(--text);
  font-size: 12px;
}

.priority-lead-row small,
.ai-brief-row small {
  font-size: 11px;
  white-space: nowrap;
}

.mini-tags {
  margin-top: 6px;
  gap: 4px;
}

.ai-brief-row {
  align-items: flex-start;
}

.bar-chart {
  min-height: 220px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 14px 4px 2px;
}

.bar-item {
  flex: 1;
  min-width: 36px;
  display: grid;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.bar {
  min-height: 10px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 75%, transparent), color-mix(in srgb, var(--green) 28%, transparent));
  position: relative;
}

.bar.current {
  background: linear-gradient(180deg, var(--primary-strong), color-mix(in srgb, var(--primary) 72%, transparent));
}

.bar strong {
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  color: var(--text);
}

.progress-list {
  display: grid;
  gap: 14px;
}

.progress-row {
  display: grid;
  gap: 7px;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
}

.track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 42%, transparent);
}

.fill {
  height: 100%;
  width: var(--value);
  background: var(--accent, var(--green));
  border-radius: inherit;
}

.seller-card {
  padding: 16px;
  min-height: 158px;
  display: grid;
  gap: 14px;
}

.seller-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--primary);
  font-weight: 900;
  flex: 0 0 auto;
}

.avatar.green {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 36%, transparent);
  color: var(--green);
}

.avatar.red {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 36%, transparent);
  color: var(--red);
}

.seller-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.seller-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.seller-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-stat {
  min-height: 54px;
  border-radius: 8px;
  background: var(--surface-3);
  padding: 10px;
}

.mini-stat strong {
  display: block;
  color: var(--blue);
}

.mini-stat small {
  color: var(--muted);
}

.pipeline-filters {
  margin-bottom: 8px;
  padding: 9px 10px;
}

.pipeline-mode-chip {
  flex: 0 0 auto;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.pipeline-section-chip {
  flex: 0 0 auto;
  min-width: 78px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.pipeline-toolbar {
  align-items: center;
  gap: var(--space-2);
}

.pipeline-filters select {
  flex: 0 0 128px;
  min-height: 30px;
}

.pipeline-filters .search-input {
  flex: 1 1 360px;
  min-height: 30px;
}

.pipeline-result-chip {
  flex: 0 0 auto;
  min-width: 98px;
}

.search-input,
input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  padding: 9px 11px;
  outline: none;
}

.search-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 72%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.kanban-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(150px, 1fr));
  gap: 7px;
  min-width: 0;
  font-size: clamp(11px, 0.68vw, 13px);
}

.stage-column {
  min-width: 0;
  align-self: start;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--kanban-bg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.stage-column.drag-over {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.stage-head {
  min-height: 46px;
  padding: 8px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}

.stage-head h3 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(11px, 0.72vw, 13px);
  line-height: 1.15;
  color: var(--accent);
}

.stage-head .micro {
  margin-top: 2px;
  font-size: clamp(9px, 0.54vw, 10px);
  line-height: 1.1;
  white-space: nowrap;
}

.stage-count {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 900;
  font-size: 11px;
}

.stage-body {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.lead-card {
  padding: 8px;
  border-color: color-mix(in srgb, var(--accent, var(--line)) 34%, var(--line));
  background: var(--lead-bg);
  overflow: hidden;
}

.lead-card:hover {
  border-color: var(--accent);
}

.lead-card h4 {
  margin: 0 0 4px;
  font-size: clamp(12px, 0.72vw, 13px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-card-head {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
}

.lead-card-head h4 {
  flex: 1 1 auto;
  margin-bottom: 0;
  min-width: 0;
}

.value-pill {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-radius: 999px;
  color: var(--green);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  max-width: 76px;
  overflow: hidden;
  padding: 4px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-meta-line.strong {
  color: var(--text);
  font-weight: 800;
}

.lead-message-line {
  border-left: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  margin-top: 5px;
  padding-left: 6px;
}

.lead-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(11px, 0.66vw, 12px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
  min-width: 0;
}

.tag {
  max-width: 100%;
  overflow: hidden;
  min-height: 18px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: clamp(10px, 0.58vw, 11px);
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1340px) {
  .kanban {
    min-width: 1190px;
  }
}

.tag.context {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
}

.tag.objection {
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 10%, transparent);
}

.tag.money {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.tag.blue {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
}

.tag.gold {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.tag.danger {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.table th {
  color: var(--faint);
  font-size: 12px;
  text-transform: uppercase;
}

.table td {
  color: var(--text);
}

.table tr:hover td {
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
}

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

.list-row {
  min-height: 66px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.list-row strong {
  display: block;
}

.list-row p {
  margin: 4px 0 0;
  color: var(--muted);
}

.notice {
  padding: 16px;
  border-color: color-mix(in srgb, var(--warning) 36%, transparent);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}

.notice.red {
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: color-mix(in srgb, var(--red) 6%, transparent);
}

.notice.cyan {
  border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
  background: color-mix(in srgb, var(--cyan) 6%, transparent);
}

.table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.quality-page,
.followup-page,
.whatsapp-page {
  display: grid;
  /* Bound the implicit column so a wide child (e.g. the 14-col quality table)
     can't stretch the whole view past the viewport on small screens. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.quality-filters label,
.followup-page label,
.whatsapp-page label {
  min-width: 160px;
}

.whatsapp-hero {
  gap: 10px;
}

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

.whatsapp-command-center.premium {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.whatsapp-command-center.premium > * {
  min-width: 0;
}

.whatsapp-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 118px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%),
    var(--surface);
}

.command-hero-copy h2 {
  margin: 2px 0 4px;
  font-size: clamp(20px, 2vw, 28px);
  text-wrap: balance;
}

.command-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.command-status-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(104px, 1fr));
  gap: 8px;
}

.status-pill {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.status-pill b {
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.status-pill.green {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
}

.status-pill.gold {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
}

.whatsapp-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
}

.whatsapp-command-strip article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}

.whatsapp-command-strip strong {
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.whatsapp-command-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.compact-command-grid {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin-bottom: 0;
}

.compact-command-grid .kpi-card {
  min-height: 76px;
  padding: 12px;
}

.compact-command-grid .kpi-card p {
  margin-bottom: 6px;
  line-height: 1.2;
}

.compact-command-grid .kpi-card strong {
  font-size: 24px;
}

.command-actions-panel {
  padding: 12px;
}

.command-action-buttons .primary-btn,
.command-action-buttons .ghost-btn {
  min-height: 34px;
  padding: 8px 12px;
}

.whatsapp-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.whatsapp-hero-stats span {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.whatsapp-hero-stats strong {
  color: var(--text);
}

.whatsapp-sync-status {
  align-items: center;
  background: color-mix(in srgb, var(--cyan) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line-soft));
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  min-height: 30px;
  padding: 5px 9px;
}

.whatsapp-hero-stats .danger strong {
  color: var(--red);
}

.whatsapp-hero-stats .success strong {
  color: var(--green);
}

.whatsapp-hero-stats .info strong {
  color: var(--cyan);
}

.whatsapp-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(460px, 1fr) minmax(300px, 360px);
  gap: 8px;
  min-height: min(760px, calc(100vh - 220px));
}

.whatsapp-sidebar,
.whatsapp-chat-panel,
.whatsapp-context-panel {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.whatsapp-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.whatsapp-sidebar-tools {
  display: grid;
  gap: 8px;
}

.inbox-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inbox-segment-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.segment-chip {
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 900;
  line-height: 1.1;
}

.segment-chip span {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 11px;
}

.segment-chip:hover,
.segment-chip.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
}

.filter-chip {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.filter-chip:hover,
.filter-chip.active {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
}

.whatsapp-sidebar-tools label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.whatsapp-sidebar-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.whatsapp-inbox-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.whatsapp-monitor-layout {
  display: block;
  gap: 8px;
}

.line-monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.line-monitor-column {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 8px;
}

.conversation-monitor-card,
.whatsapp-monitor-detail {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.conversation-monitor-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
}

.conversation-monitor-card.selected {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
}

.conversation-monitor-card.needs-human {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}

.monitor-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
}

.monitor-card-head h3 {
  margin: 0;
  font-size: 14px;
}

.monitor-card-head p,
.monitor-card-message {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.monitor-card-message {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-monitor-header {
  display: grid;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-monitor-header div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.line-monitor-header strong {
  color: var(--text);
  font-size: 14px;
}

.line-monitor-header p {
  margin: 0;
}

.line-monitor-list {
  display: grid;
  gap: 6px;
}

.empty-line {
  min-height: 84px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  text-align: center;
}

.bot-intake-pending-list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.bot-intake-pending-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--yellow) 36%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow) 7%, var(--surface-2));
}

.whatsapp-monitor-detail {
  display: grid;
  gap: 8px;
}

.whatsapp-monitor-detail .whatsapp-chat-panel,
.whatsapp-monitor-detail .whatsapp-context-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.whatsapp-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
}

.whatsapp-row:hover,
.whatsapp-row.selected {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-2));
}

.whatsapp-row.needs-human {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 5%, var(--surface-2));
}

.whatsapp-row.unlinked,
.whatsapp-row.opportunity {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
}

.wa-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
  font-size: 12px;
  font-weight: 1000;
}

.wa-avatar.large {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  font-size: 14px;
}

.wa-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.whatsapp-main {
  min-width: 0;
}

.whatsapp-main h3 {
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-unread {
  flex: 0 0 auto;
  min-width: 19px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #04110b;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}

.whatsapp-main p {
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-main small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.wa-row-badges em {
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.whatsapp-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 72px;
  text-align: right;
}

.whatsapp-meta strong {
  max-width: 92px;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-meta span,
.whatsapp-meta em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.whatsapp-meta em {
  color: var(--gold);
}

.whatsapp-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
}

.whatsapp-status.human {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
}

.whatsapp-status.handoff,
.whatsapp-status.needs-human {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}

.whatsapp-status.unlinked,
.whatsapp-status.opportunity {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  color: var(--gold);
}

.whatsapp-status.archived,
.whatsapp-status.opt-out {
  border-color: color-mix(in srgb, var(--muted) 34%, var(--line));
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted);
}

.whatsapp-chat-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
}

.whatsapp-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.wa-chat-title {
  flex: 1 1 auto;
  min-width: 0;
}

.wa-chat-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.whatsapp-chat-header h3,
.wa-chat-title-row h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.whatsapp-chat-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.whatsapp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.whatsapp-thread-inline {
  max-height: none;
  min-height: 0;
  padding: 12px 14px;
  overflow: auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 84%, transparent), transparent),
    var(--bg-soft);
}

.handoff-decision-card {
  display: grid;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
  background: color-mix(in srgb, var(--red) 5%, var(--surface));
}

.handoff-decision-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

.mini-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-meta-row span {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.whatsapp-bubble {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: min(72%, 600px);
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}

.whatsapp-bubble + .whatsapp-bubble {
  margin-top: 2px;
}

.whatsapp-bubble p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.whatsapp-bubble small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.whatsapp-bubble.inbound {
  justify-self: start;
  border-bottom-left-radius: 4px;
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--line));
}

.whatsapp-bubble.outbound {
  justify-self: end;
  border-bottom-right-radius: 4px;
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.whatsapp-bubble.system {
  justify-self: center;
  max-width: 82%;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 54%, transparent);
  opacity: .72;
  padding: 5px 8px;
}

.whatsapp-bubble.failed {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

.whatsapp-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.whatsapp-composer textarea {
  min-height: 48px;
  max-height: 88px;
  resize: vertical;
}

.whatsapp-send-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: end;
  min-width: 0;
}

.whatsapp-send-actions select {
  width: auto;
  min-width: 120px;
  max-width: 180px;
}

.whatsapp-send-actions .primary-btn,
.whatsapp-send-actions .ghost-btn {
  width: auto;
  min-height: 36px;
  padding: 8px 13px;
  white-space: nowrap;
}

.form-status {
  min-height: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.form-status[data-status="loading"] {
  color: var(--cyan);
}

.form-status[data-status="success"] {
  color: var(--green);
}

.form-status[data-status="error"] {
  color: var(--red);
}

.whatsapp-helper {
  margin: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 7%, var(--surface));
  color: var(--muted);
  font-weight: 800;
}

.whatsapp-template-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 160px) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
}

.wa-activity-rail {
  margin: 0;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.wa-activity-rail summary {
  cursor: pointer;
  padding: 7px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.wa-activity-rail summary span {
  margin-left: 6px;
  color: var(--gold);
}

.wa-activity-rail > div {
  display: grid;
  gap: 6px;
  padding: 0 12px 10px;
}

.wa-activity-rail article {
  padding: 7px 8px;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.wa-activity-rail strong,
.wa-activity-rail p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-activity-rail strong {
  color: var(--text);
  font-size: 11px;
}

.wa-activity-rail p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.whatsapp-template-inline strong {
  color: var(--text);
}

.whatsapp-template-inline p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.compact-whatsapp-form {
  gap: 10px;
  padding: 12px;
}

.compact-whatsapp-form textarea {
  min-height: 80px;
  max-height: 120px;
}

.whatsapp-context-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  overflow: auto;
}

.context-lead-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.context-lead-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.context-lead-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.context-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.context-mini-grid span,
.whatsapp-context-block {
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.inbox-only-actions {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 5%, var(--surface-2));
}

.wa-action-form {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.wa-action-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wa-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.context-mini-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.whatsapp-context-panel .handoff-decision-card {
  margin: 0;
}

.whatsapp-context-block h4 {
  margin: 0 0 8px;
  color: var(--text);
}

.whatsapp-context-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.context-answer-list.compact {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.context-answer-list.compact article {
  padding: 9px;
}

.quality-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.quality-table {
  min-width: 1180px;
}

.quality-table th,
.quality-table td {
  font-size: 12px;
}

.mini-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ghost-btn.slim,
.primary-btn.slim {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

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

.compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.compact-row p,
.compact-row small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
}

.quality-score {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.quality-score.alta {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.quality-score.media {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.quality-score.baja {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 42%, transparent);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.followup-groups,
.alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.followup-group {
  align-content: start;
}

.followup-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--cyan) 5%, var(--surface));
}

.alert-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.alert-column h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.alert-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.alert-card p {
  margin: 0;
  color: var(--muted);
}

.alert-card.critical {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
}

.alert-card.high {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
  background: color-mix(in srgb, var(--red) 5%, var(--surface-2));
}

.alert-card.attention {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.alert-card.medium {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.alert-card.recommendation {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--line));
}

.alert-card.low {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--line));
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
}

.priority-badge.high {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.priority-badge.medium {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.priority-badge.low {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.compact-notice {
  padding: 12px;
}

.timeline-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.timeline-item > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent);
}

.timeline-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

.links-grid {
  display: grid;
  gap: 12px;
}

.link-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--provider-color, var(--blue)) 56%, var(--line));
}

.link-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.price {
  color: var(--green);
  font-size: 24px;
  font-weight: 900;
}

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

.copy-box {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 5%, var(--surface));
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.compact-copy-row .copy-box {
  min-height: 38px;
  display: grid;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}

.compact-copy-row .copy-box span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.sales-kit-view,
.training-admin-view {
  align-content: start;
}

.sales-kit-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.sales-kit-hero h2 {
  margin: 2px 0 4px;
}

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

.training-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.training-tab.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.training-card,
.training-list-item {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.training-card-head,
.training-list-row,
.training-row-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.training-card-head h3 {
  margin: 6px 0 4px;
}

.training-card-head p,
.training-card p,
.training-mini-section p,
.training-list-item p {
  margin: 0;
  color: var(--muted);
}

.training-card-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  white-space: nowrap;
}

.training-mini-section {
  display: grid;
  gap: 8px;
}

.soft-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.training-list-row > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.training-list-row p,
.training-list-row small {
  margin: 0;
  color: var(--muted);
}

.training-row-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.training-form textarea {
  min-height: 92px;
}

.training-modal {
  max-width: 980px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.checkbox-grid legend {
  padding: 0 6px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-check {
  min-height: 34px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.split-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.split-card strong,
.split-card small {
  display: block;
}

.split-card small {
  margin-top: 4px;
  color: var(--muted);
}

.split-input,
.dist-split input {
  text-align: center;
  color: var(--primary);
  font-weight: 900;
}

/* ---- Finanzas: liquidaciones / comisiones ---- */
.metric-row-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.finance-config-row {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.finance-config-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  max-width: 190px;
}

.finance-config-row label.check-row {
  flex-direction: row;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
}

.owner-card {
  grid-template-columns: minmax(0, 1fr) 160px;
}

.owner-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.owner-name-input {
  font-weight: 800;
  color: var(--text);
}

.owner-pct {
  display: flex;
  align-items: center;
  gap: 6px;
}

.owner-pct .split-input {
  width: 100%;
}

.icon-btn.danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.owner-row .owner-avatar,
.avatar.owner-avatar {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  color: var(--primary);
}

.warn-text {
  color: var(--warning);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .metric-row-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .metric-row-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pill-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.pill-check {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
}

.pill-check:has(input:checked),
.pill-check.selected {
  border-color: var(--blue);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.pill-check input {
  width: auto;
  min-height: auto;
}

.compact-row {
  min-height: 58px;
}

.distribution-list {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.distribution-view {
  gap: 14px;
}

.distribution-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 24rem),
    var(--card-bg);
}

.distribution-hero h2 {
  margin: 4px 0 5px;
  font-size: 24px;
}

.distribution-hero p {
  margin: 0;
  color: var(--muted);
}

.distribution-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.distribution-kpis {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.assignment-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mode-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-3) 44%, transparent);
  color: var(--muted);
}

.mode-card span {
  font-size: 21px;
}

.mode-card strong {
  color: var(--text);
}

.mode-card p {
  margin: 0;
  font-size: 13px;
}

.mode-card.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.distribution-admin-panel {
  padding: 14px;
}

.distribution-table-wrap,
.rules-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.distribution-table,
.rules-table {
  width: 100%;
  border-collapse: collapse;
}

.distribution-table th,
.distribution-table td,
.rules-table th,
.rules-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.distribution-table th,
.rules-table th {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.distribution-table td {
  min-width: 92px;
}

.distribution-table td:first-child {
  min-width: 230px;
}

.distribution-row.paused {
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}

.distribution-row.inactive {
  background: color-mix(in srgb, var(--red) 4%, transparent);
  opacity: 0.86;
}

.status-segment,
.weight-segment,
.compact-toggle-row,
.row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.dist-mini,
.account-toggle {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}

.dist-mini {
  min-width: 36px;
  padding: 0 7px;
}

.dist-mini.active,
.account-toggle.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.dist-mini.active.paused,
.dist-mini.active.gold {
  color: var(--warning);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.dist-mini.active.inactive {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.compact-number {
  width: 78px;
  min-height: 32px;
  padding: 6px 8px;
  text-align: center;
  font-weight: 900;
}

.split-number {
  width: 70px;
  color: var(--warning);
}

.icon-action {
  width: 34px;
  min-height: 32px;
  padding: 0;
}

.performance-cell {
  display: grid;
  gap: 3px;
  white-space: nowrap;
}

.performance-cell small {
  font-size: 11px;
}

.dist-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.dist-help-grid p {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-3) 48%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.campaign-rules-panel {
  padding: 14px;
}

.campaign-rule-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.5fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.compact-pills {
  margin: 0;
  gap: 6px;
}

.compact-pills .pill-check {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.campaign-rule-action {
  display: flex;
  justify-content: flex-end;
}

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

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

.distribution-card {
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.distribution-card.paused {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.distribution-card.inactive {
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  opacity: 0.88;
}

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

.dist-status-dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--green) 40%, transparent);
  background: radial-gradient(circle, var(--green) 0 28%, color-mix(in srgb, var(--green) 16%, transparent) 31% 100%);
  flex: 0 0 auto;
}

.dist-status-dot.paused {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: radial-gradient(circle, var(--warning) 0 28%, color-mix(in srgb, var(--warning) 13%, transparent) 31% 100%);
}

.dist-status-dot.inactive {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: radial-gradient(circle, var(--red) 0 28%, color-mix(in srgb, var(--red) 13%, transparent) 31% 100%);
}

.dist-metrics {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0 18px;
  text-align: right;
}

.dist-metrics strong {
  color: var(--blue);
  font-size: 24px;
}

.dist-metrics span {
  color: var(--muted);
}

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

.gold-text {
  color: var(--warning) !important;
}

.dist-toggle-row,
.dist-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dist-toggle {
  min-width: 170px;
  min-height: 54px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 950;
  font-size: 17px;
}

.dist-toggle.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.dist-warning {
  margin: 10px 0 0;
  color: var(--orange);
  font-weight: 800;
}

.dist-controls {
  margin-top: 18px;
}

.dist-controls > div {
  min-width: 310px;
  flex: 1;
}

.dist-small {
  min-width: 92px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
}

.dist-small.active {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.dist-small.active.gold {
  color: var(--warning);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.dist-split {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid var(--violet);
  border-radius: 8px;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet);
  font-weight: 950;
}

.lead-share-input {
  border-color: color-mix(in srgb, var(--cyan) 64%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: var(--cyan);
}

.dist-performance {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 850;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.check-row {
  display: flex !important;
  align-items: center;
  grid-template-columns: none !important;
  flex-direction: row;
  text-transform: none !important;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--overlay);
  backdrop-filter: blur(6px);
}

.modal-card {
  width: min(780px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header {
  margin-bottom: 18px;
}

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

.modal-actions {
  justify-content: flex-end;
}

.whatsapp-modal {
  width: min(880px, 100%);
}

.whatsapp-modal-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-weight: 800;
}

.whatsapp-thread {
  display: grid;
  gap: 10px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 4px;
}

.whatsapp-message {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.whatsapp-message.inbound {
  border-color: color-mix(in srgb, var(--cyan) 35%, var(--line));
  background: color-mix(in srgb, var(--cyan) 6%, var(--surface-2));
}

.whatsapp-message.system {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

.whatsapp-message strong {
  color: var(--text);
  font-size: 12px;
}

.whatsapp-message p {
  margin: 6px 0;
  color: var(--text);
}

.whatsapp-message small {
  color: var(--muted);
}

.whatsapp-lead-context,
.whatsapp-reply-box,
.lead-context-card {
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 5%, var(--card-bg));
  padding: 14px;
}

.whatsapp-lead-context {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.whatsapp-lead-context p,
.whatsapp-lead-context ul {
  margin: 0;
  color: var(--text);
}

.whatsapp-lead-context ul {
  display: grid;
  gap: 5px;
  padding-left: 18px;
}

.whatsapp-lead-context li span {
  color: var(--cyan);
  font-weight: 900;
}

.whatsapp-reply-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.whatsapp-reply-box label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-drawer {
  width: min(1360px, calc(100vw - 24px));
  max-height: calc(100vh - 34px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lead-detail-form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.lead-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lead-drawer-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.lead-title-input {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 30px;
  font-weight: 950;
}

.lead-title-input:focus {
  box-shadow: none;
  border: 0;
}

.danger-icon {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.lead-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.lead-metric {
  min-width: 126px;
  min-height: 60px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
}

.lead-metric strong {
  color: var(--blue);
  font-size: 26px;
}

.lead-metric small {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.lead-metric.green {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.lead-metric.green strong {
  color: var(--green);
}

.lead-info-panel,
.commercial-card,
.tracking-card,
.stage-picker,
.lead-context-card,
.bot-decision-card,
.lead-profile,
.context-mini-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 16px;
}

.lead-profile {
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--card-bg));
}

.lead-profile-grid {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(420px, 1.55fr) minmax(270px, .95fr);
  gap: 10px;
  align-items: start;
}

.lead-profile-summary,
.lead-profile-main,
.lead-profile-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lead-profile-summary .context-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-profile-summary .context-mini-grid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-profile-main {
  align-content: start;
}

.lead-score-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card-bg));
}

.lead-score-card strong {
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
}

.lead-score-card small,
.context-mini-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.context-mini-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-color: var(--line-soft);
}

.context-mini-card.flat {
  background: var(--surface);
}

.context-mini-card h3,
.lead-profile-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.context-mini-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.lead-profile-section .panel-header {
  margin: 0;
}

.lead-profile-timeline {
  gap: 6px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.timeline-item.compact {
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
}

.timeline-item.compact strong {
  font-size: 12px;
}

.timeline-item.compact p,
.timeline-item.compact small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
}

.mini-chat-preview {
  display: grid;
  gap: 7px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.mini-chat-preview .whatsapp-bubble {
  max-width: 86%;
  padding: 8px 10px;
}

.lead-note-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.lead-task-form,
.lead-profile-template {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(135px, .8fr) minmax(90px, .55fr) auto;
  gap: 7px;
  align-items: center;
}

.lead-profile-template {
  grid-template-columns: minmax(0, 1fr) auto;
}

.custom-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.custom-fields-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.custom-fields-grid input,
.custom-fields-grid select,
.custom-fields-grid textarea {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  text-transform: none;
}

.custom-fields-grid .boolean-field {
  align-content: center;
}

.custom-field-check {
  text-transform: none;
}

.custom-field-tag {
  background: color-mix(in srgb, var(--cyan) 11%, var(--card-bg));
  border-color: color-mix(in srgb, var(--cyan) 40%, var(--line));
  color: var(--text);
  max-width: 100%;
}

.custom-fields-admin code {
  color: var(--primary);
  font-size: 11px;
}

.lead-task-item,
.profile-note-item,
.profile-action-card,
.profile-product-card {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
}

.lead-task-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.profile-note-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.lead-task-item.done {
  opacity: .72;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bot-decision-card {
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--red) 26%, var(--line));
  background: color-mix(in srgb, var(--red) 4%, var(--card-bg));
}

.bot-decision-card .panel-header {
  margin-bottom: 0;
}

.bot-decision-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-qualification-card {
  border-color: color-mix(in srgb, var(--cyan) 26%, var(--line));
  background: color-mix(in srgb, var(--cyan) 4%, var(--card-bg));
}

.ai-error {
  color: var(--red) !important;
}

.bot-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.bot-decision-grid span {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.bot-decision-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.lead-context-card {
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
}

.context-summary {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
}

.context-summary.inbound {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

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

.context-source-grid span,
.context-answer-list article {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
  color: var(--muted);
}

.context-source-grid strong,
.context-answer-list strong {
  display: block;
  color: var(--cyan);
  font-size: 12px;
  margin-bottom: 5px;
}

.context-answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.context-answer-list p {
  margin: 0;
  color: var(--text);
}

.lead-info-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.lead-info-panel label,
.commercial-card label,
.tracking-card label,
.seller-modal label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.commercial-card {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
}

.commercial-card h3,
.tracking-card h3,
.stage-picker h3,
.lead-context-card h3 {
  margin: 0 0 12px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0;
}

.field-label {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.offer-grid,
.stage-option-grid,
.payment-grid,
.contact-grid {
  display: grid;
  gap: 10px;
}

.offer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offer-card,
.payment-option,
.stage-option,
.contact-btn {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  font-weight: 900;
}

.offer-card span {
  font-size: 24px;
}

.offer-card small {
  color: var(--muted);
}

.offer-card.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

.form-grid.compact {
  margin-top: 14px;
}

.big-check {
  min-height: 58px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, transparent);
  color: var(--green) !important;
  display: flex !important;
  align-items: center;
  grid-template-columns: none !important;
  flex-direction: row;
  text-transform: none !important;
  font-size: 18px !important;
}

.big-check input {
  width: auto;
  min-height: auto;
}

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

.payment-option.active {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, transparent);
}

.history-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.history-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-3);
}

.history-item > span {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.history-item strong {
  display: block;
}

.history-item p {
  margin: 5px 0 0;
  color: var(--muted);
}

.note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 12px;
  margin: 8px 0 14px;
}

.contact-btn {
  min-height: 58px;
  text-decoration: none;
  font-size: 20px;
}

.contact-btn.whatsapp {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.contact-btn.email {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--cyan) 42%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.stage-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.stage-option.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.stage-option small {
  display: block;
  color: var(--green);
}

.drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.drawer-actions .primary-btn {
  min-width: 220px;
}

/* Big, obvious close button at the bottom of the lead card (mobile + desktop) */
.lead-close-big {
  width: 100%;
  margin-top: 14px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lead-close-big:hover {
  background: var(--surface-3, var(--surface-2));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

.empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-3) 50%, transparent);
  font-size: 13px;
}

.empty strong {
  color: var(--text);
}

.empty p {
  max-width: 460px;
  margin: 0;
}

.empty-actions {
  margin-top: 8px;
}

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

.code-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-x: auto;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.check-step {
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.check-step strong {
  display: block;
  margin-bottom: 8px;
}

.check-step p {
  margin: 0;
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--green);
  box-shadow: var(--shadow);
}

/* Compact CRM density layer */
body {
  font-size: var(--font-md);
  line-height: 1.35;
}

.main {
  padding: 10px clamp(8px, 1vw, 16px) 24px;
}

.topbar {
  min-height: 52px;
  gap: var(--space-4);
  padding: 8px 14px;
}

.brand {
  gap: var(--space-3);
  min-width: 220px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: 18px;
}

.logo-mark {
  position: relative;
  overflow: hidden;
}

.logo-mark span {
  position: relative;
  z-index: 0;
}

.logo-mark img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: var(--surface);
}

.brand h1 {
  font-size: var(--font-lg);
}

.brand p {
  font-size: var(--font-sm);
  line-height: 1.15;
}

.top-actions {
  gap: var(--space-2);
}

.top-actions select {
  width: 178px;
  min-height: var(--button-height-compact);
}

.period-row {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.period-head,
.period-buttons,
.custom-period,
.period-row,
.tab-row,
.toolbar-row,
.segmented {
  gap: var(--space-2);
}

.custom-period {
  padding-left: var(--space-2);
}

.custom-period label {
  width: 128px;
  font-size: var(--font-xs);
}

.period-label,
.period-summary,
.panel-header p,
.kpi-card p,
.kpi-card small,
.muted,
.micro {
  font-size: var(--font-sm);
}

.nav-shell {
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.main-nav {
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.subtab-row {
  gap: var(--space-2);
  padding: 0;
}

.main-nav-btn,
.subtab-btn {
  min-height: var(--button-height-compact);
  gap: var(--space-2);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.main-nav-btn.active {
  box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 12%, transparent);
}

.subtab-btn {
  min-height: 28px;
  padding: 0 9px;
}

.btn,
.tab-btn,
.period-btn,
.ghost-btn,
.primary-btn,
.danger-btn,
.icon-btn,
.chip,
.status-pill {
  min-height: var(--button-height-compact);
  gap: var(--space-2);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.period-btn,
.tab-btn {
  min-width: 72px;
}

.icon-btn {
  width: var(--button-height-compact);
  min-width: var(--button-height-compact);
}

.chip,
.status-pill,
.soft-tag,
.tag,
.whatsapp-status,
.mini-badge,
.status-badge {
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--font-xs);
  line-height: 1.2;
}

.theme-toggle {
  min-width: 88px;
}

.grid,
.dashboard-grid.two,
.training-grid,
.context-mini-grid,
.bot-decision-grid,
.context-answer-list,
.context-source-grid,
.offer-grid,
.stage-option-grid,
.payment-grid,
.contact-grid,
.checklist-grid {
  gap: var(--space-3);
}

.kpi-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.kpi-card {
  min-height: 66px;
  padding: var(--card-padding-compact);
}

.kpi-card p {
  margin-bottom: var(--space-2);
  letter-spacing: 0;
}

.kpi-card strong {
  font-size: 23px;
}

.panel,
.panel.nested,
.seller-card,
.link-card,
.training-card,
.training-list-item,
.list-row,
.notice,
.lead-info-panel,
.commercial-card,
.tracking-card,
.stage-picker,
.lead-context-card,
.bot-decision-card,
.followup-card,
.alert-card,
.distribution-card,
.split-card,
.mode-card {
  padding: var(--card-padding-compact);
  border-radius: var(--radius-md);
}

.panel-header {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.panel-header h2,
.modal-header h2 {
  font-size: 18px;
  line-height: 1.15;
}

.panel-header h3,
.seller-card h3,
.link-card h3,
.training-card-head h3,
.commercial-card h3,
.tracking-card h3,
.stage-picker h3,
.lead-context-card h3 {
  font-size: var(--font-lg);
  line-height: 1.15;
}

.search-input,
input,
select,
textarea {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
}

textarea {
  min-height: 76px;
}

.pipeline-filters {
  margin-bottom: var(--space-2);
}

.pipeline-filters select {
  flex-basis: 128px;
}

.pipeline-filters .search-input {
  flex-basis: 360px;
}

.kanban-wrap {
  padding-bottom: var(--space-2);
}

.kanban {
  gap: var(--space-2);
  font-size: 12px;
}

.stage-column {
  border-radius: var(--radius-md);
}

.stage-head {
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
}

.stage-head h3 {
  font-size: 12px;
}

.stage-head .micro {
  font-size: var(--font-xs);
}

.stage-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  font-size: var(--font-xs);
}

.stage-body {
  gap: var(--space-2);
  padding: var(--space-2);
}

.lead-card {
  padding: 7px;
  border-radius: var(--radius-sm);
}

.lead-card h4 {
  margin-bottom: 3px;
  font-size: 12px;
}

.lead-card p {
  font-size: 11px;
  line-height: 1.18;
}

.lead-tags {
  gap: 3px;
  margin-top: var(--space-2);
}

.tag {
  min-height: 17px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 10px;
}

.empty {
  gap: var(--space-1);
  padding: var(--space-3);
  font-size: var(--font-sm);
}

.list-row,
.training-card,
.training-list-item {
  gap: var(--space-3);
}

.training-card-head,
.training-list-row,
.training-row-actions {
  gap: var(--space-3);
}

.training-card-head h3 {
  margin: 2px 0;
}

.training-card-meta,
.training-mini-section {
  gap: var(--space-2);
}

.whatsapp-page {
  gap: var(--space-3);
}

.quality-filters label,
.followup-page label,
.whatsapp-page label {
  min-width: 132px;
}

.whatsapp-hero-stats {
  gap: var(--space-2);
}

.whatsapp-hero-stats span {
  padding: 5px 8px;
  font-size: var(--font-xs);
}

.whatsapp-workspace {
  grid-template-columns: minmax(240px, 320px) minmax(360px, 1fr) minmax(250px, 330px);
  gap: var(--space-3);
  min-height: 610px;
}

.whatsapp-sidebar,
.whatsapp-chat-panel,
.whatsapp-context-panel {
  border-radius: var(--radius-md);
}

.whatsapp-sidebar {
  gap: var(--space-2);
  padding: var(--space-3);
}

.whatsapp-sidebar-tools,
.whatsapp-inbox-list {
  gap: var(--space-2);
}

.whatsapp-sidebar-tools label {
  gap: var(--space-1);
  font-size: var(--font-xs);
}

.whatsapp-row {
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.whatsapp-main h3 {
  margin: 4px 0 2px;
  font-size: 13px;
}

.whatsapp-main p,
.whatsapp-main small,
.whatsapp-sidebar-count,
.whatsapp-template-inline p,
.form-status {
  font-size: var(--font-sm);
}

.whatsapp-meta {
  min-width: 62px;
  gap: 3px;
}

.whatsapp-meta strong,
.whatsapp-meta span,
.whatsapp-meta em {
  font-size: var(--font-xs);
}

.whatsapp-row .mini-badge,
.whatsapp-action-row .mini-badge {
  align-self: center;
  padding: 4px 7px;
}

.whatsapp-chat-header {
  gap: var(--space-3);
  padding: var(--space-3);
}

.whatsapp-chat-header h3 {
  margin: 4px 0 2px;
  font-size: var(--font-lg);
}

.whatsapp-chat-header p {
  font-size: var(--font-sm);
}

.whatsapp-action-row {
  gap: var(--space-2);
}

.whatsapp-thread-inline {
  padding: var(--space-4);
}

.handoff-decision-card {
  gap: var(--space-2);
  margin: var(--space-3) var(--space-3) 0;
}

.whatsapp-bubble {
  gap: var(--space-1);
  max-width: min(78%, 560px);
  padding: 8px 10px;
  border-radius: 10px;
}

.whatsapp-bubble p {
  line-height: 1.35;
}

.whatsapp-bubble small {
  font-size: var(--font-xs);
}

.whatsapp-composer {
  gap: var(--space-2);
  padding: var(--space-3);
}

.whatsapp-composer textarea,
.compact-whatsapp-form textarea {
  min-height: 62px;
  max-height: 100px;
}

.whatsapp-send-actions {
  gap: var(--space-2);
}

.whatsapp-send-actions select {
  min-height: var(--button-height-compact);
  font-size: var(--font-sm);
}

.whatsapp-send-actions .primary-btn,
.whatsapp-send-actions .ghost-btn {
  min-height: var(--button-height-compact);
  padding: 0 10px;
}

.whatsapp-helper,
.whatsapp-template-inline,
.compact-whatsapp-form,
.whatsapp-context-panel,
.context-lead-card,
.context-mini-grid span,
.whatsapp-context-block {
  padding: var(--card-padding-compact);
}

.whatsapp-helper {
  margin: var(--space-3);
}

.whatsapp-template-inline {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 140px) auto auto;
  gap: var(--space-2);
}

.whatsapp-context-panel {
  gap: var(--space-3);
}

.context-lead-card {
  gap: var(--space-2);
}

.context-lead-card h3 {
  font-size: var(--font-lg);
}

.context-lead-card p {
  font-size: var(--font-sm);
}

.whatsapp-context-block h4 {
  margin-bottom: var(--space-2);
  font-size: var(--font-md);
}

.modal-backdrop {
  padding: var(--space-4);
}

.modal-card {
  max-height: calc(100vh - 24px);
  padding: var(--space-4);
}

.modal-header {
  margin-bottom: var(--space-4);
}

.lead-detail-form {
  gap: var(--space-4);
  padding: 16px;
}

.lead-drawer-head {
  gap: var(--space-3);
}

.lead-title-input {
  min-height: 36px;
  font-size: 24px;
}

.lead-badges {
  gap: var(--space-2);
}

.lead-metric {
  min-width: 92px;
  min-height: 46px;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
}

.lead-metric strong {
  font-size: 21px;
}

.lead-metric small {
  font-size: var(--font-xs);
}

.bot-decision-card,
.lead-context-card {
  gap: var(--space-3);
}

.bot-decision-grid span,
.context-summary,
.context-source-grid span,
.context-answer-list article {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.lead-info-panel {
  gap: var(--space-3);
}

.lead-info-panel label,
.commercial-card label,
.tracking-card label,
.seller-modal label,
.whatsapp-reply-box label {
  gap: var(--space-1);
  font-size: var(--font-xs);
}

.field-label {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-xs);
}

.offer-card,
.payment-option,
.stage-option,
.contact-btn,
.check-step {
  min-height: 54px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.offer-card span {
  font-size: 18px;
}

.contact-btn {
  font-size: 15px;
}

.drawer-actions {
  gap: var(--space-2);
}

.drawer-actions .primary-btn {
  min-width: 170px;
}

.code-box,
.debug-box {
  padding: var(--space-3);
  font-size: var(--font-sm);
}

.toast {
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

/* Visual QA polish for compact mode */
.topbar,
.top-actions,
.main-nav,
.subtab-row,
.period-row,
.toolbar-row {
  min-width: 0;
}

.top-actions > *,
.drawer-actions > *,
.mini-actions > *,
.row-actions > *,
.whatsapp-action-row > * {
  flex: 0 1 auto;
}

.top-actions .primary-btn,
.top-actions .ghost-btn,
.top-actions .danger-btn,
.top-actions .btn,
.top-actions .chip,
.main-nav-btn,
.subtab-btn,
.period-btn,
.tab-btn {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions select,
.pipeline-filters select,
.whatsapp-sidebar-tools select {
  max-width: 100%;
}

.brand > div,
.panel-header > div,
.seller-title,
.training-card-head > div,
.training-list-row > div,
.link-card-head > div,
.compact-row > div,
.list-row > div,
.whatsapp-chat-header > div,
.context-lead-card,
.stage-head > div {
  min-width: 0;
}

.brand h1,
.brand p,
.panel-header h2,
.panel-header h3,
.training-card-head h3,
.training-card-head p,
.training-list-row strong,
.training-list-row p,
.training-list-row small,
.link-card h3,
.link-card p,
.compact-row strong,
.compact-row p,
.list-row strong,
.list-row p,
.seller-title h3,
.seller-title p,
.context-lead-card h3,
.context-lead-card p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand h1,
.brand p,
.training-card-head h3,
.link-card h3,
.seller-title h3,
.context-lead-card h3 {
  white-space: nowrap;
}

.panel-header {
  align-items: flex-start;
}

.panel-header .toolbar-row,
.panel-header .row-actions,
.panel-header .mini-actions {
  justify-content: flex-end;
}

.table-wrap,
.quality-table,
.distribution-table-wrap,
.rules-table-wrap {
  max-width: 100%;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td,
.quality-table th,
.quality-table td,
.distribution-table th,
.distribution-table td,
.rules-table th,
.rules-table td {
  padding: 7px 8px;
  line-height: 1.25;
  vertical-align: top;
}

.table th,
.quality-table th,
.distribution-table th,
.rules-table th {
  font-size: var(--font-xs);
  letter-spacing: 0;
}

.table td,
.quality-table td,
.distribution-table td,
.rules-table td {
  font-size: var(--font-sm);
}

.table td,
.quality-table td {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.quality-table {
  min-width: 1040px;
}

.compact-row {
  min-height: 48px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.timeline-item {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3);
}

.timeline-item > span {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.priority-badge,
.quality-score {
  min-height: 22px;
  padding: 3px 7px;
  font-size: var(--font-xs);
}

.whatsapp-bubble.failed {
  border-color: color-mix(in srgb, var(--red) 55%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.whatsapp-row {
  align-items: start;
}

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

.whatsapp-template-inline select {
  min-width: 0;
}

.whatsapp-template-inline .ghost-btn,
.whatsapp-template-inline .primary-btn {
  white-space: nowrap;
}

.whatsapp-context-block p,
.handoff-decision-card p,
.bot-decision-card p,
.context-summary,
.context-answer-list p {
  overflow-wrap: anywhere;
}

.mini-meta-row {
  gap: var(--space-2);
}

.mini-meta-row span {
  min-width: 0;
  max-width: 100%;
}

.form-grid label,
.lead-info-panel label,
.commercial-card label,
.tracking-card label,
.whatsapp-page label,
.followup-page label,
.quality-filters label {
  min-width: 0;
}

.form-grid.compact {
  gap: var(--space-3);
}

.debug-box,
.code-box {
  max-width: 100%;
  overflow: auto;
}

.dist-toggle {
  min-width: 130px;
  min-height: 42px;
  font-size: var(--font-md);
}

.dist-status-dot {
  width: 42px;
  height: 42px;
  border-width: 3px;
}

.dist-metrics {
  gap: 0 var(--space-4);
}

.dist-metrics strong {
  font-size: 20px;
}

.dist-controls {
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.dist-controls > div {
  min-width: min(260px, 100%);
}

.dist-split {
  min-height: 44px;
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.distribution-card {
  padding: var(--card-padding-compact);
}

.campaign-rule-grid {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.3fr) auto;
  gap: var(--space-3);
}

.auth-card {
  padding: 28px 32px;
}

.auth-mark {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  font-size: 30px;
}

.auth-logo strong {
  font-size: 21px;
}

.auth-form {
  gap: var(--space-4);
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .lead-card,
:root[data-theme="dark"] .whatsapp-sidebar,
:root[data-theme="dark"] .whatsapp-chat-panel,
:root[data-theme="dark"] .whatsapp-context-panel,
:root[data-theme="dark"] .training-card,
:root[data-theme="dark"] .training-list-item {
  border-color: color-mix(in srgb, var(--line) 78%, #ffffff 8%);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: color-mix(in srgb, var(--input-bg) 82%, #ffffff 4%);
}

/* Premium SaaS polish layer */
.compact-chrome .period-shell {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.compact-chrome .period-row {
  align-items: center;
  padding: 6px var(--space-3);
}

.compact-chrome .period-head {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
}

.compact-chrome .period-label {
  display: none;
}

.compact-chrome .period-summary {
  font-size: var(--font-xs);
}

.compact-chrome .period-buttons .period-btn {
  min-height: 30px;
  min-width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.compact-chrome .custom-period label {
  width: 116px;
}

.compact-chrome .nav-shell {
  margin: var(--space-3) 0;
}

.kpi-mini-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: var(--shadow-soft);
}

.kpi-mini-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 850;
}

.kpi-mini-strip strong {
  color: var(--text);
}

.kpi-grid.chrome-expanded {
  position: relative;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  align-items: stretch;
}

.kpi-toggle {
  align-self: center;
}

.main-nav-btn {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-color: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  box-shadow: none;
}

.subtab-btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  color: var(--faint);
}

.subtab-btn.active {
  font-weight: 950;
}

.page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-4);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 48%),
    var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.page-hero .panel-header {
  width: 100%;
}

.page-hero h2,
.page-hero h3 {
  margin: 1px 0 3px;
}

.page-hero p {
  margin: 0;
  color: var(--muted);
}

.section-actions,
.page-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.link-list {
  gap: var(--space-2);
}

.link-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(260px, 1.6fr) 92px auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.link-row .link-card-head {
  gap: var(--space-2);
}

.link-row h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 2px;
  font-size: var(--font-md);
}

.link-row p {
  margin: 0;
}

.link-row-url {
  min-width: 0;
}

.link-row-url .copy-box {
  min-height: 30px;
  font-size: var(--font-sm);
}

.link-row-price {
  justify-self: end;
  font-size: 17px;
}

.link-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.settings-grid > .wide,
.settings-grid > .modal-actions {
  grid-column: 1 / -1;
}

.settings-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--card-padding-compact);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.settings-card h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0;
}

.settings-card textarea {
  min-height: 64px;
}

.sales-ops-page {
  gap: var(--space-3);
}

.sales-ops-hero {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.sales-ops-layout {
  padding: var(--space-3);
}

.compact-settings-grid {
  gap: var(--space-3);
}

.template-choice-grid,
.field-toggle-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pipeline-template-choice {
  cursor: pointer;
  min-height: 0;
  padding: var(--space-3);
}

.pipeline-template-choice input {
  margin: 0;
}

.pipeline-preview-card {
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.pipeline-preview-surface {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  display: grid;
  max-width: 360px;
  padding: var(--space-2);
}

.logo-settings-card {
  grid-column: 1 / -1;
}

.logo-upload-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.logo-preview {
  display: grid;
  place-items: center;
}

.logo-preview-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
}

.logo-settings-card input[type="file"] {
  padding: 5px;
}

.status-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.status-mini-card {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.status-mini-card span {
  color: var(--faint);
  font-size: var(--font-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.status-mini-card strong {
  color: var(--primary);
  font-size: 20px;
  line-height: 1;
}

.status-mini-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-monitor-panel {
  display: grid;
  gap: var(--space-3);
}

.monitor-hero {
  margin: 0;
}

.dense-list-row {
  min-height: 42px;
  padding: var(--space-3);
}

.compact-table .table th,
.compact-table .table td {
  padding: 6px 7px;
}

.training-list-item,
.training-list-row {
  min-height: 0;
}

.training-list-row p,
.training-list-row small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.sales-kit-hero {
  min-height: 0;
}

@media (max-width: 1100px) {
  .kpi-grid,
  .four-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-col,
  .three-col,
  .meta-grid,
  .assignment-mode-grid,
  .campaign-rule-grid {
    grid-template-columns: 1fr;
  }

  .distribution-kpis,
  .dist-help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-info-panel,
  .offer-grid,
  .stage-option-grid,
  .checklist-grid,
  .split-grid {
    grid-template-columns: 1fr 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .distribution-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .distribution-hero-actions,
  .campaign-rule-action {
    justify-content: flex-start;
  }

  .whatsapp-workspace {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  }

  .whatsapp-command-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .command-status-stack,
  .whatsapp-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .whatsapp-context-panel {
    grid-column: 1 / -1;
    max-height: none;
  }

  .whatsapp-row {
    grid-template-columns: 1fr;
  }

  .whatsapp-meta {
    min-width: 0;
    text-align: left;
  }

  .whatsapp-main small {
    white-space: normal;
  }

  .link-row {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr);
  }

  .link-row-price,
  .link-row-actions {
    justify-self: start;
  }

  .settings-grid,
  .status-metric-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 18px 12px 32px;
  }

  .topbar {
    padding: 12px;
  }

  .brand {
    min-width: 0;
  }

  .kpi-grid,
  .distribution-kpis,
  .dist-help-grid,
  .four-col,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-section-chip {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .pipeline-filters .search-input {
    flex-basis: min(100%, 420px);
    min-width: min(100%, 280px);
  }

  .command-status-stack,
  .whatsapp-command-strip,
  .compact-command-grid {
    grid-template-columns: 1fr;
  }

  .lead-detail-form {
    padding: 16px;
  }

  .lead-drawer-head,
  .drawer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lead-title-input {
    font-size: 26px;
  }

  .lead-info-panel,
  .offer-grid,
  .stage-option-grid,
  .checklist-grid,
  .split-grid,
  .payment-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .split-card,
  .dist-split,
  .dist-head {
    grid-template-columns: 1fr;
  }

  .dist-head {
    display: grid;
  }

  .dist-metrics {
    text-align: left;
  }

  .whatsapp-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .whatsapp-sidebar,
  .whatsapp-chat-panel,
  .whatsapp-context-panel {
    max-height: none;
  }

  .whatsapp-inbox-list,
  .whatsapp-thread-inline {
    max-height: 460px;
  }

  .whatsapp-chat-header,
  .whatsapp-composer,
  .whatsapp-template-inline {
    display: grid;
    grid-template-columns: 1fr;
  }

  .whatsapp-send-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .whatsapp-action-row {
    justify-content: flex-start;
  }

  .whatsapp-bubble {
    max-width: 92%;
  }

  .period-btn,
  .tab-btn,
  .main-nav-btn,
  .subtab-btn {
    min-width: auto;
    flex: 1 1 130px;
  }

  .period-buttons,
  .custom-period {
    width: 100%;
  }

  .strategy-quote-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .custom-period {
    padding-left: 0;
    padding-top: 8px;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .custom-period label,
  .custom-period .ghost-btn {
    flex: 1 1 160px;
  }

  .list-row,
  .link-card-head,
  .sales-kit-hero,
  .training-card-head,
  .training-list-row,
  .training-row-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .training-card-meta {
    justify-items: start;
  }

  .distribution-table,
  .distribution-table tbody,
  .distribution-table tr,
  .distribution-table td,
  .rules-table,
  .rules-table tbody,
  .rules-table tr,
  .rules-table td {
    display: block;
    width: 100%;
  }

  .distribution-table thead,
  .rules-table thead {
    display: none;
  }

  .distribution-table tr,
  .rules-table tr {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--card-bg);
  }

  .distribution-table td,
  .rules-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .distribution-table td::before,
  .rules-table td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .distribution-table td:first-child,
  .rules-table td:first-child {
    display: block;
  }

  .distribution-table td:first-child::before,
  .rules-table td:first-child::before {
    display: block;
    margin-bottom: 8px;
  }

  .distribution-table td:last-child,
  .rules-table td:last-child {
    border-bottom: 0;
  }

  .context-source-grid,
  .context-answer-list {
    grid-template-columns: 1fr;
  }

  .whatsapp-reply-box {
    grid-template-columns: 1fr;
  }

  .page-hero,
  .monitor-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .kpi-grid.chrome-expanded,
  .settings-grid,
  .status-metric-row,
  .link-row {
    grid-template-columns: 1fr;
  }

  .link-row-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 1280px) {
  .lead-profile-grid {
    grid-template-columns: minmax(220px, .85fr) minmax(380px, 1.4fr);
  }

  .lead-profile-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lead-profile-grid,
  .lead-profile-side,
  .lead-task-form,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .lead-profile-side {
    grid-column: auto;
  }

  .lead-task-item {
    grid-template-columns: 1fr;
  }

  .profile-note-item {
    grid-template-columns: 1fr;
  }

  .lead-profile-summary .context-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .lead-profile-summary .context-mini-grid {
    grid-template-columns: 1fr;
  }
}

.qr-preview {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: block;
  max-width: 220px;
  padding: 8px;
}

.strategy-quote-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
  gap: 12px;
  min-width: 0;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-soft);
}

.strategy-quote-strip strong {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.strategy-quote-strip small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 850;
  white-space: nowrap;
}

.compact-chrome .strategy-quote-strip {
  padding: 8px 12px;
}

.compact-chrome .strategy-quote-strip strong {
  font-size: clamp(13px, .9vw, 15px);
}

.whatsapp-command-center {
  grid-template-columns: minmax(0, 1fr);
}

.whatsapp-lines-page .toolbar-row {
  align-items: end;
}

.whatsapp-lines-page table select {
  min-width: 150px;
  max-width: 190px;
}

.mini-check {
  margin-top: 5px;
  font-size: var(--font-xs);
}

.compact-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.45;
}

.whatsapp-qr-modal {
  width: min(720px, calc(100vw - 28px));
}

.qr-modal-body {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.qr-preview.large {
  width: min(280px, 100%);
  max-width: 280px;
}

.distribution-page .settings-card {
  min-height: auto;
}

.distribution-page,
.distribution-page .panel,
.distribution-page .settings-card,
.distribution-page .toolbar-row,
.distribution-page .compact-row,
.distribution-page .context-mini-grid,
.distribution-page .settings-grid,
.distribution-page .compact-settings-grid,
.distribution-page .context-answer-list article {
  min-width: 0;
}

.distribution-page .sales-ops-hero,
.distribution-page .toolbar-row {
  flex-wrap: wrap;
}

.distribution-page .sales-ops-hero > div,
.distribution-page .panel-header,
.distribution-page .panel-header > div {
  min-width: 0;
}

.distribution-page .sales-ops-hero p,
.distribution-page .panel-header p,
.distribution-page label,
.distribution-page .notice p,
.distribution-page .compact-row p,
.distribution-page .mini-bullet-list,
.distribution-page .status-pill {
  overflow-wrap: anywhere;
}

.distribution-page .context-mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.distribution-page .settings-grid,
.distribution-page .compact-settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.distribution-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.distribution-table {
  min-width: 980px;
}

.distribution-table th,
.distribution-table td {
  font-size: var(--font-sm);
  vertical-align: top;
}

.score-badge {
  display: inline-grid;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 900;
}

.score-badge.green,
.status-pill.green {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}

.score-badge.gold,
.status-pill.gold {
  border-color: color-mix(in srgb, var(--gold-2) 45%, var(--line));
  background: color-mix(in srgb, var(--gold-2) 14%, transparent);
  color: var(--gold-2);
}

.score-badge.red,
.status-pill.red {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

.mini-badge.violet,
.status-badge.violet {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--line));
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet);
}

.mini-bullet-list {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.35;
  min-width: 150px;
}

.closer-monitoring-view {
  gap: var(--space-3);
}

.monitoring-hero {
  align-items: center;
}

.monitoring-kpi-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--space-2);
}

.monitoring-kpi-grid .kpi-card {
  min-height: 92px;
  padding: var(--card-padding-compact);
}

.monitoring-filters {
  padding: var(--card-padding-compact);
}

.monitoring-filters .toolbar-row {
  align-items: end;
  gap: var(--space-2);
}

.monitoring-filters label {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  min-width: 150px;
}

.monitoring-filters select {
  height: var(--button-height-compact);
  margin-top: 4px;
}

.monitoring-closer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}

.monitoring-closer-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: var(--space-2);
  padding: 10px;
}

.monitoring-closer-card.red,
.monitoring-lead-row.red {
  border-left-color: var(--red);
}

.monitoring-closer-card.gold,
.monitoring-lead-row.gold {
  border-left-color: var(--gold-2);
}

.monitoring-closer-card.blue,
.monitoring-lead-row.blue {
  border-left-color: var(--blue);
}

.monitoring-card-head,
.monitoring-lead-row {
  align-items: start;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  min-width: 0;
}

.monitoring-card-head strong,
.monitoring-lead-row strong {
  color: var(--text);
  display: block;
  font-size: var(--font-md);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-card-head p,
.monitoring-lead-row p,
.monitoring-recommendation {
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.35;
  margin: 2px 0 0;
}

.monitoring-metric-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-metric-grid span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.25;
  padding: 7px 8px;
}

.monitoring-metric-grid strong {
  color: var(--text);
  font-size: var(--font-sm);
  margin-right: 4px;
}

.monitoring-recommendation {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--radius-sm);
  padding: 7px 8px;
}

.monitoring-queues {
  align-items: start;
}

.monitoring-lead-list {
  display: grid;
  gap: var(--space-2);
}

.monitoring-lead-row {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 9px 10px;
}

.monitoring-lead-row > div {
  min-width: 0;
}

.monitoring-lead-row small {
  color: var(--muted);
  display: block;
  font-size: var(--font-xs);
  line-height: 1.35;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-lead-row .ghost-btn {
  flex: 0 0 auto;
}

.monitoring-lead-row.handoff {
  border-left-color: var(--cyan);
}

.mini-tags {
  gap: 4px;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .qr-modal-body {
    grid-template-columns: 1fr;
  }

  .monitoring-kpi-grid,
  .monitoring-queues {
    grid-template-columns: 1fr;
  }

  .monitoring-filters .toolbar-row,
  .monitoring-lead-row {
    align-items: stretch;
    flex-direction: column;
  }

  .monitoring-filters label {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .line-monitor-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

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

/* Bot Inbox operations view */
.bot-inbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.bot-inbox-workspace {
  grid-template-columns: minmax(320px, 420px) minmax(360px, 1fr);
}

.bot-inbox-list {
  display: block;
  overflow-y: auto;
  padding: 8px;
}

.bot-inbox-section + .bot-inbox-section {
  margin-top: 12px;
}

.bot-inbox-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8a8f98);
  padding: 4px 6px;
}

.bot-inbox-item {
  display: flex;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}

.bot-inbox-item:hover {
  border-color: color-mix(in srgb, var(--accent, #6c8cff) 50%, var(--line-soft));
}

.bot-inbox-item.selected {
  border-color: var(--accent, #6c8cff);
  box-shadow: 0 0 0 1px var(--accent, #6c8cff) inset;
}

.bot-inbox-item-main {
  min-width: 0;
  flex: 1;
}

.bot-inbox-item-main h3 {
  margin: 0;
  font-size: 14px;
}

.bot-inbox-item-main p {
  margin: 2px 0;
  font-size: 12px;
  color: var(--muted, #8a8f98);
}

.bot-inbox-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.bot-inbox-detail {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  overflow-y: auto;
}

.bot-inbox-detail-rows {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.bot-inbox-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.bot-inbox-kv span {
  color: var(--muted, #8a8f98);
}

.bot-inbox-preview {
  margin-top: 10px;
}

.bot-inbox-bubble {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 8px 10px;
  font-size: 13px;
  white-space: pre-wrap;
  margin: 4px 0 8px;
}

.bot-inbox-empty,
.bot-inbox-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 32px 16px;
  color: var(--muted, #8a8f98);
}

.bot-inbox-empty-icon {
  font-size: 32px;
}

.bot-inbox-empty h3 {
  margin: 0;
  color: var(--text, inherit);
}

.bot-inbox-empty-line {
  margin-top: 8px;
  font-size: 12px;
}

@media (max-width: 980px) {
  .bot-inbox-workspace {
    grid-template-columns: 1fr;
  }
}

/* Closer Brief (lead detail quick-read) */
.closer-brief {
  border: 1px solid color-mix(in srgb, var(--accent, #6c8cff) 40%, var(--line-soft));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #6c8cff) 7%, var(--surface));
  box-shadow: var(--shadow-soft);
  padding: 14px;
  margin: 10px 0 14px;
}

.closer-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.closer-brief-head h2 {
  margin: 2px 0 0;
}

.closer-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.closer-brief-action {
  grid-column: 1 / -1;
}

.closer-brief-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 10px 12px;
}

.closer-brief-card h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8a8f98);
}

.closer-kv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.closer-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.closer-kv-list li span {
  color: var(--muted, #8a8f98);
  flex-shrink: 0;
}

.closer-kv-list li strong {
  text-align: right;
  word-break: break-word;
}

.closer-brief-intent {
  margin: 0 0 8px;
  font-weight: 600;
}

.closer-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.closer-next-action {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  margin-bottom: 10px;
}

.closer-next-action.green {
  border-color: color-mix(in srgb, var(--green, #2bbf7a) 60%, transparent);
  background: color-mix(in srgb, var(--green, #2bbf7a) 14%, transparent);
}

.closer-next-action.cyan {
  border-color: color-mix(in srgb, #2bb8d8 60%, transparent);
  background: color-mix(in srgb, #2bb8d8 14%, transparent);
}

.closer-next-action.violet {
  border-color: color-mix(in srgb, #8a6cff 60%, transparent);
  background: color-mix(in srgb, #8a6cff 14%, transparent);
}

.closer-script {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  margin: 4px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.closer-brief-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.closer-brief-raw {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.closer-brief-raw h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #8a8f98);
}

.closer-brief-raw .closer-kv-list {
  margin-top: 8px;
}

.lead-tech-details > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 4px;
  color: var(--muted, #8a8f98);
}

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

/* One-lead Bot Intake dry-run QA result */
.bot-dryrun-result:empty {
  display: none;
}

.bot-dryrun-result {
  margin-top: 10px;
}

.bot-dryrun-panel {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
}

.bot-dryrun-panel.ok {
  border-color: color-mix(in srgb, var(--green, #2bbf7a) 55%, transparent);
  background: color-mix(in srgb, var(--green, #2bbf7a) 10%, transparent);
}

.bot-dryrun-panel.danger {
  border-color: color-mix(in srgb, var(--red, #e5484d) 60%, transparent);
  background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent);
}

.bot-dryrun-head {
  margin-bottom: 8px;
}

.bot-dryrun-danger-text {
  color: var(--red, #e5484d);
}

.bot-dryrun-error {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--red, #e5484d) 60%, transparent);
  background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--red, #e5484d);
}

.bot-dryrun-loading {
  font-style: italic;
}

/* Bot Inbox WhatsApp-style lifecycle view */
.bot-inbox-item-last {
  font-size: 12px;
  color: var(--muted, #8a8f98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 0;
}

.bot-inbox-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.bot-inbox-history {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 10px;
  margin-bottom: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.bot-inbox-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot-inbox-history .whatsapp-bubble {
  max-width: 80%;
}

.bot-inbox-history .whatsapp-bubble.inbound {
  align-self: flex-start;
}

.bot-inbox-history .whatsapp-bubble.outbound {
  align-self: flex-end;
}

/* Bot Inbox left-panel search + status filters */
.bot-inbox-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 10px;
  margin: -8px -8px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.bot-inbox-toolbar .search-input {
  width: 100%;
}

.bot-inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bot-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.bot-filter-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

.bot-filter-chip.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: var(--text);
  font-weight: 600;
}

.bot-filter-count {
  font-size: 11px;
  color: var(--faint);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 999px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}

.bot-filter-chip.active .bot-filter-count {
  color: var(--primary-strong);
}

.bot-qa-warning {
  margin: 8px 0 0;
  border: 1px solid color-mix(in srgb, var(--red, #e5484d) 45%, transparent);
  background: color-mix(in srgb, var(--red, #e5484d) 8%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-soft, #6b7280);
}

.bot-qa-warning strong {
  color: var(--red, #e5484d);
}

/* Bot Inbox identity resolution (V2) */
.bot-inbox-identity {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-3, #f1f3f6);
  padding: 10px 12px;
  margin: 8px 0;
}
.bot-inbox-identity-reason {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--text);
}
.identity-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.identity-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 200px;
}
.identity-picker select {
  width: 100%;
}

/* Bot Inbox auto-sync controls — compact horizontal toolbar.
   NOTE: uses a UNIQUE class (.bot-inbox-syncbar) to avoid colliding with the sidebar
   .bot-inbox-toolbar (search/filters) which is intentionally flex-direction: column. */
.bot-inbox-syncbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-height: 0;
  flex: 0 0 auto;
}
.bot-inbox-syncbar .mini-badge,
.bot-inbox-syncbar .auto-sync-meta,
.bot-inbox-syncbar .ghost-btn.slim {
  white-space: nowrap;
}
.bot-inbox-syncbar .ghost-btn.slim {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}
.bot-inbox-syncbar .ghost-btn.slim:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.auto-sync-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
/* Let the hero header wrap the whole syncbar to a second row on narrow widths,
   but keep its buttons horizontal (never one-per-line). */
.bot-inbox-page .inbox-hero .panel-header {
  flex-wrap: wrap;
  row-gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .bot-inbox-syncbar {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .auto-sync-meta {
    max-width: 100%;
    flex-basis: 100%;
  }
}

/* Pipeline card cleanup (Phase A) — priority chip + muted price. Pipeline cards only. */
.lead-card .lead-priority {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.lead-card .lead-priority.red { color: var(--red, #e5484d); background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent); border-color: color-mix(in srgb, var(--red, #e5484d) 35%, transparent); }
.lead-card .lead-priority.green { color: var(--green, #30a46c); background: color-mix(in srgb, var(--green, #30a46c) 12%, transparent); border-color: color-mix(in srgb, var(--green, #30a46c) 35%, transparent); }
.lead-card .lead-priority.cyan { color: var(--cyan, #0e7490); background: color-mix(in srgb, var(--cyan, #0e7490) 12%, transparent); border-color: color-mix(in srgb, var(--cyan, #0e7490) 30%, transparent); }
.lead-card .lead-priority.gold { color: var(--gold, #b7791f); background: color-mix(in srgb, var(--gold, #b7791f) 14%, transparent); border-color: color-mix(in srgb, var(--gold, #b7791f) 35%, transparent); }
.lead-card .lead-priority.warn { color: var(--muted, #6b7280); background: color-mix(in srgb, var(--muted, #6b7280) 12%, transparent); border-color: color-mix(in srgb, var(--muted, #6b7280) 28%, transparent); }
.lead-card .tag.value-muted {
  color: var(--muted, #6b7280);
  background: transparent;
  border: 1px dashed var(--line-soft, #e5e7eb);
  font-weight: 500;
}

/* Pipeline AI timing indicators — display-only chips on AI-stage cards. */
.lead-card .tag.ai-timer {
  font-weight: 600;
  white-space: nowrap;
}
.lead-card .tag.ai-timer.upcoming { color: var(--cyan, #0e7490); background: color-mix(in srgb, var(--cyan, #0e7490) 10%, transparent); }
.lead-card .tag.ai-timer.due { color: var(--gold, #b7791f); background: color-mix(in srgb, var(--gold, #b7791f) 14%, transparent); }
.lead-card .tag.ai-timer.overdue { color: var(--red, #e5484d); background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent); }
.lead-card .tag.ai-timer.expired {
  color: var(--red, #e5484d);
  background: color-mix(in srgb, var(--red, #e5484d) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #e5484d) 40%, transparent);
}

/* Action Queue chips (pipeline kanban) — closer ops filters. */
.action-queue-row {
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.action-queue-row .action-chip {
  cursor: pointer;
  font-size: 12px;
  border: 1px solid var(--line-soft, #e5e7eb);
  background: transparent;
}
.action-queue-row .action-chip.active {
  background: var(--primary, #16a34a);
  border-color: var(--primary, #16a34a);
  color: #fff;
  font-weight: 600;
}

/* Ops safety: collapsed danger zones + admin tools (NOT used inside Bot Inbox). */
.danger-zone {
  border: 1px dashed color-mix(in srgb, var(--red, #e5484d) 45%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
}
.danger-zone > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--red, #e5484d);
  font-size: 13px;
}
.danger-zone-copy {
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.danger-zone button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.closer-admin-tools {
  border: 1px solid var(--line-soft, #e5e7eb);
  border-radius: 10px;
  padding: 6px 12px;
  margin-top: 8px;
}
.closer-admin-tools > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-weight: 600;
}
.worker-status-strip {
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.worker-status-strip .chip { font-size: 12px; }
.worker-status-note {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

/* Subnav group labels (WhatsApp: Operación · Contenido · Avanzado; Dashboard groups). */
.subtab-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  align-self: center;
  margin: 0 2px 0 10px;
  white-space: nowrap;
}
.subtab-group-label:first-child {
  margin-left: 0;
}
.action-queue-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  align-self: center;
  white-space: nowrap;
}

/* ============================================================
   COWORK VISUAL PASS V1 — refinement layer (appended overrides)
   CSS-only: no logic, no markup, no route changes. Bot Inbox
   component classes (.bot-inbox-*, .wa-*) intentionally NOT
   targeted; shared primitives get gentle polish only.
   ============================================================ */

/* ---- Global rhythm & typography ---- */
h1, h2, h3 { letter-spacing: -0.015em; }
.panel {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.panel-header p { color: var(--muted); }
.eyebrow { letter-spacing: 0.08em; }

/* ---- Buttons: consistent radius, calm motion ---- */
.primary-btn, .ghost-btn, .danger-btn {
  border-radius: 9px;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.primary-btn { box-shadow: 0 1px 2px rgba(14, 159, 110, 0.28); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 159, 110, 0.24); }
.ghost-btn:hover { background: var(--surface-3); }
.danger-btn:hover { transform: translateY(-1px); }

/* ---- Chips & badges: one consistent pill language ---- */
.chip { border-radius: 999px; font-weight: 600; }
.mini-badge { border-radius: 999px; }

/* ---- KPI cards: executive look, accent spine ---- */
.kpi-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--blue);
  opacity: 0.65;
}
.kpi-card.green::before { background: var(--green); }
.kpi-card.gold::before { background: var(--gold); }
.kpi-card.red::before { background: var(--red); }
.kpi-card.violet::before { background: var(--violet); }
.kpi-card.orange::before { background: var(--orange); }
.kpi-card.cyan::before { background: var(--cyan); }
.kpi-card strong { font-size: 30px; letter-spacing: -0.02em; }

/* ---- Pipeline kanban ---- */
.stage-column {
  border-radius: 12px;
  border-top-width: 3px;
}
.stage-head { padding: 10px 12px; }
.stage-head h3 { font-weight: 700; }
.lead-card {
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.lead-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 34, 0.09);
}
.lead-meta-line { color: var(--muted); }
.lead-card .tag { border-radius: 6px; font-weight: 600; }
.lead-card .lead-priority { box-shadow: var(--shadow-soft); }

/* Action Queue: contained pill bar */
.action-queue-row {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 10px;
}
.action-queue-row .action-chip { padding: 5px 12px; transition: border-color 0.12s ease, color 0.12s ease; }
.action-queue-row .action-chip:hover { border-color: var(--primary); color: var(--primary); }
.action-queue-row .action-chip.active:hover { color: #fff; }
.action-queue-row .action-chip.active { box-shadow: 0 1px 4px rgba(14, 159, 110, 0.35); }

/* ---- Navigation: pill subtabs, quieter group labels ---- */
.subtab-btn { border-radius: 999px; transition: background 0.12s ease, color 0.12s ease; }
.subtab-btn.active { font-weight: 700; }
.main-nav-btn { border-radius: 10px; font-weight: 600; }
.subtab-group-label { opacity: 0.8; }

/* ---- Closer Brief: sectioned cards + loud next action ---- */
.closer-brief-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
}
.closer-brief-card h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.closer-next-action {
  font-size: 16px;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  color: var(--primary-strong);
}
.closer-next-action.red { background: color-mix(in srgb, var(--red) 9%, transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.closer-next-action.gold { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 32%, transparent); color: var(--gold); }
.closer-next-action.cyan { background: color-mix(in srgb, var(--cyan) 9%, transparent); border-color: color-mix(in srgb, var(--cyan) 28%, transparent); color: var(--cyan); }
.closer-next-action.warn { background: var(--surface-3); border-color: var(--line); color: var(--muted); }
.closer-script {
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  padding: 12px 14px;
}
.closer-kv-list li { padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.closer-kv-list li:last-child { border-bottom: none; }

/* ---- Agenda de seguimiento: cleaner buckets ---- */
.followup-group {
  border-radius: 14px;
}
.followup-group .panel-header h3 { font-size: 14px; }
.followup-group .compact-row {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.followup-group .compact-row:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }

/* ---- Automation Monitor: gates as a status card, calmer danger zone ---- */
.worker-status-strip {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.danger-zone { background: color-mix(in srgb, var(--red) 3%, transparent); }
.notice { border-radius: 12px; }

/* ---- Empty states: friendlier ---- */
.empty {
  padding: 32px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

/* ---- Tables: quieter headers, hover rows ---- */
.table th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: var(--surface-2); }

/* ---- Narrow screens: keep density sane ---- */
@media (max-width: 900px) {
  .panel { padding: 14px; }
  .kpi-card strong { font-size: 24px; }
  .closer-next-action { font-size: 14px; }
}

/* ============================================================
   DASHBOARD PREMIUM V1 — premium dashboard experience layer
   Scope: pipeline dashboard shell, right rail widgets, topbar,
   KPI strip, kanban polish, navigation. CSS + rail markup only;
   no logic, stages, filters or Bot Inbox classes touched.
   ============================================================ */

/* ---- Dashboard shell: kanban + narrow executive rail ---- */
.pipeline-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  align-items: start;
}
.pipeline-dash-main { min-width: 0; }

.dash-rail {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.dash-card { padding: 12px 14px; }
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dash-card-head h3,
.dash-card-title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.dash-card-title { margin-bottom: 10px; }
.dash-sync-chip { font-size: 9.5px; padding: 0 7px; min-height: 18px; line-height: 18px; }

/* Resumen del día */
.dash-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dash-summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.dash-summary-list li:last-child { border-bottom: none; }
.dash-summary-list span { font-size: 12px; color: var(--muted); }
.dash-summary-list strong { font-size: 14px; letter-spacing: -0.01em; }

/* Actividad mensual de leads — horizontal month bars (narrow-rail friendly) */
.dash-month-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.dash-month-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
}
.dash-month-label { font-size: 10px; color: var(--faint); text-transform: capitalize; }
.dash-month-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.dash-month-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 80%, transparent);
}
.dash-month-list li.current .dash-month-bar i { background: var(--orange, #ea580c); }
.dash-month-list li.current .dash-month-label { color: var(--orange, #ea580c); font-weight: 700; }
.dash-month-list strong { font-size: 11px; text-align: right; letter-spacing: -0.01em; }

/* Pipeline global — executive stage summary */
.dash-global-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.dash-global-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 26px;
  align-items: center;
  gap: 7px;
}
.dash-global-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dash-global-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.dash-global-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  opacity: 0.85;
}
.dash-global-list strong {
  font-size: 12px;
  text-align: right;
  letter-spacing: -0.01em;
}

/* Tip del día — calm quote card */
.dash-tip { border-left: 3px solid color-mix(in srgb, var(--green) 55%, transparent); }
.dash-tip-quote {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.dash-tip-quote::before { content: "\201C"; color: var(--green); font-weight: 800; margin-right: 2px; }
.dash-tip-quote::after { content: "\201D"; color: var(--green); font-weight: 800; margin-left: 2px; }
.dash-tip-source { font-size: 11px; color: var(--faint); text-align: right; }

/* ---- Topbar: calmer hierarchy, harmonized controls ---- */
.topbar { padding: 12px 24px; }
.top-actions { gap: 8px; }
.top-actions .ghost-btn,
.top-actions .primary-btn,
.top-actions .export-menu summary {
  border-radius: 999px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.top-actions .ghost-btn,
.top-actions .export-menu summary { border: 1px solid var(--line-soft); background: var(--surface); }
.top-actions .ghost-btn:hover,
.top-actions .export-menu summary:hover { background: var(--surface-3); }
.top-actions .chip {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.top-actions select,
.top-actions .language-select { min-height: 36px; border-radius: 999px; }

/* Export dropdown: one button, two options */
.export-menu { position: relative; }
.export-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu[open] summary { background: var(--surface-3); }
.export-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: grid;
  gap: 4px;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.export-menu-list .ghost-btn {
  justify-content: flex-start;
  border: none;
  border-radius: 8px;
  width: 100%;
  text-align: left;
}

/* ---- KPI strip: executive numbers, compact scale ---- */
.kpi-mini-strip {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.kpi-grid { gap: 10px; }
.kpi-grid.chrome-expanded { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.kpi-card { padding: 10px 14px; }
.kpi-card p { font-weight: 600; font-size: 10px; margin-bottom: 2px; }
.kpi-card strong { font-size: 22px; }
.kpi-card small { color: var(--faint); font-size: 10px; }

/* ---- Pipeline header: title + compact search (mock layout) ---- */
.pipeline-filters { padding: 14px 16px; }
.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pipeline-head-titles { min-width: 0; }
.pipeline-head-titles h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pipeline-head-titles p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.pipeline-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}
.pipeline-head-tools .search-input {
  flex: 0 1 320px;
  width: 320px;
  min-height: 32px;
  font-size: 12px;
  border-radius: 10px;
}
.pipeline-head-tools select {
  flex: 0 0 110px;
  width: 110px;
  min-height: 32px;
  font-size: 12px;
}
.pipeline-queue-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pipeline-queue-meta .chip { font-size: 10px; min-height: 20px; line-height: 20px; padding: 0 8px; font-weight: 600; }
.pipeline-meta-row { margin-top: 8px; }
.action-queue-row { margin-top: 10px; }

/* ---- Dashboard type scale: section > number > card title > body > meta ---- */
.period-label { font-size: 10px; }
.stage-head h3 { font-size: 12.5px; }
.dash-summary-list span { font-size: 11.5px; }
.dash-summary-list strong { font-size: 13px; }
.dash-global-name { font-size: 11px; }
.dash-tip-quote { font-size: 12px; }
.dash-tip-source { font-size: 10px; }

/* ---- Quiet chrome: strategy strip as plain text, calm period row ---- */
.strategy-quote-strip {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 2px 4px;
}
.strategy-quote-strip strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Kanban breathing room next to the rail ---- */
.pipeline-dash .kanban { gap: 8px; }
.pipeline-dash .stage-body { padding: 7px; gap: 7px; }

/* ---- Kanban: lighter columns, stronger heads ---- */
.stage-column { background: color-mix(in srgb, var(--kanban-bg) 62%, var(--surface)); }
.stage-head h3 { font-size: 13px; letter-spacing: -0.01em; }
.stage-head .micro { color: var(--faint); }
.stage-count {
  font-weight: 800;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

/* ---- Pipeline filters bar: contained, no stray borders ---- */
.pipeline-filters .pipeline-toolbar { align-items: center; }
.pipeline-filters .search-input { border-radius: 10px; }

/* ---- Navigation: clearer active states ---- */
.main-nav-btn.active { box-shadow: 0 1px 4px rgba(14, 159, 110, 0.22); }
.subtab-row { row-gap: 6px; }

/* ---- Responsive: rail stacks under the board ---- */
@media (max-width: 1280px) {
  .pipeline-dash { grid-template-columns: 1fr; }
  .dash-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tip { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dash-rail { grid-template-columns: 1fr; }
}

/* ============================================================
   LEAD CARD PREMIUM V1 — compact premium lead detail
   Scope: lead drawer header badges, Closer Brief layout, lead
   context card, follow-up & commercial polish. Display-only;
   form fields, names and handlers untouched. No Bot Inbox.
   ============================================================ */

/* ---- Header badges: compact strip, bot status at the right ---- */
.lead-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lead-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}
.lead-metric strong { font-size: 16px; letter-spacing: -0.02em; }
.lead-metric small { font-size: 10px; color: var(--faint); }
.lead-bot-chip { margin-left: auto; }

/* ---- Closer Brief: calm hero ---- */
.closer-brief {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.closer-brief-head { margin-bottom: 12px; }
.closer-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.closer-brief-quality { margin-top: 10px; }
.closer-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.closer-kv-list li span { font-size: 11.5px; color: var(--muted); }
.closer-kv-list li strong { font-size: 12.5px; text-align: right; }

/* Action band: next action + script side by side */
.closer-action-band {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.closer-action-band h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.closer-action-band .closer-script {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  font-family: inherit;
}
.closer-action-band .closer-next-action { font-size: 14px; padding: 10px 12px; }
.closer-brief-cta { margin-top: 12px; }

/* ---- Contexto del lead: grouped, executive ---- */
.lead-context-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.context-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.context-group {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}
.context-group h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.context-kv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.context-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.context-kv-list li:last-child { border-bottom: none; }
.context-kv-list li span { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.context-kv-list li strong {
  font-size: 11.5px;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Seguimiento & Valores comerciales: consistent premium cards ---- */
.followup-card,
.commercial-card,
.tracking-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.commercial-card h3,
.tracking-card h3,
.followup-card .panel-header h3 { font-size: 14px; letter-spacing: -0.01em; }
.offer-card {
  border-radius: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.offer-card:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.offer-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.payment-option { border-radius: 999px; }

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
  .closer-brief-grid,
  .context-groups { grid-template-columns: 1fr; }
  .closer-action-band { grid-template-columns: 1fr; }
  .lead-bot-chip { margin-left: 0; }
}

/* ============================================================
   BOT INBOX PREMIUM V1 — WhatsApp-Web-grade inbox experience
   Scope: Bot Inbox layout, hero ops bar, conversation list,
   chat column, contextual rail. Markup reorganization + CSS
   only — sync/send/identity logic and handlers untouched.
   ============================================================ */

/* ---- Hero: one intentional live-ops bar ---- */
.bot-inbox-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 14px 18px;
}
.bot-inbox-hero-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bot-inbox-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
}
.bot-inbox-hero-id h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.bot-inbox-hero-id p {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.bot-inbox-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.bot-inbox-hero-stats .chip { font-size: 11px; min-height: 24px; line-height: 22px; }
.bot-inbox-hero .bot-inbox-syncbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.bot-inbox-hero .auto-sync-meta { font-size: 11px; color: var(--faint); }

/* ---- Workspace: list | chat | rail ---- */
.bot-inbox-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(240px, 290px);
  grid-template-areas: "list chat rail";
  gap: 10px;
  min-height: min(720px, calc(100vh - 230px));
}
.bot-inbox-list { grid-area: list; }
.bot-inbox-chatcol { grid-area: chat; }
.bot-inbox-rail { grid-area: rail; }

/* ---- Conversation list: a real inbox tray ---- */
.bot-inbox-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.bot-inbox-toolbar { display: grid; gap: 8px; }
.bot-inbox-toolbar .search-input { min-height: 32px; font-size: 12px; border-radius: 10px; }
.bot-inbox-filters {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.bot-filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.bot-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.bot-filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bot-filter-chip.active .bot-filter-count { color: rgba(255, 255, 255, 0.85); }
.bot-filter-count { color: var(--faint); font-weight: 700; }

.bot-inbox-rows {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  margin: 0 -4px;
  padding: 0 4px;
}
.bot-inbox-section + .bot-inbox-section { margin-top: 10px; }
.bot-inbox-section-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--faint);
  padding: 4px 8px;
}
.bot-inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 9px 10px;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}
.bot-inbox-item + .bot-inbox-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 54px;
  right: 8px;
  border-top: 1px solid var(--line-soft);
}
.bot-inbox-item:hover { background: var(--surface-2); }
.bot-inbox-item.selected {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.bot-inbox-item.selected::before,
.bot-inbox-item.selected + .bot-inbox-item::before { border-color: transparent; }
.bot-inbox-item .wa-avatar { flex: 0 0 auto; }
.bot-inbox-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bot-inbox-item-top h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bot-inbox-item-top time,
.bot-inbox-item-phone {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--faint);
}
.bot-inbox-item-last {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-inbox-item-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.bot-inbox-item-route { font-size: 10px; color: var(--faint); }

/* ---- Chat column: the conversation is the hero ---- */
.bot-inbox-chatcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.bot-inbox-chathead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.bot-inbox-chathead-main { min-width: 0; flex: 1; }
.bot-inbox-chathead-main h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-inbox-chathead-main p {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.bot-inbox-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bg-soft);
}
.bot-inbox-chat { display: grid; gap: 8px; }
.bot-inbox-chat .whatsapp-bubble {
  max-width: 76%;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.bot-inbox-chat .whatsapp-bubble.outbound {
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.bot-inbox-chat .whatsapp-bubble.inbound {
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.bot-inbox-chat .whatsapp-bubble.system {
  max-width: 88%;
  margin: 0 auto;
  text-align: center;
  box-shadow: none;
}
.bot-inbox-chat .whatsapp-bubble small {
  display: block;
  font-size: 9.5px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-inbox-chat.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  text-align: center;
}
.bot-inbox-chat.empty .whatsapp-bubble { max-width: 420px; text-align: left; }

/* ---- Contextual rail: lead summary card ---- */
.bot-inbox-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  overflow-y: auto;
}
.bot-inbox-rail-title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.bot-inbox-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bot-inbox-detail-rows { display: grid; gap: 6px; margin: 0; }
.bot-inbox-kv { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; }
.bot-inbox-kv span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.bot-inbox-safety {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
}
.bot-inbox-safety.locked {
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  color: var(--cyan);
}
.bot-inbox-safety.live {
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
}
.bot-inbox-safety span { color: var(--muted); font-size: 10.5px; }
.bot-inbox-rail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-inbox-rail .compact-actions .ghost-btn,
.bot-inbox-rail .compact-actions .primary-btn,
.bot-inbox-rail .compact-actions .danger-btn { font-size: 11.5px; }
.bot-inbox-admin-tools {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.bot-inbox-admin-tools summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.bot-inbox-admin-tools[open] summary { margin-bottom: 8px; }
.bot-inbox-admin-tools .bot-qa-warning { font-size: 10.5px; }

/* Identity / duplicates inside the rail stay compact */
.bot-inbox-rail .bot-inbox-identity,
.bot-inbox-rail .compact-notice { font-size: 12px; }
.bot-inbox-rail .identity-picker select { width: 100%; }

/* Empty states */
.bot-inbox-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: 220px;
  text-align: center;
  color: var(--muted);
  padding: 24px 14px;
}

/* ---- Responsive: chat keeps priority ---- */
@media (max-width: 1280px) {
  .bot-inbox-workspace {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    grid-template-areas:
      "list chat"
      "list rail";
  }
  .bot-inbox-rail { overflow-y: visible; }
}
@media (max-width: 900px) {
  .bot-inbox-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "list"
      "chat"
      "rail";
  }
}

/* Bot Inbox: system events collapsed under the chat (admin peek only) */
.bot-inbox-system-log {
  margin-top: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  padding: 6px 10px;
}
.bot-inbox-system-log summary {
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  user-select: none;
}
.bot-inbox-system-log[open] summary { margin-bottom: 8px; }
.bot-inbox-system-log .bot-inbox-chat.system-log { gap: 6px; }
.bot-inbox-system-log .whatsapp-bubble.system { opacity: 0.85; }

/* ============================================================
   WHATSAPP PHASE 2 — content consolidation helpers
   ============================================================ */
.command-ops-row { margin-top: 10px; }
.command-shortcuts {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  align-items: center;
  gap: 6px;
}
.automation-explainer {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--muted);
}
.automation-explainer strong { color: var(--text); }

/* ============================================================
   DASHBOARD EXEC SUMMARY V1 — premium executive cockpit
   Scope: Dashboard → Resumen only. Reuses the dash-card visual
   language (uppercase titles, summary lists, global bars).
   ============================================================ */
.exec-summary { gap: 12px; }

.exec-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
}
.exec-hero-copy h2 { margin: 2px 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.exec-hero-copy p { margin: 0; font-size: 12px; color: var(--muted); }
.exec-leader {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.exec-leader-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}
.exec-leader strong { font-size: 16px; letter-spacing: -0.01em; }
.exec-leader-meta { font-size: 11px; color: var(--muted); }

.exec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.exec-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.exec-card .dash-card-title { margin-bottom: 0; }
.exec-card-meta { margin: 0; font-size: 11px; color: var(--muted); }
.exec-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}
.exec-card-chart .bars, .exec-card-chart .bar-chart { min-height: 120px; }

.exec-big-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 2px;
}
.exec-big-number strong { font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.exec-big-number span { font-size: 11.5px; color: var(--muted); }
.exec-big-number.hot strong { color: var(--primary-strong); }
.exec-gate-note {
  margin: 0;
  font-size: 10.5px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
}

.exec-seller-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.exec-seller-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}
.exec-seller-rank {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-strong);
  font-size: 11px;
  font-weight: 800;
}
.exec-seller-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exec-seller-meta { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.exec-seller-list strong { font-size: 12.5px; }

.exec-shortcuts { padding: 14px 16px; }
.exec-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.exec-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.exec-shortcut:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.exec-shortcut-icon { font-size: 18px; }
.exec-shortcut-copy { display: grid; gap: 1px; min-width: 0; }
.exec-shortcut-copy strong { font-size: 12.5px; letter-spacing: -0.01em; }
.exec-shortcut-copy small { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1280px) {
  .exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exec-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .exec-grid, .exec-shortcut-grid { grid-template-columns: 1fr; }
  .exec-leader { justify-items: start; text-align: left; }
}

/* ============================================================
   TYPOGRAPHY SYSTEM V1 — unified type scale across the CRM
   Appended last so it wins over older per-section rules.
   Scale (data-dense operator tool, consistent with the approved
   premium passes):
     page title 20 / compact ops header 18 / section 16 / panel 14
     body 13 / helper 12 / micro-label 10.5 uppercase
     chips 11 / buttons 13 (slim 12) / table th 11 · td 13
   ============================================================ */
:root {
  --type-page-title: 20px;
  --type-ops-title: 18px;
  --type-section: 16px;
  --type-panel: 14px;
  --type-body: 13px;
  --type-helper: 12px;
  --type-micro: 10.5px;
}

/* ---- Page titles: one size for every page hero ---- */
.page-hero h2,
.page-hero .panel-header h2,
.command-hero-copy h2,
.distribution-hero h2,
.sales-kit-hero h2,
.exec-hero-copy h2,
.monitoring-hero h2,
.whatsapp-hero h2,
.inbox-hero h2,
.lead-context-card > .panel-header h3 {
  font-size: var(--type-page-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Compact operational headers stay denser on purpose */
.pipeline-head-titles h2,
.bot-inbox-hero-id h2,
.monitor-hero h3 {
  font-size: var(--type-ops-title);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- Page subtitles ---- */
.page-hero p,
.page-hero .panel-header p,
.command-hero-copy p,
.distribution-hero p,
.sales-kit-hero p,
.exec-hero-copy p,
.whatsapp-hero p,
.inbox-hero p,
.monitor-hero p {
  font-size: var(--type-page-sub, 13px);
  line-height: 1.45;
  color: var(--muted);
}

/* ---- Eyebrows: one micro-label voice everywhere ---- */
.eyebrow {
  font-size: var(--type-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Section & panel titles ---- */
.panel-header h2,
.modal-header h2 { font-size: var(--type-section); font-weight: 700; }
.panel-header h3 { font-size: var(--type-panel); font-weight: 700; }
.panel-header p { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.panel.nested h3 { font-size: var(--type-panel); }

/* ---- Card micro-labels: same uppercase voice as the dashboard rail ---- */
.dash-card-title,
.dash-card-head h3,
.closer-brief-card h4,
.closer-action-band h4,
.context-group h4,
.bot-inbox-rail-title,
.settings-card h4 {
  font-size: var(--type-micro);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Chips / badges / tags ---- */
.chip { font-size: 11px; font-weight: 600; }
.mini-badge { font-size: 10.5px; font-weight: 600; }
.tag { font-size: 10.5px; }
.status-pill b { font-size: 12.5px; }

/* ---- Buttons ---- */
.primary-btn, .ghost-btn, .danger-btn { font-size: var(--type-body); font-weight: 600; }
.primary-btn.slim, .ghost-btn.slim, .danger-btn.slim { font-size: var(--type-helper); }

/* ---- Tabs / subtabs ---- */
.main-nav-btn { font-size: var(--type-body); font-weight: 600; }
.subtab-btn { font-size: var(--type-helper); font-weight: 600; }
.training-tab { font-size: 12.5px; font-weight: 600; }
.subtab-group-label { font-size: 10px; letter-spacing: 0.07em; }

/* ---- Tables ---- */
.table th { font-size: 11px; }
.table td { font-size: var(--type-body); }
.table td .muted, .table td small { font-size: var(--type-helper); }

/* ---- Forms ---- */
.form-grid label,
.settings-grid label,
.settings-card label,
.toolbar-row label { font-size: var(--type-helper); font-weight: 600; }
input, select, textarea { font-size: var(--type-body); }

/* ---- Empty states ---- */
.empty h3 { font-size: 13.5px; font-weight: 700; }
.empty p { font-size: var(--type-helper); }

/* ---- Common body voices ---- */
.muted { font-size: 12.5px; }
.micro { font-size: var(--type-micro); }
.list-row p, .compact-row p { font-size: var(--type-helper); }

/* ============================================================
   DENSITY PASS V1 — tighter premium spacing across the CRM
   Goal: remove excess air (oversized paddings, tall KPI cards,
   wide header gaps) without crowding content. Appended last.
   ============================================================ */
/* Panels & heroes */
.panel { padding: 14px; }
.page-hero { padding: 12px 16px; }
.panel-header { gap: 12px; margin-bottom: 12px; }
.exec-hero { padding: 12px 16px; }
.exec-summary { gap: 10px; }
.exec-grid { gap: 10px; }
.exec-shortcuts { padding: 12px 14px; }

/* Global KPI row: was 82px tall with generous padding */
.kpi-card { min-height: 0; padding: 10px 14px; }
.kpi-card p { margin: 0 0 3px; }
.kpi-grid { margin-bottom: 12px; }

/* Period / filter rows */
.period-shell { padding: 8px 12px; }
.period-row { gap: 8px; }

/* Tabs rows: less vertical air between nav layers */
.training-tabs { margin-bottom: 2px; }
.config-group-tabs { margin-bottom: 0; }

/* Tables & list rows: tighter cells, same readability */
.table th, .table td { padding: 8px 10px; }
.list-row { padding: 10px 12px; }

/* Kanban: tighter columns + show-more control */
.stage-head { padding: 9px 11px; }
.stage-body { padding: 9px; gap: 9px; }
.stage-show-more {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.stage-show-more:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Forms: tighter settings cards */
.settings-card { padding: 12px; }
.settings-grid { gap: 10px; }

/* Modal */
.modal-header { margin-bottom: 12px; }

/* ============================================
   PHASE A V1 — CONTEXTUAL EMPTY STATES + ALERT BADGE
   (External ideas Phase A: empty-state icon, topbar
   alert badge, subtle helper notes. Client-only.)
   ============================================ */

/* Empty state icon marker */
.empty-icon {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
  opacity: 0.85;
}

/* Topbar alert badge */
.alert-bell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

.alert-bell:hover {
  border-color: var(--red);
}

.alert-badge {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 7px;
  min-width: 18px;
  text-align: center;
}

/* Subtle helper notes under heroes / group tabs */
.helper-note {
  font-size: 12px;
  margin: 6px 0 0;
  opacity: 0.75;
}

.exec-hero-copy .helper-note {
  margin-top: 2px;
}

/* ============================================
   GLOBAL LEAD SEARCH / CMD+K V1
   (Command palette overlay, topbar trigger,
   result rows. Client-only.)
   ============================================ */

.cmdk-backdrop {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11vh;
}

.cmdk-panel {
  width: min(640px, 92vw);
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.cmdk-search-icon {
  font-size: 15px;
  opacity: 0.7;
}

.cmdk-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  padding: 4px 0;
}

.cmdk-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}

.cmdk-results {
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmdk-help {
  margin: 0;
  padding: 18px 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.cmdk-results .empty {
  margin: 8px;
}

.cmdk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.cmdk-row:hover,
.cmdk-row.active {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.cmdk-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cmdk-row-main strong {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-row-main small,
.cmdk-row-meta small {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 900px) {
  .cmdk-trigger .cmdk-hint {
    display: none;
  }
}

/* ============================================
   NOTIFICATION CENTER LIGHT V1
   (Dropdown anchored to the topbar alert badge.
   Read-only; CTA navigates to Dashboard → Alertas.)
   ============================================ */

.notif-panel {
  position: fixed;
  z-index: 140;
  width: min(380px, calc(100vw - 24px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  padding: 12px;
  gap: 8px;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notif-head strong {
  font-size: 13.5px;
  font-weight: 800;
}

.notif-count {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 8px;
}

.notif-breakdown {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.notif-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-3) 40%, transparent);
}

.notif-row .priority-badge {
  flex-shrink: 0;
  margin-top: 1px;
}

.notif-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-row-body strong {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-row-body small {
  font-size: 11px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-cta {
  width: 100%;
}

.notif-panel .empty {
  margin: 4px 0;
}

/* ============================================
   FINANZAS CONSOLIDATION V2
   (Comisiones y pagos flow labels. UX only.)
   ============================================ */

.flow-label {
  margin: 4px 0 -6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================
   EQUIPO ROUTING CONSOLIDATION V2
   (Routing status card + rules summary. UX only.)
   ============================================ */

.routing-status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.routing-status-chips {
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================
   V1 FINAL QA FIXES
   (Explicit overlay stacking + alerts cap button.)
   ============================================ */

/* Overlay stacking order: lead drawer (100/150) < notif panel (140) < command palette (160) */
.cmdk-backdrop {
  z-index: 160;
}

.alert-list + .stage-show-more,
.stage-show-more + .stage-show-more {
  margin-top: 10px;
}

/* ============================================
   TOP STRIP ALIGNMENT V1
   (Quote strip + period bar text aligned to the
   same 14px left axis as the KPI cards, with
   slightly larger type. Visual only.)
   ============================================ */

/* Text starts on the same axis in all three rows: shell side-padding removed,
   then 1px border + 14px padding = the KPI card's own 1px + 14px inset. */
.period-shell,
.compact-chrome .period-shell {
  padding-left: 0;
  padding-right: 0;
}

.strategy-row .strategy-quote-strip,
.compact-chrome .strategy-row .strategy-quote-strip {
  padding: 10px 14px;
}

.period-row,
.compact-chrome .period-row {
  padding: 8px 14px;
}

.strategy-row .strategy-quote-strip strong,
.compact-chrome .strategy-row .strategy-quote-strip strong {
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 800;
}

.period-summary,
.compact-chrome .period-summary {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

/* ============================================
   PIPELINE HEADER + SPACING POLISH V1
   (Kanban header compacted: quick actions first.
   Consistent 8px vertical rhythm at the top.)
   ============================================ */

/* Motivational quote sits ~2px higher; same readable size */
.compact-chrome .main {
  padding-top: 8px;
}

/* Even 8px rhythm: quote → period bar → KPIs → nav */
.compact-chrome .period-shell {
  gap: 8px;
  margin-bottom: 8px;
}

.compact-chrome .nav-shell {
  margin: 8px 0;
}

/* Kanban filter panel: just the quick-actions row, tight */
.pipeline-filters-compact {
  padding: 8px 10px;
  margin-bottom: 6px;
}

.pipeline-filters-compact .action-queue-row {
  margin: 0;
}

/* Slim account filter living inside the chips row */
.account-filter-slim {
  max-width: 96px;
  min-height: 26px;
  padding: 2px 8px;
  font-size: 11.5px;
}

.pipeline-queue-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* ============================================
   TOP HEADER SPACING FIX V1
   (The previous .compact-chrome .main rule never
   matched — compact-chrome is ON .main, not an
   ancestor. Correct selector + kill dead air:
   even 6-8px rhythm from topbar to KPI cards.)
   ============================================ */

.main.compact-chrome {
  padding-top: 4px;
}

.main.compact-chrome .period-shell {
  padding-top: 0;
  padding-bottom: 0;
  gap: 6px;
  margin-bottom: 6px;
}

.main.compact-chrome .kpi-grid {
  margin-bottom: 8px;
}

.main.compact-chrome .period-shell .period-row {
  margin-bottom: 0;
}

/* ============================================
   META CAPI V1.1
   (Conversions API section in Integraciones.)
   ============================================ */

.meta-capi-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-capi-statusbar {
  flex-wrap: wrap;
  gap: 6px;
}

.meta-capi-form {
  align-items: flex-end;
  flex-wrap: wrap;
}

.meta-capi-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 170px;
  flex: 1;
}

.meta-capi-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 8px;
}

.meta-capi-toggle {
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.meta-capi-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-capi-toggle small {
  color: var(--muted);
  font-size: 11px;
}

.tag-red {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: var(--red);
}

.meta-capi-table td {
  vertical-align: top;
}

/* ============================================
   LEAD CARD SIMPLIFY V2
   (Removed the duplicate identity summary panel;
   the 360 grid is now main + side, two columns.)
   ============================================ */
.lead-profile-grid-2col {
  /* Single column: the side panel (just the Sales Kit under HIDE_WHATSAPP_BOT_UI)
     no longer reserves a half-empty column. It stacks compactly under the main
     content instead, so the card has no wasted horizontal space. */
  grid-template-columns: 1fr;
}

/* ============================================
   PREMIUM POLISH LAYER (2026-06-14)
   Appended last for override priority. Elevation,
   focus rings, glass topbar, refined motion. Gold
   accent on charcoal/clean-white. "Looks expensive."
   ============================================ */

/* Smoother, springier interaction motion */
.primary-btn,
.danger-btn,
.icon-btn,
.ghost-btn,
.period-btn,
.tab-btn,
.kpi-card,
.panel,
.list-row,
.link-card,
.seller-card,
.lead-card {
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

/* Accessible gold focus ring on every input + actionable control */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.primary-btn:focus-visible,
.danger-btn:focus-visible,
.ghost-btn:focus-visible,
.icon-btn:focus-visible,
.period-btn:focus-visible,
.tab-btn:focus-visible,
.main-nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
}

/* Cards lift on hover for a tactile, premium feel */
.kpi-card:hover,
.panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: color-mix(in srgb, var(--line) 60%, var(--primary) 12%);
}

.list-row:hover,
.link-card:hover,
.seller-card:hover {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--line) 55%, var(--primary) 16%);
}

/* KPI accent bar a touch brighter on hover */
.kpi-card:hover::before {
  opacity: 1;
}

/* Glass topbar */
.topbar {
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

/* Primary button: richer press + hover */
.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 30%, transparent);
  filter: brightness(1.03);
}
.primary-btn:active,
.ghost-btn:active,
.icon-btn:active,
.danger-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Inputs: consistent, refined surface + radius */
input,
select,
textarea,
.search-input {
  border-radius: var(--radius-sm);
}

/* Gold text selection */
::selection {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--text);
}

/* Premium thin scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 45%, transparent);
  background-clip: padding-box;
}

/* Panels get a faint warm top highlight for depth */
.panel {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 3%, transparent), transparent 64px);
}

/* Avatars: subtle ring */
.avatar {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}

/* Active nav tab: gold underline accent */
.main-nav-btn.active {
  position: relative;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .kpi-card,
  .panel,
  .primary-btn,
  .list-row,
  .link-card,
  .seller-card {
    transition: none;
  }
  .kpi-card:hover,
  .panel:hover,
  .primary-btn:hover {
    transform: none;
  }
}

/* ============================================
   RESPONSIVE LAYER — TABLET + MOBILE (2026-06-14)
   Appended last for override priority. Goal: nothing
   overflows, no information lost, compact premium
   chrome. Mobile gets the most attention.
   ============================================ */

/* ---------- TABLET (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* 5 KPI cards only tile gaplessly at 5 or 1 col; keep 5 across on tablet
     (cards are compact) so the 3+2 layout never leaves an empty cell. */
  .kpi-grid.chrome-expanded {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .metric-row-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .four-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- MOBILE (<= 640px) ---------- */
@media (max-width: 640px) {
  /* Topbar: relative (not sticky, so it scrolls away and reclaims ~290px) but
     keep a z-index so the period-picker modal — a child of the topbar — stacks
     above the dashboard instead of being painted over by the KPI cards. */
  .topbar {
    position: relative;
    z-index: 60;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .brand {
    min-width: 0;
    gap: 10px;
  }
  .brand h1 {
    font-size: 16px;
  }
  .brand p {
    display: none; /* hide subtitle on phone to save vertical space */
  }
  .top-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Search spans a full row; keyboard hint pinned right */
  .top-actions .cmdk-trigger {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .top-actions .cmdk-trigger .cmdk-hint {
    margin-left: auto;
  }
  .top-actions select {
    width: 100%;
  }
  .top-actions .language-select {
    width: 64px !important;
    flex: 0 0 auto;
  }
  /* Role/email chip never pushes layout wide; truncates cleanly */
  .top-actions > .chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Compact but still tappable (>=36px) action buttons */
  .top-actions .ghost-btn,
  .top-actions .primary-btn,
  .top-actions .export-menu > summary {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  /* KPI + metric grids: 2 cols so all cards stay visible (no h-scroll) */
  .kpi-grid,
  .kpi-grid.chrome-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .metric-row-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .four-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Finance: one column for breathing room; owner row keeps inline pct */
  .split-grid {
    grid-template-columns: 1fr;
  }
  .owner-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .finance-config-row label {
    max-width: none;
    flex: 1 1 140px;
  }

  /* Kanban stays a horizontal rail but snaps like pages, ~86vw per column
     with a peek of the next so users know to swipe. */
  .kanban {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .stage-column {
    scroll-snap-align: start;
  }

  /* Panels/section toolbars wrap instead of overflowing */
  .panel-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .toolbar-row {
    flex-wrap: wrap;
  }
  .period-btn,
  .tab-btn {
    min-width: 0;
  }
}

/* ---------- SMALL PHONE (<= 430px) ---------- */
@media (max-width: 430px) {
  .main {
    padding: 14px 10px 28px;
  }
  .kpi-card strong {
    font-size: 20px;
  }
  .panel {
    padding: 14px;
  }
  /* On the narrowest screens, KPI value + label read better stacked single col
     only for the dense 6-metric finance row; keep dashboard KPIs at 2 col. */
  .brand h1 {
    font-size: 15px;
  }
}

/* ---------- OVERFLOW CONTAINMENT (all sizes) ----------
   The kanban rail lives in an auto-sized implicit grid column that grew to fit
   its content and blew out the page width on narrow screens. Pin ONLY that
   container's column to minmax(0,1fr) (scoped so multi-col grids are untouched)
   and make the kanban its own contained scroll area. */
.pipeline-dash-main > .grid {
  grid-template-columns: minmax(0, 1fr);
}
.kanban-wrap {
  min-width: 0;
  max-width: 100%;
}

/* Pipeline quick-actions meta cluster: wrap + let the account select shrink so
   it never pushes the page wider than the viewport on phones. */
@media (max-width: 640px) {
  .pipeline-queue-meta {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .account-filter-slim {
    max-width: 100%;
    flex: 0 1 auto;
  }
  .action-queue-row {
    flex-wrap: wrap;
  }
}

/* ---------- LEAD MODAL ON SMALL SCREENS ----------
   The 2-col profile grid had a 700px minimum (minmax(420px)+minmax(280px)) so
   it overflowed phones/tablets, pushing the values off-screen. Collapse it and
   give the modal more room. */
@media (max-width: 900px) {
  .lead-profile-grid-2col,
  .lead-profile-grid,
  .lead-profile-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .modal-backdrop {
    padding: 10px;
    place-items: start center;
  }
  .modal-card {
    width: 100%;
    padding: 16px;
    max-height: calc(100vh - 20px);
  }
  .modal-header,
  .modal-head,
  .modal-actions {
    flex-wrap: wrap;
  }
  /* Identity/detail rows: keep label + value on one line, value aligned right,
     wrapping if long so nothing is clipped. */
  .lead-profile-grid-2col .panel,
  .lead-profile-side .panel {
    min-width: 0;
  }
}

/* ---------- MOBILE TOPBAR CONDENSE (2026-06-14) ----------
   Phone-only: hide Export/Import, collapse Saldos + theme toggle to emoji,
   turn Salir into a door emoji, and hide the Descuentos money card. */
.t-exit {
  display: none; /* desktop keeps the "Salir" text label */
}
/* Closer focus selector: full text dropdown on desktop; on phones it collapses
   to an emoji tap-target (see the mobile block below). */
.seller-focus-wrap { position: relative; display: inline-flex; align-items: center; }
.seller-focus-emoji { display: none; }
.seller-focus-wrap #seller-focus { width: 210px; }
/* Mobile-only row breaks for the topbar (forced wrap points); hidden elsewhere */
.ta-break { display: none; }
@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
  /* Emoji-only buttons: drop the text label, keep the icon */
  .top-actions .t-label {
    display: none;
  }
  .top-actions [data-action="logout"] .t-exit {
    display: inline;
  }
  /* Tighten now-iconic buttons to square-ish tap targets */
  .top-actions [data-action="toggle-mask-money"],
  .top-actions .theme-toggle,
  .top-actions [data-action="logout"] {
    min-width: 44px;
    padding: 0 10px;
  }
  /* Hide the Descuentos KPI (money) card on phones */
  .kpi-discounts {
    display: none;
  }
}

/* ---------- LEAD TABLE: contain on desktop, card-ify on phone ----------
   A 7-column table can't be 100% visible on a phone, so on mobile each row
   becomes a labelled card (data-label drives the field name). Desktop/tablet
   keep the table but in a contained horizontal-scroll wrapper. */
.lead-table-wrap {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  /* Filter header above the table stacks instead of overflowing */
  .pipeline-head {
    flex-direction: column;
    align-items: stretch;
  }
  .pipeline-head-tools {
    flex-wrap: wrap;
    width: 100%;
  }
  .pipeline-head-tools .search-input {
    flex: 1 1 100%;
  }

  .lead-table-wrap {
    overflow-x: visible;
  }
  .lead-table-wrap table,
  .lead-table-wrap thead,
  .lead-table-wrap tbody,
  .lead-table-wrap tr,
  .lead-table-wrap td {
    display: block;
    width: 100%;
  }
  .lead-table-wrap thead {
    display: none;
  }
  .lead-table-wrap tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: var(--surface-3);
  }
  .lead-table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border: none;
    text-align: right;
    min-height: 0;
  }
  .lead-table-wrap td + td {
    border-top: 1px solid var(--line-soft);
  }
  .lead-table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    flex: 0 0 auto;
  }
}

/* ---------- TABLE SAFETY NET (phones) ----------
   Wide analytics tables (campaign/quality grids have many columns) can't be
   card-ified meaningfully, so they become self-scrolling on phones instead of
   forcing the whole page wider. The lead list is excluded (it card-ifies). */
@media (max-width: 640px) {
  table.table:not(.lead-table-wrap table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ---------- MOBILE TOPBAR REORDER (2026-06-14) ----------
   Phone-only: pack the small controls (theme, lang, eye, door) onto the first
   row next to the language selector, and lift "Agregar lead" up next to the
   closer selector. Saves vertical space. Uses flex order; DOM order unchanged. */
@media (max-width: 640px) {
  .top-actions {
    align-items: center;
  }
  /* Uniform control system: identical height / font / radius / gap so the two
     rows read as tidy, even clusters instead of mismatched pills and circles. */
  .top-actions { gap: 8px; align-items: stretch; }
  .top-actions .cmdk-trigger,
  .top-actions .theme-switch,
  .top-actions .language-select,
  .top-actions .alert-bell,
  .top-actions [data-action="toggle-mask-money"],
  .top-actions [data-action="logout"],
  .seller-focus-wrap,
  .seller-focus-emoji,
  .top-actions .topbar-period .period-picker-btn,
  .top-actions .export-menu > summary,
  .top-actions [data-action="new-lead"],
  .top-actions > .chip {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    box-sizing: border-box;
    align-items: center;
  }
  /* Square icon-only buttons (width = height) */
  .top-actions .alert-bell,
  .top-actions [data-action="toggle-mask-money"],
  .top-actions [data-action="logout"],
  .seller-focus-wrap {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Row 1: search (grows from 0 so all five fit) · theme · ES · eye · door */
  .top-actions .cmdk-trigger {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    justify-content: flex-start;
  }
  .top-actions .cmdk-trigger .cmdk-hint { display: none; }
  .top-actions .theme-switch { order: 2; flex: 0 0 auto; padding: 3px; gap: 2px; }
  .top-actions .theme-switch .theme-opt { height: 100%; display: inline-flex; align-items: center; justify-content: center; }
  .top-actions .language-select { order: 3; flex: 0 0 56px; width: 56px !important; padding: 0 6px; text-align: center; }
  .top-actions .alert-bell { order: 4; }
  .top-actions [data-action="toggle-mask-money"] { order: 5; }
  .top-actions [data-action="logout"] { order: 6; }

  /* Forced row breaks so the controls always wrap into clean rows regardless
     of label widths: break-1 ends row 1, break-2 ends row 2. */
  .ta-break { display: block; flex: 0 0 100%; width: 100%; height: 0; margin: 0; padding: 0; border: 0; }
  .ta-break-1 { order: 7; }

  /* Row 2: closer emoji · Global (grows) · Datos · Agregar lead */
  .seller-focus-wrap { order: 8; position: relative; }
  .seller-focus-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    font-size: 17px;
    line-height: 1;
  }
  .seller-focus-wrap #seller-focus {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
  }
  .top-actions .topbar-period { order: 9; flex: 1 1 0; min-width: 0; }
  .top-actions .topbar-period .period-picker-btn { width: 100%; justify-content: center; }
  .top-actions .export-menu { order: 10; flex: 0 0 auto; }
  .top-actions .export-menu > summary { justify-content: center; padding: 0 10px; }

  /* Agregar lead sits inline on row 2 (packs tight, then grows with Global) */
  .top-actions [data-action="new-lead"] { order: 12; flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 10px; }

  /* Last row: identity chip, full width and centered */
  .top-actions > .chip { order: 13; flex: 1 1 100%; display: flex; align-items: center; justify-content: center; }
}

/* ---------- Commission breakdown panel (lead/close card) ---------- */
.commission-breakdown {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}
.commission-breakdown .breakdown-rows {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.commission-breakdown .bd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}
.commission-breakdown .bd-row.neg {
  color: var(--muted);
}
.commission-breakdown .bd-row.net {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-weight: 800;
}
.commission-breakdown .bd-row.net strong {
  color: var(--primary);
}
.commission-breakdown .breakdown-people {
  display: grid;
  gap: 8px;
}
.commission-breakdown .bd-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-3);
}
.commission-breakdown .bd-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.commission-breakdown .bd-who strong {
  display: block;
}
.commission-breakdown .bd-who small {
  color: var(--muted);
}
.commission-breakdown .bd-person .price {
  color: var(--green);
  font-size: 15px;
  white-space: nowrap;
}

/* ---------- TradingView access panel (lead card) ---------- */
.tv-access-card .tv-access-list {
  display: grid;
  gap: 8px;
}
.tv-access-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-3);
}
.tv-access-row.granted {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  background: color-mix(in srgb, var(--green) 7%, var(--surface-3));
}
.tv-access-row.pending {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-3));
}

/* Pipeline TradingView access-request banner (stacked + collapsible) */
.tv-access-requests {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  overflow: hidden;
}
.tv-access-requests > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.tv-access-requests > summary::-webkit-details-marker { display: none; }
.tv-access-requests .tv-req-title { flex: 1 1 auto; }
.tv-access-requests .tv-req-count {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 800;
}
.tv-access-requests[open] .tv-req-caret { transform: rotate(180deg); }
.tv-access-requests .tv-req-caret { transition: transform 0.15s ease; color: var(--muted); }
.tv-req-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
  max-height: 320px;
  overflow: auto;
}
.tv-req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}
.tv-req-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-req-info small { color: var(--muted); }
.tv-req-actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .tv-req-row { flex-direction: column; align-items: stretch; }
  .tv-req-actions { justify-content: stretch; }
  .tv-req-actions > * { flex: 1 1 auto; }
}
.tv-access-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tv-access-info strong {
  font-size: 14px;
}
.tv-access-info small {
  color: var(--muted);
  font-size: 11.5px;
}

/* ---------- Trial extension panel (lead card) ---------- */
.trial-card .trial-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.trial-card .trial-metrics .kpi-card {
  text-align: center;
}
.trial-card .trial-metrics .kpi-card strong {
  font-size: 26px;
}

/* ---------- Stage-specific badges on kanban cards ---------- */
.lead-stage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* ---------- Quick links + discount codes panel (pipeline) ---------- */
.quick-links-panel > summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-links-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
}
.quick-links-empty {
  padding: 8px 14px;
}

/* Action-queue chips relocated into the period header (pipeline kanban) */
.period-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.period-actions .action-queue-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.period-actions .action-queue-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
/* Match the period buttons exactly so both pill groups read as one harmonic row. */
.period-actions .action-queue-row .action-chip {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .period-actions {
    margin-left: 0;
    width: 100%;
  }
}
.quick-links-panel > summary::-webkit-details-marker { display: none; }
.quick-links-panel[open] > summary {
  margin-bottom: 10px;
}
.quick-links-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quick-links-group .field-label {
  margin: 0 0 6px;
}
.quick-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface-3);
  margin-bottom: 6px;
}
.quick-link-info { min-width: 0; }
.code-input { text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 640px) {
  .quick-links-body { grid-template-columns: 1fr; }
}

/* ---------- Compact period picker (Shopify-style) ---------- */
.period-picker {
  position: relative;
}
.period-picker > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}
.period-picker > summary::-webkit-details-marker { display: none; }
.period-picker[open] > summary {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  color: var(--primary);
}
.period-picker .pp-caret { color: var(--muted); font-size: 10px; }
.period-picker-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: min(420px, 86vw);
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop, var(--shadow));
}
.pp-group .pp-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.pp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-option {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text);
}
.pp-option:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.pp-option.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.period-picker .custom-period { border-left: none; padding-left: 0; }

/* ---------- KPI sparklines ---------- */
.spark-card { display: flex; flex-direction: column; }
.spark-card .spark {
  width: 100%;
  height: 30px;
  margin-top: 8px;
  display: block;
}

@media (max-width: 640px) {
  /* Anchor to the viewport so the dropdown never overflows the page on phones. */
  .period-picker-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-height: 82vh;
    overflow: auto;
    z-index: 200;
  }
}

/* Acciones rápidas as a compact dropdown (mirrors the period picker) */
.actions-picker.has-filter > summary {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.actions-panel .pp-options { gap: 6px; }

/* The actions picker sits at the right of the header, so open its panel leftward
   (desktop only; phones use the centered fixed sheet). */
@media (min-width: 641px) {
  .actions-picker .period-picker-panel { left: auto; right: 0; }
}

/* ---------- Topbar: theme switch (sun/moon) + period picker ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.theme-opt {
  min-width: 34px;
  min-height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.theme-opt:hover { opacity: 0.85; }
.theme-opt.active {
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
/* Period picker sits on the left of the topbar cluster → open its panel
   rightward (default). Desktop only; phones use the centered fixed sheet. */
@media (min-width: 641px) {
  .topbar-period .period-picker-panel { left: 0; right: auto; }
}

/* ---------- Pipeline toolbar: links panel + quick-actions dropdown ---------- */
.pipeline-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pipeline-toolbar > .quick-links-panel {
  flex: 1 1 auto;
  min-width: 0;
}
.pipeline-toolbar > .actions-picker {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .pipeline-toolbar { flex-direction: column; }
  .pipeline-toolbar > .quick-links-panel,
  .pipeline-toolbar > .actions-picker { width: 100%; }
  .pipeline-toolbar > .actions-picker > summary { width: 100%; justify-content: center; }
  /* Mobile: hide Total Leads card (keep Cerrados, Prueba, Revenue, Conversion). */
  .kpi-total-leads { display: none; }
}

/* ---------- Pipeline toolbar: actions panel expands INLINE (in harmony with
   the links panel) instead of floating. Overrides the absolute/fixed dropdown
   positioning specifically inside the toolbar. ---------- */
/* Closed: size to the button. Open: a fixed-width column so the filter chips
   wrap vertically and the links panel keeps its width (no squish). */
.pipeline-toolbar > .actions-picker {
  flex: 0 0 auto;
  min-width: 0;
}
.pipeline-toolbar > .actions-picker[open] {
  flex: 0 0 200px;
}
/* Filter chips stack in a single vertical column: the panel stays narrow and
   the freed horizontal space goes to the links panel (flex: 1 1 auto). */
.pipeline-toolbar .actions-picker .pp-options {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}
.pipeline-toolbar .actions-picker .pp-option {
  width: 100%;
  text-align: left;
}
.pipeline-toolbar .actions-picker .period-picker-panel {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-height: none;
  overflow: visible;
  margin-top: 8px;
  z-index: auto;
}
@media (max-width: 640px) {
  .pipeline-toolbar > .actions-picker[open] { flex: 1 1 auto; }
}

/* ============================================
   PREMIUM PERIOD PICKER (Shopify-style date range)
   ============================================ */
.period-picker-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}
.period-picker-btn.open {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  color: var(--primary);
}
.period-modal-backdrop {
  position: fixed;
  /* The topbar has backdrop-filter, which makes it the containing block for
     these fixed children. Use top/left/right + 100vh (viewport units) so the
     overlay still covers the full screen instead of just the topbar box. */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 190;
  background: var(--overlay);
  backdrop-filter: blur(2px);
}
.period-modal {
  position: absolute;
  z-index: 200;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  width: min(680px, 94vw);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop, var(--shadow));
  overflow: hidden;
}
.pm-presets {
  display: flex;
  flex-direction: column;
  flex: 0 0 170px;
  padding: 8px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}
.pm-preset {
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.pm-preset:hover { background: var(--surface-3); }
.pm-preset.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 800;
}
.pm-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px;
  display: grid;
  gap: 14px;
}
.pm-rel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.pm-rel-label { color: var(--muted); font-weight: 700; }
.pm-rel-n { width: 64px; text-align: center; }
.pm-rel-unit { min-width: 110px; }
.pm-include { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.pm-cals {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  position: relative;
}
.cal-month { flex: 0 0 auto; }
.cal-title { margin: 0 0 10px; text-align: center; font-weight: 800; font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; }
.cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.cal-cell { min-height: 30px; }
.cal-day {
  min-height: 30px;
  min-width: 30px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cal-day:hover { background: var(--surface-3); }
.cal-day.in-range {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-radius: 0;
}
.cal-day.endpoint {
  background: var(--primary);
  color: #0a0a0a;
  font-weight: 800;
}
.cal-day.future { color: var(--faint); opacity: 0.45; pointer-events: none; }
.cal-nav {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  z-index: 2;
}
.cal-nav.prev { left: 0; }
.cal-nav.next { right: 0; }
.pm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pm-range { font-size: 13px; font-weight: 700; color: var(--muted); }
.pm-actions { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .period-modal {
    position: fixed;
    /* Anchor by top (reliable: topbar = containing block starts at viewport
       top). Bottom can't be used here because the topbar box, not the
       viewport, is the containing block. Full-width, scrollable. */
    left: 8px;
    right: 8px;
    top: 56px;
    bottom: auto;
    width: auto;
    flex-direction: column;
    max-height: calc(100vh - 72px);
    overflow: auto;
  }
  .pm-presets {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pm-preset {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
  }
  .cal-second { display: none; }
  .cal-grid { grid-template-columns: repeat(7, 1fr); }
  .cal-day { min-width: 0; width: 100%; }
}

/* ============================================
   MOBILE NAV DROPDOWN (2026-06-15)
   Phone-only: collapse main-nav + subtabs into a single dropdown opened from a
   top-left trigger. Desktop/tablet untouched (trigger hidden, nav-collapse is
   display:contents so the two navs stay direct grid items of .nav-shell).
   ============================================ */
.nav-mobile-trigger { display: none; }
.nav-collapse { display: contents; }

@media (max-width: 640px) {
  .nav-shell { position: relative; display: block; margin: 10px 0 14px; }
  .nav-mobile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-2, var(--surface));
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
  }
  .nav-mobile-trigger .nav-burger { font-size: 18px; line-height: 1; }
  .nav-mobile-trigger .nav-trigger-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Collapsed by default */
  .nav-collapse { display: none; }
  /* Open: floating dropdown panel under the trigger */
  .nav-shell.mobile-open .nav-collapse {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-pop, var(--shadow));
  }
  .nav-shell.mobile-open .main-nav,
  .nav-shell.mobile-open .subtab-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav-shell.mobile-open .subtab-row { margin-top: 6px; }
  /* Right-aligned items: text to the right, icon on the far right */
  .nav-shell.mobile-open .main-nav-btn,
  .nav-shell.mobile-open .subtab-btn {
    width: 100%;
    min-height: 42px;
    justify-content: flex-end;
    text-align: right;
  }
  .nav-shell.mobile-open .nav-txt { order: 1; }
  .nav-shell.mobile-open .nav-ico { order: 2; }
  .nav-shell.mobile-open .subtab-group-label { text-align: right; width: 100%; }
}