/*
 * Lidovo workspace
 * Chatterfy-informed operational UI: one dark product shell and one component grammar.
 */

:root {
  color-scheme: dark;
  --color-bg: #07111f;
  --color-bg-grid: transparent;
  --color-sidebar: #050c17;
  --color-surface: #121c2e;
  --color-surface-raised: #182339;
  --color-surface-soft: #0d1727;
  --color-border: #2b3951;
  --color-border-soft: rgba(151, 166, 190, 0.13);
  --color-text: #f5f7fb;
  --color-text-muted: #a8b3c3;
  --color-text-subtle: #8997aa;
  --color-accent: #5e61e2;
  --color-accent-strong: #9698ff;
  --color-accent-soft: rgba(109, 112, 242, 0.16);
  --color-success: #62d6a8;
  --color-success-soft: rgba(49, 181, 132, 0.15);
  --color-warning: #f1bd69;
  --color-warning-soft: rgba(218, 152, 47, 0.15);
  --color-danger: #ff8492;
  --color-danger-soft: rgba(220, 75, 97, 0.15);
  --shadow-panel: 0 14px 34px rgba(0, 0, 0, 0.16);
  --radius-sm: 8px;
  --radius-control: 9px;
  --radius-panel: 12px;
  --radius-card: 12px;
  --sidebar-width: 246px;
  --content-width: 1520px;
  --space-page: clamp(20px, 3vw, 46px);
  --font-display: var(--font-sans);
}

html,
body {
  max-width: 100%;
  background: var(--color-bg);
  overflow-x: hidden;
}

body {
  background-image: none;
  color: var(--color-text);
}

.app-shell,
.app-main,
.content {
  min-width: 0;
  max-width: 100%;
}

::selection {
  background: #6669dd;
  color: #fff;
}

:focus-visible {
  outline-color: var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  background: var(--color-sidebar);
  color: #fff;
}

/* Shell */

.brand {
  gap: 11px;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #6669df;
  box-shadow: none;
  color: #fff;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.brand__copy strong {
  color: #fff;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.025em;
  text-transform: none;
}

.brand__copy small {
  margin-block-start: 2px;
  color: #9a999e;
  font-family: var(--font-sans);
  font-size: var(--crm-type-kicker, 12px);
  letter-spacing: 0.02em;
  text-transform: none;
}

.bot-status > span {
  box-shadow: 0 0 0 4px rgba(58, 164, 132, 0.13);
}

.content {
  padding-block-start: 30px;
}

/* Type and shared surfaces */

.eyebrow,
.section-kicker {
  color: #9295ff;
  font-family: var(--font-sans);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 690;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.page-header {
  align-items: flex-end;
  margin-block-end: 22px;
}

.page-header h1 {
  margin-block-start: 6px;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.empty-state--page h1 {
  margin-block-start: 7px;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.page-description {
  max-width: 62ch;
  margin-block-start: 10px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.page-header__aside {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}

.page-header__aside p {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.read-only-badge,
.status-badge,
.panel-count,
.tag {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
}

.read-only-badge {
  min-height: 30px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--crm-type-kicker, 12px);
  letter-spacing: 0.025em;
  text-transform: none;
}

.status-badge--blue {
  border-color: transparent;
  background: var(--color-accent-soft);
  color: #b4b5ff;
}

.status-badge--success {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.status-badge--warning {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.panel,
.metric-card,
.flow-card,
.block-card,
.login-card,
.alert-panel,
.empty-state:not(.empty-state--compact) {
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

.panel {
  border-radius: var(--radius-panel);
}

.metric-card,
.flow-card,
.block-card {
  border-radius: var(--radius-panel);
}

.metrics {
  gap: 12px;
  padding-block: 0;
  margin-block-end: 22px;
  border-block: 0;
}

.metrics--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 680px;
}

.metrics .metric-card {
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: none;
}

.metrics .metric-card:first-child {
  padding-inline-start: 18px;
}

.metrics .metric-card + .metric-card {
  border-inline-start: 1px solid var(--color-border);
}

.metrics .metric-card__icon {
  display: none;
}

.metrics .metric-card--accent {
  background: var(--color-surface);
  color: var(--color-text);
}

.metrics .metric-card p,
.metrics .metric-card--accent p {
  margin-block-end: 8px;
  color: var(--color-text-muted);
}

.metrics .metric-card strong {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 680;
  letter-spacing: -0.05em;
  line-height: 1;
}

.metrics + .panel {
  margin-block-start: 0;
}

.data-panel {
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: none;
}

.metric-card--accent {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: #fff;
}

.metric-card--accent p,
.metric-card--accent .metric-card__icon {
  color: var(--color-text-muted);
}

.metric-card__icon,
.flow-card__icon,
.empty-state__icon,
.alert-panel__icon {
  border-color: transparent;
  border-radius: 11px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.flow-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  max-width: none;
  gap: 12px;
}

.flow-card {
  min-height: 300px;
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

.flow-card__footer,
.flow-card__actions {
  flex-wrap: wrap;
}

.panel-heading h2,
.tracker-section-heading h2,
.integration-list__heading h2 {
  margin: 4px 0 0;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 690;
  letter-spacing: -0.03em;
}

.button {
  min-height: 44px;
  border-radius: var(--radius-control);
  transition-property: background-color, border-color, color, box-shadow, transform;
}

.button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: none;
  color: #fff;
}

.button--primary:hover {
  border-color: #5558d2;
  background: #5558d2;
  box-shadow: none;
}

.button--secondary {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: none;
  color: var(--color-text);
}

.button--secondary:hover {
  border-color: #425370;
  background: #1d2a43;
}

.button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}

.button--quiet:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.field label {
  color: #c4ccda;
  font-size: 12px;
  font-weight: 650;
}

.field input,
.field select,
.field textarea,
.tracking-link-control input,
.integration-copy-row input {
  min-height: 46px;
  border-color: var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  box-shadow: none;
  color: var(--color-text);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-border);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.field-hint,
.form-intro,
.cell-note,
.tracker-table-note {
  color: var(--color-text-subtle);
}

code {
  color: #acaeff;
}

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

.data-table th {
  border-block-end-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
}

.data-table td {
  border-block-end-color: var(--color-border-soft);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.table-link,
.tracker-campaign-name {
  color: var(--color-text);
}

.table-scroll {
  contain: inline-size layout paint;
  max-width: calc(100% + 12px);
  border-color: var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}

.tracker-notice {
  padding: 13px 16px;
  margin-block: -6px 20px;
  border: 0;
  border-radius: 12px;
}

.tracker-notice--success {
  background: var(--color-success-soft);
  color: #1f6e5a;
}

.tracker-notice--error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.tracker-revenue-card,
.integration-form-panel,
.integration-guide,
.tracker-data-section,
.integration-card {
  border-radius: var(--radius-card);
}

.tracker-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.tracker-section-heading > div > p:not(.section-kicker) {
  max-width: 62ch;
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.tracker-revenue-card {
  position: relative;
  display: flex;
  min-height: 230px;
  padding: 26px;
  overflow: hidden;
  background: #252b48;
  box-shadow: 0 16px 36px rgba(28, 33, 58, 0.16);
  color: #fff;
  flex-direction: column;
  justify-content: space-between;
}

.tracker-revenue-card .section-kicker {
  color: #aeb4ee;
}

.tracker-revenue-card h2 {
  max-width: 12ch;
  margin: 5px 0 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.tracker-revenue-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
}

.tracker-revenue-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tracker-revenue-list dt {
  color: #aeb4c7;
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-revenue-list dd {
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 670;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.tracker-revenue-empty {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  color: #b9bfd0;
  font-size: 13px;
}

.tracker-revenue-card__icon {
  position: absolute;
  inset-inline-end: -12px;
  inset-block-end: -18px;
  color: rgba(255, 255, 255, 0.06);
}

.tracker-revenue-card__icon .icon {
  width: 132px;
  height: 132px;
}

/* Tracker dashboard */

.tracker-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding-block: 0 22px;
}

.tracker-masthead__copy {
  max-width: 680px;
}

.tracker-masthead h1 {
  max-width: none;
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.tracker-masthead__copy > p:last-child {
  max-width: 64ch;
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.tracker-masthead__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-block-end: 0;
}

.tracker-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0 0 22px;
  border-block: 0;
}

.tracker-kpi-strip > div {
  min-width: 0;
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.tracker-kpi-strip > div:first-child {
  padding-inline-start: 18px;
}

.tracker-kpi-strip > div + div {
  border-inline-start: 1px solid var(--color-border);
}

.tracker-kpi-strip dt {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 610;
}

.tracker-kpi-strip dd {
  margin: 8px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 680;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tracker-kpi-strip .tracker-kpi-strip__context {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}

.tracker-performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.62fr);
  align-items: stretch;
  gap: 12px;
  margin-block-end: 32px;
}

.tracker-performance-panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text);
}

.tracker-performance-panel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
}

.tracker-performance-panel .section-kicker {
  color: #9295ff;
}

.tracker-performance-panel h2 {
  margin: 6px 0 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.3vw, 24px);
  font-weight: 690;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.tracker-performance-panel__header > div:first-child > p:last-child {
  max-width: 54ch;
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.tracker-performance-panel__rate {
  display: grid;
  justify-items: end;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-raised);
}

.tracker-performance-panel__rate strong {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tracker-performance-panel__rate span {
  margin-block-start: 8px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  white-space: nowrap;
}

.tracker-funnel {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
}

.tracker-funnel li {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(180px, 1.4fr) minmax(150px, 0.7fr);
  align-items: center;
  gap: 18px;
}

.tracker-funnel__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tracker-funnel__label > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dbe1ea;
  font-size: 13px;
  font-weight: 590;
}

.tracker-funnel__label b {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 650;
  letter-spacing: 0.06em;
}

.tracker-funnel__label strong {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.tracker-funnel__track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border-soft);
}

.tracker-funnel__track span {
  display: block;
  width: var(--stage-ratio);
  height: 100%;
  border-radius: inherit;
  background: #7679f2;
}

.tracker-funnel li:nth-child(2) .tracker-funnel__track span {
  background: #6e71e9;
}

.tracker-funnel li:nth-child(3) .tracker-funnel__track span {
  background: #6267dc;
}

.tracker-funnel li:nth-child(4) .tracker-funnel__track span {
  background: #575fcf;
}

.tracker-funnel li > p {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.35;
}

.tracker-performance-panel__footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block-start: 20px;
  margin-block-start: 28px;
  border-block-start: 1px solid var(--color-border-soft);
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.45;
}

.tracker-performance-panel__footer strong {
  color: #dbe1ea;
  font-weight: 620;
}

.tracker-insight-rail {
  display: grid;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 12px;
}

.tracker-revenue-card {
  min-height: 0;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text);
}

.tracker-revenue-card .section-kicker {
  color: #9295ff;
}

.tracker-revenue-card h2 {
  max-width: none;
  margin: 6px 0 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 690;
  letter-spacing: -0.03em;
}

.tracker-revenue-list {
  gap: 6px;
  margin-block-start: 22px;
}

.tracker-revenue-list > div {
  align-items: end;
  flex-direction: column;
  gap: 2px;
}

.tracker-revenue-list dt {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 630;
}

.tracker-revenue-list dd {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
}

.tracker-revenue-empty {
  color: var(--color-text-muted);
}

.tracker-revenue-card__meta {
  margin: 20px 0 0;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-revenue-card__meta strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.tracker-signal-card {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
}

.tracker-signal-card h2 {
  margin: 5px 0 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.tracker-signal-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
}

.tracker-signal-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.tracker-signal-list dt {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-signal-list dd {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.tracker-section-heading h3 {
  margin: 5px 0 0;
  color: var(--color-text);
  font-size: 21px;
  font-weight: 690;
  letter-spacing: -0.03em;
}

/* Data work areas */

.tracker-data-section {
  overflow: hidden;
  padding: 22px;
  margin-block-start: 12px;
  scroll-margin-top: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
}

.tracker-data-section .table-scroll {
  margin-block-start: 20px;
}

.result-count {
  color: var(--color-text-subtle);
}

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

.tracking-link-control input {
  background: var(--color-surface-soft);
}

.tracker-event-badge--contact {
  background: var(--color-accent-soft);
  color: #b5b7ff;
}

.tracker-event-badge--registration {
  background: rgba(63, 165, 187, 0.14);
  color: #78d3e3;
}

.tracker-event-badge--sale,
.tracker-event-badge--resale {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.pending-events-table {
  min-width: 980px;
}

.pending-events-table td {
  vertical-align: top;
}

.pending-error {
  display: block;
  max-width: 300px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.button--compact {
  min-height: 44px;
  padding: 7px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Campaign setup and Invite operations */

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

.page-actions .button:active,
.campaign-form-actions .button:active,
.campaign-type-switch a:active {
  transform: scale(0.96);
}

.campaign-register-summary,
.invite-status-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-block-end: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.campaign-register-summary > *,
.invite-status-overview > div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 98px;
  padding: 18px 20px;
}

.campaign-register-summary > * + *,
.invite-status-overview > div + div {
  border-inline-start: 1px solid var(--color-border-soft);
}

.campaign-register-summary span,
.invite-status-overview span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.campaign-register-summary strong,
.invite-status-overview strong {
  color: var(--color-text);
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -0.04em;
}

.campaign-register-summary > a {
  grid-template-columns: 1fr auto;
  align-items: center;
  color: var(--color-text);
}

.campaign-register-summary > a:hover {
  background: var(--color-surface-raised);
}

.campaign-register-summary > a strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.campaign-register-summary .icon {
  width: 18px;
  height: 18px;
}

.campaign-register-table {
  min-width: 1180px;
}

.campaign-register-table .tracker-campaign-name {
  display: block;
  margin-block-start: 9px;
}

.table-link--secondary {
  display: inline-flex;
  margin-block-start: 8px;
  color: var(--color-accent-strong);
  font-size: 12px;
}

.campaign-form-header {
  margin-block-start: 18px;
}

.campaign-type-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 660px;
  margin-block-end: 18px;
}

.campaign-type-switch a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition-property: border-color, background-color, color, transform;
}

.campaign-type-switch a:hover {
  border-color: #435572;
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.campaign-type-switch a.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.campaign-type-switch .icon {
  width: 22px;
  height: 22px;
  color: var(--color-accent-strong);
}

.campaign-type-switch span {
  display: grid;
  gap: 3px;
}

.campaign-type-switch strong {
  font-size: 14px;
}

.campaign-type-switch small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.campaign-setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  align-items: start;
  gap: 16px;
}

.campaign-setup-form {
  display: grid;
  gap: 14px;
}

.campaign-form-section,
.campaign-setup-aside,
.invite-detail-main,
.invite-detail-aside {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.campaign-form-section {
  padding: 24px;
}

.campaign-form-section__heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
}

.campaign-form-section__heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 750;
}

.campaign-form-section__heading h2,
.campaign-setup-aside h2,
.invite-detail-main h2,
.invite-detail-aside h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 690;
  letter-spacing: -0.03em;
}

.campaign-form-section__heading p {
  max-width: 64ch;
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.campaign-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-block-start: 24px;
  padding-inline-start: 48px;
}

.campaign-field--wide {
  grid-column: 1 / -1;
}

.campaign-slug-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
}

.campaign-slug-field:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.campaign-slug-field > span {
  padding-inline: 14px 4px;
  color: var(--color-text-subtle);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
}

.campaign-slug-field input,
.campaign-slug-field input:focus {
  border: 0;
  box-shadow: none;
}

.campaign-route-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 0 0 0 48px;
  margin: 24px 0 0;
  list-style: none;
}

.campaign-route-preview li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 64px;
  padding: 12px;
  border-radius: var(--radius-panel);
  background: var(--color-surface-raised);
}

.campaign-route-preview li:not(:last-child)::after {
  position: absolute;
  inset-inline-end: -18px;
  content: "→";
  color: var(--color-text-subtle);
}

.campaign-route-preview li > span {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.campaign-route-preview .icon {
  width: 18px;
  height: 18px;
}

.campaign-route-preview small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  text-transform: uppercase;
}

.campaign-route-preview strong {
  font-size: 13px;
}

.campaign-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-raised);
  cursor: pointer;
}

.campaign-checkbox:hover {
  border-color: #435572;
}

.campaign-checkbox input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  accent-color: var(--color-accent);
}

.campaign-checkbox span {
  display: grid;
  gap: 5px;
}

.campaign-checkbox strong {
  font-size: 13px;
}

.campaign-checkbox small {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.campaign-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-block: 6px 12px;
}

.campaign-setup-aside {
  position: sticky;
  inset-block-start: 18px;
  padding: 22px;
}

.campaign-setup-aside h2 {
  margin-block-start: 5px;
}

.campaign-checklist {
  display: grid;
  gap: 15px;
  padding: 0;
  margin: 24px 0;
  list-style: none;
}

.campaign-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--color-warning);
}

.campaign-checklist li.is-ready {
  color: var(--color-success);
}

.campaign-checklist .icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-block-start: 1px;
}

.campaign-checklist span {
  display: grid;
  gap: 3px;
}

.campaign-checklist strong {
  color: var(--color-text);
  font-size: 13px;
}

.campaign-checklist small {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.45;
}

.campaign-setup-aside > .button {
  width: 100%;
}

.campaign-prerequisite-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px;
}

.campaign-prerequisite-empty h2 {
  margin: 0;
  font-size: 20px;
}

.campaign-prerequisite-empty p {
  margin: 7px 0 0;
  color: var(--color-text-muted);
}

.campaign-prerequisite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.invite-status-overview small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.invite-request-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(170px, 0.7fr) minmax(190px, 0.9fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 18px;
  margin-block-start: 20px;
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

.invite-request-list {
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.invite-request-list > li + li {
  border-block-start: 1px solid var(--color-border-soft);
}

.invite-request-row {
  display: grid;
  grid-template-columns: minmax(125px, 0.65fr) minmax(190px, 1.1fr) minmax(210px, 1.2fr) minmax(130px, 0.7fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 14px 4px;
}

.invite-request-row__status,
.invite-request-row__person > div,
.invite-request-row__route {
  display: grid;
  gap: 5px;
}

.invite-request-row__status {
  justify-items: start;
}

.invite-request-row__status small,
.invite-request-row__person span,
.invite-request-row__route span,
.invite-request-row time {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.invite-request-row__person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.request-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 13px;
  font-weight: 700;
}

.invite-request-row__person strong,
.invite-request-row__route strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-request-row .button {
  justify-content: flex-end;
  padding-inline: 10px;
}

.invite-request-row .button .icon {
  width: 16px;
  height: 16px;
}

.invite-request-empty {
  margin-block-start: 18px;
}

.invite-request-workspace .pagination {
  justify-content: flex-end;
  gap: 12px;
  margin-block-start: 20px;
}

.invite-request-workspace .pagination > span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.invite-detail-header {
  margin-block-start: 18px;
}

.invite-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
  align-items: start;
  gap: 16px;
}

.invite-detail-main,
.invite-detail-aside {
  padding: 24px;
}

.invite-route-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 26px 0;
  list-style: none;
}

.invite-route-timeline li {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 160px;
  padding: 15px;
  border-radius: var(--radius-panel);
  background: var(--color-surface-raised);
}

.invite-route-timeline li > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.invite-route-timeline li.is-complete > span {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.invite-route-timeline .icon {
  width: 18px;
  height: 18px;
}

.invite-route-timeline li > div {
  display: grid;
  align-content: start;
  gap: 5px;
}

.invite-route-timeline small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  text-transform: uppercase;
}

.invite-route-timeline strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.invite-route-timeline p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.45;
}

.invite-error-panel {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-block-end: 18px;
  border-radius: var(--radius-panel);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.invite-error-panel > span {
  flex: 0 0 auto;
}

.invite-error-panel .icon {
  width: 19px;
  height: 19px;
}

.invite-error-panel p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.invite-detail-aside h2 {
  margin-block-start: 5px;
}

.invite-fact-list,
.invite-technical-data dl {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
}

.invite-fact-list > div,
.invite-technical-data dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding-block: 11px;
  border-block-end: 1px solid var(--color-border-soft);
}

.invite-fact-list dt,
.invite-technical-data dt {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
}

.invite-fact-list dd,
.invite-technical-data dd {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  text-align: end;
}

.invite-technical-data {
  padding-block-start: 22px;
}

.invite-technical-data h3 {
  margin: 0;
  font-size: 14px;
}

.invite-technical-data dl > div {
  grid-template-columns: 1fr;
  gap: 6px;
}

.invite-technical-data dd {
  text-align: start;
}

.invite-technical-data code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Integrations */

.integration-reveal {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  margin-block-end: 20px;
  border: 1px solid rgba(109, 112, 242, 0.34);
  border-radius: var(--radius-panel);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.integration-reveal h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.integration-reveal p:not(.section-kicker) {
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

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

.integration-reveal--complete {
  display: block;
}

.integration-reveal__heading {
  max-width: 760px;
}

.integration-tracking-parameter,
.integration-postback-row {
  padding: 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  background: var(--color-surface);
}

.integration-tracking-parameter {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(320px, 1.35fr);
  align-items: end;
  gap: 18px;
  margin-block-start: 20px;
}

.integration-tracking-parameter h3,
.integration-postback-row h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
}

.integration-event-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: 8px;
  margin-block-end: 8px;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 720;
  letter-spacing: 0.04em;
}

.integration-postback-list {
  display: grid;
  gap: 10px;
  margin-block-start: 10px;
}

.integration-postback-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(320px, 1.35fr);
  align-items: center;
  gap: 18px;
}

.integration-postback-row__intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.integration-postback-row__intro .integration-event-badge {
  margin: 0;
}

.integration-feed-reveal {
  display: grid;
  gap: 16px;
  margin-block-start: 18px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--color-border-soft);
}

.integration-feed-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.integration-feed-heading h3,
.integration-feed-heading h4 {
  margin: 2px 0 5px;
}

.integration-feed-heading p:not(.section-kicker) {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.integration-feed-endpoint {
  margin: 0;
}

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

.integration-feed-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background: var(--color-surface-soft);
}

.integration-feed-item header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.integration-feed-item header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.integration-feed-item h4,
.integration-feed-item h5 {
  margin: 0;
  font-size: 13px;
}

.integration-feed-item > p {
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.integration-feed-payload {
  display: block;
  margin-block-start: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.integration-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.7fr);
  align-items: start;
  gap: 12px;
}

.integration-form-panel {
  padding: 24px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

.integration-form {
  display: grid;
  gap: 0;
  margin-block-start: 18px;
}

.integration-fieldset {
  min-width: 0;
  padding: 22px 0;
  border: 0;
  border-block-start: 1px solid var(--color-border-soft);
}

.integration-fieldset legend {
  padding: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 680;
}

.integration-fieldset__intro {
  margin: 5px 0 15px;
  color: var(--color-text-subtle);
  font-size: 12px;
}

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

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

.integration-form-grid--events {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.integration-guide {
  position: sticky;
  inset-block-start: 24px;
  padding: 24px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.integration-steps {
  display: grid;
  gap: 20px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.integration-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
}

.integration-steps li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 720;
}

.integration-steps strong {
  display: block;
  font-size: 13px;
}

.integration-steps p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.integration-security-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding-block-start: 20px;
  margin-block-start: 24px;
  border-block-start: 1px solid var(--color-border-soft);
  color: var(--color-warning);
}

.integration-security-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.integration-list {
  margin-block-start: 34px;
}

.integration-list__heading {
  margin-block-end: 16px;
}

.integration-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  grid-template-areas:
    "identity stats"
    "actions template"
    ". mapping"
    "links links"
    "feed feed";
  gap: 18px 24px;
  padding: 22px;
  margin-block-start: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

.integration-card__header {
  grid-area: identity;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.integration-card__identity {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
}

.integration-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.integration-card__icon .icon {
  width: 17px;
  height: 17px;
}

.integration-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.integration-card__header code {
  display: block;
  margin-block-start: 3px;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

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

.integration-stats > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-surface-soft);
}

.integration-stats dt,
.integration-map dt,
.integration-template > span {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 620;
}

.integration-stats dd,
.integration-map dd {
  margin: 5px 0 0;
  color: var(--color-text);
  font-size: 13px;
}

.integration-template {
  grid-area: template;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-surface-soft);
}

