:root {
  --bg: #eef3f8;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7faff;
  --line: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --navy: #0f172a;
  --navy-soft: #1e293b;
  --green: #16a34a;
  --green-bg: #ecfdf3;
  --amber: #b45309;
  --amber-bg: #fff7ed;
  --info-bg: #e8f0ff;
  --shadow-card: 0 18px 30px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 20px rgba(15, 23, 42, 0.06);
  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-family: Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body.app-body {
  overflow-x: hidden;
  overflow-y: auto;
}

body.auth-body {
  overflow: hidden;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.auth-stage {
  min-height: 100svh;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-frame {
  width: min(1320px, calc(100vw - 32px));
  height: calc(100svh - 32px);
  max-height: calc(100svh - 32px);
  min-height: 0;
  background: #f5f8ff;
  border: 1px solid #d7dfeb;
  border-radius: 32px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(460px, 540px) minmax(380px, 430px);
  justify-content: space-between;
  align-items: stretch;
  padding: 28px 32px;
  gap: 30px;
}

.auth-hero {
  min-height: 0;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}


.auth-brand-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.auth-brand-logo {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  flex: 0 0 auto;
}

.auth-brand-kicker {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.auth-hero h1 {
  margin: 0 0 14px;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 900;
}

.auth-hero p {
  margin: 0;
  max-width: 360px;
  line-height: 1.45;
  font-size: 14px;
  color: #dbeafe;
}

.auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.auth-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  flex: 0 0 40px;
}

.auth-feature-card strong,
.auth-feature-card span {
  display: block;
}

.auth-feature-card strong {
  font-size: 15px;
  margin-bottom: 4px;
}

.auth-feature-card span {
  font-size: 12px;
  color: #dbeafe;
}

.login-card {
  width: min(100%, 420px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  align-self: center;
}

.login-card h2 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.05;
}

.login-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.login-note-card {
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 14px 16px;
}

.login-note-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.login-note-card p {
  font-size: 13px;
}

.auth-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.field-label.required-field > span {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.field-label.required-field > span::after {
  content: "*";
  color: #dc2626;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.primary-button {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.ghost-button {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
}

.primary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
  filter: brightness(0.99);
}

.full-width {
  width: 100%;
}

.compact-button {
  min-height: 44px;
  padding: 0 16px;
}

.inline-alert {
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 600;
}

.inline-alert.error {
  background: #fff1f1;
  border: 1px solid #f3caca;
  color: #8c2b2b;
}

.inline-alert.success {
  background: #edf9f1;
  border: 1px solid #cfe9d6;
  color: #1d6a43;
}

.app-shell {
  min-height: 100vh;
  background: #f8fafc;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 264px;
  background: var(--navy);
  color: #fff;
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0;
  z-index: 30;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.brand-title {
  font-size: 20px;
  font-weight: 800;
}

.brand-subtitle {
  font-size: 13px;
  color: var(--muted-2);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-link {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  color: #94a3b8;
  font-size: 15px;
  font-weight: 600;
}

.sidebar-link.is-active {
  background: var(--navy-soft);
  color: #f8fafc;
  position: relative;
}

.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: var(--blue);
}

.sidebar-link.is-muted {
  cursor: default;
}

.sidebar-user-card {
  margin-top: auto;
  background: var(--navy-soft);
  border-radius: 18px;
  padding: 16px 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #1e40af;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.sidebar-user-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-user-copy strong {
  font-size: 14px;
}

.sidebar-user-copy span {
  font-size: 12px;
  color: var(--muted-2);
}

.sidebar-logout-form {
  grid-column: 1 / -1;
}

.sidebar-logout {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
}

.app-main {
  margin-left: 264px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.shell-header {
  min-height: 88px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.shell-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
}

.shell-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.header-statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.success,
.status-pill.green {
  background: var(--green-bg);
  color: var(--green);
}

.status-pill.info,
.status-pill.indigo {
  background: var(--info-bg);
  color: var(--blue);
}

.status-pill.warn,
.status-pill.amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.page-content {
  flex: 1;
  min-height: 0;
  padding: 24px 32px 28px;
  background: #f5f8ff;
}

.page-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - 140px);
}

.surface-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-header h3,
.section-header h2 {
  margin: 0;
}

.section-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.hero-panel {
  min-height: 220px;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 314px;
  gap: 24px;
  color: #fff;
}

.hero-copy h2 {
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 900;
}

.hero-copy p {
  margin: 0;
  max-width: 640px;
  color: #dbeafe;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}

.hero-status-card {
  align-self: start;
  padding: 20px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-status-caption,
.hero-status-time-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}

.hero-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 20px;
}

.hero-status-time {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 900;
}

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

.metric-card {
  min-height: 112px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.metric-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.metric-dot {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.12);
}

.metric-card.accent-green .metric-dot {
  background: rgba(22, 163, 74, 0.12);
}

.metric-card.accent-amber .metric-dot {
  background: rgba(180, 83, 9, 0.12);
}

.metric-card.accent-indigo .metric-dot {
  background: rgba(59, 130, 246, 0.12);
}

.metric-badge {
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  background: var(--info-bg);
}

.metric-label {
  font-size: 12px;
  color: var(--muted);
}

.metric-value {
  margin-top: 6px;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.action-list-card,
.status-board-card {
  padding: 18px;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.action-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.action-step {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--info-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.action-item strong,
.action-item span {
  display: block;
}

.action-item strong {
  font-size: 14px;
}

.action-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.system-health-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.system-health-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.system-health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.system-health-row strong {
  font-size: 14px;
}

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
}

.progress-fill.tone-green {
  background: var(--green);
}

.progress-fill.tone-indigo,
.progress-fill.tone-info {
  background: var(--blue);
}

.progress-fill.tone-amber,
.progress-fill.tone-warn {
  background: #d97706;
}

.toolbar-card {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.search-form-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  flex: 1 1 460px;
}

.toolbar-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar-action-button {
  padding: 10px 14px;
  font-size: 13px;
}

.contacts-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) 340px;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.contacts-list-card,
.compose-card {
  padding: 18px;
  min-height: 0;
}

.contacts-list-card {
  display: flex;
  flex-direction: column;
}

.list-section-header {
  margin-bottom: 10px;
}

.table-scroll-area {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.data-table th,
.data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #edf2f7;
  font-size: 13px;
  vertical-align: middle;
}

.contact-row {
  background: #fff;
  transition: background 0.15s ease;
}

.contact-row:hover {
  background: #f8fbff;
}

.contact-row.is-selected {
  background: #eef4ff;
}

.contact-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  accent-color: var(--blue);
}

.muted-copy {
  color: var(--muted-2);
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 0;
}

.pager-link,
.pager-current {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}

.pager-link.is-disabled {
  color: var(--muted-2);
}

.compose-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.compact-header {
  margin-bottom: 2px;
}

.textarea-field textarea {
  min-height: 132px;
}

.preview-card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 14px 16px;
}

.preview-card strong,
.preview-card span {
  display: block;
}

.preview-card strong {
  margin-bottom: 10px;
}

.preview-card span {
  font-size: 12px;
  color: var(--muted);
}

.preview-card p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
}

.empty-state-card {
  padding: 26px 28px;
}

.empty-state-card h2 {
  margin: 0 0 10px;
}

.empty-state-card p {
  margin: 0 0 18px;
  color: var(--muted);
}

.empty-table-state {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
}

.history-summary-card {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.history-summary-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

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

.history-list-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 2px;
}

.history-item-card {
  padding: 22px 24px;
}

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

.history-item-head h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.history-item-head span:not(.status-pill) {
  font-size: 13px;
  color: var(--muted);
}

.history-message {
  margin: 18px 0 16px;
  line-height: 1.45;
}

.history-result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.history-failure-line {
  min-height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.history-details-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
}

.history-details-block {
  color: var(--blue);
}

.history-details-block summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}

.history-details-block summary::-webkit-details-marker {
  display: none;
}

.history-details-block[open] summary {
  margin-bottom: 10px;
}

.history-details-block ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.history-details-block li {
  margin-bottom: 6px;
}

code {
  background: #eef4ff;
  border-radius: 8px;
  padding: 2px 6px;
}

@media (max-width: 1180px) {
  body.auth-body {
    overflow: auto;
  }

  .auth-stage {
    min-height: 100vh;
    display: block;
    padding: 20px;
  }

  .auth-frame {
    width: auto;
    height: auto;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    padding: 24px;
  }

  .auth-hero {
    min-height: 560px;
    height: auto;
  }

  body.app-body {
    overflow: auto;
  }

  .app-shell {
    min-height: 100vh;
  }

  .sidebar {
    position: static;
    width: auto;
    min-height: auto;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .app-main {
    margin-left: 0;
    min-height: 0;
  }

  .shell-header,
  .page-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-panel,
  .metric-grid,
  .dashboard-bottom-grid,
  .contacts-workspace,
  .history-summary-card {
    grid-template-columns: 1fr;
  }

  .dashboard-bottom-grid,
  .contacts-workspace,
  .history-list-scroll,
  .page-stack {
    height: auto;
    min-height: auto;
  }

  .table-scroll-area,
  .history-list-scroll {
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .auth-stage {
    padding: 12px;
  }

  .auth-frame {
    padding: 18px;
  }

  .auth-hero,
  .login-card {
    padding: 24px;
  }

  .hero-copy h2,
  .login-card h2 {
    font-size: 32px;
  }

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

  .toolbar-card {
    align-items: stretch;
  }

  .search-form-bar {
    grid-template-columns: 1fr;
  }

  .table-footer,
  .history-summary-card,
  .history-item-head,
  .history-result-row,
  .history-details-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.newsletter-layout {
  min-height: calc(100vh - 140px);
}

.newsletter-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 360px;
  gap: 18px;
  padding: 18px;
  min-height: 0;
}

.single-column-newsletter {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
}

.newsletter-editor-card,
.newsletter-preview-card {
  min-height: 0;
}

.newsletter-editor-card {
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--line);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

.newsletter-editor-card h2 {
  margin: 0;
  font-size: 28px;
}

.newsletter-fields-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  margin-top: 18px;
}

.newsletter-message-field {
  margin-top: 14px;
}

.newsletter-message-field textarea {
  min-height: 320px;
}

.newsletter-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.muted-inline {
  color: var(--muted);
  font-size: 13px;
}

.newsletter-preview-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f2f7ff;
  border: 1px solid #dbe7fb;
  border-radius: 24px;
  padding: 18px;
}

.newsletter-preview-block {
  background: #ffffff;
}

.newsletter-hint-card {
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.newsletter-hint-card strong {
  display: block;
  margin-bottom: 8px;
}

.newsletter-hint-card p {
  margin: 0;
  color: #365070;
  line-height: 1.5;
  font-size: 13px;
}


.inline-newsletter-hint {
  margin-top: 14px;
}

.empty-state-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.code-snippet-block {
  margin: 18px 0 0;
  padding: 16px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 16px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.5;
}

.campaign-summary-card {
  gap: 16px;
}

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

.summary-pair-card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 14px 16px;
}

.summary-pair-card span,
.summary-pair-card strong {
  display: block;
}

.summary-pair-card span {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.summary-pair-card strong {
  font-size: 15px;
}


.summary-note-card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 14px 16px;
}

.summary-note-card strong {
  display: block;
  margin-bottom: 6px;
}

.summary-note-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.history-export-card {
  min-width: 280px;
  display: grid;
  gap: 12px;
}

.history-export-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.history-export-card .ghost-button {
  width: fit-content;
}

.statistics-layout {
  min-height: calc(100vh - 140px);
}

.statistics-hero {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.statistics-hero h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

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

.statistics-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.statistics-bottom-grid {
  align-items: stretch;
}

.qa-results-block {
  width: 100%;
}

.qa-results-block[open] {
  display: block;
}

.qa-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.qa-answer-column {
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 14px 16px;
  background: #fff;
}

.qa-answer-column.yes {
  background: #f1fbf5;
  border-color: #cfe9d6;
}

.qa-answer-column.no {
  background: #fff7ed;
  border-color: #f2d5ac;
}

.qa-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
}