.integration-template code {
  display: block;
  margin-block-start: 5px;
  overflow-wrap: anywhere;
  color: #acaeff;
  font-size: var(--crm-type-kicker, 12px);
}

.integration-template__tracking {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.integration-template__tracking code {
  display: inline;
  margin: 0 0 0 4px;
}

.integration-template__list {
  display: grid;
  gap: 10px;
  margin-block-start: 12px;
}

.integration-template__list > div {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--color-border-soft);
}

.integration-template__list strong {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
}

.integration-template .field-hint {
  margin-block-start: 12px;
}

.integration-map {
  grid-area: mapping;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.integration-map > div {
  min-width: 0;
}

.integration-map dd {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--crm-type-kicker, 12px);
}

.integration-card__actions {
  grid-area: actions;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.integration-card__actions .button {
  min-height: 44px;
  padding-inline: 12px;
  font-size: 12px;
}

.integration-registration-links {
  grid-area: links;
  border-block-start: 1px solid var(--color-border-soft);
}

.integration-registration-links > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px 4px;
  cursor: pointer;
  list-style: none;
}

.integration-registration-links > summary::-webkit-details-marker {
  display: none;
}

.integration-registration-links > summary > span {
  display: grid;
  gap: 3px;
}

.integration-registration-links > summary strong {
  color: var(--color-text);
  font-size: 13px;
}

.integration-registration-links > summary small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.integration-registration-links > summary .icon {
  width: 16px;
  height: 16px;
  transition: transform 140ms ease;
}

.integration-registration-links[open] > summary .icon {
  transform: rotate(90deg);
}

.integration-registration-links form,
.integration-registration-links__rows {
  display: grid;
  gap: 10px;
}

.integration-registration-links form {
  padding-block-start: 12px;
}

.integration-registration-link-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(280px, 1fr) 36px;
  gap: 10px;
  align-items: end;
}

.integration-registration-link-row .icon-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
}

.integration-registration-links__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-block-start: 2px;
}

.integration-feed-status {
  grid-area: feed;
  display: grid;
  gap: 12px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--color-border-soft);
}

.integration-feed-status__endpoint,
.integration-feed-state-detail {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.5;
}

.integration-feed-status__endpoint code {
  overflow-wrap: anywhere;
  color: var(--color-text);
}

/* Login */

.login-page {
  background: var(--color-bg);
}

.login-layout {
  background: transparent;
}

.login-story {
  background: var(--color-sidebar);
  color: #fff;
}

.login-story::before,
.login-story::after {
  content: none;
}

.login-story .eyebrow {
  color: #aeb0ff;
}

.login-story__copy > p:not(.eyebrow),
.login-points {
  color: var(--color-text-muted);
}

.login-points li {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.login-points li span {
  color: #aeb0ff;
}

.login-panel {
  border-inline-start: 0;
  background: var(--color-bg);
}

.login-card {
  border-radius: 22px;
  box-shadow: var(--shadow-panel);
}

.setup-code {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
}

.setup-code code {
  color: #acaeff;
}

/* Keep the flow builder intentionally dark and focused. */

.builder-page {
  color-scheme: dark;
  --color-bg: #070b13;
  --color-surface: #101827;
  --color-surface-raised: #151f31;
  --color-surface-soft: #0d1523;
  --color-border: #283650;
  --color-border-soft: rgba(149, 170, 199, 0.13);
  --color-text: #f3f6fb;
  --color-text-muted: #a0aec2;
  --color-text-subtle: #78889f;
  --color-accent: #8d94ff;
  --color-accent-strong: #747de8;
  --color-accent-soft: rgba(141, 148, 255, 0.14);
}

.builder-page .brand__mark {
  box-shadow: none;
}

.builder-topbar {
  background: rgba(10, 16, 28, 0.97);
}

.builder-page .button--secondary,
.builder-page .button--quiet,
.builder-page .icon-button {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: none;
  color: var(--color-text);
}

.builder-page .button--secondary:hover,
.builder-page .button--quiet:hover,
.builder-page .icon-button:hover {
  border-color: #415577;
  background: #1a263a;
}

.builder-page .field input,
.builder-page .field select,
.builder-page .field textarea,
.builder-page .simulator-message-row input {
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text);
}

.builder-page code {
  color: #abb1ff;
}

/* Responsive */

@media (max-width: 1180px) {
  .tracker-performance-grid,
  .integration-workspace {
    grid-template-columns: 1fr;
  }

  .tracker-insight-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .tracker-revenue-card {
    min-height: 190px;
  }

  .integration-guide {
    position: static;
  }

  .integration-form-grid--events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .mobile-header {
    display: none;
  }

  .integration-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "stats"
      "template"
      "mapping"
      "actions";
  }

  .tracker-status-action .button {
    min-height: 44px;
  }

  .tracker-masthead {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .tracker-masthead__controls {
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .page-header {
    align-items: flex-start;
  }

  .page-header__aside {
    align-items: flex-start;
  }

  .tracker-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .metrics,
  .metrics--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    padding: 0;
  }

  .metrics .metric-card,
  .metrics .metric-card:first-child {
    padding: 20px;
  }

  .metrics .metric-card:nth-child(odd) {
    border-inline-start: 0;
  }

  .metrics .metric-card:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-border);
  }

  .tracker-kpi-strip > div,
  .tracker-kpi-strip > div:first-child {
    padding: 20px;
  }

  .tracker-kpi-strip > div:nth-child(odd) {
    border-inline-start: 0;
  }

  .tracker-kpi-strip > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-border);
  }

  .tracker-funnel li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tracker-funnel li > p {
    padding-inline-start: 0;
  }

  .tracker-insight-rail {
    grid-template-columns: 1fr;
  }

  .integration-reveal {
    grid-template-columns: 1fr;
  }

  .integration-tracking-parameter,
  .integration-postback-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .integration-form-grid--mapping,
  .integration-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.filter-pills {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  margin-block: 0 14px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-surface-soft);
}

.filter-pills a {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 7px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 680;
  text-decoration: none;
}

.filter-pills a:hover,
.filter-pills a.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

@media (max-width: 540px) {
  .content {
    padding-block: 28px 50px;
  }

  .page-header h1,
  .empty-state--page h1 {
    font-size: 34px;
  }

  .tracker-masthead {
    padding-block-start: 4px;
  }

  .tracker-masthead h1 {
    max-width: none;
    font-size: clamp(32px, 9.2vw, 36px);
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  .tracker-masthead__controls {
    align-items: stretch;
    flex-direction: column;
  }

  .tracker-masthead__controls .button {
    width: 100%;
  }

  .tracker-performance-panel__header {
    grid-template-columns: 1fr;
  }

  .tracker-performance-panel__rate {
    justify-items: start;
    width: max-content;
    max-width: 100%;
  }

  .tracker-performance-panel__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .tracker-performance-panel,
  .tracker-revenue-card,
  .tracker-signal-card,
  .integration-form-panel,
  .integration-guide,
  .integration-card {
    padding: 20px;
    border-radius: 18px;
  }

  .tracker-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .tracker-data-section {
    padding: 28px 0 0;
    border-radius: 0;
  }

  .integration-form-grid,
  .integration-form-grid--mapping,
  .integration-form-grid--events,
  .integration-stats,
  .integration-map,
  .integration-copy-row,
  .integration-feed-grid {
    grid-template-columns: 1fr;
  }

  .integration-feed-heading,
  .integration-feed-item header {
    align-items: flex-start;
    flex-direction: column;
  }

  .integration-copy-row .button,
  .integration-card__actions,
  .integration-card__actions form,
  .integration-card__actions .button {
    width: 100%;
  }

  .integration-card__actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .tracker-performance-panel,
  .tracker-revenue-card,
  .tracker-signal-card,
  .tracker-data-section,
  .integration-form-panel,
  .integration-guide,
  .integration-card {
    border: 1px solid CanvasText;
  }
}

/* Compact operations system. Shared density follows the supplied product references
   while retaining Lidovo's own navigation, color and component identity. */
:root {
  --module-sidebar-width: 224px;
  --compact-control-height: 38px;
  --compact-radius: 10px;
}

.workspace-body .module-sidebar {
  padding: 16px 14px 14px;
  border-start-start-radius: 12px;
  background: #0b1524;
}

.workspace-body .module-nav {
  margin-block-start: 18px;
}

.workspace-body .module-nav__link {
  min-height: 38px;
  padding: 7px 9px;
}

.workspace-body .content:not(.content--builder):not(.content--messenger) {
  width: 100%;
  max-width: none;
  padding: 22px 24px 40px;
}

.page-header {
  gap: 20px;
  margin-block-end: 20px;
}

.page-header h1 {
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.08;
}

.page-description {
  max-width: 720px;
  margin-block-start: 7px;
  font-size: 14px;
  line-height: 1.55;
}

.button {
  min-height: var(--compact-control-height);
  padding: 8px 13px;
  border-radius: 8px;
}

.button--compact {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.field input,
.field select,
.field textarea {
  border-radius: 8px;
}

.compact-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 18px;
}

.compact-page-header__context {
  margin: 0 0 6px;
  color: #8d91ff;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 720;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.compact-page-header h1 {
  margin: 0;
  color: #f4f7fb;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.compact-page-header > div > p:last-child {
  max-width: 720px;
  margin: 8px 0 0;
  color: #94a2b6;
  font-size: 13px;
  line-height: 1.5;
}

.compact-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.resource-panel {
  overflow: hidden;
  border: 1px solid #25334a;
  border-radius: 12px;
  background: #0c1727;
}

.resource-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 12px 16px;
  border-block-end: 1px solid #25334a;
}

.resource-panel__toolbar h2 {
  margin: 0;
  color: #f4f7fb;
  font-size: 16px;
  letter-spacing: -0.015em;
}

.resource-panel__toolbar p {
  margin: 3px 0 0;
  color: #7e8da2;
  font-size: 12px;
}

.resource-panel__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #8795a9;
  font-size: var(--crm-type-kicker, 12px);
}

.resource-panel__legend > span,
.inline-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.state-dot,
.inline-state > i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f2a93b;
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.1);
}

.state-dot--active,
.inline-state--active > i {
  background: #2fcf8f;
  box-shadow: 0 0 0 3px rgba(47, 207, 143, 0.1);
}

.resource-table-wrap {
  width: 100%;
  overflow-x: auto;
}

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

.resource-table th {
  height: 38px;
  padding: 8px 14px;
  background: #111d2e;
  color: #8190a6;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 720;
  letter-spacing: 0.055em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.resource-table td {
  height: 64px;
  padding: 10px 14px;
  border-block-start: 1px solid rgba(133, 151, 177, 0.15);
  color: #dfe6ef;
  font-size: 12px;
  vertical-align: middle;
}

.resource-table tbody tr {
  transition: background-color 120ms ease;
}

.resource-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.022);
}

.resource-table__actions {
  text-align: end !important;
}

.resource-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.resource-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #2d3b54;
  border-radius: 9px;
  background: #17243a;
  color: #aeb0ff;
}

.resource-avatar .icon {
  width: 17px;
  height: 17px;
}

.resource-identity > span:last-child,
.cell-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.resource-identity strong,
.cell-stack strong {
  overflow: hidden;
  color: #f4f7fb;
  font-size: 12px;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-identity small,
.cell-stack small {
  overflow: hidden;
  max-width: 310px;
  color: #7f8ea3;
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-stack--warning strong {
  color: #f3bc68;
}

.inline-state {
  color: #b8c3d2;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 620;
}

.table-link {
  color: #8fa8ff;
  font-weight: 620;
}

.muted-value {
  color: #718096;
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.row-actions form {
  margin: 0;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #2b3a53;
  border-radius: 8px;
  background: #142137;
  color: #aebbd0;
  cursor: pointer;
}

.icon-button:hover {
  border-color: #465776;
  background: #1b2a43;
  color: #fff;
}

.icon-button--danger:hover {
  border-color: rgba(244, 91, 122, 0.45);
  background: rgba(244, 91, 122, 0.1);
  color: #ff7693;
}

.icon-button .icon {
  width: 15px;
  height: 15px;
}

.empty-state--compact {
  min-height: 280px;
  padding: 40px 20px;
}

.entity-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(1, 6, 14, 0.7);
  backdrop-filter: blur(2px);
}

.entity-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 130;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(600px, 100vw);
  height: 100dvh;
  border-inline-start: 1px solid #2b3a53;
  background: #0d1929;
  box-shadow: -24px 0 72px rgba(0, 0, 0, 0.42);
}

.entity-drawer[hidden],
.entity-drawer-backdrop[hidden],
[data-direct-credential][hidden],
[data-environment-credential][hidden],
[data-personal-info][hidden],
[data-bot-credentials][hidden] {
  display: none !important;
}

.entity-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 14px 18px;
  border-block-end: 1px solid #26354c;
}

.entity-drawer__header p {
  margin: 0 0 3px;
  color: #818eff;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 720;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.entity-drawer__header h2 {
  margin: 0;
  color: #f5f7fb;
  font-size: 19px;
}

.entity-drawer__form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.entity-drawer__body {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

.entity-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-block-start: 1px solid #26354c;
  background: rgba(13, 25, 41, 0.96);
}

.segmented-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  margin: 0 0 18px;
  border: 0;
}

.segmented-field legend {
  grid-column: 1 / -1;
  margin-block-end: 6px;
  color: #c9d2df;
  font-size: 12px;
  font-weight: 650;
}

.segmented-field label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #2b3a53;
  border-radius: 8px;
  background: #111e31;
  color: #a6b2c4;
  font-size: 12px;
  cursor: pointer;
}

.segmented-field label:has(input:checked) {
  border-color: #6469df;
  background: rgba(100, 105, 223, 0.15);
  color: #e4e5ff;
}

.segmented-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drawer-info {
  padding: 14px;
  border: 1px solid #293a55;
  border-radius: 9px;
  background: #111f33;
}

.drawer-info strong {
  color: #e6ebf2;
  font-size: 12px;
}

.drawer-info p {
  margin: 5px 0 0;
  color: #8f9db1;
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.5;
}

body.entity-drawer-open {
  overflow: hidden;
}

@media (max-width: 960px) {
  .workspace-body .content:not(.content--builder):not(.content--messenger) {
    padding: 18px 16px 32px;
  }

  .compact-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-page-header__actions > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 760px) {
  .resource-panel__legend {
    display: none;
  }

  .resource-table thead {
    display: none;
  }

  .resource-table,
  .resource-table tbody,
  .resource-table tr,
  .resource-table td {
    display: block;
    width: 100%;
  }

  .resource-table tr {
    padding: 14px;
    border-block-start: 1px solid #25334a;
  }

  .resource-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    min-height: 38px;
    padding: 6px 0;
    border: 0;
    text-align: end;
  }

  .resource-table td::before {
    content: attr(data-label);
    color: #718197;
    font-size: var(--crm-type-kicker, 12px);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: start;
    text-transform: uppercase;
  }

  .resource-table td:first-child {
    display: block;
    padding-block-end: 12px;
  }

  .resource-table td:first-child::before,
  .resource-table__actions::before {
    display: none;
  }

  .resource-identity {
    min-width: 0;
  }

  .resource-table__actions {
    justify-content: flex-end !important;
    padding-block-start: 10px !important;
  }
}

@media (max-width: 520px) {
  .compact-page-header__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .entity-drawer {
    width: 100vw;
    border-inline-start: 0;
  }
}

/* CRM readability system — calm contrast, durable type sizes and dense layouts
   that remain usable at 200% zoom. The post-compact enforcement block at the
   end of this file protects these tokens from legacy compact overrides. */
:root {
  --color-bg: #081321;
  --color-bg: oklch(0.18 0.025 252);
  --color-sidebar: #06101c;
  --color-sidebar: oklch(0.155 0.022 252);
  --color-surface: #112033;
  --color-surface: oklch(0.235 0.03 250);
  --color-surface-raised: #1b2c45;
  --color-surface-raised: oklch(0.295 0.04 252);
  --color-surface-soft: #0c1929;
  --color-surface-soft: oklch(0.205 0.027 250);
  --color-border: #3a4d68;
  --color-border: oklch(0.43 0.045 250);
  --color-border-soft: rgba(164, 190, 224, 0.2);
  --color-text: #f4f7fb;
  --color-text: oklch(0.97 0.01 250);
  --color-text-muted: #c1ccdb;
  --color-text-muted: oklch(0.82 0.025 250);
  --color-text-subtle: #93a5bc;
  --color-text-subtle: oklch(0.71 0.035 250);
  --color-accent: #409fff;
  --color-accent: oklch(0.7 0.16 250);
  --color-accent-strong: #83c3ff;
  --color-accent-strong: oklch(0.82 0.105 245);
  --color-accent-soft: rgba(64, 159, 255, 0.16);
  --color-success: #43d6a0;
  --color-success: oklch(0.79 0.15 160);
  --color-warning: #f3bd58;
  --color-warning: oklch(0.82 0.14 80);
  --color-danger: #ff718b;
  --color-danger: oklch(0.72 0.19 20);
  --crm-type-body: 0.9375rem;
  --crm-type-control: 0.875rem;
  --crm-type-caption: 0.8125rem;
  --crm-type-kicker: 0.75rem;
}

body {
  font-size: 15px;
  line-height: 1.5;
}

.global-rail { background: var(--color-sidebar); }
.context-header { background: rgba(6, 16, 28, 0.97); }
.workspace-body .module-sidebar,
.messenger-filters { background: var(--color-surface-soft); }
.messenger-queue,
.client-inspector { background: var(--color-bg); }
.messenger-thread-pane,
.messenger-selection-empty { background: #0b1727; }
.messenger-thread-header,
.messenger-composer,
.client-inspector__footer { background: #0f1d2f; }

.workspace-body .module-nav__label,
.workspace-body .module-identity span,
.module-sidebar__meta,
.compact-page-header__context,
.section-kicker {
  font-size: var(--crm-type-kicker);
  letter-spacing: 0.045em;
}

.workspace-body .module-nav__link,
.context-identity,
.context-nav__link,
.button,
.compact-button {
  font-size: var(--crm-type-control);
}

.messenger-workspace {
  grid-template-columns: 204px 326px minmax(480px, 1fr) 380px;
  background: var(--color-bg);
}

.messenger-workspace--empty {
  grid-template-columns: 204px 340px minmax(480px, 1fr);
}

.conversation-filter-nav a,
.conversation-filter-group a,
.messenger-queue__toolbar input,
.messenger-queue__title h2 {
  font-size: var(--crm-type-control);
}

.conversation-filter-nav b,
.conversation-filter-group b,
.conversation-filter-group > p,
.messenger-filter-summary,
.messenger-queue__title > span {
  font-size: var(--crm-type-caption);
}

.messenger-conversation {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 98px;
  padding: 14px;
}

.messenger-conversation .inbox-avatar { width: 44px; height: 44px; }
.messenger-conversation__topline strong { font-size: var(--crm-type-control); }
.messenger-conversation__topline time,
.messenger-conversation__meta,
.messenger-conversation__signals .unread-count { font-size: var(--crm-type-kicker); }
.messenger-conversation__preview { color: var(--color-text-muted); font-size: var(--crm-type-caption); }

.messenger-thread-header,
.client-inspector__header {
  min-height: 72px;
  padding: 12px 16px;
}

.messenger-thread-header__identity h1,
.client-inspector__header h2 { font-size: 1rem; }
.messenger-thread-header__identity p,
.client-inspector__header p { font-size: var(--crm-type-caption); }
.messenger-inspector-toggle { font-size: var(--crm-type-caption); }
.history-sync-banner strong { font-size: var(--crm-type-control); }
.history-sync-banner small { font-size: var(--crm-type-caption); }

.message-history-nav {
  position: sticky;
  z-index: 2;
  inset-block-start: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  background: rgba(11, 23, 39, 0.94);
  backdrop-filter: blur(8px);
}

.messenger-timeline .inbox-messages { gap: 14px; padding: 24px; }
.messenger-timeline .inbox-message__bubble {
  max-width: min(82%, 720px);
  padding: 13px 15px 10px;
  border-color: var(--color-border-soft);
  background: #15253a;
}
.messenger-timeline .inbox-message--out .inbox-message__bubble {
  border-color: rgba(142, 150, 255, 0.36);
  background: #2a3158;
  background: oklch(0.32 0.055 278);
}
.inbox-message__bubble > p { font-size: var(--crm-type-body); line-height: 1.58; }
.inbox-message__meta { font-size: var(--crm-type-kicker); }
.delivery-error { font-size: var(--crm-type-caption); }
.archived-attachment strong { font-size: var(--crm-type-caption); }
.archived-attachment small { font-size: var(--crm-type-kicker); }

.messenger-composer { gap: 10px; padding: 14px 16px 12px; }
.composer-route {
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
  gap: 6px 12px;
}
.composer-route label,
.composer-route select { font-size: var(--crm-type-control); }
.composer-route select { min-height: 42px; padding: 8px 36px 8px 11px; background: var(--color-surface); }
.composer-route p,
.messenger-composer > p { font-size: var(--crm-type-kicker); }
.messenger-composer textarea {
  min-height: 58px;
  padding: 15px 16px;
  background: var(--color-surface);
  font-size: var(--crm-type-body);
  line-height: 1.55;
}
.composer-file-button { background: var(--color-surface); }
.composer-send-button { border-color: var(--color-accent); background: var(--color-accent); }
.composer-send-button:hover { background: var(--color-accent-strong); color: #07111f; }

.client-inspector__header { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
.client-avatar-refresh { margin: 0; }
.inspector-tabs { gap: 4px; padding: 9px; background: var(--color-surface-soft); }
.inspector-tabs button {
  min-height: 42px;
  font-size: var(--crm-type-control);
}
.inspector-tabs button[aria-selected="true"] { background: #28456d; color: var(--color-text); }
.inspector-panel { padding: 0 18px 22px; }
.inspector-section { padding-block: 18px; }
.inspector-section h3 {
  margin-block-end: 12px;
  font-size: var(--crm-type-kicker);
  letter-spacing: 0.06em;
}
.inspector-section h3 span,
.inspector-status-form label { font-size: var(--crm-type-kicker); }
.inspector-status-form { padding-block: 18px; }
.inspector-status-form select,
.inspector-status-form button {
  min-height: 42px;
  height: auto;
  font-size: var(--crm-type-control);
}
.inspector-list { gap: 12px; }
.inspector-list > div {
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 12px;
}
.inspector-list dt,
.inspector-list dd,
.inspector-list code,
.inspector-empty,
.inspector-event-list strong,
.inspector-event-list small,
.client-inspector__footer a {
  font-size: var(--crm-type-caption);
  line-height: 1.5;
}
.inspector-list dd { color: var(--color-text); }
.inspector-list code { color: var(--color-accent-strong); }
.client-inspector .tag { min-height: 30px; padding: 5px 9px; font-size: var(--crm-type-caption); }
.client-inspector__footer { padding: 10px 18px; }
.client-inspector__footer a { min-height: 42px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-accent-strong);
  outline-offset: 2px;
}

@media (max-width: 1560px) {
  .messenger-workspace { grid-template-columns: 320px minmax(480px, 1fr) 380px; }
  .messenger-workspace--empty { grid-template-columns: 340px minmax(480px, 1fr); }
  .messenger-filters { display: none; }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .messenger-workspace { grid-template-columns: 320px minmax(460px, 1fr); }
  .client-inspector { width: min(430px, calc(100vw - 32px)); }
}

@media (max-width: 760px) {
  .messenger-composer :is(textarea, select),
  .inspector-status-form :is(select, button) { font-size: 1rem; }
  .composer-route { grid-template-columns: 1fr; }
  .composer-route p { grid-column: 1; }
  .inspector-list > div { grid-template-columns: 1fr; gap: 4px; }
  .inspector-list dd { text-align: start; }
  .message-history-nav { align-items: center; flex-direction: column; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: Highlight;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .entity-drawer {
    animation: entity-drawer-in 170ms cubic-bezier(0.2, 0, 0, 1);
  }

  .entity-drawer-backdrop {
    animation: navigation-fade-in 150ms ease-out;
  }
}

@keyframes entity-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Product coherence pass: stable navigation and a real Messenger workspace. */

:root {
  --color-bg: #08111e;
  --color-sidebar: #050c16;
  --color-surface: #101a2a;
  --color-surface-raised: #162236;
  --color-surface-soft: #0c1625;
  --color-border: #26354b;
  --color-border-soft: rgba(151, 166, 190, 0.14);
  --color-accent: #6f73ea;
  --color-accent-strong: #a7a9ff;
  --color-accent-soft: rgba(111, 115, 234, 0.17);
  --radius-control: 10px;
  --radius-panel: 12px;
  --radius-card: 14px;
  --shadow-panel: 0 12px 32px rgba(1, 6, 14, 0.18);
}

.panel {
  border-color: var(--color-border-soft);
  box-shadow: none;
}

.button,
.icon-button,
.context-nav__link,
.messenger-conversation,
.conversation-filter-nav a,
.conversation-filter-group a,
.inspector-tabs button,
.composer-send-button,
.composer-file-button {
  transition-property: color, background-color, border-color, opacity, transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.button:active,
.icon-button:active,
.context-nav__link:active,
.messenger-conversation:active,
.composer-send-button:active,
.composer-file-button:active {
  transform: scale(0.96);
}

.context-more {
  position: relative;
  align-self: center;
}

.context-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 13px;
  border-radius: 9px;
  color: #8f9caf;
  font-size: 13px;
  font-weight: 580;
  cursor: pointer;
  list-style: none;
}

.context-more summary::-webkit-details-marker { display: none; }
.context-more summary:hover,
.context-more[open] summary,
.context-more.is-active summary { background: rgba(255, 255, 255, 0.05); color: #fff; }
.context-more summary span { color: var(--color-text-subtle); font-size: 12px; }
.context-more nav {
  position: absolute;
  inset-block-start: calc(100% + 7px);
  inset-inline-end: 0;
  z-index: 80;
  display: grid;
  width: 210px;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #111b2b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.context-more nav a { padding: 10px 11px; border-radius: 8px; color: var(--color-text-muted); font-size: 13px; }
.context-more nav a:hover { background: var(--color-surface-raised); color: #fff; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--color-border); background: var(--color-surface-raised); color: #fff; }
.icon-button.is-active { color: var(--color-warning); }
.icon-button .icon { width: 18px; height: 18px; }

.messenger-page { overflow: hidden; }
.messenger-page .workspace-body,
.messenger-page .app-main,
.messenger-page .content--messenger { height: calc(100vh - var(--context-header-height)); min-height: 0; }
.content--messenger { width: 100%; max-width: none; padding: 0; margin: 0; overflow: hidden; }

.messenger-workspace {
  display: grid;
  grid-template-columns: 210px 330px minmax(440px, 1fr) 340px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #08111e;
}
.messenger-workspace--empty { grid-template-columns: 210px 350px minmax(440px, 1fr); }
.messenger-filters,
.messenger-queue,
.messenger-thread-pane,
.client-inspector,
.messenger-selection-empty { min-width: 0; min-height: 0; }

.messenger-filters {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 12px 14px;
  border-inline-end: 1px solid var(--color-border-soft);
  background: #091321;
  overflow-y: auto;
}
.messenger-pane-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 14px; }
.messenger-pane-header h1 { margin: 3px 0 0; font-size: 20px; font-weight: 720; letter-spacing: -0.025em; }
.messenger-pane-header .section-kicker { font-size: var(--crm-type-kicker, 12px); }
.conversation-filter-nav,
.conversation-filter-group nav { display: grid; gap: 3px; }
.conversation-filter-nav a,
.conversation-filter-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 590;
}
.conversation-filter-nav a:hover,
.conversation-filter-group a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.conversation-filter-nav a.is-active,
.conversation-filter-group a.is-active { background: #252f50; color: #fff; }
.conversation-filter-nav a span,
.conversation-filter-group a span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.conversation-filter-nav .icon { width: 17px; height: 17px; color: #9da9bc; }
.conversation-filter-nav b,
.conversation-filter-group b { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); font-weight: 680; font-variant-numeric: tabular-nums; }
.conversation-filter-nav a.is-active b,
.conversation-filter-group a.is-active b { color: #c8c9ff; }
.filter-star { width: 17px; color: var(--color-warning); text-align: center; }
.conversation-filter-group { margin-block-start: 22px; }
.conversation-filter-group > p { margin: 0 10px 8px; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6f7d91; }
.status-dot--auto { background: var(--color-success); }
.status-dot--manual,
.status-dot--waiting { background: var(--color-warning); }
.status-dot--blocked,
.status-dot--error { background: var(--color-danger); }
.status-dot--finished { background: #8b91a1; }
.status-dot--ignore,
.status-dot--stopped { background: #77839a; }
.messenger-filter-summary { display: grid; gap: 8px; padding: 14px 10px 0; margin-block-start: auto; border-block-start: 1px solid var(--color-border-soft); color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); }
.messenger-filter-summary span { display: flex; align-items: center; gap: 7px; }
.messenger-filter-summary span i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); }
.messenger-filter-summary a { min-height: 32px; color: var(--color-accent-strong); }

.messenger-queue {
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--color-border-soft);
  background: #0b1524;
  overflow: hidden;
}
.messenger-queue__toolbar { padding: 14px 14px 10px; border-block-end: 1px solid var(--color-border-soft); }
.messenger-queue__toolbar form { margin: 0; }
.messenger-queue__toolbar input {
  width: 100%;
  height: 40px;
  padding: 9px 12px 9px 40px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
}
.messenger-queue__toolbar input::placeholder { color: var(--color-text-subtle); }
.messenger-queue__title { display: flex; align-items: center; justify-content: space-between; margin-block-start: 12px; }
.messenger-queue__title h2 { margin: 0; font-size: 12px; font-weight: 680; }
.messenger-queue__title > span { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); font-variant-numeric: tabular-nums; }
.messenger-queue__toolbar .inbox-history-return { display: flex; justify-content: center; width: 100%; min-height: 40px; margin-block-start: 10px; }
.messenger-conversation-list { flex: 1; padding: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.messenger-conversation-list > li + li { border-block-start: 1px solid var(--color-border-soft); }
.messenger-conversation {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  min-height: 90px;
  padding: 13px 12px;
  color: var(--color-text);
}
.messenger-conversation:hover { background: rgba(255, 255, 255, 0.035); }
.messenger-conversation.is-active { background: #283353; box-shadow: inset 3px 0 #8588ff; }
.messenger-conversation .inbox-avatar { width: 40px; height: 40px; }
.messenger-conversation__body { display: grid; gap: 5px; min-width: 0; }
.messenger-conversation__topline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.messenger-conversation__topline strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.messenger-conversation__topline time { flex: 0 0 auto; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); font-variant-numeric: tabular-nums; }
.messenger-conversation__preview { overflow: hidden; color: #a8b3c4; font-size: var(--crm-type-kicker, 12px); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.messenger-conversation__preview b { color: #c8c9ff; font-weight: 620; }
.messenger-conversation__meta { display: flex; gap: 8px; min-width: 0; overflow: hidden; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); white-space: nowrap; }
.messenger-conversation__meta span { overflow: hidden; text-overflow: ellipsis; }
.messenger-conversation__signals { display: grid; justify-items: end; gap: 8px; min-width: 22px; }
.messenger-conversation__signals .unread-count { min-width: 21px; height: 21px; padding-inline: 5px; font-size: var(--crm-type-kicker, 12px); }

.messenger-selection-empty { display: grid; place-items: center; padding: 32px; background: #091321; }
.messenger-empty { display: grid; justify-items: center; max-width: 440px; padding: 28px; color: var(--color-text-muted); text-align: center; }
.messenger-empty__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-block-end: 16px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface-raised); color: var(--color-accent-strong); }
.messenger-empty__icon .icon { width: 24px; height: 24px; }
.messenger-empty h2,
.messenger-empty h3 { margin: 5px 0 8px; color: var(--color-text); font-size: 20px; letter-spacing: -0.025em; }
.messenger-empty p { margin: 0; font-size: 13px; line-height: 1.55; }
.messenger-empty--queue { margin: auto; padding: 24px 18px; }
.messenger-empty--queue > .icon { width: 24px; height: 24px; color: var(--color-text-subtle); }
.messenger-empty--queue a { margin-block-start: 10px; color: var(--color-accent-strong); font-size: 12px; }

.messenger-thread-pane { display: flex; flex-direction: column; background: #091321; overflow: hidden; }
.messenger-thread-header {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 10px 16px;
  border-block-end: 1px solid var(--color-border-soft);
  background: rgba(13, 23, 38, 0.94);
}
.messenger-thread-header .inbox-avatar { width: 38px; height: 38px; }
.messenger-thread-header__identity { min-width: 0; margin-inline-end: auto; }
.messenger-thread-header__identity h1 { margin: 0; overflow: hidden; font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.messenger-thread-header__identity p { margin: 3px 0 0; overflow: hidden; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); text-overflow: ellipsis; white-space: nowrap; }
.messenger-thread-header form { margin: 0; }
.messenger-mobile-back { display: none; }
.messenger-inspector-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #121d30;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 660;
  cursor: pointer;
}
.messenger-inspector-toggle:hover { background: var(--color-surface-raised); color: #fff; }
.messenger-inspector-toggle .icon { width: 17px; height: 17px; }
.messenger-feedback { margin: 10px 14px 0; }
.history-sync-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 13px; border-block-end: 1px solid var(--color-border-soft); background: var(--color-accent-soft); color: #d8d9ff; }
.history-sync-banner--failed { background: var(--color-danger-soft); color: var(--color-danger); }
.history-sync-banner__icon { display: grid; place-items: center; }
.history-sync-banner__icon .icon { width: 17px; height: 17px; }
.history-sync-banner > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.history-sync-banner strong { font-size: var(--crm-type-kicker, 12px); }
.history-sync-banner small { overflow: hidden; color: currentColor; font-size: var(--crm-type-kicker, 12px); opacity: 0.78; text-overflow: ellipsis; white-space: nowrap; }
.history-sync-banner form { margin: 0; }
.messenger-timeline { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.messenger-timeline .inbox-messages { min-height: 100%; max-height: none; padding: 22px 18px; overflow: visible; }
.messenger-timeline .inbox-message__bubble { max-width: min(78%, 640px); border-color: rgba(151, 166, 190, 0.16); background: #131f31; }
.messenger-timeline .inbox-message--out .inbox-message__bubble { border-color: rgba(144, 147, 255, 0.24); background: #272d50; }
.archived-attachment { display: flex; align-items: center; gap: 9px; min-width: 210px; padding: 9px 10px; margin-block-end: 8px; border: 1px solid var(--color-border); border-radius: 9px; background: rgba(0, 0, 0, 0.12); }
.archived-attachment .icon { width: 18px; height: 18px; color: var(--color-accent-strong); }
.archived-attachment > span { display: grid; gap: 1px; min-width: 0; }
.archived-attachment strong { overflow: hidden; font-size: var(--crm-type-kicker, 12px); text-overflow: ellipsis; white-space: nowrap; }
.archived-attachment small { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); }

.messenger-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
  padding: 12px 14px 10px;
  border-block-start: 1px solid var(--color-border-soft);
  background: #08111d;
}
.composer-route { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.composer-route label { color: var(--color-text-muted); font-size: var(--crm-type-kicker, 12px); font-weight: 680; }
.composer-route select { min-width: 0; min-height: 34px; padding: 6px 30px 6px 9px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--crm-type-kicker, 12px); }
.composer-route select:focus { border-color: var(--color-accent); outline: 2px solid var(--color-accent-soft); outline-offset: 1px; }
.composer-route p { grid-column: 2; margin: 0; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); }
.messenger-composer textarea { grid-row: 1 / 2; width: 100%; min-height: 48px; max-height: 150px; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; }
.messenger-composer textarea::placeholder { color: var(--color-text-subtle); }
.messenger-composer textarea:focus { border-color: var(--color-accent); outline: 2px solid var(--color-accent-soft); outline-offset: 1px; }
.composer-file-button,
.composer-send-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 11px; cursor: pointer; }
.composer-file-button { border: 1px solid var(--color-border); background: #111c2e; color: var(--color-text-muted); }
.composer-file-button:hover { background: var(--color-surface-raised); color: #fff; }
.composer-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.composer-send-button { border: 1px solid #777af0; background: #6f73ea; color: #fff; }
.composer-send-button:hover { background: #7c80f3; }
.composer-file-button .icon,
.composer-send-button .icon { width: 18px; height: 18px; }
.messenger-composer > p { grid-column: 1 / -1; margin: 0 2px; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); }

.client-inspector { display: flex; flex-direction: column; border-inline-start: 1px solid var(--color-border-soft); background: #080f1a; overflow: hidden; }
.client-inspector__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 76px; padding: 12px 14px; border-block-end: 1px solid var(--color-border-soft); }
.client-inspector__header .inbox-avatar { width: 42px; height: 42px; }
.client-inspector__header h2 { margin: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.client-inspector__header p { margin: 3px 0 0; overflow: hidden; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); text-overflow: ellipsis; white-space: nowrap; }
.inspector-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 7px; border-block-end: 1px solid var(--color-border-soft); background: #0b1422; }
.inspector-tabs button { min-height: 34px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); font-weight: 660; cursor: pointer; }
.inspector-tabs button:hover { color: #fff; }
.inspector-tabs button[aria-selected="true"] { background: #253052; color: #fff; }
.client-inspector__scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.inspector-panel { padding: 0 14px 18px; }
.inspector-section { padding-block: 15px; border-block-end: 1px solid var(--color-border-soft); }
.inspector-section h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: #dbe1eb; font-size: var(--crm-type-kicker, 12px); font-weight: 720; letter-spacing: 0.055em; text-transform: uppercase; }
.inspector-section h3 span { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); }
.inspector-status-form { padding-block: 14px; border-block-end: 1px solid var(--color-border-soft); }
.inspector-status-form label { display: block; margin-block-end: 6px; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); font-weight: 680; text-transform: uppercase; }
.inspector-status-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.inspector-status-form select { width: 100%; min-width: 0; height: 36px; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: var(--crm-type-kicker, 12px); }
.inspector-status-form button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: #fff; font-size: var(--crm-type-kicker, 12px); cursor: pointer; }
.inspector-list { display: grid; gap: 9px; margin: 0; }
.inspector-list > div { display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr); align-items: baseline; gap: 10px; }
.inspector-list dt { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); }
.inspector-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #dbe1eb; font-size: var(--crm-type-kicker, 12px); text-align: end; }
.inspector-list code { color: #c7c9ff; font-size: var(--crm-type-kicker, 12px); }
.inspector-list--stacked > div { grid-template-columns: 1fr; gap: 3px; padding-block: 6px; }
.inspector-list--stacked dd { text-align: start; }
.inspector-empty { margin: 0; color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); line-height: 1.5; }
.client-inspector .tag-list { gap: 5px; }
.client-inspector .tag { min-height: 23px; padding: 3px 7px; font-size: var(--crm-type-kicker, 12px); }
.inspector-event-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.inspector-event-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding-block: 9px; border-block-end: 1px solid var(--color-border-soft); }
.inspector-event-list .status-dot { margin-block-start: 3px; }
.inspector-event-list span { display: grid; gap: 2px; min-width: 0; }
.inspector-event-list strong { font-size: var(--crm-type-kicker, 12px); }
.inspector-event-list small { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); line-height: 1.45; }
.client-inspector__footer { display: grid; gap: 2px; padding: 9px 14px; border-block-start: 1px solid var(--color-border-soft); background: #0b1422; }
.client-inspector__footer a { display: flex; align-items: center; justify-content: space-between; min-height: 34px; color: var(--color-text-muted); font-size: var(--crm-type-kicker, 12px); }
.client-inspector__footer a:hover { color: #fff; }
.client-inspector__footer .icon { width: 14px; height: 14px; }
.client-inspector__close,
.client-inspector-backdrop { display: none; }

@media (max-width: 1480px) {
  .messenger-workspace { grid-template-columns: 310px minmax(430px, 1fr) 320px; }
  .messenger-workspace--empty { grid-template-columns: 340px minmax(430px, 1fr); }
  .messenger-filters { display: none; }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .messenger-workspace { grid-template-columns: 290px minmax(430px, 1fr); }
  .messenger-queue { grid-row: 1; grid-column: 1; }
  .messenger-thread-pane { grid-row: 1; grid-column: 2; min-height: calc(100vh - var(--context-header-height)); }
  .messenger-workspace--empty { grid-template-columns: 320px minmax(430px, 1fr); overflow: hidden; }
}

@media (max-width: 1180px) {
  .has-client-inspector { overflow: hidden; }
  .messenger-inspector-toggle { display: inline-flex; }
  .client-inspector {
    position: fixed;
    z-index: 91;
    inset-block: var(--context-header-height) 0;
    inset-inline-end: 0;
    width: min(380px, calc(100vw - 24px));
    min-height: 0;
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 160ms ease, transform 220ms ease;
    overscroll-behavior: contain;
  }
  .client-inspector.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .client-inspector__close { display: inline-grid; }
  .client-inspector-backdrop {
    position: fixed;
    z-index: 90;
    inset: var(--context-header-height) 0 0;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: rgba(2, 7, 14, 0.58);
    opacity: 0;
    visibility: hidden;
    cursor: default;
    transition: opacity 160ms ease, visibility 160ms;
  }
  .has-client-inspector .client-inspector-backdrop { display: block; opacity: 1; visibility: visible; }
}

@media (max-width: 960px) {
  .messenger-page { overflow: auto; }
  .messenger-page .workspace-body,
  .messenger-page .app-main,
  .messenger-page .content--messenger { height: auto; min-height: calc(100vh - 80px); }
  .content--messenger { overflow: visible; }
  .messenger-workspace,
  .messenger-workspace--empty { display: block; height: auto; min-height: calc(100vh - 80px); overflow: visible; }
  .messenger-filters { display: block; height: auto; max-height: none; padding: 14px; overflow: visible; }
  .conversation-filter-group { display: none; }
  .conversation-filter-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messenger-filter-summary { display: none; }
  .messenger-queue { height: auto; min-height: 520px; border-inline-end: 0; }
  .messenger-conversation-list { max-height: none; overflow: visible; }
  .messenger-workspace--selected .messenger-filters,
  .messenger-workspace--selected .messenger-queue { display: none; }
  .messenger-thread-pane { min-height: calc(100vh - 80px); }
  .messenger-mobile-back { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--color-text-muted); }
  .messenger-mobile-back .icon { width: 18px; height: 18px; }
  .messenger-timeline { min-height: 52vh; }
  .client-inspector { inset-block-start: 76px; min-height: 0; border-block-start: 1px solid var(--color-border-soft); }
  .messenger-selection-empty { display: none; }
}

@media (max-width: 560px) {
  .conversation-filter-nav { grid-template-columns: 1fr; }
  .messenger-thread-header { padding-inline: 10px; }
  .messenger-thread-header .conversation-status { display: none; }
  .messenger-inspector-toggle { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .messenger-inspector-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .messenger-timeline .inbox-messages { padding-inline: 10px; }
  .messenger-timeline .inbox-message__bubble { max-width: 90%; }
  .messenger-composer { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 10px; }
  .composer-file-button { grid-column: 1; grid-row: 2; justify-self: start; }
  .composer-send-button { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .messenger-composer > p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .icon-button,
  .context-nav__link,
  .messenger-conversation,
  .conversation-filter-nav a,
  .conversation-filter-group a,
  .inspector-tabs button,
  .composer-send-button,
  .composer-file-button { transition-duration: 0ms; }
  .client-inspector,
  .client-inspector-backdrop { transition-duration: 0ms; }
}

.tracker-log-tabs {
  display: flex;
  gap: 6px;
  margin-block-end: 16px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
  scrollbar-width: none;
}

.tracker-log-tabs::-webkit-scrollbar {
  display: none;
}

.tracker-log-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 18px;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 650;
}

.tracker-log-tabs a:hover,
.tracker-log-tabs a:focus-visible {
  background: var(--color-surface);
  color: var(--color-text);
}

.tracker-log-tabs a.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.tracker-log-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  margin-block-end: 22px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.tracker-log-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tracker-log-table {
  min-width: 1040px;
}

.tracker-log-table td {
  max-width: 320px;
  vertical-align: top;
}

.log-error {
  display: block;
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.log-payload {
  margin-block-start: 8px;
}

.log-payload summary {
  width: max-content;
  color: var(--color-accent-strong);
  cursor: pointer;
  font-size: 12px;
}

.log-payload pre,
.code-sample pre {
  max-width: 100%;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tracker-log-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-block-start: 16px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.tracker-log-pagination a:last-child {
  justify-self: end;
}

.web-tracking-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block-end: 22px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-border);
}

.web-tracking-overview > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  background: var(--color-surface);
}

.web-tracking-overview span {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.web-tracking-overview strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-tracking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: start;
  gap: 20px;
}

.web-tracking-steps {
  margin: 0;
}

.web-tracking-steps > ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-tracking-steps > ol > li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding-block: 22px;
  border-block-start: 1px solid var(--color-border-soft);
}

.web-tracking-steps > ol > li > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 700;
}

.web-tracking-steps h3,
.web-tracking-reference h2 {
  margin: 0 0 7px;
  font-size: 17px;
}

.web-tracking-steps p,
.web-tracking-reference p {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.web-tracking-reference {
  position: sticky;
  inset-block-start: 76px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.web-tracking-reference ul {
  display: grid;
  gap: 0;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.web-tracking-reference li {
  display: grid;
  gap: 3px;
  padding-block: 10px;
  border-block-end: 1px solid var(--color-border-soft);
}

.web-tracking-reference li span {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.code-sample {
  position: relative;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.code-sample > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-inline-start: auto;
  padding-inline: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--crm-type-kicker, 12px);
}

.code-sample > button .icon {
  width: 14px;
  height: 14px;
}

.web-tracking-privacy {
  margin-block-start: 16px;
  padding: 13px;
  border-inline-start: 3px solid var(--color-warning);
  border-radius: 6px;
  background: var(--color-warning-soft);
}

.web-tracking-privacy p {
  margin: 5px 0 0;
}

@media (max-width: 1100px) {
  .tracker-log-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-tracking-layout {
    grid-template-columns: 1fr;
  }

  .web-tracking-reference {
    position: static;
  }
}

@media (max-width: 680px) {
  .tracker-log-filters,
  .web-tracking-overview {
    grid-template-columns: 1fr;
  }

  .tracker-log-filter-actions > * {
    flex: 1;
  }

  .web-tracking-steps > ol > li {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .campaign-setup-layout,
  .invite-detail-layout {
    grid-template-columns: 1fr;
  }

  .campaign-setup-aside {
    position: static;
  }

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

  .invite-request-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invite-request-filters .button {
    width: 100%;
  }
}

@media (max-width: 840px) {
  .campaign-register-summary,
  .invite-status-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-register-summary > * + *,
  .invite-status-overview > div + div {
    border-inline-start: 0;
  }

  .campaign-register-summary > *:nth-child(even),
  .invite-status-overview > div:nth-child(even) {
    border-inline-start: 1px solid var(--color-border-soft);
  }

  .campaign-register-summary > *:nth-child(n + 3),
  .invite-status-overview > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-border-soft);
  }

  .invite-request-row {
    grid-template-columns: minmax(125px, 0.7fr) minmax(190px, 1.2fr) auto;
  }

  .invite-request-row__route {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .invite-request-row time {
    grid-column: 3;
    grid-row: 2;
  }

  .invite-route-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .page-actions,
  .campaign-form-actions,
  .campaign-prerequisite-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .page-actions .button,
  .campaign-form-actions .button,
  .campaign-prerequisite-actions .button {
    width: 100%;
  }

  .campaign-type-switch,
  .campaign-form-grid,
  .campaign-checklist,
  .invite-request-filters,
  .invite-route-timeline {
    grid-template-columns: 1fr;
  }

  .campaign-form-section,
  .campaign-setup-aside,
  .invite-detail-main,
  .invite-detail-aside {
    padding: 18px;
  }

  .campaign-form-grid,
  .campaign-route-preview {
    padding-inline-start: 0;
  }

  .campaign-route-preview {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .campaign-route-preview li:not(:last-child)::after {
    inset-block-end: -13px;
    inset-inline-end: 18px;
    transform: rotate(90deg);
  }

  .campaign-field--wide {
    grid-column: auto;
  }

  .campaign-prerequisite-empty {
    grid-template-columns: 1fr;
  }

  .invite-request-row {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding-block: 18px;
  }

  .invite-request-row__status,
  .invite-request-row__person,
  .invite-request-row__route,
  .invite-request-row time {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .invite-request-row > .button {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    background: var(--color-surface-raised);
  }

  .invite-fact-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .invite-fact-list dd {
    text-align: start;
  }
}

/* Operational observability */

.control-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: -6px 0 22px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.control-tabs a {
  min-height: 38px;
  padding: 10px 13px;
  border-radius: calc(var(--radius-control) - 3px);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.control-tabs a:hover,
.control-tabs a.is-active {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.control-tabs a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.table-filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-filter-form label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.table-filter-form select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.table-filter-form select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.table-filter-form .button {
  min-height: 40px;
}

.table-error-text {
  display: block;
  max-width: 34rem;
  overflow-wrap: anywhere;
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .table-filter-form {
    width: 100%;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .table-filter-form label {
    flex-basis: 100%;
  }

  .table-filter-form select {
    flex: 1 1 12rem;
  }
}

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

.finding-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--color-border-soft);
  border-inline-start: 3px solid var(--color-warning);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

.finding-card--critical {
  border-inline-start-color: var(--color-danger);
}

.finding-card__main,
.finding-card__actions {
  display: grid;
  gap: 10px;
}

.finding-card__heading,
.finding-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.finding-card h3,
.health-card h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
}

.finding-card p,
.health-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.finding-card__meta {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.finding-card__meta > * + *::before {
  content: "·";
  margin-inline-end: 8px;
}

.finding-card details,
.snapshot-json {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.finding-card summary,
.snapshot-json summary {
  width: fit-content;
  cursor: pointer;
}

.finding-card pre,
.snapshot-json pre {
  max-height: 300px;
  margin: 9px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--radius-control);
  background: var(--color-bg);
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

.health-grid,
.report-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.health-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

.health-card__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.health-card__heading code {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.health-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px var(--color-success-soft);
}

.health-card--warning .health-dot {
  background: var(--color-warning);
  box-shadow: 0 0 0 4px var(--color-warning-soft);
}

.health-card--critical .health-dot {
  background: var(--color-danger);
  box-shadow: 0 0 0 4px var(--color-danger-soft);
}

.health-metrics,
.report-schedule-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.health-metrics > div,
.report-schedule-meta > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.018);
}

.health-metrics dt,
.report-schedule-meta dt {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.health-metrics dd,
.report-schedule-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
}

.report-definition-grid {
  margin-block-end: 20px;
}

.report-definition-card {
  margin: 0;
}

.report-definition-card select[multiple] {
  min-height: 104px;
}

.report-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-block: 14px;
}

.snapshot-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-block-end: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-border-soft);
}

.snapshot-summary article {
  display: grid;
  gap: 5px;
  padding: 17px;
  background: var(--color-surface);
}

.snapshot-summary span {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.snapshot-summary strong {
  color: var(--color-text);
  font-size: 24px;
}

.snapshot-json {
  margin-block-start: 18px;
  padding: 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

@media (max-width: 900px) {
  .health-grid,
  .report-definition-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .finding-card {
    grid-template-columns: 1fr;
  }

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

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

  .health-card__heading .status-badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* Messenger: separate queue and conversation views. */

.inbox-page-header {
  align-items: flex-end;
}

.inbox-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-block-end: 20px;
}

.inbox-summary article {
  display: flex;
  min-width: 0;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-surface);
}

.inbox-summary span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.inbox-summary strong {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.inbox-controls {
  padding: 18px;
}

.inbox-filter-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) auto;
  align-items: end;
  gap: 12px;
  margin-block-start: 16px;
}

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

.input-with-icon .icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--color-text-subtle);
  pointer-events: none;
  transform: translateY(-50%);
}

.inbox-search-field .input-with-icon input {
  width: 100%;
  padding-inline-start: 42px;
}

.inbox-status-tabs {
  display: flex;
  gap: 6px;
  margin-block: 18px 16px;
  padding-block-end: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.inbox-status-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 620;
}

.inbox-status-tabs a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.inbox-status-tabs a.is-active {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.inbox-status-tabs a span {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(151, 166, 190, 0.12);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.inbox-list-panel {
  padding: 20px;
}

.inbox-list {
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}

.inbox-list > li + li {
  margin-block-start: 4px;
}

.inbox-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-text);
}

.inbox-row:hover {
  border-color: var(--color-border-soft);
  background: var(--color-surface-raised);
}

.inbox-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(150, 152, 255, 0.24);
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: #c2c3ff;
  font-size: 14px;
  font-weight: 720;
  overflow: hidden;
}

.inbox-avatar--image {
  display: block;
  border: 0;
  object-fit: cover;
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
}

.inbox-avatar--large {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.lead-identity,
.lead-detail-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lead-identity .inbox-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.lead-identity > span:last-child {
  display: grid;
  min-width: 0;
}

.lead-identity .cell-note {
  display: block;
}

.lead-detail-identity > div {
  min-width: 0;
}

.lead-mobile-card__main > .inbox-avatar {
  width: 40px;
  height: 40px;
}

.inbox-row__body,
.inbox-row__topline,
.inbox-row__meta,
.inbox-row__signals {
  min-width: 0;
}

.inbox-row__body {
  display: grid;
  gap: 6px;
}

.inbox-row__topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.inbox-row__topline strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row__topline time {
  flex: 0 0 auto;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-variant-numeric: tabular-nums;
}

.inbox-row__preview {
  display: block;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row__preview b {
  color: var(--color-text-subtle);
  font-weight: 600;
}

.inbox-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  white-space: nowrap;
}

.conversation-status,
.delivery-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

.conversation-status--auto,
.delivery-state--sent,
.delivery-state--delivered,
.delivery-state--read {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.conversation-status--manual,
.conversation-status--waiting,
.delivery-state--queued,
.delivery-state--retry {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.conversation-status--error,
.conversation-status--blocked,
.delivery-state--failed {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.inbox-row__signals {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.inbox-row__signals .icon {
  width: 18px;
  color: var(--color-text-subtle);
}

.unread-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 7px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.favorite-mark {
  color: var(--color-warning);
  font-size: 16px;
}

.breadcrumb {
  margin-block-end: 16px;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 2px 10px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 620;
}

.breadcrumb a:hover {
  color: var(--color-text);
}

.breadcrumb .icon {
  width: 17px;
  height: 17px;
}

.inbox-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 20px;
}

.inbox-thread-header__actions,
.message-history-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-attachment {
  display: grid;
  gap: 0.55rem;
  margin-block-end: 0.65rem;
}

.message-attachment img,
.message-attachment video {
  display: block;
  width: min(100%, 34rem);
  max-height: 28rem;
  border-radius: 0.8rem;
  object-fit: contain;
  background: color-mix(in oklch, var(--surface-strong) 86%, black);
}

.message-attachment audio {
  width: min(100%, 28rem);
}

.message-attachment__file,
.selected-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
}

.message-attachment__file span,
.selected-attachment span {
  color: var(--text-muted);
  font-weight: 500;
}

.message-attachment__error {
  color: var(--danger-text);
  font-size: 0.8rem;
}

.composer-attachment {
  display: grid;
  gap: 0.4rem;
  margin-block-start: 0.75rem;
}

.composer-attachment input[type="file"] {
  width: 100%;
  padding: 0.65rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.75rem;
  background: var(--surface-soft);
}

.composer-attachment small {
  color: var(--text-muted);
}

.selected-attachment {
  margin-block-start: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface-soft);
}

.selected-attachment--preview {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 0.75rem;
}

.selected-attachment--link {
  text-decoration: none;
}

.inbox-thread-header__actions {
  flex: 0 0 auto;
}

.lead-bulk-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(240px, 1.5fr) minmax(150px, 0.8fr) auto;
  align-items: end;
  gap: 10px;
  padding: 14px 18px;
  border-block: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
}

.lead-bulk-toolbar__count {
  grid-column: 1 / -1;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.selection-cell {
  width: 44px;
  text-align: center;
}

.selection-cell input,
.lead-mobile-card__selection input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.lead-mobile-card__selection {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-block-end: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 12px;
}

.message-history-nav {
  justify-content: center;
  padding: 14px 20px 0;
}

.inbox-thread-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.inbox-thread-identity h1 {
  margin: 4px 0;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.inbox-thread-identity p:last-child {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.feedback {
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 13px;
}

.feedback--success {
  border-color: rgba(98, 214, 168, 0.28);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.feedback--error {
  border-color: rgba(255, 132, 146, 0.3);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.inbox-thread-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 16px;
}

.inbox-thread {
  min-width: 0;
  overflow: hidden;
}

.inbox-thread__heading {
  padding: 18px 20px 0;
}

.inbox-messages {
  display: flex;
  min-height: 340px;
  max-height: min(62vh, 760px);
  padding: 24px 20px;
  margin: 0;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
}

.inbox-message {
  display: flex;
  justify-content: flex-start;
}

.inbox-message--out {
  justify-content: flex-end;
}

.inbox-message__bubble {
  width: fit-content;
  max-width: min(78%, 680px);
  padding: 11px 13px 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px 12px 12px 4px;
  background: var(--color-surface-raised);
}

.inbox-message--out .inbox-message__bubble {
  border-color: rgba(150, 152, 255, 0.24);
  border-radius: 12px 12px 4px 12px;
  background: #232d52;
}

.inbox-message__bubble > p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.inbox-message__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-block-start: 6px;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.delivery-error {
  margin-block-start: 8px;
  color: var(--color-danger);
  font-size: var(--crm-type-kicker, 12px);
}

.delivery-error summary {
  min-height: 28px;
  cursor: pointer;
}

.delivery-error p {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.text-button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inbox-composer {
  padding: 16px 20px 18px;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.inbox-composer > label,
.inbox-status-form > label {
  display: block;
  margin-block-end: 7px;
  color: #c4ccda;
  font-size: 12px;
  font-weight: 650;
}

.inbox-composer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.inbox-composer textarea,
.inbox-status-form select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
}

.inbox-composer textarea {
  min-height: 84px;
  max-height: 220px;
  resize: vertical;
}

.inbox-composer textarea:focus,
.inbox-status-form select:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.inbox-composer .button .icon {
  width: 17px;
  height: 17px;
}

.inbox-composer > p {
  margin: 8px 0 0;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.inbox-context {
  display: grid;
  gap: 16px;
}

.inbox-context-card {
  padding: 18px;
}

.inbox-status-form {
  display: grid;
  gap: 10px;
  margin-block-start: 16px;
}

.inbox-status-form > label {
  margin-block-end: -3px;
}

.inbox-facts {
  display: grid;
  gap: 13px;
  padding: 16px 0 0;
  margin: 18px 0 0;
  border-block-start: 1px solid var(--color-border-soft);
}

.inbox-facts--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inbox-facts > div {
  display: grid;
  gap: 3px;
}

.inbox-facts dt {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 680;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inbox-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: 13px;
}

.inbox-context-card .tag-list {
  margin-block-start: 16px;
}

.inbox-context-link {
  justify-content: space-between;
  width: 100%;
  margin-block-start: 16px;
}

.inbox-context-link .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 860px) {
  .lead-bulk-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-bulk-toolbar .button {
    width: 100%;
  }

  .inbox-thread-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .inbox-messages {
    max-height: none;
  }
}

@media (max-width: 700px) {
  .lead-bulk-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-bulk-toolbar__count {
    grid-column: auto;
  }

  .inbox-summary {
    grid-template-columns: 1fr;
  }

  .inbox-summary article {
    min-height: 74px;
  }

  .inbox-filter-form,
  .inbox-context {
    grid-template-columns: 1fr;
  }

  .inbox-filter-form .button {
    width: 100%;
  }

  .inbox-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 8px;
  }

  .inbox-avatar {
    width: 38px;
    height: 38px;
  }

  .inbox-row__meta span:not(.conversation-status) {
    display: none;
  }

  .inbox-row__topline time,
  .inbox-row__signals .icon {
    display: none;
  }

  .inbox-thread-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .inbox-thread-header__actions,
  .inbox-thread-header__actions form,
  .inbox-thread-header__actions .button {
    width: 100%;
  }

  .inbox-thread-header__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .inbox-message__bubble {
    max-width: 90%;
  }

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

  .inbox-composer__row .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .inbox-list-panel,
  .inbox-controls {
    padding-inline: 14px;
  }

  .inbox-messages,
  .inbox-composer {
    padding-inline: 14px;
  }
}

/* Focused Tracker workspaces */

.tracker-signal-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border-soft);
}

.tracker-signal-card__actions a {
  color: var(--color-accent-soft);
  font-size: 12px;
  font-weight: 650;
}

.tracker-signal-card__actions a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tracker-entity-workspace {
  display: grid;
  align-items: start;
  gap: 24px;
}

.tracker-entity-workspace {
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
}

.tracker-task-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.tracker-task-card {
  padding: 24px;
  border-radius: 18px;
}

.tracker-task-card .tracker-form {
  margin-block-start: 22px;
}

.tracker-dns-instruction {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  background: var(--color-surface-soft);
}

.tracker-dns-instruction > span {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.tracker-dns-instruction code {
  overflow-wrap: anywhere;
  color: var(--color-text);
}

.tracker-dns-instruction p,
.tracker-landing-card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.tracker-inline-confirm {
  display: grid;
  gap: 8px;
}

.tracker-inline-confirm label {
  color: var(--color-text-muted);
  font-size: 12px;
}

.tracker-landing-card > img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--color-border-soft);
}

.training-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-block-end: 28px;
}

.training-mode-card {
  display: grid;
  gap: 18px;
  align-content: start;
}

.training-mode-card h2,
.training-result h2 {
  margin: 0;
}

.training-mode-card p:not(.section-kicker) {
  color: var(--color-text-muted);
  line-height: 1.55;
}

.training-result {
  display: grid;
  gap: 14px;
  margin-block-end: 20px;
}

.training-result > strong {
  font-size: clamp(36px, 7vw, 64px);
  font-variant-numeric: tabular-nums;
}

.training-question-list {
  display: grid;
  gap: 16px;
}

.training-question {
  min-width: 0;
}

.training-question legend {
  max-width: 70ch;
  padding: 0;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.45;
}

.training-question legend span {
  margin-inline-end: 10px;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.training-options {
  display: grid;
  gap: 9px;
  margin-block-start: 16px;
}

.training-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background: var(--color-surface-soft);
  cursor: pointer;
}

.training-option:has(input:checked) {
  border-color: var(--color-accent);
}

.training-option.is-correct {
  border-color: var(--color-success);
}

.training-option.is-wrong {
  border-color: var(--color-danger);
}

.training-submit {
  position: sticky;
  inset-block-end: 16px;
  display: flex;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(14px);
}

@media (max-width: 760px) {
  .training-mode-grid {
    grid-template-columns: 1fr;
  }
}

.tracker-task-card--form > .tracker-section-heading {
  align-items: start;
}

.field-error {
  margin: 6px 0 0;
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.45;
}

/* CRM ownership and explainable assignment */
.identity-list {
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border-soft);
}

.identity-list h3 {
  margin: 0 0 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.identity-list ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.identity-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-surface-soft);
}

.identity-list li > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.identity-list small {
  color: var(--color-text-subtle);
}

.identity-list code {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-stack:empty {
  display: none;
}

.feedback-stack {
  display: grid;
  gap: 8px;
  margin-block: 0 20px;
}

.feedback {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

.feedback--success {
  border-color: rgba(85, 215, 174, 0.3);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.feedback--error {
  border-color: rgba(255, 130, 145, 0.32);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.feedback--warning {
  border-color: rgba(241, 189, 105, 0.3);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.table-subline {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

@media (max-width: 620px) {
  .header-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.team-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: start;
  gap: 24px;
  margin-block-start: 24px;
}

.metrics--compact.team-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

.team-roster {
  min-width: 0;
}

.team-setup {
  display: grid;
  gap: 16px;
}

.disclosure-panel {
  padding: 0;
  overflow: clip;
}

.disclosure-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.disclosure-panel > summary::-webkit-details-marker {
  display: none;
}

.disclosure-panel > summary > span {
  display: grid;
  gap: 4px;
}

.disclosure-panel > summary strong {
  font-size: 16px;
}

.disclosure-panel > summary .icon {
  color: var(--color-text-subtle);
}

.disclosure-panel[open] > summary .icon {
  transform: rotate(90deg);
}

.team-form {
  display: grid;
  gap: 16px;
  padding: 0 18px 18px;
}

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

.schedule-fields {
  display: grid;
  gap: 12px;
}

.schedule-fields[hidden] {
  display: none;
}

.check-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
  cursor: pointer;
}

.check-field input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-accent-strong);
}

.check-field span {
  display: grid;
  gap: 2px;
}

.check-field small {
  color: var(--color-text-subtle);
}

.team-table td {
  min-width: 120px;
  vertical-align: top;
}

.team-table td:first-child,
.team-table td:nth-child(2),
.team-table td:nth-child(5) {
  min-width: 190px;
}

.manager-amo-form {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto;
  gap: 8px;
  margin-block-start: 10px;
}

.manager-amo-form input {
  min-width: 0;
  height: 36px;
}

.assignment-panel {
  margin-block-start: 24px;
}

.panel-description {
  max-width: 72ch;
  margin: -4px 0 20px;
  color: var(--color-text-muted);
}

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

.assignment-form {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

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

.assignment-form__heading {
  display: grid;
  gap: 4px;
}

.assignment-form__heading strong {
  font-size: 16px;
}

.assignment-form__heading span {
  color: var(--color-text-subtle);
  font-size: 13px;
}

.assignment-form > .button {
  justify-self: start;
  margin-block-start: 2px;
}

.assignment-history {
  margin-block-start: 24px;
}

.assignment-history h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.assignment-history ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assignment-history li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.assignment-history__marker {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent);
}

.assignment-history p {
  margin: 2px 0 0;
  color: var(--color-text-subtle);
  font-size: 12px;
}

.assignment-history time {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .disclosure-panel > summary .icon {
    transition: transform 140ms cubic-bezier(0.2, 0, 0, 1);
  }
}

@media (max-width: 72rem) {
  .team-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 48rem) {
  .metrics--compact.team-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-setup,
  .team-form .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .disclosure-panel > summary,
  .team-form {
    padding-inline: 16px;
  }

  .assignment-actions,
  .assignment-form .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .assignment-history li {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .assignment-history time,
  .assignment-history .status-badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* Channel-first team workspace. */
.team-page-header {
  margin-block-end: 20px;
}

.team-amocrm-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.team-amocrm-bar__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #7756d8;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.team-amocrm-bar__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.team-amocrm-bar__copy span {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-console {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 590px;
  margin-block-start: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  overflow: clip;
}

.team-channel-list {
  min-width: 0;
  border-inline-end: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
}

.team-channel-list__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 12px 14px;
  border-block-end: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.team-channel-list ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.team-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.team-channel:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.team-channel--active {
  border-color: color-mix(in oklch, var(--color-accent) 42%, var(--color-border));
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.team-channel__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--color-surface-raised);
}

.team-channel__icon .icon {
  width: 17px;
  height: 17px;
}

.team-channel__icon--telegram {
  background: #229ed9;
  color: #fff;
}

.team-channel__icon--max {
  background: #8067ea;
  color: #fff;
}

.team-channel__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.team-channel__copy :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-channel__copy strong {
  font-size: 14px;
}

.team-channel__copy small {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.team-channel__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-subtle);
}

.team-channel__status--active {
  background: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 15%, transparent);
}

.team-channel-settings {
  min-width: 0;
}

.team-channel-settings__header,
.team-directory__toolbar,
.team-access-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.team-channel-settings__header {
  min-height: 72px;
  padding: 14px 18px;
  border-block-end: 1px solid var(--color-border-soft);
}

.team-channel-settings__header h2,
.team-directory__toolbar h3,
.team-advanced h3 {
  margin: 0;
}

.team-channel-settings__header h2 {
  font-size: 19px;
}

.team-access-form {
  display: grid;
}

.team-route-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(360px, auto);
  align-items: end;
  gap: 20px;
  padding: 18px;
  border-block-end: 1px solid var(--color-border-soft);
}

.team-route-row p,
.team-directory__toolbar p,
.team-access-form__footer p {
  margin: 4px 0 0;
  color: var(--color-text-subtle);
  font-size: 13px;
}

.team-route-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 16px;
}