.qa-answer-head span {
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.08);
  font-size: 12px;
}

.qa-answer-column ul {
  margin: 0;
  padding-left: 18px;
  color: #334155;
}

.qa-answer-column li {
  margin-bottom: 6px;
}

.qa-answer-column p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1180px) {
  .newsletter-form-shell,
  .newsletter-fields-grid,
  .summary-pair-grid,
  .qa-answer-grid {
    grid-template-columns: 1fr;
  }

  .statistics-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* UX rework: single-page campaign flow */
.text-only-brand {
  align-items: flex-start;
  padding: 4px 6px 0;
}

.simple-logout-form {
  margin-top: auto;
  width: 100%;
}

.campaign-flow {
  gap: 16px;
}

.flow-top-card {
  padding: 14px 16px;
}

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

.flow-step {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  text-align: left;
  color: var(--text);
}

.flow-step:disabled {
  cursor: default;
  opacity: 0.58;
}

.flow-step span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e2e8f0;
  color: var(--muted);
  font-weight: 900;
}

.flow-step strong {
  font-size: 15px;
}

.flow-step small {
  color: var(--muted);
  font-size: 12px;
}

.flow-step.is-active {
  border-color: rgba(37, 99, 235, 0.35);
  background: #eef4ff;
}

.flow-step.is-active span {
  background: var(--blue);
  color: #fff;
}

.flow-panel {
  display: none;
}

.flow-panel.is-active {
  display: block;
}

.flow-filter-card {
  align-items: stretch;
  padding: 14px;
}

.campaign-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) minmax(160px, 190px) auto;
  gap: 12px;
  width: 100%;
  align-items: end;
}

.compact-field span {
  margin-bottom: 6px;
}

.compact-field input,
.compact-field select {
  min-height: 46px;
}

.flow-contact-card {
  margin-top: 14px;
  padding: 18px;
}

.contacts-action-row,
.contacts-pagination-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contacts-action-row {
  justify-content: space-between;
  margin-bottom: 14px;
}

.contacts-table-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-row {
  display: grid;
  grid-template-columns: 36px minmax(220px, 1.4fr) minmax(180px, 0.8fr) minmax(150px, 0.65fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
}

.contact-row.is-selected {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.contact-row.is-disabled {
  opacity: 0.66;
  cursor: default;
}

.contact-select-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--blue);
}

.contact-main-cell,
.contact-extra-cell,
.contact-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.contact-main-cell strong,
.contact-main-cell span,
.contact-extra-cell span,
.contact-extra-cell small,
.contact-meta-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-main-cell strong {
  font-size: 15px;
}

.contact-main-cell span,
.contact-extra-cell span,
.contact-extra-cell small,
.contact-meta-cell small {
  color: var(--muted);
  font-size: 13px;
}

.flow-actions-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.split-actions {
  justify-content: space-between;
}

.review-card {
  padding: 20px;
}

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

.full-review-cell {
  grid-column: 1 / -1;
}

.review-message-card,
.review-recipients-card {
  margin-top: 14px;
}

.review-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.review-recipient-list span {
  max-width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  color: #334155;
  font-size: 12px;
}