.team-pool-field {
  width: min(320px, 46vw);
}

.switch-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  cursor: pointer;
  user-select: none;
}

.switch-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-field__track {
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
}

.switch-field__track::after {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-muted);
  content: "";
  transition: transform 140ms ease, background-color 140ms ease;
}

.switch-field input:checked + .switch-field__track {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.switch-field input:checked + .switch-field__track::after {
  background: #fff;
  transform: translateX(16px);
}

.switch-field input:focus-visible + .switch-field__track {
  outline: 3px solid color-mix(in oklch, var(--color-accent) 32%, transparent);
  outline-offset: 2px;
}

.switch-field input:disabled + .switch-field__track {
  opacity: 0.48;
  cursor: not-allowed;
}

.switch-field--compact {
  min-width: 44px;
  min-height: 36px;
}

.team-directory {
  min-width: 0;
}

.team-directory__toolbar {
  padding: 14px 18px;
}

.team-directory__toolbar h3 {
  font-size: 16px;
}

.team-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: min(300px, 40vw);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.team-search .icon {
  width: 17px;
  height: 17px;
  margin-inline-start: 11px;
  color: var(--color-text-subtle);
}

.team-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.team-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.team-matrix-region {
  max-height: 520px;
  overflow: auto;
  border-block: 1px solid var(--color-border-soft);
}

.team-matrix {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.team-matrix :is(th, td) {
  padding: 11px 14px;
  border-block-end: 1px solid var(--color-border-soft);
  text-align: start;
  vertical-align: middle;
}

.team-matrix thead th {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  background: var(--color-surface-soft);
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 700;
}

.team-matrix tbody th {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 230px;
}

.team-matrix tbody tr:hover {
  background: color-mix(in oklch, var(--color-accent-soft) 42%, transparent);
}

.team-matrix select {
  width: 150px;
  min-height: 38px;
}

.team-role-control {
  display: grid;
  gap: 2px;
}

.team-matrix__row--disabled {
  opacity: 0.62;
}

.team-person-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 13px;
  font-weight: 800;
}

.team-person-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.team-person-copy :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-person-copy strong {
  font-size: 14px;
}

.team-person-copy small,
.team-matrix .cell-note {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.team-matrix td > .cell-note {
  display: block;
  margin-block-start: 4px;
}

.team-search-empty {
  margin: 0;
  padding: 32px 18px;
  color: var(--color-text-subtle);
  text-align: center;
}

.team-access-form__footer {
  min-height: 72px;
  padding: 14px 18px;
}

.team-advanced {
  margin-block-start: 16px;
}

.team-advanced__grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.3fr);
  border-block-start: 1px solid var(--color-border-soft);
}

.team-advanced__grid .team-form {
  padding-block-start: 18px;
}

.team-advanced__grid .team-form + .team-form {
  border-inline-start: 1px solid var(--color-border-soft);
}

@media (max-width: 68rem) {
  .team-console {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .team-route-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .team-route-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 48rem) {
  .team-amocrm-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .team-amocrm-bar form {
    grid-column: 1 / -1;
  }

  .team-amocrm-bar .button {
    width: 100%;
  }

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

  .team-channel-list {
    border-inline-end: 0;
    border-block-end: 1px solid var(--color-border-soft);
  }

  .team-channel-list ul {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 76vw);
    overflow-x: auto;
  }

  .team-channel-settings__header,
  .team-directory__toolbar,
  .team-access-form__footer,
  .team-route-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .team-pool-field,
  .team-search {
    width: 100%;
  }

  .team-matrix-region {
    max-height: none;
  }

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

  .team-advanced__grid .team-form + .team-form {
    border-block-start: 1px solid var(--color-border-soft);
    border-inline-start: 0;
  }
}

@media (max-width: 40rem) {
  .team-matrix {
    display: block;
    min-width: 0;
  }

  .team-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .team-matrix tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .team-matrix tbody tr {
    display: grid;
    width: 100%;
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    background: var(--color-surface-soft);
    overflow: hidden;
  }

  .team-matrix tbody tr[hidden] {
    display: none;
  }

  .team-matrix :is(th, td) {
    box-sizing: border-box;
    width: 100%;
    border-block-end: 1px solid var(--color-border-soft);
  }

  .team-matrix tbody th {
    min-width: 0;
  }

  .team-matrix tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .team-matrix tbody td:last-child {
    border-block-end: 0;
  }

  .team-matrix td[data-label]::before {
    color: var(--color-text-subtle);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
  }

  .team-matrix select {
    width: min(170px, 52vw);
  }

  .team-role-control {
    justify-items: end;
    min-width: 0;
  }
}

.field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-block-start: 18px;
}

.tracker-entity-collection {
  min-width: 0;
}

.tracker-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  margin-block-start: 18px;
}

.tracker-entity-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 35, 58, 0.96), rgba(11, 23, 40, 0.96));
}

.tracker-entity-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: rgba(126, 124, 255, 0.12);
  color: var(--color-accent-soft);
}

.tracker-entity-card__icon .icon {
  width: 19px;
  height: 19px;
}

.tracker-entity-card h3 {
  margin: 1px 0 6px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.tracker-entity-card code {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  overflow-wrap: anywhere;
}

.tracker-entity-card dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}

.tracker-entity-card dl > div {
  padding-block-start: 12px;
  border-block-start: 1px solid var(--color-border-soft);
}

.tracker-entity-card dt {
  margin-block-end: 6px;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tracker-entity-card dd {
  margin: 0;
  font-size: 12px;
}

.tracker-entity-card__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-block-start: 4px;
}

.tracker-entity-card__actions form,
.tracker-entity-card__actions .button {
  width: 100%;
}

.source-conversion-form__events {
  display: grid;
  gap: 15px;
  min-width: 0;
  margin: 5px 0 0;
  padding: 19px 0 0;
  border: 0;
  border-block-start: 1px solid var(--color-border-soft);
}

.source-conversion-form__events legend {
  padding: 0 10px 0 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.source-conversion-form__events > .field-hint {
  margin-block-start: -7px;
}

.source-conversion-form__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-block-start: 3px;
}

.source-conversion-form__actions .button,
.source-conversion-stop .button {
  width: 100%;
}

.source-conversion-stop {
  margin-block-start: 12px;
}

@media (max-width: 680px) {
  .source-conversion-form__actions {
    grid-template-columns: 1fr;
  }
}

.tracker-domain-check-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-danger-soft);
  border-radius: 10px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.integration-advanced {
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  background: rgba(5, 14, 26, 0.28);
}

.integration-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.integration-advanced > summary::-webkit-details-marker {
  display: none;
}

.integration-advanced > summary > span {
  display: grid;
  gap: 3px;
}

.integration-advanced > summary strong {
  font-size: 13px;
}

.integration-advanced > summary small {
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.45;
}

.integration-advanced > summary .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transition: transform 150ms ease-out;
}

.integration-advanced[open] > summary .icon {
  transform: rotate(90deg);
}

.integration-advanced__body {
  display: grid;
  gap: 24px;
  padding: 8px 16px 18px;
  border-block-start: 1px solid var(--color-border-soft);
}

@media (max-width: 820px) {
  .tracker-entity-workspace {
    grid-template-columns: 1fr;
  }

  .tracker-entity-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}

@media (max-width: 620px) {
  .tracker-task-card {
    padding: 18px;
  }

  .tracker-entity-grid {
    grid-template-columns: 1fr;
  }

  .tracker-entity-card {
    padding: 16px;
  }

  .tracker-task-card .tracker-form {
    grid-template-columns: 1fr;
  }

  .integration-advanced > summary {
    align-items: flex-start;
  }
}

/* Shared product-navigation primitives. Final shell geometry is defined below. */

.global-rail {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: 16px 10px 14px;
  border-inline-end: 1px solid rgba(151, 166, 190, 0.13);
  background: #040a13;
}

.rail-brand,
.global-rail__link,
.rail-status {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.rail-brand {
  color: #fff;
}

.rail-brand > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #6669df;
  color: #fff;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.global-rail__modules,
.global-rail__footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
}

.global-rail__modules {
  flex: 1;
  margin-block-start: 30px;
}

.global-rail__footer {
  padding-block-start: 12px;
  border-block-start: 1px solid rgba(151, 166, 190, 0.12);
}

.global-rail__link {
  color: #8190a6;
  transition: color 140ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms cubic-bezier(0.2, 0, 0, 1), transform 140ms cubic-bezier(0.2, 0, 0, 1);
}

.global-rail__link:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.global-rail__link:active {
  transform: scale(0.95);
}

.global-rail__link.is-active {
  background: var(--color-accent-soft);
  color: #b9baff;
}

.global-rail__link.is-active::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: -10px;
  width: 3px;
  border-radius: 999px;
  background: #8588ff;
}

.global-rail__link--logout:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.rail-status > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px var(--color-success-soft);
}

@media (hover: hover) and (min-width: 961px) {
  .rail-brand::after,
  .global-rail__link::after,
  .rail-status::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + 12px);
    z-index: 50;
    width: max-content;
    max-width: 210px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: #182339;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    color: #f5f7fb;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(4px, -50%);
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .rail-brand:hover::after,
  .rail-brand:focus-visible::after,
  .global-rail__link:hover::after,
  .global-rail__link:focus-visible::after,
  .rail-status:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.module-sidebar {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 100vh;
  padding: 20px 14px 16px;
  flex-direction: column;
  background: #07101d;
}

.module-identity {
  display: flex;
  min-height: 48px;
  padding: 4px 10px;
  border-radius: 9px;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  line-height: 1.15;
}

.module-identity:hover {
  background: rgba(255, 255, 255, 0.04);
}

.module-identity strong {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.module-identity span {
  margin-block-start: 4px;
  color: #8997aa;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 580;
  letter-spacing: 0.015em;
}

.module-nav {
  display: flex;
  flex: 1;
  min-width: 0;
  margin-block-start: 30px;
  flex-direction: column;
  gap: 5px;
}

.module-nav__label {
  padding-inline: 11px;
  margin: 0 0 7px;
  color: #78869a;
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 680;
  letter-spacing: 0.055em;
  line-height: 1.4;
  text-transform: uppercase;
}

.module-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 9px;
  color: #98a5b7;
  font-size: 13px;
  font-weight: 570;
  transition: color 140ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms cubic-bezier(0.2, 0, 0, 1), transform 140ms cubic-bezier(0.2, 0, 0, 1);
}

.module-nav__link .icon {
  width: 18px;
  height: 18px;
}

.module-nav__link:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}

.module-nav__link:active {
  transform: scale(0.98);
}

.module-nav__link.is-active {
  background: #1d2a43;
  color: #fff;
}

.module-nav__link.is-active::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: -14px;
  width: 3px;
  border-radius: 999px;
  background: #8588ff;
}

.module-nav__link.is-active .icon {
  color: #a8aaff;
}

.module-sidebar__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 2px;
  margin: 0;
  border-block-start: 1px solid rgba(151, 166, 190, 0.12);
  color: #718096;
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.3;
}

.module-sidebar__meta > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

.builder-page .module-sidebar {
  display: none;
}

@media (min-width: 961px) {
  .builder-page .app-shell {
    grid-template-columns: var(--global-rail-width) minmax(0, 1fr);
  }

  .builder-page .global-rail {
    width: var(--global-rail-width);
  }
}

@media (max-width: 960px) {
  .global-rail {
    width: 100%;
    min-height: 60px;
    height: 60px;
    padding: 8px max(10px, var(--space-page));
    flex-direction: row;
    border-inline-end: 0;
    border-block-end: 1px solid rgba(151, 166, 190, 0.13);
  }

  .rail-brand > span {
    width: 38px;
    height: 38px;
  }

  .global-rail__modules,
  .global-rail__footer {
    flex-direction: row;
  }

  .global-rail__modules {
    flex: 1;
    gap: 4px;
    margin: 0 0 0 8px;
  }

  .global-rail__footer {
    gap: 2px;
    padding: 0;
    border: 0;
  }

  .rail-status {
    display: none;
  }

  .global-rail__link.is-active::before {
    inset-block: auto -8px;
    inset-inline: 10px;
    width: auto;
    height: 3px;
  }

  .module-sidebar {
    display: flex;
    width: 100%;
    min-height: 56px;
    height: 56px;
    padding: 6px var(--space-page);
    flex-direction: row;
    border: 0;
    background: #07101d;
  }

  .module-identity,
  .module-nav__label,
  .module-sidebar__meta {
    display: none;
  }

  .module-nav {
    min-width: 0;
    margin: 0;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .module-nav::-webkit-scrollbar {
    display: none;
  }

  .module-nav__link {
    flex: 0 0 auto;
    min-width: max-content;
    padding-inline: 13px;
  }

  .module-nav__link.is-active::before {
    inset-block: auto -6px;
    inset-inline: 13px;
    width: auto;
    height: 3px;
  }

  .builder-page .global-rail {
    width: 100%;
  }

  .builder-page .builder {
    min-height: calc(100vh - 60px);
  }
}

@media (max-width: 420px) {
  .global-rail {
    padding-inline: 8px;
  }

  .global-rail__modules {
    margin-inline-start: 4px;
  }

  .global-rail__link,
  .rail-status {
    width: 42px;
  }

  .module-sidebar {
    padding-inline: 12px;
  }

  .module-nav__link {
    gap: 8px;
    padding-inline: 11px;
    font-size: 13px;
  }
}

@media (forced-colors: active) {
  .global-rail,
  .module-sidebar,
  .global-rail__link.is-active,
  .module-nav__link.is-active {
    border: 1px solid CanvasText;
  }
}

/* Chatterfy V2 navigation shell: global rail, contextual CRM tabs, Tracker sidebar. */

:root {
  --global-rail-width: 64px;
  --context-header-height: 64px;
  --module-sidebar-width: 240px;
  --sidebar-width: var(--global-rail-width);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--global-rail-width) minmax(0, 1fr);
  min-height: 100vh;
}

.global-rail {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  width: var(--global-rail-width);
  min-width: var(--global-rail-width);
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  padding: 8px 8px 12px;
  border-inline-end: 1px solid rgba(151, 166, 190, 0.13);
  background: #050b14;
}

.rail-brand,
.global-rail__link,
.rail-status {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.rail-brand > span {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.global-rail__modules {
  gap: 0;
  margin-block-start: 16px;
}

.global-rail__footer {
  gap: 0;
  padding-block-start: 8px;
}

.global-rail__link.is-active {
  border: 1px solid rgba(137, 141, 255, 0.2);
  background: #1c2236;
  color: #b9baff;
}

.global-rail__link.is-active::before {
  display: none;
}

.app-frame {
  display: grid;
  grid-template-rows: var(--context-header-height) minmax(0, 1fr);
  min-width: 0;
  min-height: 100vh;
}

.context-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--context-header-height);
  padding-inline: 18px 24px;
  border-block-end: 1px solid rgba(151, 166, 190, 0.13);
  background: rgba(7, 17, 31, 0.96);
  backdrop-filter: blur(18px);
}

.context-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 9px;
  border-radius: 9px;
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.context-identity:hover {
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text);
}

.context-identity .icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-subtle);
}

.context-identity strong {
  color: var(--color-text);
  font-weight: 680;
}

.context-nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-inline-start: 28px;
}

.context-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 13px;
  border-radius: 9px;
  color: #8f9caf;
  font-size: 13px;
  font-weight: 580;
  transition: color 140ms ease, background-color 140ms ease;
}

.context-nav__link:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}

.context-nav__link.is-active {
  color: #fff;
}

.context-nav__link.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 13px;
  inset-block-end: -10px;
  height: 2px;
  border-radius: 999px;
  background: #8588ff;
}

.mobile-header {
  display: none;
}

.workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: calc(100vh - var(--context-header-height));
}

.workspace-body--with-sidebar {
  grid-template-columns: var(--module-sidebar-width) minmax(0, 1fr);
}

.workspace-body .app-main {
  min-width: 0;
}

.workspace-body .content {
  min-height: calc(100vh - var(--context-header-height));
}

.workspace-body .module-sidebar {
  position: sticky;
  inset-block-start: var(--context-header-height);
  z-index: 20;
  display: flex;
  width: var(--module-sidebar-width);
  min-width: var(--module-sidebar-width);
  height: calc(100vh - var(--context-header-height));
  min-height: calc(100vh - var(--context-header-height));
  max-height: calc(100vh - var(--context-header-height));
  padding: 20px 20px 16px;
  align-self: start;
  overflow-y: auto;
  border-block-start: 1px solid rgba(151, 166, 190, 0.14);
  border-inline: 1px solid rgba(151, 166, 190, 0.14);
  border-start-start-radius: 24px;
  background: linear-gradient(180deg, #0c1423 0%, #070e19 100%);
}

.workspace-body .module-identity {
  min-height: 40px;
  padding: 2px 0;
}

.workspace-body .module-identity:hover {
  background: transparent;
}

.workspace-body .module-identity strong {
  font-size: 15px;
}

.workspace-body .module-nav {
  margin-block-start: 25px;
  gap: 4px;
}

.workspace-body .module-nav__label {
  padding-inline: 0;
  margin-block-end: 8px;
}

.workspace-body .module-nav__link {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
}

.workspace-body .module-nav__link.is-active {
  background: #2c3554;
}

.workspace-body .module-nav__link.is-active::before {
  display: none;
}

.navigation-backdrop,
.mobile-drawer {
  display: none;
}

.navigation-backdrop[hidden],
.mobile-drawer[hidden] {
  display: none !important;
}

.builder-page .context-header {
  display: none;
}

.builder-page .app-frame {
  grid-template-rows: minmax(0, 1fr);
  min-height: 100vh;
}

.builder-page .workspace-body,
.builder-page .app-main,
.builder-page .content--builder {
  height: 100vh;
  min-height: 0;
}

.builder-page .content--builder {
  padding: 0;
}

@media (max-width: 960px) {
  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .app-frame {
    display: block;
    min-height: 100vh;
  }

  .global-rail,
  .context-header,
  .workspace-body .module-sidebar {
    display: none;
  }

  .mobile-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    border-block-end: 1px solid rgba(151, 166, 190, 0.13);
    background: rgba(7, 17, 31, 0.96);
    backdrop-filter: blur(18px);
  }

  .mobile-menu-button,
  .mobile-header__spacer,
  .mobile-drawer__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(151, 166, 190, 0.16);
    border-radius: 11px;
    background: #111b2c;
    color: #e9edf5;
  }

  .mobile-menu-button,
  .mobile-drawer__close {
    cursor: pointer;
  }

  .mobile-menu-button:hover,
  .mobile-drawer__close:hover {
    border-color: rgba(151, 166, 190, 0.3);
    background: #18243a;
  }

  .mobile-header__spacer {
    border-color: transparent;
    background: transparent;
  }

  .mobile-brand {
    position: absolute;
    inset-inline-start: 50%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding-inline: 8px;
    border-radius: 10px;
    color: #fff;
    transform: translateX(-50%);
  }

  .mobile-brand > span,
  .mobile-drawer__brand > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    background: #6669df;
    color: #fff;
    font-size: 14px;
    font-weight: 760;
  }

  .mobile-brand strong {
    font-size: 15px;
    letter-spacing: -0.02em;
  }

  .workspace-body,
  .workspace-body--with-sidebar {
    display: block;
    min-height: calc(100vh - 80px);
  }

  .workspace-body .content {
    min-height: calc(100vh - 80px);
  }

  .navigation-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(1, 5, 12, 0.68);
    backdrop-filter: blur(2px);
    cursor: default;
    animation: navigation-fade-in 160ms ease-out;
  }

  .mobile-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 110;
    display: flex;
    width: min(320px, 100vw);
    height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    flex-direction: column;
    border-inline-end: 1px solid rgba(151, 166, 190, 0.18);
    background: linear-gradient(180deg, #0d1627 0%, #060c16 100%);
    box-shadow: 24px 0 64px rgba(0, 0, 0, 0.35);
    color: #fff;
    animation: navigation-drawer-in 180ms cubic-bezier(0.2, 0, 0, 1);
  }

  .mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
  }

  .mobile-drawer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-inline: 4px;
    border-radius: 10px;
  }

  .mobile-drawer__brand strong {
    font-size: 16px;
    letter-spacing: -0.025em;
  }

  .mobile-drawer__content {
    min-height: 0;
    padding-block: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .drawer-nav,
  .drawer-context-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .drawer-context-nav {
    padding-block-start: 24px;
    margin-block-start: 24px;
    border-block-start: 1px solid rgba(151, 166, 190, 0.13);
  }

  .drawer-nav__label {
    padding-inline: 10px;
    margin: 0 0 8px;
    color: #78869a;
    font-size: var(--crm-type-kicker, 12px);
    font-weight: 680;
    letter-spacing: 0.065em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .drawer-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #96a3b5;
  }

  .drawer-nav__link:hover,
  .drawer-context-nav .module-nav__link:hover {
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
  }

  .drawer-nav__link.is-active {
    border-color: rgba(137, 141, 255, 0.16);
    background: #242d47;
    color: #fff;
  }

  .drawer-nav__link .icon {
    width: 20px;
    height: 20px;
    color: #aeb0ff;
  }

  .drawer-nav__link > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.3;
  }

  .drawer-nav__link strong {
    font-size: 14px;
    font-weight: 650;
  }

  .drawer-nav__link small {
    margin-block-start: 3px;
    color: #7f8da1;
    font-size: var(--crm-type-kicker, 12px);
  }

  .drawer-context-nav .module-nav__link {
    min-height: 44px;
    padding: 9px 10px;
    border-radius: 9px;
  }

  .drawer-context-nav .module-nav__link.is-active {
    background: #2c3554;
    color: #fff;
  }

  .drawer-context-nav .module-nav__link.is-active::before {
    display: none;
  }

  .mobile-drawer__footer {
    display: grid;
    gap: 8px;
    padding-block-start: 14px;
    border-block-start: 1px solid rgba(151, 166, 190, 0.13);
  }

  .drawer-status,
  .drawer-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-inline: 10px;
    color: #8492a6;
    font-size: 12px;
  }

  .drawer-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px var(--color-success-soft);
  }

  .drawer-logout {
    border-radius: 9px;
    font-size: 13px;
  }

  .drawer-logout:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  body.navigation-open {
    overflow: hidden;
  }

  .builder-page .app-frame {
    min-height: 100vh;
  }

  .builder-page .workspace-body,
  .builder-page .app-main,
  .builder-page .content--builder {
    height: auto;
    min-height: 0;
  }

  .builder-page .builder {
    min-height: calc(100vh - 80px);
  }
}

/* Forex analytics */

.drawer-user {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

.drawer-user strong {
  font-size: 13px;
}

.drawer-user small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.company-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin-block: 24px;
}

.company-setup-grid > .panel {
  margin: 0;
}

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