.contacts-view-hero {
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.contacts-view-hero h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

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

.view-only-row {
  grid-template-columns: minmax(260px, 1.4fr) minmax(200px, 0.8fr) minmax(150px, 0.65fr);
  cursor: default;
}

button:disabled,
.primary-button:disabled,
.ghost-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.primary-button:disabled,
.primary-button.is-disabled {
  background: #8aa4c7;
  color: #f8fafc;
  box-shadow: none;
  opacity: 1;
}

.primary-button:disabled:hover,
.primary-button.is-disabled:hover {
  transform: none;
  filter: none;
}

.compose-validation-text {
  margin: 8px 0 0;
}

@media (max-width: 1180px) {
  .campaign-filter-form,
  .contact-row,
  .view-only-row,
  .review-grid {
    grid-template-columns: 1fr;
  }

  .flow-stepper {
    grid-template-columns: 1fr;
  }

  .contacts-action-row,
  .contacts-view-hero,
  .split-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Corrections: static 3-step campaign screen + final-project-like contacts table */
body.campaign-page {
  overflow: hidden;
}

.campaign-page .app-shell,
.campaign-page .app-main {
  height: 100vh;
  min-height: 0;
}

.campaign-page .page-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.campaign-page .campaign-flow {
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campaign-page .flow-top-card {
  flex: 0 0 auto;
}

.campaign-page .flow-panel {
  min-height: 0;
  flex: 1;
}

.campaign-page .flow-panel.is-active {
  display: flex;
  flex-direction: column;
}

.campaign-page .newsletter-form-shell,
.campaign-page .single-column-newsletter,
.campaign-page .review-card {
  min-height: 0;
  height: 100%;
}

.campaign-page .newsletter-editor-card,
.campaign-page .review-card {
  display: flex;
  flex-direction: column;
}

.campaign-page .newsletter-message-field textarea {
  min-height: 170px;
  max-height: 240px;
}

.campaign-page .flow-filter-card {
  flex: 0 0 auto;
  margin-bottom: 10px;
}

.campaign-page .flow-contact-card {
  flex: 1;
  min-height: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

.campaign-page .contacts-table-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.campaign-page .flow-actions-row {
  flex: 0 0 auto;
}

.campaign-page .campaign-filter-form {
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 210px) auto;
}

.contacts-view-page {
  min-height: calc(100vh - 140px);
}

.contacts-toolbar-card {
  justify-content: space-between;
}

.contacts-search-form {
  grid-template-columns: minmax(320px, 1fr) minmax(170px, 210px) auto;
}

.compact-select {
  min-height: 46px;
}

.contacts-database-card {
  flex: 1;
}

.contacts-database-scroll {
  max-height: calc(100vh - 330px);
}

.data-table .contact-row,
.data-table .contact-row:hover {
  display: table-row;
  cursor: default;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.data-table .contact-row td {
  background: #fff;
}

.database-contacts-table {
  min-width: 920px;
}

@media (max-width: 1180px) {
  body.campaign-page {
    overflow: auto;
  }

  .campaign-page .app-shell,
  .campaign-page .app-main,
  .campaign-page .page-content,
  .campaign-page .campaign-flow,
  .campaign-page .flow-panel,
  .campaign-page .newsletter-form-shell,
  .campaign-page .single-column-newsletter,
  .campaign-page .review-card {
    height: auto;
  }

  .campaign-page .campaign-filter-form,
  .contacts-search-form {
    grid-template-columns: 1fr;
  }
}

/* Final UX fix: real static 3-step wizard without page scrolling */
body.campaign-page {
  overflow: hidden !important;
}

.campaign-page .app-shell {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.campaign-page .app-main {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.campaign-page .page-content {
  height: calc(100vh - 88px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.campaign-wizard {
  height: 100% !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.wizard-alert,
.wizard-stepper-card {
  flex: 0 0 auto;
}

.wizard-stepper-card {
  padding: 12px 14px;
}

.wizard-panel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.wizard-panel.is-active {
  display: flex;
  flex-direction: column;
}

.wizard-card {
  padding: 18px;
  min-height: 0;
}

.compose-wizard-card,
.review-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wizard-message-field {
  flex: 1 1 auto;
  min-height: 0;
}

.wizard-message-field textarea {
  height: 100%;
  min-height: 180px;
  resize: none;
}

.wizard-recipients-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.recipients-toolbar-card {
  flex: 0 0 auto;
  padding: 14px;
}

.client-filter-form {
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) auto;
  margin-top: 12px;
  align-items: end;
}

.compact-contact-actions {
  justify-content: flex-start;
  margin: 0;
}

.wizard-toolbar-pills {
  margin-top: 10px;
}

.recipients-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
}

.wizard-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
}

.wizard-contacts-table {
  min-width: 900px;
}

.wizard-actions-row {
  flex: 0 0 auto;
  margin-top: 12px;
}

.fixed-wizard-actions {
  padding-top: 0;
}

.review-message-card {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}

.review-recipients-card {
  max-height: 150px;
  overflow: auto;
}

.data-table .contact-row,
.data-table .contact-row:hover,
.wizard-contacts-table .contact-row,
.wizard-contacts-table .contact-row:hover,
.database-contacts-table .contact-row,
.database-contacts-table .contact-row:hover {
  display: table-row !important;
  cursor: pointer;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.data-table .contact-row.is-selected td,
.wizard-contacts-table .contact-row.is-selected td {
  background: #eef4ff;
}

.data-table .contact-row td,
.database-contacts-table .contact-row td,
.wizard-contacts-table .contact-row td {
  background: #fff;
}

.data-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}

@media (max-width: 1180px) {
  body.campaign-page {
    overflow: hidden !important;
  }

  .campaign-page .app-shell,
  .campaign-page .app-main,
  .campaign-page .page-content,
  .campaign-wizard,
  .wizard-panel,
  .compose-wizard-card,
  .review-card {
    height: auto;
  }

  .campaign-page .page-content {
    height: calc(100vh - 88px) !important;
  }

  .campaign-page .app-main {
    height: 100vh !important;
  }

  .campaign-wizard {
    height: 100% !important;
  }

  .client-filter-form {
    grid-template-columns: 1fr;
  }
}


/* Strict wizard: inactive steps must never appear as a vertical feed */
.wizard-panel[hidden] {
  display: none !important;
}

.campaign-page .campaign-wizard > .wizard-panel:not(.is-active) {
  display: none !important;
}

.campaign-page .campaign-wizard > .wizard-panel.is-active {
  display: flex !important;
}

.campaign-page .campaign-wizard {
  max-height: 100%;
}


/* UX fix 5: keep wizard as pages, but allow comfortable scrolling inside the active step */
body.campaign-page {
  overflow: hidden !important;
}

.campaign-page .page-content {
  height: calc(100vh - 88px) !important;
  padding-bottom: 18px !important;
  overflow: hidden !important;
}

.campaign-page .campaign-wizard {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.campaign-page .wizard-panel.is-active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
  scroll-padding-bottom: 28px;
}

.campaign-page .wizard-panel.is-active::-webkit-scrollbar,
.campaign-page .wizard-table-scroll::-webkit-scrollbar,
.campaign-page .review-message-card::-webkit-scrollbar,
.campaign-page .review-recipients-card::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.campaign-page .wizard-panel.is-active::-webkit-scrollbar-thumb,
.campaign-page .wizard-table-scroll::-webkit-scrollbar-thumb,
.campaign-page .review-message-card::-webkit-scrollbar-thumb,
.campaign-page .review-recipients-card::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.campaign-page .compose-wizard-card,
.campaign-page .review-card {
  flex: 0 0 auto !important;
  min-height: max-content !important;
  overflow: visible !important;
}

.campaign-page .wizard-message-field {
  flex: 0 0 auto !important;
}

.campaign-page .wizard-message-field textarea {
  height: 300px !important;
  min-height: 240px !important;
  resize: vertical !important;
}

.campaign-page .wizard-recipients-grid {
  min-height: 520px;
}

.campaign-page .recipients-table-card {
  min-height: 300px;
}

.campaign-page .review-message-card {
  max-height: 280px;
}

.campaign-page .review-recipients-card {
  max-height: 190px;
}

@media (max-height: 780px) {
  .campaign-page .wizard-message-field textarea {
    height: 240px !important;
    min-height: 200px !important;
  }

  .campaign-page .wizard-recipients-grid {
    min-height: 460px;
  }

  .campaign-page .review-message-card {
    max-height: 220px;
  }
}

/* UX fix 6: make recipient selection table larger, without returning the old vertical feed */
.campaign-page .wizard-panel[data-flow-step="recipients"].is-active {
  overflow-y: hidden !important;
}

.campaign-page .wizard-recipients-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  grid-template-rows: none !important;
}

.campaign-page .recipients-toolbar-card {
  flex: 0 0 auto !important;
}

.campaign-page .recipients-table-card {
  flex: 1 1 auto !important;
  min-height: 430px !important;
  padding-bottom: 18px !important;
  overflow: hidden !important;
}

.campaign-page .wizard-table-scroll {
  flex: 1 1 auto !important;
  min-height: 360px !important;
  max-height: none !important;
  padding-bottom: 18px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable;
}

.campaign-page .wizard-contacts-table {
  margin-bottom: 12px;
}

.campaign-page .wizard-contacts-table tbody::after {
  content: "";
  display: table-row;
  height: 14px;
}

.campaign-page .wizard-actions-row.fixed-wizard-actions {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  background: var(--page-bg);
}

@media (max-height: 780px) {
  .campaign-page .recipients-table-card {
    min-height: 360px !important;
  }

  .campaign-page .wizard-table-scroll {
    min-height: 300px !important;
  }
}

/* UX fix 7: larger recipient step + contacts database as one continuous table */
.campaign-page .wizard-panel[data-flow-step="recipients"].is-active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 22px !important;
}

.campaign-page .wizard-recipients-grid {
  min-height: 820px !important;
}

.campaign-page .recipients-table-card {
  min-height: 620px !important;
}

.campaign-page .wizard-table-scroll {
  min-height: 560px !important;
  max-height: none !important;
}

.campaign-page .wizard-contacts-table th,
.campaign-page .wizard-contacts-table td {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

.contacts-view-page {
  min-height: calc(100vh - 120px) !important;
}

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

.contacts-database-scroll {
  max-height: none !important;
  overflow: auto !important;
}

.contacts-database-table-note {
  margin-top: 8px;
}

@media (max-height: 820px) {
  .campaign-page .wizard-recipients-grid {
    min-height: 760px !important;
  }

  .campaign-page .recipients-table-card {
    min-height: 560px !important;
  }

  .campaign-page .wizard-table-scroll {
    min-height: 500px !important;
  }
}


/* UX fix 8: continuous tables inside blocks, no fixed stepper on campaign step 2 */
.campaign-page .campaign-wizard {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
}

.campaign-page .campaign-wizard::-webkit-scrollbar,
.contacts-database-scroll::-webkit-scrollbar,
.campaign-page .wizard-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.campaign-page .campaign-wizard::-webkit-scrollbar-thumb,
.contacts-database-scroll::-webkit-scrollbar-thumb,
.campaign-page .wizard-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.campaign-page .wizard-stepper-card {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
}

.campaign-page .wizard-panel.is-active {
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"].is-active {
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-recipients-grid {
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipients-table-card {
  height: min(64vh, 680px) !important;
  min-height: 520px !important;
  max-height: 680px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-table-scroll {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border-radius: 18px;
  scrollbar-gutter: stable;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-contacts-table {
  margin-bottom: 0 !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-contacts-table tbody::after {
  height: 0 !important;
}

.contacts-view-page {
  height: calc(100vh - 120px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.contacts-view-page .contacts-toolbar-card {
  flex: 0 0 auto !important;
}

.contacts-view-page .contacts-database-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.contacts-view-page .contacts-database-card .list-section-header {
  flex: 0 0 auto !important;
}

.contacts-view-page .contacts-database-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable;
}

.contacts-view-page .database-contacts-table {
  margin-bottom: 0 !important;
}

@media (max-height: 820px) {
  .campaign-page .wizard-panel[data-flow-step="recipients"] .recipients-table-card {
    height: 620px !important;
    min-height: 520px !important;
  }
}

/* UX fix 9: remove locked top campaign header; the "Рассылка" header now scrolls away with the page */
.campaign-page .app-main {
  height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.campaign-page .shell-header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
}

.campaign-page .page-content {
  height: auto !important;
  min-height: calc(100vh - 88px) !important;
  overflow: visible !important;
}

.campaign-page .campaign-wizard {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.campaign-page .wizard-panel.is-active {
  overflow: visible !important;
}

/* UX fix 10: simple login + vertical compose form + upload block */
.auth-body-simple {
  overflow: hidden !important;
}

.auth-stage-simple {
  min-height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: #eef3f8;
}

.login-card-only {
  width: min(440px, calc(100vw - 48px)) !important;
  align-self: center !important;
  padding: 30px !important;
}

.login-card-only .inline-alert {
  margin-top: 16px;
}

.campaign-page .compose-field-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.campaign-page .compose-field-stack > .field-label,
.campaign-page .upload-field {
  width: 100%;
}

.campaign-page .compose-wizard-card {
  max-width: 980px;
}

.campaign-page .wizard-message-field textarea {
  height: 260px !important;
  min-height: 220px !important;
}

.file-upload-drop {
  min-height: 118px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 18px;
  background: #f1f5f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  padding: 18px;
}

.file-upload-drop:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.file-upload-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
}

.upload-cloud-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--blue);
  font-size: 25px;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}

.file-upload-drop strong {
  font-size: 14px;
  color: var(--text);
}

.file-upload-drop small {
  max-width: 520px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.upload-file-list {
  min-height: 28px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.upload-file-list span,
.review-recipient-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.review-attachments-card {
  max-height: 150px;
  overflow: auto;
}

@media (max-height: 820px) {
  .campaign-page .wizard-message-field textarea {
    height: 220px !important;
    min-height: 180px !important;
  }

  .file-upload-drop {
    min-height: 98px;
  }
}


/* UX fix 11: compose fields follow real email order */
.campaign-page .campaign-name-field {
  margin-top: 2px;
}

.campaign-page .campaign-name-field small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}


/* UX fix 12: real filtered rows + multi-tag filter in recipient step */
.data-table tr[hidden],
.data-table .contact-row[hidden],
.wizard-contacts-table .contact-row[hidden],
.database-contacts-table .contact-row[hidden],
.contact-row.is-filtered-out {
  display: none !important;
}

.campaign-page .client-filter-form {
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) minmax(140px, 180px) auto !important;
  position: relative;
}

.tags-filter-shell {
  position: relative;
  align-self: end;
}

.tags-filter-toggle {
  width: 100%;
  min-height: 46px;
  justify-content: center;
}

.tags-filter-toggle.is-active {
  border-color: rgba(37, 99, 235, 0.5);
  background: #eef4ff;
  color: var(--blue);
}

.tags-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, 78vw);
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
  z-index: 20;
}

.tags-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.tag-filter-chip input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--blue);
}

.clear-tags-filter {
  margin-top: 10px;
  padding: 0;
}

.tags-empty-text {
  margin: 0;
}

@media (max-width: 1180px) {
  .campaign-page .client-filter-form {
    grid-template-columns: 1fr !important;
  }

  .tags-filter-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }
}


/* UX fix 13: clean incompatible blue/green status elements + grey review step */
.review-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-page .wizard-panel[data-flow-step="review"] .summary-pair-card,
.campaign-page .wizard-panel[data-flow-step="review"] .summary-note-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

.campaign-page .wizard-panel[data-flow-step="review"] .summary-pair-card span,
.campaign-page .wizard-panel[data-flow-step="review"] .summary-note-card p {
  color: #64748b !important;
}

.campaign-page .wizard-panel[data-flow-step="review"] .review-recipient-list span,
.campaign-page .wizard-panel[data-flow-step="review"] .upload-file-list span {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}


/* UX fix 14: mobile only — move the navigation from the top into a left swipe drawer */
@media (max-width: 760px) {
  body.app-body:not(.auth-body) {
    overflow-x: hidden !important;
  }

  body.app-body:not(.auth-body)::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 38;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0));
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 286px) !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 22px 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 22px 22px 0 !important;
    transform: translateX(calc(-100% - 14px)) !important;
    transition: transform 0.22s ease !important;
    z-index: 60 !important;
    box-shadow: 18px 0 50px rgba(15, 23, 42, 0.22) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-brand {
    margin-bottom: 26px !important;
  }

  .sidebar-nav {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .sidebar-link {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .sidebar-logout-form {
    margin-top: auto !important;
  }

  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.32);
    z-index: 55;
  }

  body.mobile-sidebar-open .mobile-sidebar-overlay {
    display: block;
  }

  .app-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .shell-header,
  .page-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* UX fix 15: mobile bottom breathing room for browser/system bottom widgets; desktop unchanged */
@media (max-width: 760px) {
  body.app-body:not(.auth-body) {
    min-height: 100svh !important;
  }

  .app-main {
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .campaign-page .campaign-wizard {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .campaign-page .wizard-panel.is-active {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .campaign-page .wizard-actions-row {
    margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .contacts-view-page {
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* UX fix 17: remove leftover blue info chips and keep review counter readable */
.status-pill.info,
.status-pill.indigo {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.review-count-pill {
  gap: 4px;
}

.review-count-pill .count-word {
  display: inline-block;
}

/* Queue sending UI */
.queue-progress-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.queue-progress-head,
.queue-stats-row,
.history-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.queue-progress-head {
  justify-content: space-between;
  font-weight: 800;
  color: #111827;
}

.queue-progress-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.queue-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9ca3af;
}

.queue-stats-row {
  color: #4b5563;
  font-size: 13px;
}

.history-actions-row {
  margin-top: 12px;
}

.history-actions-row form {
  margin: 0;
}

.primary-button.compact,
.ghost-button.compact {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 13px;
}

.ghost-button.danger {
  color: #991b1b;
  border-color: #fecaca;
  background: #fff7f7;
}

/* UX fix 19: review order, compact review actions, tag filter in contacts */
.review-stack {
  display: grid;
  gap: 12px;
}

.review-actions-row {
  justify-content: flex-end;
  padding-top: 6px;
}

#selectedHiddenInputs {
  display: none;
}

.contacts-client-filter-form {
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 210px) auto;
  align-items: start;
}

.contacts-tags-filter-shell {
  min-width: 180px;
}

.contacts-view-page .tags-filter-panel {
  left: auto;
  right: 0;
  width: min(520px, calc(100vw - 48px));
}

@media (max-width: 760px) {
  .review-actions-row {
    justify-content: stretch;
  }

  .review-actions-row .ghost-button,
  .review-actions-row .primary-button {
    width: 100%;
  }

  .contacts-client-filter-form {
    grid-template-columns: 1fr;
  }

  .contacts-view-page .tags-filter-panel {
    left: 0;
    right: auto;
    width: min(520px, calc(100vw - 32px));
  }
}


.queue-limit-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f3f4f6;
  color: #374151;
  font-size: 13px;
  line-height: 1.4;
}

/* UX fix 22: move campaign duration to the right and make it plain */
.queue-duration-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4b5563;
  font-weight: 700;
}

.queue-duration-chip span {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .queue-duration-chip {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* Security fix 23: actions log */
.actions-list-card {
  padding: 0;
  overflow: hidden;
}

.actions-scroll-area {
  max-height: min(68vh, 720px);
  border: 0;
  border-radius: 0;
}

.actions-table th:nth-child(1),
.actions-table td:nth-child(1) {
  width: 155px;
  white-space: nowrap;
}

.actions-table th:nth-child(2),
.actions-table td:nth-child(2) {
  width: 240px;
}

.actions-table th:nth-child(4),
.actions-table td:nth-child(4) {
  width: 150px;
  white-space: nowrap;
}

.action-type-text {
  margin-top: 3px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .actions-scroll-area {
    max-height: calc(100vh - 250px);
  }

  .actions-table th:nth-child(4),
  .actions-table td:nth-child(4) {
    display: none;
  }
}

/* fix26: settings SMTP editor + mobile drawer swipe from any screen point */
.settings-email-form {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

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

.compact-settings-grid {
  max-width: 520px;
}

.settings-env-note {
  margin-top: 2px;
}

.settings-actions-row {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .settings-form-grid,
  .compact-settings-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  body.app-body:not(.auth-body)::before {
    display: none !important;
  }
}


/* fix27: polish contacts/tags/password settings/review spacing */
.campaign-page .wizard-panel[data-flow-step="review"] .section-header {
  margin-bottom: 16px;
}

.settings-password-card {
  display: grid;
  gap: 12px;
}

.settings-password-card .settings-email-form {
  margin-top: 6px;
}

/* Fix 28: accounts and managers */
.sidebar-user-card {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-top: auto;
}
.sidebar-user-card strong {
  color: #e5e7eb;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-card span {
  color: #94a3b8;
  font-size: 12px;
}
.manager-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}
.manager-inline-form {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(90px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.manager-inline-form input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}
.manager-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.small-button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}
.danger-button {
  color: #991b1b !important;
  border-color: #fecaca !important;
  background: #fff1f2 !important;
}
.managers-scroll-area {
  max-height: 58vh;
}

@media (max-width: 760px) {
  .manager-inline-form {
    grid-template-columns: 1fr;
  }
  .manager-actions-stack {
    min-width: 0;
  }
}


/* Fix 29: user card combined with logout */
.sidebar-user-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.sidebar-user-card .sidebar-logout-form {
  margin-top: 0 !important;
  width: 100%;
}
.sidebar-user-card .sidebar-logout {
  width: 100%;
}

/* fix30: email quality column in contacts tables */
.email-quality-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #f3f4f6;
  color: #374151;
}

.email-quality-pill.good {
  background: #f3f4f6;
  color: #374151;
}

.email-quality-pill.bad {
  background: #fff1f2;
  color: #b42318;
}

.email-quality-pill.warn {
  background: #fff7ed;
  color: #9a3412;
}

.email-quality-pill.muted {
  background: #f3f4f6;
  color: #6b7280;
}

.compact-toggle-button.is-active {
  background: #f3f4f6;
  color: #111827;
}

.responsible-column[hidden] {
  display: none !important;
}

.database-contacts-table th:nth-child(2),
.database-contacts-table td:nth-child(2),
.wizard-contacts-table th:nth-child(3),
.wizard-contacts-table td:nth-child(3) {
  min-width: 190px;
}

.database-contacts-table th:nth-child(3),
.database-contacts-table td:nth-child(3),
.wizard-contacts-table th:nth-child(4),
.wizard-contacts-table td:nth-child(4) {
  width: 128px;
}


/* UX fix 31: daily limit refresh + contacts toolbar alignment */
.contacts-client-filter-form {
  grid-template-columns: minmax(180px, 0.9fr) minmax(145px, 175px) minmax(145px, 175px) max-content !important;
  align-items: end;
}

.contacts-client-filter-form #contactsSearchInput {
  min-width: 0;
}

.contacts-tags-filter-shell {
  min-width: 145px;
}

.contacts-client-filter-form #toggleResponsibleColumns {
  align-self: end;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .contacts-client-filter-form {
    grid-template-columns: 1fr 1fr !important;
  }

  .contacts-client-filter-form #contactsSearchInput {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .contacts-client-filter-form {
    grid-template-columns: 1fr !important;
  }
}


/* fix34: required stars near labels + wizard action alignment */
.field-label.required-field > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}

.field-label.required-field > span::after {
  content: "*";
  color: #dc2626;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.campaign-page .compose-actions-row,
.campaign-page .recipients-actions-row {
  justify-content: flex-end !important;
}

.smtp-settings-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 18px;
  align-items: start;
}

.smtp-account-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.smtp-account-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f3f4f6;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}