.space-card {
  display: grid;
  gap: 16px;
  padding: 17px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

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

.space-card__heading > div {
  display: grid;
  gap: 4px;
}

.space-card__heading code {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

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

.space-card__lists > div {
  padding: 11px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.018);
}

.space-card__lists h3,
.space-card__forms label {
  margin: 0 0 7px;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.space-card__lists ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.space-card__lists li,
.buyer-access-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inline-remove {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.inline-remove:hover {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-danger);
}

.inline-remove:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.space-card__forms {
  display: grid;
  gap: 10px;
}

.space-card__forms form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.space-card__forms select {
  min-width: 0;
}

.buyer-access-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.buyer-access-list {
  display: grid;
  gap: 7px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.buyer-access-list li {
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 12px;
}

@media (max-width: 920px) {
  .company-setup-grid,
  .space-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .space-card__lists,
  .buyer-access-form {
    grid-template-columns: 1fr;
  }
}

/* Account security */

.login-cancel {
  justify-self: center;
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.login-cancel:hover {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

.analytics-filterbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  margin-block-end: 22px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.analytics-filterbar .field {
  gap: 5px;
  min-width: 0;
}

.analytics-filterbar :is(input, select) {
  width: 100%;
  min-width: 0;
}

.analytics-filterbar .button {
  min-height: 42px;
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-border);
}

.analytics-kpis > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 15px;
  background: var(--color-surface);
}

.analytics-kpis > div.is-primary {
  background: linear-gradient(145deg, rgba(94, 97, 226, 0.2), var(--color-surface));
}

.analytics-kpis dt {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.analytics-kpis dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(23px, 2vw, 32px);
  font-weight: 650;
  line-height: 1.1;
}

.analytics-kpis small {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: start;
  gap: 20px;
  margin-block-end: 24px;
}

.analytics-economics {
  margin-block-end: 24px;
}

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

.analytics-economics-grid article {
  padding: 15px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.analytics-economics-grid article > strong {
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 12px;
}

.analytics-economics-grid dl {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.analytics-economics-grid dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.analytics-economics-grid dt {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.analytics-economics-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.analytics-economics-grid .is-profit {
  color: var(--color-success);
}

.analytics-economics-grid .is-negative {
  color: var(--color-danger);
}

.analytics-top-grid > .panel {
  margin: 0;
}

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

.analytics-money-grid article {
  padding: 15px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.analytics-money-grid article > strong {
  display: inline-flex;
  margin-block-end: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--crm-type-kicker, 12px);
}

.analytics-money-grid dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.analytics-money-grid dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.analytics-money-grid dt {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.analytics-money-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}

.analytics-money-grid .is-net {
  padding-block-start: 7px;
  border-block-start: 1px solid var(--color-border-soft);
  color: var(--color-success);
}

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

.segment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 12px;
}

.segment-row strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 15px;
}

.segment-row--risk { border-inline-start-color: var(--color-danger); }
.segment-row--completed { border-inline-start-color: var(--color-success); }
.segment-row--fresh { border-inline-start-color: var(--color-accent-strong); }
.segment-row--stuck,
.segment-row--not_started { border-inline-start-color: var(--color-warning); }

.analytics-table {
  min-width: 980px;
}

.analytics-table th,
.analytics-table td {
  white-space: nowrap;
}

.analytics-table td:first-child {
  min-width: 180px;
}

.money-line {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--crm-type-kicker, 12px);
}

.money-line + .money-line {
  margin-block-start: 3px;
}

@media (max-width: 1500px) {
  .analytics-filterbar {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
  }

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

@media (max-width: 1040px) {
  .analytics-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-top-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 620px) {
  .analytics-filterbar {
    grid-template-columns: 1fr;
  }
}

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

/* Rendered QA fixes: stable navigation, complete mobile actions and readable data panes. */

@media (min-width: 961px) {
  .global-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
  }

  .app-frame {
    grid-column: 2;
  }

  body:not(.builder-page) .context-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: var(--global-rail-width) 0;
  }

  body:not(.builder-page) .workspace-body {
    grid-row: 2;
  }

  .workspace-body .module-sidebar {
    position: fixed;
    inset-block: var(--context-header-height) 0;
    inset-inline-start: var(--global-rail-width);
  }

  .workspace-body--with-sidebar .app-main {
    grid-column: 2;
  }
}

.tracker-signal-card__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-accent-strong);
}

@media (max-width: 700px) {
  .page-header__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .page-header__actions > * {
    width: 100%;
    min-width: 0;
  }

  .page-header__actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .control-tabs,
  .tracker-log-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }

  .control-tabs a,
  .tracker-log-tabs a {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    text-align: center;
    white-space: normal;
  }

  .control-tabs a:last-child:nth-child(odd),
  .tracker-log-tabs a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .table-scroll:not(.leads-table-scroll)::before {
    content: "Проведите по таблице, чтобы увидеть остальные столбцы.";
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    display: block;
    width: max-content;
    max-width: calc(100vw - 80px);
    padding: 2px 0 10px;
    color: var(--color-text-subtle);
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
  }

  .table-scroll-hint + .table-scroll::before {
    display: none;
  }

  .table-scroll {
    padding-block-end: 8px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .text-link,
  .code-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .tag-remove-button,
  .inline-remove {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

.amocrm-connection-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-block-start: 16px;
}

.amocrm-connection-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
}

.amocrm-connection-summary span,
.amocrm-connection-list dt {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amocrm-connection-summary strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.amocrm-connection-list {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
}

.amocrm-connection-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-block-start: 1px solid var(--color-border-soft);
}

.amocrm-connection-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: end;
}

@keyframes navigation-drawer-in {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes navigation-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-backdrop,
  .mobile-drawer {
    animation: none;
  }
}

@media (forced-colors: active) {
  .context-header,
  .workspace-body .module-sidebar,
  .mobile-header,
  .mobile-drawer,
  .drawer-nav__link.is-active,
  .drawer-context-nav .module-nav__link.is-active {
    border: 1px solid CanvasText;
  }
}

/* Compact operational grammar — aligned to the supplied V2 references. */

:root {
  --context-header-height: 60px;
  --module-sidebar-width: 238px;
  --compact-control-height: 34px;
  --color-bg: #050d18;
  --color-sidebar: #030a13;
  --color-surface: #101b2c;
  --color-surface-raised: #1b2338;
  --color-surface-soft: #0b1626;
  --color-border: #2b394e;
  --color-border-soft: rgba(151, 166, 190, 0.16);
  --color-text: #f4f7fb;
  --color-text-muted: #a5b0c1;
  --color-text-subtle: #7f8da2;
  --color-accent: #0b8dff;
  --color-accent-strong: #57b2ff;
  --color-accent-soft: rgba(11, 141, 255, 0.15);
  --radius-control: 7px;
  --radius-panel: 9px;
  --radius-card: 9px;
  --shadow-panel: none;
}

body {
  font-size: 14px;
}

.global-rail {
  padding: 8px 12px 10px;
  background: #020912;
}

.rail-brand,
.global-rail__link,
.rail-status {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.rail-brand > span {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.global-rail__modules {
  margin-block-start: 12px;
}

.context-header {
  padding-inline: 14px 20px;
  background: rgba(4, 13, 24, 0.97);
}

.context-identity,
.context-nav__link {
  min-height: 38px;
  font-size: 12px;
}

.context-nav {
  margin-inline-start: 18px;
}

.context-nav__link {
  padding-inline: 11px;
  border-radius: 7px;
}

.context-nav__link.is-active::after {
  inset-inline: 11px;
  inset-block-end: -11px;
  background: var(--color-accent);
}

.workspace-body .module-sidebar {
  padding: 15px 12px 12px;
  border-start-start-radius: 18px;
  background: #0b1626;
}

.workspace-body .module-identity {
  padding-inline: 8px;
}

.workspace-body .module-identity strong {
  font-size: 14px;
}

.workspace-body .module-identity span {
  font-size: var(--crm-type-kicker, 12px);
}

.workspace-body .module-nav {
  gap: 2px;
  margin-block-start: 14px;
}

.workspace-body .module-nav__label {
  margin: 5px 8px 6px;
  font-size: var(--crm-type-kicker, 12px);
}

.workspace-body .module-nav__link {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
}

.workspace-body .module-nav__link .icon {
  width: 16px;
  height: 16px;
}

.workspace-body .module-nav__link.is-active {
  background: #303a5b;
  color: #fff;
}

.module-sidebar__meta {
  padding: 9px;
  font-size: var(--crm-type-kicker, 12px);
}

.workspace-body .content:not(.content--builder):not(.content--messenger) {
  padding: 20px 20px 32px;
}

.compact-page-header {
  align-items: center;
  gap: 18px;
  margin-block-end: 16px;
}

.compact-page-header__context {
  margin-block-end: 4px;
  color: #6caeff;
  font-size: var(--crm-type-kicker, 12px);
}

.compact-page-header h1,
.page-header h1,
.tracker-masthead h1 {
  font-size: clamp(23px, 1.7vw, 28px);
  letter-spacing: -0.03em;
}

.compact-page-header > div > p:last-child,
.page-description,
.tracker-masthead__copy > p:last-child {
  max-width: 68ch;
  margin-block-start: 5px;
  font-size: 12px;
  line-height: 1.45;
}

.button {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
}

.button--compact {
  min-height: 30px;
  padding: 4px 9px;
  font-size: var(--crm-type-kicker, 12px);
}

.button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  box-shadow: none;
}

.button--primary:hover {
  border-color: #319fff;
  background: #319fff;
}

.button--secondary,
.button--quiet {
  border-color: #304158;
  background: #121f32;
}

.field {
  gap: 5px;
}

.field label {
  font-size: var(--crm-type-kicker, 12px);
}

.field :is(input, select) {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
}

.field textarea {
  min-height: 72px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12px;
}

.field-hint,
.field-error {
  margin-block-start: 2px;
  font-size: var(--crm-type-kicker, 12px);
}

.panel,
.tracker-data-section,
.tracker-performance-panel,
.tracker-revenue-card,
.tracker-signal-card,
.resource-panel,
.integration-card {
  border-radius: 9px;
  box-shadow: none;
}

.panel,
.data-panel {
  padding: 14px;
}

.panel-heading {
  margin-block-end: 10px;
}

.panel-heading h2,
.tracker-section-heading h2 {
  font-size: 15px;
}

.panel-description,
.tracker-section-heading p:not(.section-kicker) {
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.45;
}

.section-kicker,
.eyebrow {
  color: #6caeff;
  font-size: var(--crm-type-kicker, 12px);
}

.status-badge,
.read-only-badge,
.panel-count,
.tag {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--crm-type-kicker, 12px);
}

.resource-panel__toolbar {
  min-height: 54px;
  padding: 9px 12px;
}

.resource-panel__toolbar h2 {
  font-size: 14px;
}

.resource-panel__toolbar p,
.resource-panel__legend {
  font-size: var(--crm-type-kicker, 12px);
}

.resource-panel .empty-state--compact {
  min-height: 190px;
  padding: 24px 18px;
}

.resource-table th,
.data-table th {
  height: 34px;
  padding: 7px 11px;
  background: #1a2237;
  color: #a9b5c7;
  font-size: var(--crm-type-kicker, 12px);
  letter-spacing: 0.04em;
}

.resource-table td {
  min-height: 54px;
  height: auto;
  padding: 8px 11px;
  font-size: var(--crm-type-kicker, 12px);
}

.data-table td {
  padding: 9px 11px;
  font-size: var(--crm-type-kicker, 12px);
}

.resource-identity {
  min-width: 0;
}

.resource-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 7px;
}

.resource-avatar--image {
  object-fit: cover;
}

.resource-identity strong,
.cell-stack strong {
  font-size: var(--crm-type-kicker, 12px);
}

.resource-identity small,
.cell-stack small {
  font-size: var(--crm-type-kicker, 12px);
}

.cell-error {
  display: block;
  max-width: 260px;
  margin-block-start: 4px;
  color: var(--color-danger);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.35;
}

.icon-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 7px;
}

.tracker-kpi-strip {
  gap: 10px;
  margin-block-end: 12px;
}

.tracker-kpi-strip > div {
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 9px;
}

.tracker-kpi-strip > div:first-child {
  padding-inline-start: 14px;
}

.tracker-kpi-strip dt {
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-kpi-strip dd {
  margin-block-start: 5px;
  font-size: clamp(24px, 2.4vw, 30px);
}

.tracker-kpi-strip .tracker-kpi-strip__context {
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-performance-grid {
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.65fr);
  gap: 10px;
  margin-block-end: 18px;
}

.tracker-performance-panel,
.tracker-revenue-card,
.tracker-signal-card {
  padding: 15px;
}

.tracker-performance-panel h2,
.tracker-revenue-card h2,
.tracker-signal-card h2 {
  font-size: 16px;
}

.tracker-performance-panel__header {
  gap: 16px;
}

.tracker-performance-panel__header > div:first-child > p:last-child {
  margin-block-start: 5px;
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-performance-panel__rate {
  padding: 9px 11px;
  border-radius: 7px;
}

.tracker-performance-panel__rate strong {
  font-size: 25px;
}

.tracker-performance-panel__rate span {
  margin-block-start: 4px;
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-funnel {
  gap: 11px;
  margin-block-start: 16px;
}

.tracker-funnel li {
  grid-template-columns: minmax(130px, 0.72fr) minmax(150px, 1.4fr) minmax(120px, 0.7fr);
  gap: 12px;
}

.tracker-funnel__label > span {
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-funnel__label strong {
  font-size: 15px;
}

.tracker-funnel__track {
  height: 8px;
}

.tracker-funnel li > p,
.tracker-performance-panel__footer {
  font-size: var(--crm-type-kicker, 12px);
}

.tracker-performance-panel__footer {
  padding-block-start: 12px;
  margin-block-start: 15px;
}

.tracker-insight-rail {
  gap: 10px;
}

.tracker-revenue-list {
  margin-block-start: 10px;
}

.tracker-revenue-list dd {
  font-size: 23px;
}

.campaign-register-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-end: 12px;
  border-radius: 9px;
}

.campaign-register-summary > * {
  min-height: 62px;
  padding: 10px 13px;
}

.campaign-register-summary span {
  font-size: var(--crm-type-kicker, 12px);
}

.campaign-register-summary strong {
  font-size: 19px;
}

.tracker-data-section {
  padding: 0;
  overflow: hidden;
}

.tracker-data-section > .tracker-section-heading {
  min-height: 52px;
  padding: 9px 12px;
  margin: 0;
  border-block-end: 1px solid var(--color-border-soft);
}

.campaign-register-table .tracker-campaign-name {
  margin-block-start: 5px;
}

.table-link--secondary,
.tracker-status-action .button {
  margin-block-start: 4px;
  font-size: var(--crm-type-kicker, 12px);
}

.tracking-link-control input {
  min-height: 30px;
  font-size: var(--crm-type-kicker, 12px);
}

.editor-tabs {
  position: sticky;
  inset-block-start: 8px;
  z-index: 4;
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  margin-block-end: 10px;
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: #050b14;
}

.editor-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: 10px;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-kicker, 12px);
  white-space: nowrap;
}

.editor-tabs a:hover,
.editor-tabs a:focus-visible {
  background: var(--color-accent);
  color: #fff;
}

.campaign-form-header {
  margin-block-start: 8px;
  margin-block-end: 10px;
}

.campaign-type-switch {
  gap: 6px;
  max-width: 430px;
  margin-block-end: 10px;
}

.campaign-type-switch a {
  min-height: 48px;
  padding: 8px 11px;
  border-radius: 8px;
}

.campaign-type-switch .icon {
  width: 17px;
  height: 17px;
}

.campaign-type-switch strong {
  font-size: var(--crm-type-kicker, 12px);
}

.campaign-type-switch small {
  font-size: var(--crm-type-kicker, 12px);
}

.campaign-setup-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 10px;
  max-width: 1120px;
}

.campaign-setup-form {
  gap: 8px;
}

.campaign-form-section {
  scroll-margin-top: 62px;
  padding: 15px;
  border-radius: 8px;
}

.campaign-form-section__heading {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
}

.campaign-form-section__heading > span {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: var(--crm-type-kicker, 12px);
}

.campaign-form-section__heading h2,
.campaign-setup-aside h2 {
  font-size: 15px;
}

.campaign-form-section__heading p {
  margin-block-start: 3px;
  font-size: var(--crm-type-kicker, 12px);
}

.campaign-form-grid {
  gap: 11px;
  margin-block-start: 13px;
  padding-inline-start: 36px;
}

.campaign-route-preview {
  gap: 14px;
  padding-inline-start: 36px;
  margin-block-start: 13px;
}

.campaign-route-preview li {
  min-height: 52px;
  padding: 8px;
}

.campaign-setup-aside {
  padding: 14px;
}

.campaign-checkbox {
  min-height: 72px;
  padding: 10px;
}

.entity-drawer {
  width: min(560px, 100vw);
  background: #0d1929;
}

.entity-drawer--wide {
  width: min(780px, 100vw);
}

.entity-drawer__header {
  min-height: 58px;
  padding: 10px 14px;
}

.entity-drawer__header h2 {
  font-size: 16px;
}

.entity-drawer__body {
  gap: 13px;
  padding: 14px;
  overscroll-behavior: contain;
}

.entity-drawer__body--plain {
  display: block;
}

.entity-drawer__footer {
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
}

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

.row-action-menu {
  position: relative;
}

.row-action-menu > summary {
  list-style: none;
  font-size: 14px;
  letter-spacing: 1px;
}

.row-action-menu > summary::-webkit-details-marker {
  display: none;
}

.row-action-menu__popover {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 12;
  width: 280px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-panel);
  text-align: start;
}

.row-action-menu__popover > strong {
  font-size: var(--crm-type-kicker, 12px);
}

.row-action-menu__popover > p,
.row-action-menu__popover > small {
  display: block;
  margin: 4px 0 9px;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
  line-height: 1.4;
}

.row-action-menu__popover form {
  display: grid;
  gap: 7px;
}

.row-action-menu__popover input {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--crm-type-kicker, 12px);
}

.filter-disclosure,
.analytics-secondary {
  margin-block-end: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.filter-disclosure > summary,
.analytics-secondary > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 11px;
  list-style: none;
  cursor: pointer;
}

.filter-disclosure > summary::-webkit-details-marker,
.analytics-secondary > summary::-webkit-details-marker {
  display: none;
}

.filter-disclosure > summary > span,
.analytics-secondary > summary > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin-inline-end: auto;
}

.filter-disclosure > summary strong,
.analytics-secondary > summary strong {
  font-size: var(--crm-type-kicker, 12px);
}

.filter-disclosure > summary small,
.analytics-secondary > summary small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker, 12px);
}

.filter-disclosure > summary > .icon:last-child,
.analytics-secondary > summary > .icon:last-child {
  transition: transform 140ms ease;
}

.filter-disclosure[open] > summary > .icon:last-child,
.analytics-secondary[open] > summary > .icon:last-child {
  transform: rotate(90deg);
}

.analytics-filterbar {
  grid-template-columns: repeat(6, minmax(110px, 1fr)) auto;
  gap: 8px;
  padding: 10px;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--color-border-soft);
  border-radius: 0;
  background: transparent;
}

.analytics-filterbar .button {
  min-height: 34px;
}

.analytics-kpis {
  gap: 1px;
  margin-block-end: 12px;
  border-radius: 8px;
}

.analytics-kpis > div {
  gap: 1px;
  padding: 11px;
}

.analytics-kpis dt {
  font-size: var(--crm-type-kicker, 12px);
}

.analytics-kpis dd {
  font-size: 23px;
}

.analytics-secondary__body {
  padding: 10px;
  border-block-start: 1px solid var(--color-border-soft);
}

.analytics-secondary .analytics-economics,
.analytics-secondary .analytics-top-grid {
  margin-block-end: 10px;
}

.data-panel {
  margin-block-end: 10px;
}

.integration-workspace {
  grid-template-columns: 1fr;
  gap: 10px;
}

.integration-form-panel,
.integration-guide {
  padding: 14px;
  border-radius: 8px;
}

.integration-guide {
  position: static;
}

.integration-form-grid,
.integration-form-grid--mapping,
.integration-form-grid--events {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.integration-fieldset {
  padding-block: 14px;
}

.integration-list {
  margin-block-start: 0;
}

.integration-card {
  gap: 12px 16px;
  padding: 14px;
  margin-block-start: 8px;
}

.integration-stats > div,
.integration-template {
  padding: 9px 10px;
  border-radius: 7px;
}

.integration-map {
  gap: 6px;
}

.integration-card__actions .button {
  min-height: 32px;
}

.messenger-workspace {
  grid-template-columns: 188px 300px minmax(420px, 1fr) 292px;
}

.messenger-workspace--empty {
  grid-template-columns: 188px 310px minmax(420px, 1fr);
}

.messenger-filters,
.messenger-queue__toolbar,
.messenger-thread-header,
.client-inspector__header {
  min-height: 58px;
}

.client-inspector__header {
  padding: 8px 11px;
}

@media (max-width: 1180px) {
  .analytics-filterbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tracker-performance-grid {
    grid-template-columns: 1fr;
  }

  .tracker-insight-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 760px) {
  .compact-page-header {
    align-items: stretch;
  }

  .button,
  .icon-button,
  .field :is(input, select),
  .field textarea {
    min-height: 44px;
  }

  .icon-button {
    width: 44px;
    min-width: 44px;
  }

  .tracker-kpi-strip,
  .campaign-register-summary,
  .tracker-insight-rail,
  .drawer-field-grid,
  .integration-form-grid,
  .integration-form-grid--mapping,
  .integration-form-grid--events {
    grid-template-columns: 1fr 1fr;
  }

  .tracker-funnel li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .campaign-setup-layout {
    grid-template-columns: 1fr;
  }

  .campaign-form-grid,
  .campaign-route-preview {
    padding-inline-start: 0;
  }

  .row-action-menu__popover {
    position: fixed;
    inset: auto 12px 12px;
    width: auto;
  }
}

@media (max-width: 520px) {
  .tracker-kpi-strip,
  .tracker-insight-rail,
  .drawer-field-grid,
  .integration-form-grid,
  .integration-form-grid--mapping,
  .integration-form-grid--events,
  .analytics-filterbar {
    grid-template-columns: 1fr;
  }

  .campaign-type-switch {
    max-width: none;
  }

  .campaign-form-grid {
    grid-template-columns: 1fr;
  }

  .campaign-field--wide {
    grid-column: auto;
  }

  .compact-page-header__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-page-header__actions > :only-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-disclosure > summary > .icon:last-child,
  .analytics-secondary > summary > .icon:last-child {
    transition: none;
  }
}

/* Post-compact CRM enforcement. */
:root {
  --color-bg: oklch(0.18 0.025 252);
  --color-sidebar: oklch(0.155 0.022 252);
  --color-surface: oklch(0.235 0.03 250);
  --color-surface-raised: oklch(0.295 0.04 252);
  --color-surface-soft: oklch(0.205 0.027 250);
  --color-border: oklch(0.43 0.045 250);
  --color-border-soft: rgba(164, 190, 224, 0.2);
  --color-text: oklch(0.97 0.01 250);
  --color-text-muted: oklch(0.82 0.025 250);
  --color-text-subtle: oklch(0.71 0.035 250);
  --color-accent: oklch(0.7 0.16 250);
  --color-accent-strong: oklch(0.82 0.105 245);
  --color-accent-soft: rgba(64, 159, 255, 0.16);
  --color-success: oklch(0.79 0.15 160);
  --color-warning: oklch(0.82 0.14 80);
  --color-danger: oklch(0.72 0.19 20);
}

body { font-size: 15px; line-height: 1.5; }
.global-rail { background: var(--color-sidebar); }
.context-header { background: rgba(6, 16, 28, 0.97); }
.workspace-body .module-sidebar,
.messenger-filters { background: var(--color-surface-soft); }
.messenger-queue,
.client-inspector { background: var(--color-bg); }
.messenger-thread-pane,
.messenger-selection-empty { background: #0b1727; }
.messenger-thread-header,
.messenger-composer,
.client-inspector__footer { background: #0f1d2f; }

.workspace-body .module-nav__label,
.workspace-body .module-identity span,
.module-sidebar__meta,
.compact-page-header__context,
.section-kicker { font-size: var(--crm-type-kicker); }
.workspace-body .module-nav__link,
.context-identity,
.context-nav__link,
.button,
.compact-button { font-size: var(--crm-type-control); }

.messenger-workspace { grid-template-columns: 204px 326px minmax(480px, 1fr) 380px; }
.messenger-workspace--empty { grid-template-columns: 204px 340px minmax(480px, 1fr); }
.conversation-filter-nav a,
.conversation-filter-group a,
.messenger-queue__toolbar input,
.messenger-queue__title h2 { font-size: var(--crm-type-control); }
.conversation-filter-nav b,
.conversation-filter-group b,
.conversation-filter-group > p,
.messenger-filter-summary,
.messenger-queue__title > span { font-size: var(--crm-type-caption); }
.messenger-conversation { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 98px; padding: 14px; }
.messenger-conversation .inbox-avatar { width: 44px; height: 44px; }
.messenger-conversation__topline strong { font-size: var(--crm-type-control); }
.messenger-conversation__topline time,
.messenger-conversation__meta,
.messenger-conversation__signals .unread-count { font-size: var(--crm-type-kicker); }
.messenger-conversation__preview { color: var(--color-text-muted); font-size: var(--crm-type-caption); }

.messenger-thread-header,
.client-inspector__header { min-height: 72px; padding: 12px 16px; }
.messenger-thread-header__identity h1,
.client-inspector__header h2 { font-size: 1rem; }
.messenger-thread-header__identity p,
.client-inspector__header p,
.history-sync-banner small { font-size: var(--crm-type-caption); }
.history-sync-banner strong { font-size: var(--crm-type-control); }
.message-history-nav { font-size: var(--crm-type-control); }
.message-history-nav { background: #0b1727; backdrop-filter: none; }
.messenger-timeline .inbox-messages { gap: 14px; padding: 24px; }
.messenger-timeline .inbox-message__bubble { max-width: min(82%, 720px); padding: 13px 15px 10px; background: #15253a; }
.messenger-timeline .inbox-message--out .inbox-message__bubble { background: oklch(0.32 0.055 278); }
.inbox-message__bubble > p { font-size: var(--crm-type-body); line-height: 1.58; }
.inbox-message__meta { font-size: var(--crm-type-kicker); }
.delivery-error,
.archived-attachment strong { font-size: var(--crm-type-caption); }
.archived-attachment small { font-size: var(--crm-type-kicker); }

.messenger-composer { gap: 10px; padding: 14px 16px 12px; }
.composer-route { grid-template-columns: minmax(118px, auto) minmax(0, 1fr); gap: 6px 12px; }
.composer-route label,
.composer-route select { font-size: var(--crm-type-control); }
.composer-route select { min-height: 42px; background: var(--color-surface); }
.composer-route p,
.messenger-composer > p { font-size: var(--crm-type-kicker); }
.messenger-composer textarea { min-height: 58px; background: var(--color-surface); font-size: var(--crm-type-body); }
.composer-file-button { background: var(--color-surface); }
.composer-send-button { border-color: var(--color-accent); background: var(--color-accent); }

.client-inspector__header { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.client-avatar-refresh { margin: 0; }
.inspector-tabs { gap: 4px; padding: 9px; background: var(--color-surface-soft); }
.inspector-tabs button { min-height: 42px; font-size: var(--crm-type-control); }
.inspector-tabs button[aria-selected="true"] { background: #28456d; }
.inspector-panel { padding: 0 18px 22px; }
.inspector-section { padding-block: 18px; }
.inspector-section h3,
.inspector-section h3 span,
.inspector-status-form label { font-size: var(--crm-type-kicker); }
.inspector-status-form { padding-block: 18px; }
.inspector-status-form select,
.inspector-status-form button { min-height: 42px; height: auto; font-size: var(--crm-type-control); }
.inspector-list { gap: 12px; }
.inspector-list > div { grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: 12px; }
.inspector-list dt,
.inspector-list dd,
.inspector-list code,
.inspector-empty,
.inspector-event-list strong,
.inspector-event-list small,
.client-inspector__footer a { font-size: var(--crm-type-caption); line-height: 1.5; }
.inspector-list dd { color: var(--color-text); }
.inspector-list dd { font-size: var(--crm-type-control); }
.inspector-list code { color: var(--color-accent-strong); }
.client-inspector .tag { min-height: 30px; padding: 5px 9px; font-size: var(--crm-type-caption); }
.client-inspector__footer { padding: 10px 18px; }
.client-inspector__footer a { min-height: 42px; }

@media (max-width: 1560px) {
  .messenger-workspace { grid-template-columns: 320px minmax(480px, 1fr) 380px; }
  .messenger-workspace--empty { grid-template-columns: 340px minmax(480px, 1fr); }
  .messenger-filters { display: none; }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .messenger-workspace { grid-template-columns: 320px minmax(460px, 1fr); }
  .client-inspector { width: min(430px, calc(100vw - 32px)); }
}

@media (max-width: 760px) {
  .messenger-composer :is(textarea, select),
  .inspector-status-form :is(select, button) { font-size: 1rem; }
  .composer-route { grid-template-columns: 1fr; }
  .composer-route p { grid-column: 1; }
  .inspector-list > div { grid-template-columns: 1fr; gap: 4px; }
  .inspector-list dd { text-align: start; }
}

/* CRM filters, readable client card and Telegram-native composer. */
.inbox-query-form { display: grid; gap: 8px; }
.inbox-query-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.inbox-query-row .button { min-height: 40px; padding-inline: 12px; }
.inbox-advanced-filters { border: 1px solid var(--color-border-soft); border-radius: 10px; background: oklch(0.225 0.03 252); }
.inbox-advanced-filters > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; color: var(--color-text-muted); font-size: var(--crm-type-control); font-weight: 680; cursor: pointer; list-style: none; }
.inbox-advanced-filters > summary::-webkit-details-marker { display: none; }
.inbox-advanced-filters > summary .icon { width: 16px; height: 16px; }
.inbox-advanced-filters > summary span { display: grid; place-items: center; min-width: 22px; min-height: 22px; margin-inline-start: auto; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: var(--crm-type-kicker); }
.inbox-filter-grid { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 10px; border-block-start: 1px solid var(--color-border-soft); }
.inbox-filter-grid label { display: grid; gap: 5px; color: var(--color-text-muted); font-size: var(--crm-type-caption); }
.messenger-queue__toolbar .inbox-filter-grid :is(input, select),
.inbox-variable-filter :is(input, select) { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-size: var(--crm-type-control); }
.inbox-variable-filter { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 4px 10px 10px; margin: 0; border: 0; }
.inbox-variable-filter legend { padding: 0; margin-block-end: 5px; color: var(--color-text-muted); font-size: var(--crm-type-caption); }
.inbox-filter-actions { display: flex; align-items: center; gap: 12px; padding: 0 10px 12px; }
.messenger-queue__title { gap: 8px; }
.avatar-batch-form { margin-inline-start: auto !important; }
.avatar-batch-form .text-button { min-height: 32px; color: var(--color-accent-strong); font-size: var(--crm-type-kicker); }
.inbox-priority-note { color: var(--color-warning); font-size: var(--crm-type-kicker); font-weight: 700; }
.messenger-conversation--waiting { box-shadow: inset 3px 0 0 color-mix(in oklch, var(--color-warning) 72%, transparent); }
.waiting-reply-label { color: var(--color-warning); font-size: inherit; }
.conversation-work-nav { display: grid; gap: 4px; padding-block: 12px; margin-block-start: 12px; border-block: 1px solid var(--color-border-soft); }
.conversation-work-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 10px; border-radius: 9px; color: var(--color-text-muted); font-size: var(--crm-type-control); font-weight: 650; }
.conversation-work-nav a:hover,
.conversation-work-nav a.is-active { background: var(--color-accent-soft); color: var(--color-text); }
.conversation-work-nav b { color: var(--color-text-subtle); font-size: var(--crm-type-kicker); font-variant-numeric: tabular-nums; }
.conversation-work-nav a.is-active b { color: var(--color-accent-strong); }
.saved-inbox-views__body { display: grid; gap: 10px; padding: 8px 4px 2px; }
.saved-inbox-views__body > p { margin: 0; color: var(--color-text-subtle); font-size: var(--crm-type-caption); line-height: 1.45; }
.saved-inbox-views__list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
.saved-inbox-views__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.saved-inbox-views__list li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-inbox-views__list form { margin: 0; }
.saved-inbox-views__list button { display: grid; place-items: center; min-width: 34px; min-height: 34px; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-subtle); font: inherit; cursor: pointer; }
.saved-inbox-views__list button:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.saved-inbox-views__form { display: grid; gap: 6px; padding-block-start: 8px; border-block-start: 1px solid var(--color-border-soft); }
.saved-inbox-views__form label { color: var(--color-text-muted); font-size: var(--crm-type-caption); }
.saved-inbox-views__form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.saved-inbox-views__form input { min-width: 0; min-height: 38px; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--crm-type-caption); }
.saved-inbox-views__form button { min-height: 38px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: var(--color-text); font: inherit; font-size: var(--crm-type-caption); font-weight: 700; cursor: pointer; }

.telegram-editor { min-width: 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
.telegram-editor__toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px; border-block-end: 1px solid var(--color-border-soft); background: oklch(0.215 0.028 252); }
.telegram-editor__toolbar button { min-width: 34px; min-height: 34px; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--crm-type-caption); cursor: pointer; }
.telegram-editor__toolbar button:hover { border-color: var(--color-border); background: var(--color-surface-raised); color: var(--color-text); }
.telegram-editor__emoji-picker { position: relative; }
.telegram-editor__emoji-picker > summary { display: grid; place-items: center; min-width: 34px; min-height: 34px; padding: 5px; border: 1px solid transparent; border-radius: 7px; color: var(--color-text); cursor: pointer; list-style: none; }
.telegram-editor__emoji-picker > summary::-webkit-details-marker { display: none; }
.telegram-editor__emoji-picker > summary:hover,
.telegram-editor__emoji-picker[open] > summary { border-color: var(--color-border); background: var(--color-surface-raised); }
.telegram-editor__emoji-picker > div { position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; grid-template-columns: repeat(6, 38px); gap: 3px; width: max-content; padding: 7px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-raised); box-shadow: var(--shadow-panel); }
.telegram-editor__emoji-picker > div button { min-width: 38px; min-height: 38px; padding: 4px; font-size: 18px; }
.messenger-composer .composer-editor { grid-column: 1; }
.composer-fieldset { display: contents; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.composer-unavailable { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-warning) 44%, transparent); border-radius: 10px; background: var(--color-warning-soft); color: var(--color-text); font-size: var(--crm-type-caption); line-height: 1.45; }
.composer-unavailable strong { display: block; margin-block-end: 2px; color: var(--color-warning); }
.messenger-composer--unavailable :is(.telegram-editor, .composer-options, .composer-file-button, .composer-send-button, select) { opacity: 0.56; }
.messenger-composer--unavailable .composer-file-button,
.messenger-composer--unavailable .composer-options > summary { cursor: not-allowed; }
.messenger-composer .telegram-editor textarea { display: block; grid-row: auto; min-height: 76px; border: 0; border-radius: 0; background: transparent; outline: 0; }
.telegram-preview { min-height: 44px; max-height: 150px; padding: 10px 13px; border-block-start: 1px dashed var(--color-border-soft); overflow-y: auto; color: var(--color-text); font-size: var(--crm-type-body); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.telegram-preview__empty { color: var(--color-text-subtle); }
.telegram-preview blockquote,
.telegram-message-text blockquote { padding: 4px 10px; margin: 6px 0; border-inline-start: 3px solid var(--color-accent); background: var(--color-accent-soft); border-radius: 0 7px 7px 0; }
.tg-preview-spoiler { padding-inline: 3px; border-radius: 3px; background: var(--color-text-subtle); color: transparent; }
.tg-preview-spoiler:hover { color: var(--color-text); }
.tg-preview-emoji { display: inline; }
.telegram-preview a,
.telegram-message-text a { color: var(--color-accent-strong); text-decoration: underline; }
.telegram-preview-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 10px; }
.telegram-preview-buttons span { min-height: 36px; padding: 8px 12px; border: 1px solid oklch(0.58 0.12 250); border-radius: 8px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: var(--crm-type-control); font-weight: 700; }
.telegram-message-text { margin: 0; white-space: normal; font-size: var(--crm-type-body); line-height: 1.58; overflow-wrap: anywhere; }
.inbox-message--deleted .telegram-message-text,
.inbox-message--deleted .message-attachment__file,
.inbox-message--deleted .archived-attachment strong { text-decoration: line-through; }
.inbox-message--deleted .message-attachment,
.inbox-message--deleted .archived-attachment { opacity: .68; }
.telegram-message-text pre { max-width: 100%; padding: 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.22); overflow-x: auto; }
.composer-options { grid-column: 1 / -1; border: 1px solid var(--color-border-soft); border-radius: 10px; background: oklch(0.205 0.024 252); }
.composer-options > summary { min-height: 38px; padding: 9px 11px; color: var(--color-text-muted); font-size: var(--crm-type-caption); cursor: pointer; }
.telegram-button-editor { display: grid; gap: 8px; padding: 0 10px 10px; }
.telegram-button-row { display: grid; grid-template-columns: minmax(100px, 0.8fr) minmax(150px, 1.2fr) auto; gap: 7px; }
.telegram-button-row input { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--crm-type-control); }
.telegram-button-editor > p { margin: 0; color: var(--color-warning); font-size: var(--crm-type-caption); }
.video-presentation { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px; margin: 0; border: 0; border-block-start: 1px solid var(--color-border-soft); }
.video-presentation legend { width: 100%; padding: 0; color: var(--color-text-muted); font-size: var(--crm-type-caption); }
.video-presentation label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; font-size: var(--crm-type-control); }
.composer-attachment-status { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 7px 9px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-surface-soft); color: var(--color-text-muted); font-size: var(--crm-type-caption); }
.composer-attachment-status[hidden] { display: none; }
.composer-attachment-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-attachment-status button { min-height: 32px; padding: 4px 8px; border: 0; background: transparent; color: var(--color-danger); font: inherit; font-weight: 700; cursor: pointer; }

.inspector-card-title { padding: 11px 18px; border-block-end: 1px solid var(--color-border-soft); background: var(--color-surface-soft); color: var(--color-text-muted); font-size: var(--crm-type-caption); font-weight: 720; text-transform: uppercase; letter-spacing: 0.06em; }
.client-inspector .inspector-panel { padding-inline: 20px; }
.client-inspector .inspector-section h3,
.client-inspector .inspector-status-form label { font-size: 0.78rem; }
.client-inspector .inspector-list dt,
.client-inspector .inspector-empty { font-size: 0.82rem; }
.client-inspector .inspector-list dd,
.client-inspector .inspector-list code { font-size: 0.88rem; line-height: 1.45; }
.amo-deal-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 11px; border: 1px solid oklch(0.58 0.11 250); border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: var(--crm-type-control); font-weight: 700; }
.amo-deal-link .icon { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .inbox-query-row { grid-template-columns: 1fr; }
  .telegram-button-row { grid-template-columns: 1fr auto; }
  .telegram-button-row input:first-child { grid-column: 1 / -1; }
  .messenger-composer .composer-editor { grid-column: 1 / -1; }
}

/* Final density overrides: keep these after the legacy component layers. */
.quality-metrics,
.operations-metrics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: none; gap: 8px; }
.quality-metrics .metric-card,
.operations-metrics .metric-card { min-height: 82px; padding: 14px 16px; border-color: var(--color-border-soft); background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft)); }
.quality-metrics .metric-card strong,
.operations-metrics .metric-card strong { font-size: 27px; }
.report-definition-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 12px; }
.report-definition-card { padding: 17px; }
.report-definition-card .panel-heading { margin-block-end: 12px; }
.report-definition-card .report-schedule-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--color-border-soft); border-radius: 9px; background: var(--color-border-soft); }
.report-definition-card .report-schedule-meta > div { padding: 9px; border-radius: 0; background: var(--color-surface-soft); }
.report-settings-disclosure { margin-block-start: 11px; border-block-start: 1px solid var(--color-border-soft); }
.report-settings-disclosure > summary { width: fit-content; padding-block: 11px 4px; cursor: pointer; color: var(--color-accent-strong); font-size: 12px; font-weight: 720; }
.report-settings-disclosure[open] > summary { margin-block-end: 8px; }
.report-settings-disclosure .settings-form { gap: 10px; padding: 12px; border-radius: 10px; background: var(--color-surface-soft); }
.report-card-actions { margin-block: 12px 0; }
.policy-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.policy-card--disclosure { padding: 0; overflow: hidden; }
.policy-card--disclosure > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 68px; padding: 14px; cursor: pointer; list-style: none; }
.policy-card--disclosure > summary::-webkit-details-marker { display: none; }
.policy-card--disclosure > summary::after { content: "+"; color: var(--color-text-subtle); font-size: 18px; line-height: 1; }
.policy-card--disclosure[open] > summary::after { content: "−"; }
.policy-card--disclosure .policy-card__body { padding: 0 14px 14px; border-block-start: 1px solid var(--color-border-soft); }
.policy-card--disclosure .policy-meta { margin-block-start: 12px; }
.landing-template-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.landing-template-picker legend { margin-block-end: 8px; color: var(--color-text); font-size: 13px; font-weight: 680; }
.landing-template-picker label { position: relative; display: flex; min-width: 0; cursor: pointer; }
.landing-template-picker input { position: absolute; opacity: 0; pointer-events: none; }
.landing-template-picker span { display: grid; gap: 4px; width: 100%; min-height: 78px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-soft); }
.landing-template-picker small { color: var(--color-text-subtle); font-size: var(--crm-type-kicker, 12px); line-height: 1.45; }
.landing-template-picker input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); }
.landing-template-picker input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 720px) {
  .report-definition-card .report-schedule-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-template-picker { grid-template-columns: 1fr; }
}

.messenger-toast { position: fixed; inset: 78px 20px auto auto; z-index: 80; max-width: min(420px, calc(100vw - 32px)); padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); font-size: var(--crm-type-control); }
.messenger-toast--success { border-color: color-mix(in oklch, var(--color-success) 52%, transparent); }
.messenger-toast--error { border-color: color-mix(in oklch, var(--color-danger) 58%, transparent); }

/* First-class CRM connection picker: dialog bots and personal accounts. */
.inbox-connection-switcher {
  position: relative;
  z-index: 30;
  margin-block-end: 10px;
}

.inbox-connection-switcher > summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: linear-gradient(145deg, oklch(0.245 0.037 260), oklch(0.215 0.03 252));
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.inbox-connection-switcher > summary::-webkit-details-marker { display: none; }
.inbox-connection-switcher > summary:hover,
.inbox-connection-switcher[open] > summary { border-color: color-mix(in oklch, var(--color-accent) 58%, var(--color-border)); }
.inbox-connection-switcher > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.inbox-connection-switcher__avatar,
.inbox-connection-option__icon {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in oklch, var(--color-accent-soft) 76%, var(--color-surface));
  color: var(--color-accent-strong);
}

.inbox-connection-switcher__avatar { width: 38px; height: 38px; }
.inbox-connection-switcher__avatar .icon { width: 19px; height: 19px; }
.inbox-connection-switcher__current { display: grid; min-width: 0; gap: 1px; }
.inbox-connection-switcher__current small,
.inbox-connection-switcher__current span {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-kicker);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-connection-switcher__current strong {
  overflow: hidden;
  font-size: var(--crm-type-control);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-connection-switcher__chevron { color: var(--color-text-subtle); font-size: 19px; text-align: center; transition: transform 150ms ease; }
.inbox-connection-switcher[open] .inbox-connection-switcher__chevron { transform: rotate(180deg); }

.inbox-connection-switcher__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  z-index: 40;
  max-height: min(430px, calc(100vh - 180px));
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: oklch(0.205 0.028 252);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42);
  overflow-y: auto;
}

.inbox-connection-switcher__menu nav { display: grid; gap: 3px; padding: 7px; }
.inbox-connection-switcher__menu nav a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--color-text-muted);
}
.inbox-connection-switcher__menu nav a:hover { background: var(--color-surface-raised); color: var(--color-text); }
.inbox-connection-switcher__menu nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.inbox-connection-switcher__menu nav a.is-active { border-color: color-mix(in oklch, var(--color-accent) 52%, transparent); background: var(--color-accent-soft); color: var(--color-text); }
.inbox-connection-switcher__menu nav a > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.inbox-connection-switcher__menu nav a strong,
.inbox-connection-switcher__menu nav a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-connection-switcher__menu nav a strong { font-size: var(--crm-type-control); }
.inbox-connection-switcher__menu nav a small { color: var(--color-text-subtle); font-size: var(--crm-type-kicker); }
.inbox-connection-switcher__menu nav a b { color: var(--color-text-subtle); font-size: var(--crm-type-kicker); font-variant-numeric: tabular-nums; }
.inbox-connection-switcher__menu nav a > .icon { width: 15px; height: 15px; color: var(--color-accent-strong); }
.inbox-connection-option__icon { width: 34px; height: 34px; }
.inbox-connection-option__icon .icon { width: 16px; height: 16px; }
.inbox-connection-switcher__group { padding: 9px 9px 4px; margin: 0; color: var(--color-text-subtle); font-size: var(--crm-type-kicker); font-weight: 740; letter-spacing: 0.055em; text-transform: uppercase; }
.inbox-connection-switcher__empty { padding: 7px 10px 9px; margin: 0; color: var(--color-text-subtle); font-size: var(--crm-type-caption); line-height: 1.45; }
.inbox-connection-switcher__manage { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 9px 13px; border-block-start: 1px solid var(--color-border-soft); color: var(--color-accent-strong); font-size: var(--crm-type-caption); font-weight: 680; }
.inbox-connection-switcher__manage:hover { background: var(--color-surface-raised); }
.inbox-connection-switcher__manage .icon { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .inbox-connection-switcher__chevron { transition: none; }
}

/* Progressive disclosure: keep primary work visible and move occasional controls one level deeper. */
.page-actions-menu { position: relative; z-index: 35; }
.page-actions-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  list-style: none;
  cursor: pointer;
}
.page-actions-menu > summary::-webkit-details-marker { display: none; }
.page-actions-menu > summary .icon { width: 17px; height: 17px; }
.page-actions-menu[open] > summary { border-color: var(--color-accent); background: var(--color-accent-soft); }
.page-actions-menu > nav {
  position: absolute;
  inset-block-start: calc(100% + 7px);
  inset-inline-end: 0;
  display: grid;
  min-width: 250px;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: var(--color-surface-raised);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
.page-actions-menu > nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-control);
}
.page-actions-menu > nav a:hover { background: var(--color-accent-soft); color: var(--color-text); }
.page-actions-menu > nav a:focus-visible { outline: 2px solid var(--color-focus, var(--color-accent)); outline-offset: -2px; }
.page-actions-menu > nav .icon { width: 17px; height: 17px; color: var(--color-accent-strong); }

.client-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  padding: 1px;
  border: 1px solid var(--color-border-soft);
  border-radius: 11px;
  background: var(--color-border-soft);
  overflow: hidden;
}
.client-summary-strip > div { min-width: 0; padding: 11px 14px; background: var(--color-surface-soft); }
.client-summary-strip dt { color: var(--color-text-subtle); font-size: var(--crm-type-caption); line-height: 1.35; }
.client-summary-strip dd { margin: 3px 0 0; color: var(--color-text); font-size: 1.25rem; font-weight: 720; font-variant-numeric: tabular-nums; line-height: 1.15; }
.client-summary-strip .has-attention dd { color: var(--color-warning); }
.client-summary-strip .is-current { background: color-mix(in oklch, var(--color-accent-soft) 64%, var(--color-surface-soft)); }
.client-summary-strip .is-current dd { color: var(--color-accent-strong); }