.smtp-account-row strong {
  font-size: 14px;
  font-weight: 750;
}

.smtp-account-row span {
  color: #6b7280;
  font-size: 12px;
}

.smtp-account-row.active {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.smtp-account-row.muted {
  opacity: 0.62;
}

.smtp-empty-state {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 13px;
}

.smtp-add-button {
  width: 100%;
  justify-content: center;
}

.smtp-editor-form {
  min-width: 0;
}

#smtp-delete-form {
  display: none;
}

@media (max-width: 860px) {
  .smtp-settings-layout {
    grid-template-columns: 1fr;
  }
}

/* SMTP editor/list split */
.smtp-account-list-full {
  width: 100%;
  max-width: 720px;
}

.smtp-editor-head {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.smtp-editor-form-wide {
  width: 100%;
}

.smtp-editor-bottom-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.smtp-editor-save-actions {
  margin-top: 0;
}

@media (max-width: 760px) {
  .smtp-editor-bottom-actions {
    align-items: stretch;
  }

  .smtp-editor-save-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Fix: server transport is a standalone setting, not part of a SMTP account */
.settings-mode-card {
  margin-bottom: 18px;
}

.settings-transport-form {
  margin-top: 14px;
}

.shell-subtitle:empty {
  display: none;
}

.history-report-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* Settings: tile navigation for amoCRM / SMTP / admin password */
.settings-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  align-items: stretch;
  justify-content: start;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
}

.settings-tile-button {
  min-height: 92px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.settings-tile-button:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: #f8fbff;
  transform: translateY(-1px);
}

.settings-tile-button.is-active {
  border-color: rgba(37, 99, 235, 0.55);
  background: #eef4ff;
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.12);
}

.settings-tile-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #f1f5f9;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
}

.settings-tile-button.is-active .settings-tile-icon {
  background: var(--blue);
  color: #ffffff;
}

.settings-tile-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.settings-tile-content strong {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
}

.settings-tile-content small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.settings-panel-stack {
  display: grid;
  gap: 18px;
}

.settings-panel[hidden] {
  display: none !important;
}

.settings-panel.is-active {
  display: grid;
  gap: 18px;
}

@media (max-width: 960px) {
  .settings-tile-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .settings-tile-button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 78px;
  }
}

/* UI polish: stable settings tiles, wider transport select and local form notices */
.settings-tile-button {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  overflow: hidden;
  flex: 0 0 auto;
  contain: layout paint;
}

.settings-tile-content strong,
.settings-tile-content small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-tile-content small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.settings-transport-grid {
  max-width: 760px;
  grid-template-columns: minmax(420px, 760px);
}

.settings-transport-grid select {
  width: 100%;
}

.settings-local-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-inline-feedback {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.25;
  max-width: min(520px, 100%);
}

.compose-actions-row {
  justify-content: flex-end;
}

.compose-validation-text {
  margin: 0 auto 0 0;
  min-height: 20px;
  max-width: 560px;
}

@media (max-width: 960px) {
  .settings-tile-button {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 78px;
    min-height: 78px;
    max-height: 78px;
  }

  .settings-transport-grid {
    max-width: none;
    grid-template-columns: 1fr;
  }
}

.persistent-tags-list {
  margin-top: 12px;
}

.persistent-tags-list .tag-filter-chip {
  margin-bottom: 0;
}

/* Recipient tags: include/exclude blocks fill the empty spaces as a compact 2x2 grid. */
.campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-recipients-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipients-toolbar-card {
  grid-column: 1 / -1 !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipients-table-card {
  height: auto !important;
  min-height: 260px !important;
  max-height: 340px !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .persistent-tags-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px;
}

@media (max-width: 980px) {
  .campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-recipients-grid {
    grid-template-columns: 1fr !important;
  }
}

.recipients-mode-header {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.combine-tags-button {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.combine-tags-button.is-active,
.combine-tags-button[aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.5);
  background: #eef4ff;
  color: var(--blue);
}

/* fix34: step 2 recipient tag builder */
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-builder-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-builder-card {
  flex: 0 0 auto !important;
  display: grid;
  gap: 12px;
  padding: 14px 16px !important;
}

.recipient-builder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.recipient-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recipient-builder-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
}

.recipient-builder-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  max-width: 760px;
}

.recipient-mode-toggle,
.recipient-tabs-row,
.tag-filter-segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}