.filters--leads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lead-filter-primary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.lead-filter-primary .button { min-height: 42px; }
.lead-filter-disclosure,
.saved-filter-disclosure { border-block-start: 1px solid var(--color-border-soft); }
.lead-filter-disclosure > summary,
.saved-filter-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding-block: 8px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-control);
  font-weight: 680;
  list-style: none;
  cursor: pointer;
}
.lead-filter-disclosure > summary::-webkit-details-marker,
.saved-filter-disclosure > summary::-webkit-details-marker { display: none; }
.lead-filter-disclosure > summary::after,
.saved-filter-disclosure > summary::after { content: "⌄"; margin-inline-start: auto; color: var(--color-text-subtle); font-size: 18px; }
.lead-filter-disclosure[open] > summary::after,
.saved-filter-disclosure[open] > summary::after { transform: rotate(180deg); }
.lead-filter-disclosure > summary .icon { width: 16px; height: 16px; color: var(--color-accent-strong); }
.lead-filter-disclosure > summary span,
.saved-filter-disclosure > summary span { padding: 2px 7px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: var(--crm-type-kicker); }
.lead-filter-secondary { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)) auto; align-items: end; gap: 10px; padding-block: 4px 6px; }
.saved-filter-disclosure { margin-block-start: 12px; }
.saved-filter-disclosure .saved-filter-bar { padding-block-start: 5px; margin-block-start: 0; border-block-start: 0; }

.conversation-filter-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-caption);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.conversation-filter-disclosure > summary::-webkit-details-marker { display: none; }
.conversation-filter-disclosure > summary::after { content: "⌄"; color: var(--color-text-subtle); font-size: 17px; }
.conversation-filter-disclosure[open] > summary::after { transform: rotate(180deg); }
.conversation-filter-disclosure > summary b { max-width: 130px; margin-inline-start: auto; overflow: hidden; color: var(--color-accent-strong); font-size: var(--crm-type-kicker); text-overflow: ellipsis; white-space: nowrap; }
.conversation-filter-disclosure nav { padding-block-start: 3px; }

.telegram-editor__toolbar { align-items: center; }
.telegram-editor__more { min-width: 0; }
.telegram-editor__more > summary {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-caption);
  list-style: none;
  cursor: pointer;
}
.telegram-editor__more > summary::-webkit-details-marker { display: none; }
.telegram-editor__more > summary:hover,
.telegram-editor__more[open] > summary { border-color: var(--color-border); background: var(--color-surface-raised); color: var(--color-text); }
.telegram-editor__more[open] { flex-basis: 100%; }
.telegram-editor__more > div { display: flex; flex-wrap: wrap; gap: 4px; padding-block-start: 4px; }

.inspector-section--disclosure { padding-block: 0; }
.inspector-section--disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  color: var(--color-text-muted);
  font-size: var(--crm-type-caption);
  font-weight: 720;
  list-style: none;
  cursor: pointer;
}
.inspector-section--disclosure > summary::-webkit-details-marker { display: none; }
.inspector-section--disclosure > summary::after { content: "⌄"; margin-inline-start: auto; color: var(--color-text-subtle); font-size: 17px; }
.inspector-section--disclosure[open] > summary::after { transform: rotate(180deg); }
.inspector-section--disclosure > summary span { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: var(--color-surface-raised); color: var(--color-text-subtle); font-size: var(--crm-type-kicker); text-align: center; }
.inspector-section__body { padding-block: 0 15px; }

.control-settings-disclosure { margin-block: 18px; }
.control-settings-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
  list-style: none;
  cursor: pointer;
}
.control-settings-disclosure > summary::-webkit-details-marker { display: none; }
.control-settings-disclosure > summary span { display: grid; gap: 3px; }
.control-settings-disclosure > summary strong { color: var(--color-text); font-size: var(--crm-type-body); }
.control-settings-disclosure > summary small { color: var(--color-text-subtle); font-size: var(--crm-type-caption); line-height: 1.4; }
.control-settings-disclosure > summary .icon { width: 20px; height: 20px; color: var(--color-accent-strong); }
.control-settings-disclosure > summary:hover,
.control-settings-disclosure[open] > summary { border-color: color-mix(in oklch, var(--color-accent) 52%, var(--color-border)); background: var(--color-surface); }
.control-settings-disclosure__body { display: grid; gap: 16px; padding-block-start: 16px; }
.control-settings-disclosure__body > .panel { margin: 0; }

@media (max-width: 960px) {
  .conversation-filter-group.conversation-filter-disclosure { display: block; margin-block-start: 12px; }
}

@media (max-width: 840px) {
  .client-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-filter-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-filter-secondary .button { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .page-actions-menu > nav { width: min(280px, calc(100vw - 24px)); min-width: 0; }
  .client-summary-strip { grid-template-columns: 1fr 1fr; }
  .client-summary-strip > div { padding: 10px; }
  .lead-filter-primary,
  .lead-filter-secondary { grid-template-columns: 1fr; }
  .lead-filter-primary .button,
  .lead-filter-secondary .button { width: 100%; }
  .saved-filter-disclosure .saved-filter-bar { align-items: stretch; flex-direction: column; }
  .save-filter-form input[type="text"] { width: 100%; }
}

/* Messenger identity: keep the client photo primary and make the source scannable. */
.messenger-source--telegram { --messenger-source-color: oklch(0.75 0.15 232); }
.messenger-source--max { --messenger-source-color: oklch(0.75 0.16 293); }

.messenger-avatar {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: fit-content;
  height: fit-content;
  isolation: isolate;
}

.messenger-source-badge--avatar {
  position: absolute;
  inset-inline-end: -4px;
  inset-block-end: -3px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid var(--color-surface-soft);
  border-radius: 999px;
  background: color-mix(in oklch, var(--messenger-source-color) 24%, oklch(0.18 0.025 252));
  color: var(--messenger-source-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.messenger-source-badge--avatar .icon { width: 11px; height: 11px; stroke-width: 2.15; }

.messenger-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 7px 2px 5px;
  border: 1px solid color-mix(in oklch, var(--messenger-source-color) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--messenger-source-color) 12%, transparent);
  color: var(--messenger-source-color);
  font-size: max(var(--crm-type-kicker), 0.72rem);
  font-weight: 720;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.messenger-source .icon { width: 13px; height: 13px; flex: 0 0 auto; stroke-width: 2; }
.messenger-source-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.lead-connection { display: grid; gap: 4px; align-items: start; }
.lead-connection small { color: var(--color-text-subtle); font-size: var(--crm-type-caption); line-height: 1.35; }

.inbox-connection-switcher__avatar.messenger-source--telegram,
.inbox-connection-option__icon.messenger-source--telegram,
.inbox-connection-switcher__avatar.messenger-source--max,
.inbox-connection-option__icon.messenger-source--max {
  background: color-mix(in oklch, var(--messenger-source-color) 14%, var(--color-surface));
  color: var(--messenger-source-color);
}

.messenger-conversation__meta .messenger-source {
  min-height: 19px;
  padding: 1px 5px 1px 4px;
  font-size: inherit;
}
.messenger-conversation__meta .messenger-source .icon { width: 11px; height: 11px; }
.messenger-thread-header__identity p,
.client-inspector__header p { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.lead-mobile-card__main > .messenger-avatar .inbox-avatar { width: 40px; height: 40px; }

@media (forced-colors: active) {
  .messenger-source,
  .messenger-source-badge--avatar { border-color: CanvasText; color: CanvasText; forced-color-adjust: auto; }
}

/* Keep the builder's compact service rail visible in tablet-width workspaces. */
@media (min-width: 640px) and (max-width: 960px) {
  body.builder-page .app-shell {
    display: grid;
    grid-template-columns: var(--global-rail-width) minmax(0, 1fr);
  }

  body.builder-page .global-rail {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    width: var(--global-rail-width);
    min-width: var(--global-rail-width);
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    padding: 8px 12px 10px;
    flex-direction: column;
    border-inline-end: 1px solid rgba(151, 166, 190, 0.13);
  }

  body.builder-page .global-rail__modules,
  body.builder-page .global-rail__footer {
    flex-direction: column;
  }

  body.builder-page .global-rail__modules {
    margin: 16px 0 0;
  }

  body.builder-page .app-frame {
    display: block;
    grid-column: auto;
  }

  body.builder-page .mobile-header {
    display: none;
  }

  body.builder-page .builder {
    min-height: 100vh;
  }
}

.channel-routing-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 24px; max-width: 960px; min-width: 0; }
.feedback + .channel-routing-form { margin-block-start: 16px; }
.channel-routing-form .row-actions { min-width: 0; flex-wrap: wrap; gap: 12px; }
.channel-routing-form section, .channel-routing-form details { display: block; min-width: 0; }
.channel-routing-form section > * + *, .channel-routing-form details > * + * { margin-block-start: 16px; }
.channel-routing-form p { color: var(--color-text-muted); }
.channel-routing-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.channel-routing-form .field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.channel-routing-form input:not([type=checkbox]), .channel-routing-form select, .channel-routing-form textarea { width: 100%; min-width: 0; }
.channel-routing-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.channel-routing-toggle input { flex: 0 0 auto; }
.channel-routing-form summary { cursor: pointer; padding-block: 8px; }

/* CRM inbox workspace: user-controlled panes and a denser conversation surface. */
.messenger-workspace[data-inbox-layout] {
  --inbox-filters-width: 196px;
  --inbox-queue-width: 330px;
  --inbox-inspector-width: 360px;
}

@media (min-width: 1181px) {
  .messenger-workspace--selected[data-inbox-layout] {
    grid-template-columns:
      var(--inbox-filters-width)
      var(--inbox-queue-width)
      minmax(340px, 1fr)
      8px
      var(--inbox-inspector-width);
  }

  .messenger-workspace--selected[data-inbox-layout].is-filters-collapsed {
    grid-template-columns: var(--inbox-queue-width) minmax(420px, 1fr) 8px var(--inbox-inspector-width);
  }

  .messenger-workspace--selected[data-inbox-layout].is-inspector-collapsed {
    grid-template-columns: var(--inbox-filters-width) var(--inbox-queue-width) minmax(480px, 1fr);
  }

  .messenger-workspace--selected[data-inbox-layout].is-filters-collapsed.is-inspector-collapsed {
    grid-template-columns: var(--inbox-queue-width) minmax(520px, 1fr);
  }

  .messenger-workspace--empty[data-inbox-layout] {
    grid-template-columns: var(--inbox-filters-width) 340px minmax(480px, 1fr);
  }

  .messenger-workspace--empty[data-inbox-layout].is-filters-collapsed {
    grid-template-columns: 340px minmax(520px, 1fr);
  }

  .messenger-workspace[data-inbox-layout]:not(.is-filters-collapsed) > .messenger-filters {
    display: flex;
  }

  .messenger-workspace[data-inbox-layout].is-filters-collapsed > .messenger-filters,
  .messenger-workspace[data-inbox-layout].is-inspector-collapsed > :is(.client-inspector, .client-inspector-resizer) {
    display: none;
  }

  .messenger-inspector-toggle {
    display: inline-flex;
  }
}

.messenger-queue__layout-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
  margin-block-end: 8px;
}

.inbox-pane-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--crm-type-caption);
  cursor: pointer;
}

.inbox-pane-toggle:hover,
.inbox-pane-toggle[aria-expanded="false"] {
  border-color: var(--color-border-soft);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.inbox-pane-toggle .icon {
  width: 15px;
  height: 15px;
}

.inbox-pane-toggle:focus-visible,
.client-inspector-resizer:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
}

.client-inspector-resizer {
  position: relative;
  z-index: 2;
  display: block;
  min-width: 8px;
  min-height: 0;
  border: 0;
  border-inline: 1px solid transparent;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.client-inspector-resizer::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
}

.client-inspector-resizer span {
  position: absolute;
  inset-block: 50%;
  inset-inline-start: 50%;
  width: 3px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-border);
  transform: translate(-50%, -50%);
}

.client-inspector-resizer:hover span,
.client-inspector-resizer:focus-visible span,
.is-resizing-inspector .client-inspector-resizer span {
  background: var(--color-accent-strong);
}

.is-resizing-inspector {
  cursor: col-resize;
  user-select: none;
}

.messenger-workspace[data-inbox-layout] > .client-inspector {
  border-inline-start: 0;
}

.messenger-workspace[data-inbox-layout] .messenger-queue__toolbar {
  padding: 10px 12px 9px;
}

.messenger-workspace[data-inbox-layout] .messenger-conversation {
  min-height: 84px;
  padding: 11px 12px;
}

.messenger-workspace[data-inbox-layout] .messenger-thread-header,
.messenger-workspace[data-inbox-layout] .client-inspector__header {
  min-height: 62px;
  padding: 9px 12px;
}

.messenger-workspace[data-inbox-layout] .messenger-timeline .inbox-messages {
  gap: 12px;
  padding: 18px clamp(12px, 2vw, 28px);
}

.messenger-workspace[data-inbox-layout] .messenger-timeline .inbox-message__bubble {
  max-width: min(84%, 760px);
  padding: 11px 13px 9px;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035);
}

.messenger-workspace[data-inbox-layout] .messenger-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  padding: 9px 12px 8px;
  background: #0c1828;
}

.messenger-workspace[data-inbox-layout] .composer-route {
  grid-column: 1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
}

.messenger-workspace[data-inbox-layout] .composer-route select {
  min-height: 36px;
  padding-block: 6px;
  border-color: var(--color-border-soft);
  background: var(--color-surface);
}

.messenger-workspace[data-inbox-layout] .telegram-editor {
  border-color: var(--color-border-soft);
  border-radius: 10px;
  background: #111f32;
}

.messenger-workspace[data-inbox-layout] .telegram-editor__toolbar {
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px 5px;
  overflow-x: auto;
  border-block-end-color: rgba(151, 166, 190, 0.1);
  background: transparent;
  scrollbar-width: none;
}

.messenger-workspace[data-inbox-layout] .telegram-editor__toolbar::-webkit-scrollbar {
  display: none;
}

.messenger-workspace[data-inbox-layout] .telegram-editor__toolbar button,
.messenger-workspace[data-inbox-layout] .telegram-editor__more > summary {
  min-width: 32px;
  min-height: 30px;
  padding: 4px 7px;
}

.messenger-workspace[data-inbox-layout] .telegram-editor textarea,
.messenger-workspace[data-inbox-layout] .messenger-composer textarea {
  min-height: 54px;
  max-height: 120px;
  padding: 10px 12px;
  font-size: var(--crm-type-body);
  resize: vertical;
}

.messenger-workspace[data-inbox-layout] .composer-preview > summary {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
}

.messenger-workspace[data-inbox-layout] .composer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 7px;
}

.messenger-workspace[data-inbox-layout] .composer-options {
  grid-column: auto;
  border-color: transparent;
  background: transparent;
}

.messenger-workspace[data-inbox-layout] .composer-options[open] {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
}

.messenger-workspace[data-inbox-layout] .composer-options > summary {
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid var(--color-border-soft);
  border-radius: 9px;
  background: #101d2e;
}

.messenger-workspace[data-inbox-layout] .composer-options[open] > summary {
  border-color: transparent;
  border-block-end-color: var(--color-border-soft);
  border-radius: 9px 9px 0 0;
}

.messenger-workspace[data-inbox-layout] .composer-file-button,
.messenger-workspace[data-inbox-layout] .composer-send-button {
  min-width: 42px;
  height: 42px;
  border-radius: 10px;
}

.messenger-workspace[data-inbox-layout] .composer-file-button {
  width: auto;
  gap: 6px;
  padding-inline: 10px;
}

.messenger-workspace[data-inbox-layout] .messenger-composer > p {
  color: var(--color-text-subtle);
  font-size: 11px;
  line-height: 1.3;
}

.messenger-workspace[data-inbox-layout] .client-inspector .inspector-panel {
  padding-inline: 16px;
}

.messenger-workspace[data-inbox-layout] .client-inspector .inspector-section,
.messenger-workspace[data-inbox-layout] .client-inspector .inspector-status-form {
  padding-block: 14px;
}

@media (max-width: 1360px) and (min-width: 1181px) {
  .messenger-workspace[data-inbox-layout] {
    --inbox-filters-width: 188px;
    --inbox-queue-width: 290px;
  }
}

@media (max-width: 1180px) {
  .client-inspector-resizer,
  .messenger-queue__layout-controls {
    display: none;
  }

  .messenger-workspace[data-inbox-layout] .messenger-thread-header {
    min-height: 60px;
  }

  .messenger-workspace[data-inbox-layout] .messenger-composer {
    padding-inline: 10px;
  }
}

@media (max-width: 560px) {
  .messenger-workspace[data-inbox-layout] .messenger-composer {
    gap: 5px;
    padding-block: 7px 6px;
  }

  .messenger-workspace[data-inbox-layout] .composer-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .messenger-workspace[data-inbox-layout] .composer-actions > :is(.composer-file-button, .composer-send-button) {
    grid-column: auto;
    grid-row: auto;
    align-self: end;
  }

  .messenger-workspace[data-inbox-layout] .composer-file-button {
    width: 42px;
    padding-inline: 0;
  }

  .messenger-workspace[data-inbox-layout] .composer-file-button__label {
    display: none;
  }

  .telegram-editor__emoji-picker > div {
    position: fixed;
    inset-inline: 12px;
    inset-block-start: auto;
    inset-block-end: calc(12px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(6, minmax(38px, 1fr));
    width: auto;
  }

  .messenger-workspace[data-inbox-layout] .composer-route label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .messenger-workspace[data-inbox-layout] .composer-route select {
    grid-column: 1 / -1;
  }

  .messenger-workspace[data-inbox-layout] .messenger-composer > p {
    display: none;
  }
}

@media (forced-colors: active) {
  .client-inspector-resizer span {
    background: CanvasText;
  }
}

/* Compact integrations: scan connections first, disclose technical data on demand. */
.integration-list {
  display: grid;
  gap: 8px;
}

.integration-list__heading {
  margin-block-end: 4px;
}

.integration-card.integration-card--compact {
  display: block;
  padding: 0;
  overflow: clip;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: none;
}

.integration-card--compact[open] {
  border-color: var(--color-border-strong);
}

.integration-card__summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(330px, 0.9fr) auto 20px;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}

.integration-card__summary::-webkit-details-marker,
.integration-card__section > summary::-webkit-details-marker {
  display: none;
}

.integration-card__summary:hover {
  background: var(--theme-overlay);
}

.integration-card__summary:focus-visible,
.integration-card__section > summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.integration-card__identity,
.integration-card__name,
.integration-card__summary-metrics,
.integration-card__summary-metrics > span,
.integration-card__section > summary > span {
  min-width: 0;
}

.integration-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.integration-card__name {
  display: grid;
  gap: 2px;
}

.integration-card__name > strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--crm-type-control);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-card__name > code {
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-card--compact .integration-card__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--theme-overlay-strong);
  color: var(--color-text);
  overflow: hidden;
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}

:root[data-theme="dark"] .integration-card--compact .integration-card__icon {
  outline-color: oklch(1 0 0 / 0.1);
}

.integration-brand-mark {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-variant-ligatures: none;
  line-height: 1;
}

.integration-card__icon--fxpro {
  background: #f41112 !important;
  color: #fff !important;
}

.integration-brand-mark--fxpro {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.integration-card__icon--vantage {
  background: #191919 !important;
  color: #fff !important;
}

.integration-brand-mark--vantage {
  position: relative;
  display: block;
  width: 20px;
  height: 18px;
}

.integration-brand-mark--vantage i {
  position: absolute;
  inset-block-start: 2px;
  width: 5px;
  height: 16px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 100%;
}

.integration-brand-mark--vantage i:first-child {
  inset-inline-start: 4px;
  transform: rotate(-31deg);
}

.integration-brand-mark--vantage i:last-child {
  inset-inline-end: 4px;
  background: #f04b32;
  transform: rotate(31deg);
}

.integration-card__icon--bullwaves {
  background: #16647a !important;
  color: #fff !important;
}

.integration-brand-mark--bullwaves {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.integration-card__summary-metrics {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr 0.6fr;
  gap: 12px;
}

.integration-card__summary-metrics > span {
  display: grid;
  gap: 2px;
}

.integration-card__summary-metrics small {
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.integration-card__summary-metrics strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--crm-type-caption);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-card__chevron {
  display: inline-grid;
  place-items: center;
  color: var(--color-text-subtle);
}

.integration-card__chevron .icon,
.integration-card__section > summary > .icon {
  width: 16px;
  height: 16px;
  transition: transform 150ms ease-out;
}

.integration-card--compact[open] > .integration-card__summary .integration-card__chevron .icon,
.integration-card__section[open] > summary > .icon {
  transform: rotate(90deg);
}

.integration-card__body {
  display: grid;
  gap: 8px;
  padding: 10px 14px 14px;
  border-block-start: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
}

.integration-card__body > * {
  grid-area: auto;
  grid-column: 1;
}

.integration-card__utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  color: var(--color-text-subtle);
  font-size: var(--crm-type-caption);
}

.integration-card__utility code {
  color: var(--color-text);
}

.integration-card__section {
  overflow: clip;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: var(--color-surface);
}

.integration-card__section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
}

.integration-card__section > summary:hover {
  background: var(--theme-overlay);
}

.integration-card__section > summary > span {
  display: grid;
  gap: 2px;
}

.integration-card__section > summary strong {
  color: var(--color-text);
  font-size: var(--crm-type-control);
  line-height: 1.25;
}

.integration-card__section > summary small {
  color: var(--color-text-subtle);
  font-size: var(--crm-type-caption);
  line-height: 1.3;
}

.integration-card__section-body,
.integration-card__section > form {
  padding: 12px;
  border-block-start: 1px solid var(--color-border-soft);
}

.integration-card--compact .integration-template,
.integration-card--compact .integration-feed-status {
  padding: 0;
  border: 0;
  background: transparent;
}

.integration-card--compact .integration-template__tracking {
  margin-block-start: 0;
}

.integration-card--compact .integration-card__actions {
  justify-content: flex-end;
  padding-block-start: 4px;
}

@media (max-width: 980px) {
  .integration-card__summary {
    grid-template-columns: minmax(190px, 1fr) minmax(280px, 1fr) auto 20px;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .integration-card__summary {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    min-height: 0;
    padding: 12px;
  }

  .integration-card__summary-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-inline-start: 44px;
  }

  .integration-card__body {
    padding: 8px;
  }

  .integration-card__utility {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 2px 4px;
  }

  .integration-card__section > summary {
    min-height: 52px;
  }
}

@media (max-width: 440px) {
  .integration-card__summary-metrics {
    grid-template-columns: 0.6fr 1.4fr 0.6fr;
    gap: 8px;
    padding-inline-start: 0;
  }

  .integration-card__summary-metrics small {
    font-size: 9px;
  }

  .integration-card__section > summary small,
  .integration-card__utility > :last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .integration-card__chevron .icon,
  .integration-card__section > summary > .icon {
    transition: none;
  }
}