.recipient-mode-button,
.recipient-tab-button,
.tag-filter-mini-button {
  border: 0;
  background: transparent;
  color: #475569;
  border-radius: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.recipient-mode-button {
  min-height: 40px;
  padding: 0 14px;
}

.recipient-mode-button.is-active,
.recipient-tab-button.is-active,
.tag-filter-mini-button.is-active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.selected-recipient-summary {
  height: 172px;
  min-height: 172px;
  max-height: 172px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
  padding: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.selected-summary-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.selected-summary-head strong {
  font-size: 14px;
}

.selected-summary-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
}

.selected-summary-group {
  min-width: 0;
  min-height: 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.selected-summary-group > span {
  flex: 0 0 auto;
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.selected-summary-chips {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.selected-summary-empty {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.selected-summary-chip {
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-summary-group.is-exclude .selected-summary-chip {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #b45309;
}

.recipient-tabs-row {
  flex: 0 0 auto;
  width: fit-content;
}

.recipient-tab-button {
  min-height: 38px;
  padding: 0 18px;
}

.recipient-tags-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.recipient-tags-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
}

.recipient-tags-panel.is-active {
  display: grid;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-tag-card {
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px !important;
}

.recipient-card-header {
  flex: 0 0 auto;
}

.recipient-card-header h2 {
  font-size: 20px;
}

.recipient-card-header p {
  margin-top: 4px;
}

.tag-selection-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}

.tag-search-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.tag-search-row input[type="search"] {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 13px;
}

.tag-filter-mini-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-tag-card .persistent-tags-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 12px !important;
  overflow-y: auto !important;
  align-content: flex-start;
  padding-right: 4px;
}

.recipient-tag-chip {
  position: relative;
  border-color: #e2e8f0;
}

.recipient-tag-chip.is-selected {
  border-color: rgba(37, 99, 235, 0.45);
  background: #eef4ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.recipient-tag-chip.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  background: #f1f5f9;
}

.recipient-tag-chip.is-disabled input {
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .recipient-builder-head,
  .selected-summary-grid,
  .recipient-tags-panel,
  .tag-search-row {
    grid-template-columns: 1fr;
  }

  .recipient-mode-toggle,
  .recipient-tabs-row,
  .tag-filter-segment {
    width: 100%;
  }

  .recipient-mode-button,
  .recipient-tab-button,
  .tag-filter-mini-button {
    flex: 1;
  }

  .selected-recipient-summary {
    height: 260px;
    min-height: 260px;
    max-height: 260px;
  }
}

/* fix43: nested recipient wizard + combine builder */
.recipient-nested-wizard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.recipient-nested-step {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
  padding: 14px;
  text-align: left;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  color: var(--text);
}

.recipient-nested-step span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  grid-row: span 2;
}

.recipient-nested-step strong {
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-nested-step small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-nested-step.is-active {
  border-color: rgba(37, 99, 235, 0.38);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.recipient-nested-step.is-active span {
  background: var(--blue);
  color: #fff;
}

.recipient-combine-setup {
  min-height: 92px;
}

.combine-empty-card,
.combine-type-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.combine-empty-card[hidden],
.combine-type-card[hidden],
.recipient-combine-setup[hidden] {
  display: none !important;
}

.combine-empty-card strong,
.combine-type-card strong {
  display: block;
  margin-bottom: 4px;
}

.combine-empty-card p,
.combine-type-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.compact-primary-button {
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.combine-type-toggle {
  max-width: 100%;
}

.combine-type-toggle .recipient-mode-button {
  min-height: 36px;
  white-space: normal;
  line-height: 1.15;
}

.selected-recipient-summary[hidden],
.recipient-tabs-row[hidden],
.recipient-tags-panels[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .recipient-nested-wizard,
  .combine-empty-card,
  .combine-type-card {
    grid-template-columns: 1fr;
  }

  .combine-type-toggle {
    width: 100%;
  }
}

/* fix44: separate any-match selection from a multi-rule combination list */
.combine-list-card,
.combine-editor-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.combine-list-card[hidden],
.combine-editor-card[hidden] {
  display: none !important;
}

.combine-list-head,
.combine-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.combine-editor-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.combine-list-head strong,
.combine-editor-head strong {
  display: block;
  margin-bottom: 4px;
}

.combine-list-head p,
.combine-editor-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.combination-rules-list {
  display: grid;
  gap: 8px;
  max-height: 172px;
  overflow-y: auto;
  padding-right: 4px;
}

.combination-list-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  display: grid;
  gap: 3px;
  color: var(--text);
}

.combination-list-item:hover,
.combination-list-item.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: #eef4ff;
}

.combination-list-title {
  font-weight: 850;
  line-height: 1.2;
}

.combination-list-item small,
.combination-empty-text {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.compact-ghost-button {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.danger-link-button {
  min-height: 38px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 12px;
  background: #fff5f5;
  color: #b91c1c;
  padding: 0 12px;
  font-weight: 850;
}

.danger-link-button:hover {
  background: #fee2e2;
}

@media (max-width: 1180px) {
  .combine-list-head,
  .combine-editor-head {
    grid-template-columns: 1fr;
  }

  .compact-ghost-button,
  .danger-link-button,
  .compact-primary-button {
    width: 100%;
  }
}

/* mvp-53: UX cleanup before MVP */
.transport-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-left: 5px solid #2563eb;
}

.transport-status-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.transport-status-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.transport-status-card.is-mock {
  border-left-color: #b45309;
  background: #fffaf1;
}

.transport-status-card.is-smtp {
  border-left-color: #16a34a;
}

.mobile-menu-button {
  display: none;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--text);
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.shell-title-block {
  min-width: 0;
}


.history-email-preview {
  margin: 18px 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px 14px;
}

.history-email-preview > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
}

.history-message-preview {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #475569;
}

.history-message-details {
  margin-top: 9px;
}

.history-message-details summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
  list-style: none;
}

.history-message-details summary::-webkit-details-marker {
  display: none;
}

.history-message-full {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  color: #334155;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  line-height: 1.45;
}

.history-details-block ul {
  max-height: 260px;
  overflow: auto;
  padding-right: 8px;
}

@media (max-width: 760px) {
  .mobile-menu-button {
    display: inline-flex;
  }

  .shell-header {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .transport-status-card {
    align-items: stretch;
    flex-direction: column;
  }

  .transport-status-card .ghost-button {
    width: 100%;
  }
}


/* UX rewrite: recipient estimate + cleaner history/details */
.recipient-estimate-card {
  margin-top: 14px;
}

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

.recipient-estimate-head p {
  margin: 5px 0 0;
  color: var(--muted-text, #64748b);
  font-size: 14px;
}

.recipient-estimate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.recipient-estimate-grid span {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.85);
}

.recipient-estimate-grid strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.recipient-estimate-grid small {
  display: block;
  margin-top: 4px;
  color: var(--muted-text, #64748b);
}

.history-detail-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.history-recipient-table,
.history-error-table {
  min-width: 760px;
}

.history-recipient-table th,
.history-recipient-table td,
.history-error-table th,
.history-error-table td {
  vertical-align: top;
}

.review-recipient-estimate-card p {
  margin-bottom: 0;
}

.danger-note-card {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.72);
}

@media (max-width: 900px) {
  .recipient-estimate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .recipient-estimate-head {
    flex-direction: column;
  }

  .recipient-estimate-grid {
    grid-template-columns: 1fr;
  }
}

/* mvp-60: compact utility UI pass
   Goal: calmer sidebar, fewer heavy cards, tighter forms, compact steppers/tabs,
   sticky main actions, and cleaner settings without changing server logic. */
:root {
  --bg: #f3f6fb;
  --surface-soft: #f8fafc;
  --line: #d7dee9;
  --muted: #5f6f86;
  --muted-2: #94a3b8;
  --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.055);
  --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.045);
  --radius-xl: 18px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

body {
  background: #f3f6fb;
}

input,
select,
textarea {
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 42px;
  border-color: #d7dee9;
}

textarea {
  min-height: 110px;
}

.field-label {
  gap: 6px;
}

.field-label > span {
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.primary-button,
.ghost-button {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: none;
}

.primary-button:hover,
.ghost-button:hover {
  transform: none;
}

.primary-button.compact,
.ghost-button.compact,
.compact-primary-button,
.compact-ghost-button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
}

.inline-alert {
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
}

.surface-card {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.page-content {
  padding: 18px 24px 22px;
  background: #f3f6fb;
}

.page-stack {
  gap: 12px;
}

.shell-header {
  min-height: 72px;
  padding: 14px 24px;
}

.shell-title {
  font-size: 24px;
  letter-spacing: -0.02em;
}

/* Sidebar: less visually dominant */
.sidebar {
  width: 236px;
  padding: 20px 12px 16px;
  background: #111827;
}

.app-main {
  margin-left: 236px;
}

.sidebar-brand {
  margin-bottom: 22px;
}

.text-only-brand {
  padding: 2px 8px 0;
}

.brand-title {
  font-size: 18px;
}

.brand-subtitle {
  font-size: 12px;
  color: #94a3b8;
}

.sidebar-nav {
  gap: 5px;
}

.sidebar-link {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  color: #aab5c5;
}

.sidebar-link.is-active {
  background: rgba(37, 99, 235, 0.16);
  color: #ffffff;
}

.sidebar-link.is-active::before {
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
}

.sidebar-user-card {
  border-radius: 12px;
  padding: 12px;
  display: block;
  background: rgba(255, 255, 255, 0.055);
}

.sidebar-user-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.sidebar-user-card .sidebar-logout-form {
  margin-top: 0;
}

.sidebar-logout {
  min-height: 34px;
  border-radius: 9px;
  font-size: 13px;
}

/* Campaign page: compact work area */
.campaign-page .app-main {
  height: 100vh !important;
}

.campaign-page .page-content {
  height: calc(100vh - 72px) !important;
  padding: 14px 18px 16px !important;
}

.campaign-wizard {
  gap: 8px !important;
}

.transport-status-card {
  padding: 9px 12px;
  border-left-width: 3px;
  border-radius: 12px;
  box-shadow: none;
}

.transport-status-card strong {
  margin-bottom: 2px;
  font-size: 13px;
}

.transport-status-card p {
  font-size: 12px;
}

.wizard-stepper-card {
  padding: 6px !important;
  border-radius: 14px;
  box-shadow: none;
}

.flow-stepper {
  gap: 6px;
}

.flow-step {
  min-height: 46px;
  padding: 7px 10px;
  border-radius: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 1px 8px;
  background: #ffffff;
}

.flow-step span {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.flow-step strong {
  font-size: 13px;
  line-height: 1.15;
}

.flow-step small {
  font-size: 11px;
  line-height: 1.1;
}

.flow-step.is-active {
  background: #f2f6ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.wizard-card {
  padding: 14px !important;
}

.campaign-page .compose-wizard-card,
.campaign-page .review-card {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.compose-field-stack {
  display: grid;
  gap: 10px !important;
}

.campaign-page .wizard-message-field textarea {
  height: 220px !important;
  min-height: 180px !important;
}

.file-upload-drop {
  border-radius: 12px !important;
  min-height: 86px !important;
  padding: 14px !important;
}

.upload-cloud-icon {
  display: none !important;
}

.file-upload-drop strong {
  font-size: 14px;
}

.file-upload-drop small {
  font-size: 12px;
}

.flow-actions-row,
.wizard-actions-row {
  gap: 8px;
}

.campaign-page .wizard-actions-row {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: 10px;
  padding: 10px 0 0;
  background: linear-gradient(to bottom, rgba(243, 246, 251, 0), #ffffff 28%);
}

.campaign-page .compose-actions-row,
.campaign-page .review-actions-row,
.campaign-page .recipients-actions-row {
  justify-content: flex-end;
}

.compose-validation-text {
  margin: 0 auto 0 0;
  font-size: 12px;
}

/* Recipients: remove the feeling of a stepper inside a stepper */
.campaign-page .wizard-panel[data-flow-step="recipients"].is-active {
  padding-right: 4px;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .wizard-recipients-grid,
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-builder-grid {
  gap: 8px;
}

.recipient-builder-head h2,
.section-header h2,
.section-header h3,
.history-item-head h3 {
  font-size: 18px;
  line-height: 1.18;
}

.recipient-builder-head p,
.history-item-head span,
.section-header p {
  font-size: 12px;
  line-height: 1.35;
}

.recipient-kicker {
  display: none !important;
}

.recipient-mode-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.recipient-mode-label {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.recipient-mode-switch,
.recipient-nested-wizard {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 6px;
}

.recipient-nested-step {
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 10px;
  grid-template-columns: 20px minmax(0, auto);
  column-gap: 7px;
  background: #ffffff;
  box-shadow: none !important;
}

.recipient-nested-step span {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.recipient-nested-step strong {
  font-size: 13px;
}

.recipient-nested-step small {
  display: none;
}

.recipient-nested-step.is-active {
  background: #eef4ff;
  border-color: rgba(37, 99, 235, 0.45);
}

.recipient-tabs-row {
  padding: 4px;
  border: 1px solid #d7dee9;
  border-radius: 12px;
  background: #ffffff;
  width: fit-content;
  box-shadow: none;
}

.recipient-tab-button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-builder-card,
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-tag-card,
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-estimate-card,
.combine-list-card,
.combine-editor-card {
  border-radius: 14px;
  box-shadow: none;
  padding: 12px !important;
}

.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-tag-card {
  border-color: #dde5ef;
}

.tag-search-row {
  gap: 8px !important;
  margin-top: 10px !important;
}

.tag-filter-segment {
  min-height: 38px !important;
  padding: 3px !important;
  border-radius: 10px !important;
}

.tag-filter-mini-button {
  min-height: 30px !important;
  border-radius: 8px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

.tags-filter-list,
.persistent-tags-list {
  gap: 6px !important;
}

.tag-chip,
.tag-option-chip,
.selected-tag-chip {
  border-radius: 999px !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
}

.tag-selection-count {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
}

.recipient-estimate-card {
  margin-top: 8px;
}

.recipient-estimate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.recipient-estimate-grid span {
  border-radius: 10px;
  padding: 9px 10px;
}

.recipient-estimate-grid strong {
  font-size: 18px;
}

.recipient-estimate-grid small {
  font-size: 11px;
}

/* Review: fewer boxes, lower visual noise */
.review-stack {
  gap: 8px !important;
}

.summary-pair-card,
.summary-note-card {
  border-radius: 12px !important;
  padding: 11px 12px !important;
  box-shadow: none !important;
}

.campaign-page .wizard-panel[data-flow-step="review"] .summary-pair-card,
.campaign-page .wizard-panel[data-flow-step="review"] .summary-note-card {
  border-radius: 12px;
}

/* Settings: compact tabs instead of big landing-like tiles */
.settings-page {
  max-width: 1040px;
}

.settings-tile-grid {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid #d7dee9;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

.settings-tile-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none !important;
  contain: none;
}

.settings-tile-button:hover {
  transform: none;
  background: #f8fafc;
}

.settings-tile-button.is-active {
  background: #eef4ff;
  border-color: rgba(37, 99, 235, 0.35);
}

.settings-tile-icon {
  display: none;
}

.settings-tile-content {
  display: block;
}

.settings-tile-content strong {
  font-size: 13px;
  line-height: 1;
}

.settings-tile-content small {
  display: none;
}

.settings-panel-stack,
.settings-panel.is-active {
  gap: 10px;
}

.settings-page .history-summary-card,
.settings-page .history-item-card,
.settings-page .settings-mode-card,
.settings-page .settings-email-card,
.settings-page .settings-password-card {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 16px !important;
}

.settings-page .history-item-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.settings-connected-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

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

.settings-email-form {
  gap: 10px !important;
}

.settings-form-grid {
  gap: 10px !important;
}

.settings-mode-card {
  margin-bottom: 0;
}

.settings-env-note {
  margin-top: 0 !important;
}

.settings-actions-row,
.settings-local-actions {
  gap: 8px;
}

.smtp-account-list-full {
  gap: 8px !important;
}

.smtp-account-row {
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

.smtp-editor-bottom-actions {
  gap: 10px !important;
}

.status-pill {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* Tables/history/accounts/actions: same compact card language */
.history-layout .surface-card,
.managers-layout .surface-card,
.actions-layout .surface-card {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.data-table th,
.data-table td,
.history-recipient-table th,
.history-recipient-table td,
.history-error-table th,
.history-error-table td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

@media (max-width: 960px) {
  .settings-page {
    max-width: none;
  }

  .settings-tile-grid {
    display: flex;
    width: 100%;
  }

  .settings-tile-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .settings-connected-head {
    grid-template-columns: 1fr;
  }

  .settings-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .sidebar {
    width: min(82vw, 280px);
    padding: 18px 12px 16px;
  }

  .app-main {
    margin-left: 0;
  }

  .shell-header {
    min-height: 64px;
    padding: 10px 14px;
  }

  .shell-title {
    font-size: 20px;
  }

  .page-content,
  .campaign-page .page-content {
    padding: 12px !important;
    height: calc(100vh - 64px) !important;
  }

  .campaign-wizard {
    gap: 7px !important;
  }

  .transport-status-card {
    gap: 8px;
  }

  .flow-stepper {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .flow-step {
    min-width: 134px;
  }

  .flow-step small {
    display: none;
  }

  .campaign-page .wizard-message-field textarea {
    height: 170px !important;
    min-height: 150px !important;
  }

  .recipient-mode-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .recipient-mode-switch,
  .recipient-nested-wizard {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .recipient-tabs-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tag-search-row {
    grid-template-columns: 1fr !important;
  }

  .recipient-estimate-grid {
    grid-template-columns: 1fr;
  }

  .campaign-page .wizard-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .campaign-page .wizard-actions-row .primary-button,
  .campaign-page .wizard-actions-row .ghost-button {
    width: 100%;
  }

  .settings-tile-grid {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .settings-tile-button {
    flex: 0 0 auto;
  }

  .settings-form-grid,
  .compact-settings-grid {
    grid-template-columns: 1fr !important;
  }
}

/* UX rewrite mvp-61: apply the compact settings language across the whole utility */
.utility-page,
.history-layout,
.actions-page,
.managers-page {
  max-width: 1100px;
}

.utility-card {
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid #dde5ef;
}

.utility-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.utility-card-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.utility-card-head span:not(.status-pill) {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.utility-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  margin-bottom: 0;
  padding: 4px;
  border: 1px solid #d7dee9;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

.utility-tab-button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.utility-tab-button:hover {
  background: #f8fafc;
}

.utility-tab-button.is-active {
  background: #eef4ff;
  border-color: rgba(37, 99, 235, 0.35);
  color: #1d4ed8;
}

.utility-panel-stack,
.utility-panel.is-active {
  display: grid;
  gap: 10px;
}

.utility-panel[hidden] {
  display: none !important;
}

/* Campaign: make the wizard navigation feel like the settings tabs */
.campaign-page .wizard-stepper-card {
  width: fit-content;
  max-width: 100%;
  padding: 4px !important;
  border: 1px solid #d7dee9;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none !important;
}

.campaign-page .flow-stepper {
  display: inline-flex;
  gap: 6px;
  width: auto;
}

.campaign-page .flow-step {
  min-height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  box-shadow: none !important;
}

.campaign-page .flow-step:hover:not(:disabled) {
  background: #f8fafc;
}

.campaign-page .flow-step.is-active {
  background: #eef4ff;
  border-color: rgba(37, 99, 235, 0.35);
  color: #1d4ed8;
  box-shadow: none !important;
}

.campaign-page .flow-step span,
.campaign-page .flow-step small {
  display: none !important;
}

.campaign-page .flow-step strong {
  font-size: 13px;
  line-height: 1;
}

.campaign-page .transport-status-card {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid #d7dee9;
  border-left-width: 1px;
  background: #ffffff;
}

.campaign-page .transport-status-card strong {
  font-size: 13px;
}

.campaign-page .transport-status-card p {
  display: none;
}

.campaign-page .compose-wizard-card,
.campaign-page .review-card,
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-builder-card,
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-tag-card,
.campaign-page .wizard-panel[data-flow-step="recipients"] .recipient-estimate-card,
.campaign-page .wizard-panel[data-flow-step="review"] .summary-pair-card,
.campaign-page .wizard-panel[data-flow-step="review"] .summary-note-card {
  border-color: #dde5ef;
  box-shadow: var(--shadow-soft) !important;
}

/* History: settings-style top control + compact records */
.history-search-card {
  display: grid;
  gap: 10px;
}

.history-search-card .utility-card-head {
  margin-bottom: 0;
}

.utility-search-form {
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 8px;
}

.history-list-scroll {
  gap: 8px !important;
  padding-right: 0;
}

.history-item-card {
  padding: 14px !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
}

.history-item-head {
  align-items: center;
  margin-bottom: 10px;
}

.history-item-head h3 {
  font-size: 18px !important;
  line-height: 1.18;
  margin-bottom: 4px;
}

.history-email-preview {
  padding: 10px 12px;
  border: 1px solid #e3eaf3;
  border-radius: 12px;
  background: #f8fafc;
}

.history-email-preview strong {
  font-size: 13px;
}

.history-message-preview {
  max-height: 42px;
  margin: 5px 0 0;
  font-size: 12px;
  color: #64748b;
}

.queue-progress-block {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e3eaf3;
  border-radius: 12px;
  background: #ffffff;
}

.queue-progress-head,
.queue-stats-row {
  font-size: 12px;
}

.history-details-row {
  gap: 8px;
  margin-top: 10px;
}

.history-details-block {
  border-radius: 12px;
}

.history-report-row {
  margin-top: 10px;
}

/* Actions/accounts: one settings-like card instead of summary + table blocks */
.actions-page,
.managers-page,
.history-layout {
  gap: 10px;
}

.actions-list-card,
.managers-list-card {
  overflow: hidden;
}

.actions-list-card .utility-card-head,
.managers-list-card .utility-card-head {
  margin: 0 0 12px;
}

.actions-scroll-area,
.managers-scroll-area {
  max-height: min(70vh, 720px);
  border: 1px solid #e0e7f1;
  border-radius: 12px;
  background: #ffffff;
}

.actions-table,
.managers-table {
  min-width: 760px;
}

.actions-table thead th,
.managers-table thead th {
  background: #f8fafc;
}

.actions-table th,
.actions-table td,
.managers-table th,
.managers-table td {
  padding: 10px 12px !important;
}

.manager-create-card .settings-email-form {
  margin-top: 0;
}

.manager-actions-stack {
  gap: 8px;
}

.manager-inline-form input {
  min-height: 34px;
  border-radius: 9px;
}

/* Login gets the same compact utility-card feel */
.auth-body-simple {
  background: #f3f6fb;
}

.login-card-only {
  border: 1px solid #dde5ef;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 22px !important;
}

.login-card-only h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* General cleanup for the new compact language */
.table-scroll-area {
  border-radius: 12px;
}

.empty-state-card.utility-card p {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .utility-page,
  .history-layout,
  .actions-page,
  .managers-page {
    max-width: none;
  }

  .utility-tabs {
    display: flex;
    width: 100%;
  }

  .utility-tab-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .utility-card-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .utility-card {
    padding: 13px !important;
  }

  .utility-tabs,
  .campaign-page .flow-stepper {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .utility-tab-button,
  .campaign-page .flow-step {
    flex: 0 0 auto;
  }

  .campaign-page .wizard-stepper-card,
  .campaign-page .transport-status-card {
    width: 100%;
  }

  .campaign-page .flow-stepper {
    width: 100%;
  }

  .utility-search-form {
    grid-template-columns: 1fr;
  }

  .actions-scroll-area,
  .managers-scroll-area {
    max-height: calc(100vh - 230px);
  }
}

/* mvp-62: apply the exact settings colour/button mechanics everywhere.
   Tabs, segmented controls and wizard steps now use the same component language as Settings. */
:root {
  --utility-bg: #f3f6fb;
  --utility-card: #ffffff;
  --utility-line: #d7dee9;
  --utility-line-strong: #cbd5e1;
  --utility-hover: #f8fbff;
  --utility-active: #eef4ff;
  --utility-active-border: rgba(37, 99, 235, 0.35);
  --utility-active-border-strong: rgba(37, 99, 235, 0.55);
  --utility-active-text: #1d4ed8;
  --utility-muted: #64748b;
}

body,
.page-content,
.auth-body-simple {
  background: var(--utility-bg) !important;
}

.surface-card,
.utility-card,
.history-item-card,
.settings-mode-card,
.settings-email-card,
.settings-password-card,
.compose-wizard-card,
.review-card,
.recipient-builder-card,
.recipient-tag-card,
.recipient-estimate-card,
.actions-list-card,
.managers-list-card,
.manager-create-card,
.login-card-only {
  background: var(--utility-card) !important;
  border: 1px solid #dde5ef !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045) !important;
}

/* One shared tab container: settings, managers, campaign steps, recipient mode, include/exclude. */
.settings-tile-grid,
.utility-tabs.settings-tile-grid,
.campaign-page .wizard-tab-control.settings-tile-grid,
.recipient-mode-switch.settings-tile-grid,
.recipient-tabs-row.settings-tile-grid {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 8px !important;
  padding: 4px !important;
  border: 1px solid var(--utility-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.settings-tile-button,
.utility-tab-button.settings-tile-button,
.campaign-page .flow-step.settings-tile-button,
.recipient-nested-step.settings-tile-button,
.recipient-tab-button.settings-tile-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
  transform: none !important;
  contain: none !important;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease !important;
}

.settings-tile-button:hover:not(:disabled),
.utility-tab-button.settings-tile-button:hover:not(:disabled),
.campaign-page .flow-step.settings-tile-button:hover:not(:disabled),
.recipient-nested-step.settings-tile-button:hover:not(:disabled),
.recipient-tab-button.settings-tile-button:hover:not(:disabled),
.tag-filter-mini-button:hover:not(:disabled) {
  background: var(--utility-hover) !important;
  border-color: transparent !important;
  color: #1e293b !important;
  transform: none !important;
  filter: none !important;
}

.settings-tile-button.is-active,
.utility-tab-button.settings-tile-button.is-active,
.campaign-page .flow-step.settings-tile-button.is-active,
.recipient-nested-step.settings-tile-button.is-active,
.recipient-tab-button.settings-tile-button.is-active,
.tag-filter-mini-button.is-active {
  background: var(--utility-active) !important;
  border-color: var(--utility-active-border) !important;
  color: var(--utility-active-text) !important;
  box-shadow: none !important;
}

.settings-tile-button:disabled,
.campaign-page .flow-step.settings-tile-button:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  color: #94a3b8 !important;
  border-color: transparent !important;
}

.settings-tile-button:focus-visible,
.utility-tab-button.settings-tile-button:focus-visible,
.campaign-page .flow-step.settings-tile-button:focus-visible,
.recipient-nested-step.settings-tile-button:focus-visible,
.recipient-tab-button.settings-tile-button:focus-visible,
.tag-filter-mini-button:focus-visible,
.primary-button:focus-visible,
.ghost-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.settings-tile-button .settings-tile-content,
.utility-tab-button.settings-tile-button .settings-tile-content,
.campaign-page .flow-step.settings-tile-button .settings-tile-content,
.recipient-nested-step.settings-tile-button .settings-tile-content,
.recipient-tab-button.settings-tile-button .settings-tile-content {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 0 !important;
  color: inherit !important;
}

.settings-tile-button .settings-tile-content strong,
.utility-tab-button.settings-tile-button .settings-tile-content strong,
.campaign-page .flow-step.settings-tile-button .settings-tile-content strong,
.recipient-nested-step.settings-tile-button .settings-tile-content strong,
.recipient-tab-button.settings-tile-button .settings-tile-content strong {
  display: inline !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.settings-tile-button .settings-tile-content small,
.utility-tab-button.settings-tile-button .settings-tile-content small,
.campaign-page .flow-step.settings-tile-button .settings-tile-content small,
.recipient-nested-step.settings-tile-button .settings-tile-content small,
.recipient-tab-button.settings-tile-button .settings-tile-content small {
  display: none !important;
}

/* Keep old generic rules from hiding the new settings-tile content. */
.campaign-page .flow-step.settings-tile-button span.settings-tile-content,
.recipient-nested-step.settings-tile-button span.settings-tile-content,
.recipient-tab-button.settings-tile-button span.settings-tile-content {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: inherit !important;
}

/* Mini segmented controls inside tag search use the same settings mechanics. */
.tag-filter-segment {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 38px !important;
  padding: 4px !important;
  border: 1px solid var(--utility-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.tag-filter-mini-button {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

/* Selection chips now follow the same blue active state instead of a separate visual language. */
.tag-filter-chip,
.recipient-tag-chip,
.selected-summary-chip,
.tag-selection-count {
  border-color: #dbeafe !important;
  background: #f8fbff !important;
  color: #334155 !important;
}

.tag-filter-chip.is-selected,
.recipient-tag-chip.is-selected,
.selected-summary-chip.is-selected {
  border-color: var(--utility-active-border-strong) !important;
  background: var(--utility-active) !important;
  color: var(--utility-active-text) !important;
}

.tag-filter-chip:hover:not(.is-disabled),
.recipient-tag-chip:hover:not(.is-disabled) {
  border-color: var(--utility-active-border) !important;
  background: var(--utility-hover) !important;
}

.tag-filter-chip.is-disabled,
.recipient-tag-chip.is-disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

/* Exclude blocks stay recognizable but less orange/red-heavy. */
.exclude-tags-card .tag-selection-count,
.selected-summary-group.is-exclude .selected-summary-chip {
  border-color: #e5e7eb !important;
  background: #f8fafc !important;
  color: #475569 !important;
}

/* Primary/ghost buttons use the same understated settings behaviour everywhere. */
.primary-button,
.ghost-button,
.compact-primary-button,
.compact-ghost-button,
.small-button {
  min-height: 38px !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease !important;
}

.primary-button,
.compact-primary-button {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #ffffff !important;
}

.primary-button:hover:not(:disabled),
.compact-primary-button:hover:not(:disabled) {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
  filter: none !important;
}

.ghost-button,
.compact-ghost-button,
.small-button {
  background: #ffffff !important;
  border-color: var(--utility-line) !important;
  color: #334155 !important;
}

.ghost-button:hover:not(:disabled),
.compact-ghost-button:hover:not(:disabled),
.small-button:hover:not(:disabled) {
  background: var(--utility-hover) !important;
  border-color: var(--utility-line-strong) !important;
  color: #1e293b !important;
  filter: none !important;
}

.danger-button,
.danger-link-button {
  border-color: rgba(220, 38, 38, 0.28) !important;
  background: #fff5f5 !important;
  color: #b91c1c !important;
}

.danger-button:hover:not(:disabled),
.danger-link-button:hover:not(:disabled) {
  background: #fee2e2 !important;
  border-color: rgba(220, 38, 38, 0.38) !important;
}

/* Status colours are now closer to settings: blue info, muted warning, clean success. */
.status-pill.info {
  border-color: #dbeafe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.status-pill.success {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}

.status-pill.warn {
  border-color: #fde68a !important;
  background: #fffbeb !important;
  color: #b45309 !important;
}

/* Campaign layout fixes after switching to settings controls. */
.campaign-page .wizard-stepper-card {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.campaign-page .wizard-tab-control.settings-tile-grid {
  margin-bottom: 0 !important;
}

.recipient-mode-row .settings-tile-grid,
.recipient-tabs-row.settings-tile-grid {
  margin-bottom: 0 !important;
}

.recipient-mode-switch.settings-tile-grid {
  width: fit-content !important;
}

.recipient-tabs-row.settings-tile-grid {
  width: fit-content !important;
  grid-column: auto !important;
}

.campaign-page .transport-status-card {
  border-color: var(--utility-line) !important;
  background: #ffffff !important;
  color: #334155 !important;
}

.campaign-page .transport-status-card.is-mock strong {
  color: #b45309 !important;
}

.campaign-page .transport-status-card.is-smtp strong {
  color: #15803d !important;
}

/* Managers tab switching behaves like settings and has identical visuals. */
.managers-page .utility-tabs.settings-tile-grid {
  margin-bottom: 0 !important;
}

/* Tables keep settings palette instead of the mixed old old blue/grey palette. */
.data-table thead th,
.actions-table thead th,
.managers-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom-color: #e0e7f1 !important;
}

.data-table tbody tr:hover td,
.actions-table tbody tr:hover td,
.managers-table tbody tr:hover td {
  background: #f8fbff !important;
}

@media (max-width: 760px) {
  .settings-tile-grid,
  .utility-tabs.settings-tile-grid,
  .campaign-page .wizard-tab-control.settings-tile-grid,
  .recipient-mode-switch.settings-tile-grid,
  .recipient-tabs-row.settings-tile-grid {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .settings-tile-button,
  .utility-tab-button.settings-tile-button,
  .campaign-page .flow-step.settings-tile-button,
  .recipient-nested-step.settings-tile-button,
  .recipient-tab-button.settings-tile-button {
    flex: 1 0 auto !important;
  }

  .recipient-mode-switch.settings-tile-grid,
  .recipient-tabs-row.settings-tile-grid,
  .campaign-page .wizard-stepper-card {
    width: 100% !important;
  }
}


/* mvp-63: calmer Settings palette and button mechanics everywhere.
   This pass removes the leftover bright old colours from non-settings pages. */
:root {
  --blue: #2f5fb8;
  --blue-dark: #264f99;
  --utility-active: #eef4ff;
  --utility-active-border: rgba(47, 95, 184, 0.34);
  --utility-active-border-strong: rgba(47, 95, 184, 0.48);
  --utility-active-text: #264f99;
  --utility-hover: #f8fbff;
  --utility-neutral-chip: #f8fafc;
  --utility-neutral-text: #475569;
}

/* All counters/statuses now behave like the compact Settings pills: quiet by default, colour only as a hint. */
.status-pill,
.status-pill.info,
.status-pill.indigo,
.status-pill.green,
.status-pill.success,
.status-pill.amber,
.status-pill.warn {
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid var(--utility-line) !important;
  background: #ffffff !important;
  color: var(--utility-neutral-text) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.status-pill.info,
.status-pill.indigo {
  border-color: #dbeafe !important;
  background: #f8fbff !important;
  color: var(--utility-active-text) !important;
}

.status-pill.success,
.status-pill.green {
  border-color: #d7eadc !important;
  background: #f7fbf8 !important;
  color: #2f6846 !important;
}

.status-pill.warn,
.status-pill.amber {
  border-color: #eadfcb !important;
  background: #fdfbf7 !important;
  color: #7a5a2a !important;
}

/* Alerts stay readable, but stop screaming visually. */
.inline-alert.success {
  background: #f7fbf8 !important;
  border-color: #d7eadc !important;
  color: #2f6846 !important;
}

.inline-alert.error {
  background: #fff7f7 !important;
  border-color: #ead2d2 !important;
  color: #8a3a3a !important;
}

.inline-alert.info,
.inline-alert.warning,
.queue-limit-note {
  background: #fdfbf7 !important;
  border-color: #eadfcb !important;
  color: #7a5a2a !important;
}

/* Primary buttons keep one accent, but match Settings: no gradients, no glow, no jump. */
.primary-button,
.compact-primary-button {
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.primary-button:hover:not(:disabled),
.compact-primary-button:hover:not(:disabled) {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

.primary-button:active:not(:disabled),
.compact-primary-button:active:not(:disabled),
.ghost-button:active:not(:disabled),
.compact-ghost-button:active:not(:disabled),
.settings-tile-button:active:not(:disabled),
.utility-tab-button:active:not(:disabled),
.tag-filter-mini-button:active:not(:disabled) {
  transform: none !important;
}

/* Ghost/small buttons become identical to Settings tab mechanics. */
.ghost-button,
.compact-ghost-button,
.small-button,
.toolbar-action-button {
  background: #ffffff !important;
  border: 1px solid var(--utility-line) !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.ghost-button:hover:not(:disabled),
.compact-ghost-button:hover:not(:disabled),
.small-button:hover:not(:disabled),
.toolbar-action-button:hover:not(:disabled) {
  background: var(--utility-hover) !important;
  border-color: var(--utility-line-strong) !important;
  color: #1e293b !important;
  box-shadow: none !important;
}

/* Destructive actions are muted, not bright red blocks. */
.ghost-button.danger,
.danger-button,
.danger-link-button {
  border-color: #ead2d2 !important;
  background: #fff8f8 !important;
  color: #8a3a3a !important;
}

.ghost-button.danger:hover:not(:disabled),
.danger-button:hover:not(:disabled),
.danger-link-button:hover:not(:disabled) {
  background: #fff3f3 !important;
  border-color: #e0bcbc !important;
  color: #7f1d1d !important;
}

/* Segmented controls: exact Settings palette on every page. */
.settings-tile-grid,
.utility-tabs,
.utility-tabs.settings-tile-grid,
.campaign-page .wizard-tab-control,
.recipient-mode-switch,
.recipient-tabs-row,
.tag-filter-segment {
  border-color: var(--utility-line) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.settings-tile-button,
.utility-tab-button,
.campaign-page .flow-step,
.recipient-nested-step,
.recipient-tab-button,
.tag-filter-mini-button {
  background: transparent !important;
  border-color: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.settings-tile-button:hover:not(:disabled),
.utility-tab-button:hover:not(:disabled),
.campaign-page .flow-step:hover:not(:disabled),
.recipient-nested-step:hover:not(:disabled),
.recipient-tab-button:hover:not(:disabled),
.tag-filter-mini-button:hover:not(:disabled) {
  background: var(--utility-hover) !important;
  border-color: transparent !important;
  color: #1e293b !important;
}

.settings-tile-button.is-active,
.utility-tab-button.is-active,
.campaign-page .flow-step.is-active,
.recipient-nested-step.is-active,
.recipient-tab-button.is-active,
.tag-filter-mini-button.is-active {
  background: var(--utility-active) !important;
  border-color: var(--utility-active-border) !important;
  color: var(--utility-active-text) !important;
}

/* Tags/chips: no separate saturated blue/orange language outside Settings. */
.tag-chip,
.tag-option-chip,
.tag-filter-chip,
.recipient-tag-chip,
.selected-tag-chip,
.selected-summary-chip,
.tag-selection-count,
.queue-duration-chip,
.metric-dot {
  background: var(--utility-neutral-chip) !important;
  border-color: var(--utility-line) !important;
  color: var(--utility-neutral-text) !important;
  box-shadow: none !important;
}

.tag-chip.is-selected,
.tag-option-chip.is-selected,
.tag-filter-chip.is-selected,
.recipient-tag-chip.is-selected,
.selected-tag-chip.is-selected,
.selected-summary-chip.is-selected,
.data-table .contact-row.is-selected td,
.wizard-contacts-table .contact-row.is-selected td {
  background: var(--utility-active) !important;
  border-color: var(--utility-active-border) !important;
  color: var(--utility-active-text) !important;
  box-shadow: none !important;
}

.exclude-tags-card .tag-chip,
.exclude-tags-card .tag-option-chip,
.exclude-tags-card .tag-filter-chip,
.exclude-tags-card .recipient-tag-chip,
.selected-summary-group.is-exclude .selected-summary-chip {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* Progress/history: muted grey track with the same calm blue accent. */
.progress-fill,
.progress-fill.tone-green,
.progress-fill.tone-indigo,
.progress-fill.tone-info,
.progress-fill.tone-amber,
.progress-fill.tone-warn,
.queue-progress-bar span {
  background: var(--blue) !important;
}

.progress-track,
.queue-progress-bar {
  background: #e8edf4 !important;
}

.queue-progress-block,
.history-email-preview,
.history-details-block,
.combine-list-card,
.combine-editor-card,
.combine-empty-card,
.combine-type-card,
.selected-recipient-summary,
.selected-summary-group {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

/* Transport mode should not paint the whole block orange/green. */
.transport-status-card,
.transport-status-card.is-mock,
.transport-status-card.is-smtp {
  border: 1px solid var(--utility-line) !important;
  background: #ffffff !important;
}

.transport-status-card.is-mock strong,
.transport-status-card.is-smtp strong {
  color: #334155 !important;
}

/* Tables and rows keep the same Settings calm hover/selection mechanics. */
.data-table tbody tr:hover td,
.actions-table tbody tr:hover td,
.managers-table tbody tr:hover td,
.database-contacts-table tbody tr:hover td,
.wizard-contacts-table tbody tr:hover td {
  background: var(--utility-hover) !important;
}

.data-table thead th,
.actions-table thead th,
.managers-table thead th,
.database-contacts-table thead th,
.wizard-contacts-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom-color: #e0e7f1 !important;
}

/* mvp-63.1: specificity fix for campaign transport status after global palette pass. */
.campaign-page .transport-status-card,
.campaign-page .transport-status-card.is-mock,
.campaign-page .transport-status-card.is-smtp {
  border: 1px solid var(--utility-line) !important;
  background: #ffffff !important;
  color: #334155 !important;
}

.campaign-page .transport-status-card strong,
.campaign-page .transport-status-card.is-mock strong,
.campaign-page .transport-status-card.is-smtp strong {
  color: #334155 !important;
}

.history-retention-note {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
  color: #64748b;
  font-size: 13px;
}


/* fix: keep transport mode card visually taller than its settings button */
.campaign-page .transport-status-card {
  min-height: 68px;
  padding: 14px 16px !important;
  align-items: center;
}

.campaign-page .transport-status-card > div {
  min-width: 0;
}

.campaign-page .transport-status-card .ghost-button.compact {
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 760px) {
  .campaign-page .transport-status-card {
    min-height: 0;
    align-items: stretch;
  }
}

/* fix: compact transport mode card in Settings > Отправка */
.settings-page .settings-mode-card {
  padding: 12px 14px !important;
}

.settings-page .settings-mode-card .history-item-head {
  margin-bottom: 8px;
}

.settings-page .settings-mode-card .history-item-head h3 {
  font-size: 16px !important;
  line-height: 1.15;
  margin-bottom: 2px;
}

.settings-page .settings-mode-card .history-item-head span:not(.status-pill) {
  font-size: 12px;
}

.settings-page .settings-transport-form {
  margin-top: 0 !important;
  gap: 8px !important;
}

.settings-page .settings-transport-grid {
  max-width: 520px;
  grid-template-columns: minmax(260px, 520px);
  gap: 8px !important;
}

.settings-page .settings-transport-grid select {
  min-height: 38px;
  padding: 8px 10px;
}

.settings-page .settings-mode-card .settings-local-actions {
  margin-top: 0;
}

.campaign-page .personal-greeting-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.campaign-page .personal-greeting-option input {
  margin-top: 2px;
}

.campaign-page .personal-greeting-option span {
  font-weight: 800;
}

.campaign-page .personal-greeting-option small {
  grid-column: 2;
  color: #64748b;
  line-height: 1.35;
}

/* UX fix: compact half-width compose fields */
.campaign-page .compose-short-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.campaign-page .compose-short-fields .compose-half-field {
  width: 50% !important;
  max-width: 560px;
}

.campaign-page .compose-short-fields .field-label {
  min-width: 0;
}

.campaign-page .personal-greeting-option.compose-half-field {
  min-height: 44px;
  padding: 10px 12px;
  align-items: center;
  background: #ffffff;
  border-color: #dbe4ef;
  border-radius: 12px;
}

.campaign-page .personal-greeting-option.compose-half-field input {
  margin: 0;
}

.campaign-page .personal-greeting-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.campaign-page .personal-greeting-text strong {
  font-size: 13px;
  line-height: 1.2;
}

.campaign-page .personal-greeting-text small {
  grid-column: auto;
  font-size: 12px;
  line-height: 1.25;
  color: #64748b;
}

@media (max-width: 760px) {
  .campaign-page .compose-short-fields .compose-half-field {
    width: 100% !important;
    max-width: none;
  }
}

/* Spintax compose tools */
.campaign-page .intro-variants-field textarea {
  min-height: 92px;
  resize: vertical;
}

.campaign-page .intro-variants-field small {
  color: #64748b;
  line-height: 1.35;
}

.campaign-page .spintax-word-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.campaign-page .spintax-word-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.campaign-page .spintax-word-head strong {
  display: block;
  font-size: 14px;
}

.campaign-page .spintax-word-head small,
.campaign-page .spintax-empty-text {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.campaign-page .spintax-word-chips,
.campaign-page .spintax-rules-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-page .spintax-word-chip,
.campaign-page .spintax-rule-chip {
  width: auto;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.campaign-page .spintax-word-chip.has-rule {
  border-color: rgba(37, 99, 235, 0.35);
  background: #e8f0ff;
  color: #1d4ed8;
}

.campaign-page .spintax-rule-chip {
  background: #eef6ff;
  color: #1e3a8a;
  border-color: #bfdbfe;
}

.campaign-page .spintax-editor {
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.campaign-page .spintax-editor[hidden] {
  display: none !important;
}

.campaign-page .spintax-editor-head,
.campaign-page .spintax-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.campaign-page .spintax-editor textarea {
  min-height: 84px;
  resize: vertical;
}

@media (max-width: 760px) {
  .campaign-page .spintax-editor-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

.form-section-title {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.company-limits-form {
  display: grid;
  gap: 8px;
  min-width: 260px;
}
.company-limits-form label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.company-limits-form input {
  width: 90px;
  min-height: 32px;
  padding: 6px 8px;
}

.super-admin-layout {
  align-items: start;
}

.company-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.company-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.company-admin-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.32);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.company-admin-card.is-disabled {
  opacity: 0.88;
}

.company-admin-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.company-admin-card__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.company-title-row h3 {
  margin: 0;
  font-size: 1.05rem;
}

.company-code-line {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.93rem;
}

.company-code-line code {
  font-family: inherit;
  font-weight: 700;
  color: #f8fafc;
}

.company-admin-card__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}

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

.company-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.company-meta-label,
.health-label,
.company-section-title {
  color: rgba(148, 163, 184, 0.92);
  font-size: 0.82rem;
}

.company-meta-item strong {
  font-size: 0.96rem;
  color: #f8fafc;
}

.company-status-block,
.company-limits-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.health-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.queue-summary-row {
  font-size: 0.92rem;
  line-height: 1.5;
}

.company-limits-card-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.company-limits-actions {
  display: flex;
  justify-content: flex-end;
}

.compact-field {
  margin-bottom: 0;
}

.empty-state-inline {
  padding: 24px 8px;
}

.status-pill.neutral {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.status-pill.warning,
.status-pill.warn,
.status-pill.amber {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.22);
}

.status-pill.danger {
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.22);
}

@media (max-width: 1080px) {
  .company-meta-grid,
  .company-limits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .company-admin-card {
    padding: 16px;
  }

  .company-admin-card__top,
  .company-list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .company-admin-card__actions,
  .company-limits-actions {
    justify-content: stretch;
  }

  .company-admin-card__actions .ghost-button,
  .company-limits-actions .ghost-button {
    width: 100%;
  }

  .company-meta-grid,
  .company-health-grid,
  .company-limits-grid {
    grid-template-columns: 1fr;
  }

  .health-item {
    align-items: flex-start;
    flex-direction: column;
  }
}


.company-limits-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-limits-group-title {
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.9rem;
  font-weight: 700;
}

.company-limits-hint {
  margin: -2px 0 0;
  font-size: 0.86rem;
}

/* Service owner company cards: explicit contrast fix. */
.super-admin-page .company-admin-card {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #dbe4ef;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.super-admin-page .company-admin-card.is-disabled {
  opacity: 1;
  background: #f8fafc;
}

.super-admin-page .company-title-row h3,
.super-admin-page .company-meta-item strong,
.super-admin-page .company-code-line code,
.super-admin-page .queue-summary-row strong,
.super-admin-page .company-limits-group-title {
  color: #0f172a;
}

.super-admin-page .company-code-line,
.super-admin-page .company-meta-label,
.super-admin-page .health-label,
.super-admin-page .company-section-title,
.super-admin-page .company-limits-hint,
.super-admin-page .queue-summary-row {
  color: #64748b;
}

.super-admin-page .company-meta-item,
.super-admin-page .health-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.super-admin-page .company-limits-block,
.super-admin-page .company-status-block {
  color: #0f172a;
}

.super-admin-page .company-limits-card-form input,
.super-admin-page .company-create-card input {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}

.super-admin-page .company-limits-card-form input::placeholder,
.super-admin-page .company-create-card input::placeholder {
  color: #94a3b8;
}

.campaign-page .spintax-editor-placeholder {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #64748b;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

/* Block 5: service owner company access management. */
.company-access-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #0f172a;
}

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

.company-access-subline {
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.company-access-subline strong {
  color: #0f172a;
}

.company-access-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.company-access-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.company-access-card-title {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
}

.company-admin-create-form {
  display: grid;
  gap: 10px;
}

.company-admin-create-form input {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}

.company-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.company-user-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.company-user-main strong {
  color: #0f172a;
  font-size: 0.95rem;
}

.company-user-main span {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.company-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .company-access-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .company-access-head,
  .company-user-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .company-user-actions,
  .company-user-actions form,
  .company-access-head form,
  .company-access-head .ghost-button,
  .company-user-actions .ghost-button,
  .company-admin-create-form .ghost-button {
    width: 100%;
  }
}

/* Block 6: service owner company queue controls. */
.company-queue-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #0f172a;
}

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

.company-queue-subline,
.company-queue-note {
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.company-queue-subline strong,
.company-queue-note strong {
  color: #0f172a;
}

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

.company-queue-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.company-queue-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.company-queue-stat span {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}

.company-queue-stat strong {
  color: #0f172a;
  font-size: 1.15rem;
}

.company-active-campaigns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.company-active-campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-campaign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.company-campaign-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.company-campaign-main strong {
  color: #0f172a;
  font-size: 0.95rem;
}

.company-campaign-main span,
.company-campaign-state span:not(.status-pill) {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.company-campaign-error {
  color: #b45309 !important;
}

.company-campaign-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.company-queue-actions .ghost-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1080px) {
  .company-queue-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .company-queue-head,
  .company-campaign-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .company-queue-actions,
  .company-queue-actions form,
  .company-queue-actions .ghost-button,
  .company-campaign-state {
    width: 100%;
  }

  .company-queue-stats-grid {
    grid-template-columns: 1fr;
  }
}


/* Block 7: service owner dangerous company actions. */
.company-danger-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #fff7f7;
  border: 1px solid #fecaca;
  color: #0f172a;
}

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

.company-section-title.danger-title {
  color: #991b1b;
  font-weight: 900;
}

.company-danger-subline {
  margin-top: 4px;
  color: #7f1d1d;
  font-size: 0.9rem;
  line-height: 1.45;
}

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

.company-danger-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #fecaca;
}

.company-danger-action-final {
  border-color: #ef4444;
  background: #fef2f2;
}

.company-danger-action div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.company-danger-action strong {
  color: #991b1b;
  font-size: 0.95rem;
}

.company-danger-action span {
  color: #7f1d1d;
  font-size: 0.84rem;
  line-height: 1.35;
}

.company-danger-action .ghost-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1080px) {
  .company-danger-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .company-danger-head,
  .company-danger-action {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .company-danger-action .ghost-button,
  .company-danger-action button {
    width: 100%;
  }
}

/* Block 8: service owner audit filters and safer action log layout. */
.actions-filter-card {
  gap: 14px;
}

.actions-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

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

.actions-filter-grid .ghost-button,
.actions-filter-grid .primary-button {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .actions-filter-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .actions-filter-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .actions-filter-grid {
    grid-template-columns: 1fr;
  }

  .actions-filter-buttons,
  .actions-filter-grid .ghost-button,
  .actions-filter-grid .primary-button {
    width: 100%;
  }
}