:root {
  color-scheme: light;
  --canvas: #f7f6f3;
  --surface: #ffffff;
  --surface-muted: #fbfbfa;
  --ink: #1f211f;
  --ink-soft: #5f625f;
  --ink-faint: #858782;
  --border: #e5e4e0;
  --border-strong: #d6d5d0;
  --focus: #e35d42;
  --focus-ink: #9f3324;
  --blue-bg: #f7e9e4;
  --blue-ink: #963c2d;
  --green-bg: #edf3ec;
  --green-ink: #346538;
  --yellow-bg: #fbf3db;
  --yellow-ink: #7b5700;
  --red-bg: #fdebec;
  --red-ink: #9f2f2d;
  --sidebar-width: 228px;
  --inspector-width: min(420px, 34vw);
  --sans: "SF Pro Display", "Geist Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "SFMono-Regular", "Geist Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  color: #fff;
  background: #111;
  border-radius: 4px;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.app-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.is-entry main { grid-column: 2; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 24px 16px 20px;
  background: #f1f0ed;
  border-right: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand-mascot {
  width: 42px;
  height: 42px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(31, 33, 31, .1));
}

.workspace-label,
.nav-heading,
.sidebar-foot p {
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workspace-label { margin: 4px 0 0; }
.primary-nav { margin-top: 20px; }
.nav-section { margin-top: 30px; }
.nav-heading { margin: 0 10px 8px; }

.entry-flight-plan {
  display: none;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.is-entry .entry-flight-plan { display: grid; gap: 22px; }
.is-entry:has(.setup-panel.is-customer-setup:not([hidden])) .entry-flight-plan { display: none; }

.entry-flight-plan li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  color: var(--ink-faint);
}

.entry-flight-plan li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.entry-flight-plan li.is-current { color: var(--ink); }
.entry-flight-plan li.is-current > span { color: #fff; background: var(--ink); border-color: var(--ink); }
.entry-flight-plan strong, .entry-flight-plan small { display: block; }
.entry-flight-plan strong { margin-top: 1px; font-size: 13px; line-height: 1.3; }
.entry-flight-plan small { margin-top: 4px; color: var(--ink-faint); font-size: 11px; line-height: 1.4; }

.nav-item {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 8px 10px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}

.nav-item:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,.64); }
.nav-item.is-active { color: var(--ink); background: #fff; font-weight: 600; }
.nav-item-muted { color: #a3a49f; }
.nav-group { margin-top: 2px; }
.nav-group > .nav-group-toggle { font-size: 13px; font-weight: 500; }
.nav-group.has-active-view > .nav-group-toggle { font-weight: 650; }
.nav-group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}
.nav-group-toggle:hover { color: var(--ink); background: rgba(255,255,255,.64); }
.nav-group.has-active-view .nav-group-toggle { color: var(--ink); }
.nav-group-chevron {
  width: 5px;
  height: 5px;
  margin-right: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(45deg) translate(-1px, -1px); }
.nav-group-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nav-group-icon { flex: none; opacity: .85; }
.nav-group-items { margin: 2px 0 3px 18px; padding-left: 8px; border-left: 1px solid var(--border-strong); }
.nav-group-items[hidden] { display: none; }
.nav-group-items .nav-item { padding: 7px 10px; font-size: 12px; }
.nav-item-settings { margin-top: 15px; }
.mobile-navigation { display: none; }

.sidebar-foot {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--border-strong);
}
.is-entry .primary-nav, .is-entry .sidebar-foot { visibility: hidden; pointer-events: none; }

.sidebar-foot p { margin: 5px 0 0 16px; }
.connection-row { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.connection-dot { width: 8px; height: 8px; background: #aaa; border-radius: 9999px; }
.connection-dot.is-connected { background: #59835d; }

main { grid-column: 2; min-width: 0; }
body.has-context-inspector main { margin-right: var(--inspector-width); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(24px, 4vw, 64px);
  background: rgba(247,246,243,.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-context { display: flex; align-items: center; gap: 10px; }
.project-name { margin: 0; font-size: 14px; font-weight: 600; }
.project-switcher { width: auto; min-width: 180px; min-height: 34px; padding: 5px 30px 5px 9px; font-size: 12px; }
.topbar-meta { display: flex; align-items: center; gap: 10px; }
.customer-email { max-width: 240px; overflow: hidden; color: var(--ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.page-frame {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 64px clamp(24px, 4vw, 64px) 96px;
}

.setup-panel {
  display: grid;
  min-height: calc(100vh - 232px);
  align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(48px, 8vw, 112px);
}
.setup-copy { min-width: 0; }
.setup-panel.is-customer-setup {
  min-height: calc(100dvh - 170px);
  align-items: start;
  grid-template-columns: minmax(400px, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(20px, 3vh, 40px);
}
.is-customer-setup .form-card { grid-column: 1; grid-row: 1; padding: 24px; }
.is-customer-setup .setup-copy { grid-column: 2; grid-row: 1; }
.is-customer-setup .setup-copy h1 { max-width: 500px; font-size: clamp(38px, 3.5vw, 52px); }
.is-customer-setup .setup-copy > p:not(.eyebrow) { margin-top: 16px; font-size: 14px; line-height: 1.55; }
.is-customer-setup .trust-list { margin-top: 22px; }
.is-customer-setup .trust-list > div { padding: 9px 0; }
.is-customer-setup .trust-list p { font-size: 11px; }
.is-customer-setup .identity-entry { margin-bottom: 16px; padding-bottom: 16px; }
.is-customer-setup .onboarding-paths { margin-bottom: 17px; }
.is-customer-setup #project-sending-modes { margin-top: 18px; }
.is-customer-setup .onboarding-path { padding: 11px; }
.is-customer-setup .project-defaults { margin-top: 15px; }

.app-loading {
  display: flex;
  min-height: calc(100vh - 232px);
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: left;
}

.app-loading h1 { max-width: 560px; font-size: clamp(36px, 5vw, 58px); }
.app-loading p:last-child { margin: 12px 0 0; color: var(--ink-soft); }
.project-loading {
  display: flex;
  min-height: calc(100vh - 232px);
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.project-loading[hidden] { display: none; }
.project-loading h1 { max-width: 560px; font-size: clamp(32px, 4vw, 48px); }
.project-loading p:last-child { margin: 10px 0 0; color: var(--ink-soft); }
.is-project-switching #workspace > [data-view-panel] { display: none !important; }
.loading-mark { width: 22px; height: 22px; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--focus); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

h1, h2, p { text-wrap: pretty; }

h1, h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.035em;
}

h1 { max-width: 760px; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; }
h2 { font-size: 25px; line-height: 1.15; }

.setup-copy > p:not(.eyebrow) {
  max-width: 590px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.privacy-note {
  max-width: 590px;
  margin-top: 28px;
  padding: 14px 16px;
  color: var(--blue-ink);
  background: var(--blue-bg);
  border: 1px solid #cde4f1;
  border-radius: 8px;
  font-size: 13px;
}

.trust-list { display: grid; max-width: 590px; gap: 0; margin-top: 30px; border-top: 1px solid var(--border-strong); }
.trust-list > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.trust-list > div > span { color: var(--focus-ink); font-family: var(--mono); font-size: 10px; }
.trust-list p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.trust-list strong { display: block; margin-bottom: 2px; color: var(--ink); }

.form-card,
.panel,
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.form-card { padding: 28px; }
.form-card.is-signed-out { padding: 34px; }
.form-card.is-signed-out > :not(#customer-signin) { display: none !important; }
.form-card.is-signed-out .identity-entry { display: block; margin: 0; padding: 0; border-bottom: 0; }
.form-card.is-signed-out .identity-entry h2 { margin-top: 8px; font-size: 28px; }
.form-card.is-signed-out .identity-entry p:not(.eyebrow) { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.entry-cta { display: flex !important; width: 100%; justify-content: center; margin-top: 24px; }
.identity-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -4px 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--border);
}
.identity-entry strong { display: block; font-size: 13px; }
.identity-entry p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; }
.identity-entry .button { display: inline-flex; flex: none; align-items: center; text-decoration: none; }
.identity-entry-signed-in { color: var(--green-ink); }
.onboarding-paths { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.onboarding-paths legend { padding: 0; color: var(--ink); font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.onboarding-paths > p { margin: 5px 0 12px; color: var(--ink-faint); font-size: 11px; line-height: 1.45; }
.onboarding-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.onboarding-business .onboarding-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.business-type-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 18px;
}
.business-type-chooser h2 { margin: 0 0 4px; font-size: 1.05rem; }
.business-type-chooser p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.business-type-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-business-type { display: flex; gap: 16px; margin-top: 10px; }
.campaign-recipient-time { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.86rem; font-weight: 600; }
.campaign-recipient-time input { width: auto; margin: 0; }
.settings-time-zone { display: grid; gap: 6px; margin-top: 18px; }
.settings-time-zone label { font-weight: 700; font-size: 0.84rem; }
.settings-time-zone-row { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-time-zone-row select { flex: 1; min-width: 200px; }
.settings-time-zone-row input { flex: 1; min-width: 220px; }
.settings-alert-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600 !important; }
.settings-alert-toggle input { width: auto; margin: 0; }
.settings-time-zone .field-help { margin: 0; }
.campaign-planner-intro .campaign-planner-zone { margin-top: 8px; font-size: 0.82rem; color: var(--ink-faint); }
.onboarding-path {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px;
  background: #faf9f6;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.onboarding-path:hover { background: #f6f2eb; border-color: var(--border-strong); }
.onboarding-path:has(input:checked) { background: var(--blue-bg); border-color: #9fc9df; box-shadow: 0 0 0 2px rgba(54, 116, 151, .08); }
.onboarding-path input { width: 16px; min-height: 16px; margin: 2px 0 0; accent-color: var(--focus); }
.onboarding-path strong, .onboarding-path small { display: block; }
.onboarding-path strong { font-size: 12px; line-height: 1.35; }
.onboarding-path small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; font-weight: 400; line-height: 1.45; }
.form-stack { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.field + .field, .form-card .field-row { margin-top: 18px; }
.form-card > .button { margin-top: 24px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-help-block { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: #f8f7f4; }

label { color: var(--ink); font-size: 12px; font-weight: 650; letter-spacing: .01em; }

input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

textarea { resize: vertical; }
.color-input { padding: 5px; }
input:hover, select:hover, textarea:hover { border-color: #b8b9b4; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(227,93,66,.12); }
input::placeholder, textarea::placeholder { color: #aaaba6; }

.field-help { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.45; }

.button {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 650;
  transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease;
}

a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
#contact-csv-title, #contact-form { scroll-margin-top: 160px; }

.button:active { transform: scale(.98); }
.button:disabled { opacity: .42; }
.button-primary { color: #fff; background: #20221f; border: 1px solid #20221f; }
.button-primary:hover:not(:disabled) { background: #383a36; }
.button-full { width: 100%; justify-content: center; }
.button-secondary { color: var(--ink); background: #fff; border: 1px solid var(--border-strong); }
.button-secondary:hover:not(:disabled) { background: var(--surface-muted); border-color: #b7b8b3; }
.button-compact { min-height: 32px; padding: 5px 10px; }

.text-button {
  margin-top: 20px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font-weight: 650;
}

.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }

.status-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .065em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-neutral { color: var(--ink-soft); background: #eae9e5; }
.status-blue { color: var(--blue-ink); background: var(--blue-bg); }
.status-green { color: var(--green-ink); background: var(--green-bg); }
.status-yellow { color: var(--yellow-ink); background: var(--yellow-bg); }
.status-red { color: var(--red-ink); background: var(--red-bg); }

.view { animation: reveal 420ms cubic-bezier(.16,1,.3,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view:has(.context-inspector.is-contextual-open) { animation: none; }

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}

.page-heading > :first-child { min-width: 0; }
.page-heading > .button { flex: 0 0 auto; white-space: nowrap; }
.page-heading h1 { max-width: 790px; font-size: clamp(34px, 4.5vw, 56px); }
.page-heading p:not(.eyebrow) { max-width: 680px; margin: 18px 0 0; color: var(--ink-soft); font-size: 16px; }

.metrics-grid {
  display: grid;
  grid-template-columns: 1.3fr .85fr .85fr 1fr;
  gap: 14px;
}

.metrics-filter {
  display: grid;
  grid-template-columns: .8fr .9fr minmax(190px, 1.3fr) .9fr;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  background: #f5f3ed;
}

.metrics-filter .field + .field { margin-top: 0; }
.metrics-filter-address { grid-column: 1 / -1; max-width: 420px; }
.metrics-filter-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.metrics-filter-footer p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.metrics-filter-footer .filter-actions { flex: none; }

.log-filter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  background: #f5f3ed;
}
.log-filter .field { grid-column: span 2; margin-top: 0; }
.log-filter .log-search-field { grid-column: span 4; }
.log-filter .log-user-agent-field { grid-column: span 4; }
.log-filter .field-date { grid-column: span 3; }
.log-filter-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.log-filter-footer p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.evidence-note { margin: -14px 0 16px; padding: 10px 12px; color: var(--ink-soft); background: #f5f3ed; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; line-height: 1.5; }
.evidence-note strong { color: var(--ink); }
.log-metrics-grid { margin-bottom: 16px; }
.log-metrics-grid .metric-card { min-height: 128px; padding: 18px; }
.log-metrics-grid .metric-value { margin-top: 12px; font-size: 34px; }
.log-metrics-grid .metric-word { font-size: 24px; }
.log-metrics-grid .metric-note { margin-top: 12px; }
.log-trend-panel { margin-bottom: 16px; overflow: hidden; }
.log-trend-panel .settings-section-heading { padding-bottom: 18px; }
.log-trend-panel .settings-section-heading h2 { margin-top: 4px; font-size: 24px; }
.log-trend-panel .settings-section-heading p:last-child { max-width: 720px; margin-top: 7px; color: var(--ink-soft); font-size: 11px; }
.log-trend-days { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); gap: 1px; overflow-x: auto; background: var(--border); border-top: 1px solid var(--border); }
.log-trend-day { display: grid; min-width: 112px; gap: 7px; padding: 15px 13px 16px; background: #fff; box-shadow: inset 0 3px transparent; }
.log-trend-day.has-issue { background: #fcf7f2; box-shadow: inset 0 3px var(--focus); }
.log-trend-day time { color: var(--ink-faint); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.log-trend-day strong { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.log-trend-day span { color: var(--ink-soft); font-size: 9px; line-height: 1.35; }
.log-workspace { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: start; gap: 16px; }
.log-ledger { min-width: 0; }
.log-ledger .panel-heading { padding: 24px 26px 20px; }
.logs-table { min-width: 760px; }
.logs-table td { vertical-align: middle; }
.logs-table td:nth-child(1) { width: 150px; color: var(--ink-faint); font-family: var(--sans); font-size: 10px; white-space: nowrap; }
.logs-table td:nth-child(3) { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.logs-table td:nth-child(4) { width: 130px; }
.log-activity-button { display: block; max-width: 460px; padding: 0; color: var(--ink); background: transparent; border: 0; text-align: left; }
.log-activity-button:hover strong { color: var(--focus-ink); }
.log-activity-button strong,
.log-activity-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-activity-button strong { font-size: 12px; transition: color 160ms ease; }
.log-activity-button small { margin-top: 4px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.log-row.is-selected { background: #faf4f0; box-shadow: inset 3px 0 var(--focus); }
.log-row .text-button { margin: 0; font-size: 10px; }
.log-inspector { position: sticky; top: 96px; min-width: 0; }
.log-inspector .panel-heading h2 { font-size: 23px; }
.log-inspector-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.log-facts { grid-template-columns: 1fr; margin-top: 18px; }
.log-facts dd { overflow-wrap: anywhere; white-space: normal; }
.log-privacy-note { margin: 18px 0 0; padding-top: 16px; color: var(--ink-faint) !important; border-top: 1px solid var(--border); font-size: 10px; line-height: 1.55; }

.provider-health-panel { margin-top: 16px; overflow: hidden; }
.provider-health-panel .panel-heading { align-items: center; }
.provider-health-panel .panel-description { max-width: 720px; margin-top: 7px; }
.provider-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.provider-health-cell,
.provider-health-empty { min-width: 0; padding: 18px; background: #f8f7f3; border: 1px solid var(--border); border-radius: 7px; }
.provider-health-empty { grid-column: 1 / -1; }
.provider-health-empty strong { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.provider-health-empty p { margin: 7px 0 0; color: var(--ink-soft); font-size: 11px; }
.provider-health-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.provider-health-heading strong { display: block; font-size: 13px; }
.provider-health-heading p { margin: 4px 0 0; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.provider-health-capacity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.provider-health-capacity div { padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 5px; }
.provider-health-capacity dt { color: var(--ink-faint); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.provider-health-capacity dd { margin: 7px 0 0; color: var(--ink); font-family: var(--serif); font-size: 24px; letter-spacing: -.03em; }
.provider-health-checks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.provider-health-check { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 9px; }
.provider-health-check::before { width: 6px; height: 6px; background: #aaa; border-radius: 50%; content: ""; }
.provider-health-check.is-pass::before { background: var(--green-ink); }
.provider-health-check.is-blocked::before { background: var(--red-ink); }
.provider-health-check.is-unknown::before { background: var(--yellow-ink); }
.provider-health-evidence { margin: 14px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.sender-health-panel { margin-top: 16px; }
.sender-health-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px 20px; }
.sender-health-heading h2 { margin-top: 4px; font-size: 24px; }
.sender-health-heading p:last-child { max-width: 620px; margin: 7px 0 0; color: var(--ink-soft); font-size: 11px; }
.sender-health-panel table { min-width: 680px; }
.sender-health-panel .mailbox-provider-health-table { min-width: 790px; }
.sender-health-panel th:not(:first-child),
.sender-health-panel td:not(:first-child) { text-align: right; }
.sender-health-panel td:first-child { font-weight: 650; }
.sender-address-filter { margin: 0; text-align: left; overflow-wrap: anywhere; }
.sender-address-inspect { display: block; margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; font-weight: 500; text-align: left; }
.sender-address-breakdown { border-top: 1px solid var(--border); }
.sender-address-breakdown summary { cursor: pointer; padding: 16px 28px; color: var(--ink); font-size: 11px; font-weight: 650; }
.sender-address-breakdown summary:hover { background: var(--surface-muted); }
.sender-address-breakdown summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.sender-address-breakdown #sender-address-health-empty { padding: 0 28px 18px; color: var(--ink-soft); font-size: 11px; }
.sender-health-value strong,
.sender-health-value small { display: block; }
.sender-health-value strong { color: var(--ink); font-size: 12px; }
.sender-health-value .sender-health-issue { display: block; margin: 0 0 0 auto; font-size: 12px; font-weight: 700; text-align: right; }
.sender-health-value small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.mailbox-provider-read { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 10px; }
.mailbox-provider-inspect { font-size: 10px; }
.mailbox-provider-trends { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: 28px; padding: 22px 28px 26px; border-top: 1px solid var(--border); }
.mailbox-provider-trends h3 { margin: 4px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.mailbox-provider-trends > div:first-child > p:last-child { margin: 8px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
#mailbox-provider-trend-rows { display: grid; gap: 12px; min-width: 0; }
.mailbox-provider-trend-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.mailbox-provider-trend-row > strong { font-size: 10px; }
.mailbox-provider-trend-bars { display: grid; grid-auto-columns: minmax(7px, 1fr); grid-auto-flow: column; gap: 3px; align-items: end; height: 34px; padding-bottom: 2px; border-bottom: 1px solid var(--border-strong); }
.mailbox-provider-trend-bar { position: relative; height: 100%; background: #efeee9; border-radius: 2px 2px 0 0; }
.mailbox-provider-trend-bar > i { position: absolute; right: 0; bottom: 0; left: 0; min-height: 2px; background: var(--green-ink); border-radius: inherit; }
.mailbox-provider-trend-bar.has-issue > i { background: #b44934; }
.compact-empty { padding: 36px 20px; }
.compact-empty h3 { margin-top: 5px; font-family: var(--serif); font-size: 22px; font-weight: 500; }

.metric-card { min-height: 180px; padding: 24px; }
.metric-card-wide { display: flex; flex-direction: column; justify-content: space-between; background: #f0eee8; }
.metric-label { margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.metric-value { margin: 20px 0 0; font-family: var(--serif); font-size: 54px; letter-spacing: -.045em; line-height: 1; }
.metric-word { overflow: hidden; font-size: 31px; text-overflow: ellipsis; white-space: nowrap; }
.metric-note { margin: 20px 0 0; color: var(--ink-faint); font-size: 12px; }
.revenue-chart { display: block; width: 100%; height: 48px; margin-top: 14px; }
.revenue-chart rect { fill: var(--border-strong); }
.revenue-chart rect.has-revenue { fill: var(--focus); }
.revenue-chart + .metric-note { margin-top: 10px; }

.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.onboarding-checklist { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 24px; margin-top: 16px; padding: 28px; background: #262825; border-radius: 10px; color: #f7f6f3; }
.checklist-intro h2 { color: #fff; }
.checklist-intro > p { max-width: 42ch; margin: 12px 0 0; color: #b9bab5; font-size: 12px; }
.intent-switcher { display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px; background: #1f211f; border: 1px solid #42443f; border-radius: 7px; }
.intent-switcher button { padding: 7px 10px; color: #b9bab5; background: transparent; border: 0; border-radius: 4px; font-size: 11px; font-weight: 650; }
.intent-switcher button:hover { color: #fff; background: #393b37; }
.intent-switcher button.is-active { color: #20221f; background: #f7f6f3; }
.checklist-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checklist-steps button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px; color: #dededa; background: #323431; border: 1px solid #42443f; border-radius: 7px; text-align: left; }
.checklist-steps button:hover { background: #393b37; border-color: #5c5e57; }
.checklist-steps strong, .checklist-steps small { display: block; }
.checklist-steps strong { color: #f5f4ef; font-size: 12px; }
.checklist-steps small { margin-top: 3px; color: #a9aaa5; font-size: 10px; line-height: 1.4; }
.checklist-mark { display: grid; width: 24px; height: 24px; place-items: center; color: #c7c8c2; border: 1px solid #686a63; border-radius: 50%; font-family: var(--mono); font-size: 9px; }
.checklist-steps button.is-complete .checklist-mark { color: #fff; background: var(--focus); border-color: var(--focus); }
.checklist-steps button.is-complete .checklist-mark::before { content: "✓"; }
.checklist-steps button.is-complete .checklist-mark { font-size: 0; }
.checklist-steps button.is-complete .checklist-mark::before { font-size: 11px; }
.next-best-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; border-color: #efb7a9; background: #fff8f4; }
.next-best-action h2 { margin-top: 3px; }
.next-best-action p:last-child { max-width: 68ch; margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; }
.next-best-action .button { flex: none; }
.panel { padding: 28px; }
.panel-muted { background: #f9f5ea; }
.panel > p { color: var(--ink-soft); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-heading + p { margin: 20px 0 0; }

.split-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: start; gap: 16px; }
.evidence-panel, .campaign-console, .automation-console, .commerce-result { position: sticky; top: 96px; }

.csv-import-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 0;
  margin-bottom: 34px;
  padding: 0;
  overflow: hidden;
}

.csv-import-form { border: 0; border-radius: 0; }
.csv-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  color: var(--ink);
  background: #f8f6f1;
  border: 1px dashed #c7c3b9;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease;
}
.csv-file-picker:hover { background: #f3efe6; border-color: #999486; }
.csv-file-picker:active { transform: scale(.995); }
.csv-file-picker:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(227,93,66,.12); }
.csv-file-picker input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.csv-file-mark { display: grid; width: 44px; height: 44px; place-items: center; color: var(--focus-ink); background: #fff; border: 1px solid #dfd8cc; border-radius: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.csv-file-picker strong, .csv-file-picker small { display: block; }
.csv-file-picker strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.csv-file-picker small { margin-top: 3px; color: var(--ink-faint); font-size: 11px; font-weight: 400; line-height: 1.4; }
.csv-mapping-fields { padding: 15px; background: var(--yellow-bg); border: 1px solid #eadcae; border-radius: 7px; }
.csv-property-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.csv-property-choice { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; color: var(--ink-soft); background: #f8f6f1; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 11px; }
.csv-property-choice:has(input:checked) { color: var(--ink); background: var(--yellow-bg); border-color: #d8c98e; }
.csv-property-choice input { width: 14px; height: 14px; min-height: 0; accent-color: var(--focus); }
.attestation-check { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 11px; align-items: start; padding: 15px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.attestation-check input { width: 16px; height: 16px; min-height: 0; margin-top: 2px; accent-color: var(--focus); }
.attestation-check strong, .attestation-check small { display: block; }
.attestation-check strong { font-size: 12px; line-height: 1.4; }
.attestation-check small { margin-top: 4px; color: var(--ink-faint); font-size: 11px; font-weight: 400; line-height: 1.45; }

.csv-review { min-width: 0; padding: 28px; background: #f0eee8; border-left: 1px solid var(--border); }
.csv-review-empty { display: flex; min-height: 100%; flex-direction: column; justify-content: center; }
.csv-review-empty h2 { max-width: 390px; }
.csv-review-empty > p:last-child { max-width: 48ch; margin: 14px 0 0; color: var(--ink-soft); font-size: 13px; }
.csv-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.csv-review-heading h2 { max-width: 360px; overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.csv-review-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 22px; overflow: hidden; background: var(--border-strong); border: 1px solid var(--border-strong); border-radius: 7px; }
.csv-review-metrics div { padding: 14px; background: rgba(255,255,255,.82); }
.csv-review-metrics strong, .csv-review-metrics span { display: block; }
.csv-review-metrics strong { font-family: var(--serif); font-size: 27px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1; }
.csv-review-metrics span { margin-top: 5px; color: var(--ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.csv-review-note { margin: 16px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.csv-sample-table { margin-top: 16px; background: rgba(255,255,255,.68); border: 1px solid var(--border); border-radius: 7px; }
.csv-sample-table table { min-width: 500px; }
.csv-sample-table th, .csv-sample-table td { padding: 9px 10px; font-size: 10px; }
.csv-review .text-button { display: inline-block; font-size: 11px; }
.csv-review-actions { display: flex; gap: 8px; margin-top: 18px; }
.csv-review-actions + .field-help { margin-top: 12px; }
.csv-import-progress { margin-top: 18px; padding: 13px 14px; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: 7px; }
.csv-import-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; }
.csv-import-progress strong { color: var(--ink); }
.csv-import-progress span { font-variant-numeric: tabular-nums; }
.csv-progress-track { height: 5px; margin-top: 10px; overflow: hidden; background: #e3e1dc; border-radius: 999px; }
.csv-progress-track span { display: block; width: 0; height: 100%; background: var(--focus); border-radius: inherit; transition: width 180ms ease; }
.section-divider { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.section-divider::before, .section-divider::after { height: 1px; flex: 1; background: var(--border-strong); content: ""; }
.topic-workspace { margin-bottom: 16px; overflow: clip; }
.topic-workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.topic-workspace-heading h2 { margin-top: 5px; font-size: 25px; }
.topic-create-form { display: grid; grid-template-columns: minmax(150px,.65fr) minmax(150px,.65fr) minmax(260px,1.5fr) auto; gap: 10px; align-items: end; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.topic-create-form .field { margin: 0; }
.topic-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.topic-row { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 7px; }
.topic-row.is-archived { background: var(--surface-muted); opacity: .72; }
.topic-marker { width: 7px; height: 34px; background: var(--focus); border-radius: 999px; }
.topic-row.is-archived .topic-marker { background: var(--ink-faint); }
.topic-identity { min-width: 0; }
.topic-identity strong, .topic-identity small { display: block; }
.topic-identity strong { font-size: 12px; }
.topic-identity small { margin-top: 4px; overflow: hidden; color: var(--ink-faint); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.topic-meta { display: grid; justify-items: end; gap: 5px; }
.topic-meta code { color: var(--ink-soft); font-family: var(--mono); font-size: 9px; }
.topic-translation-editor { grid-column: 2 / 4; min-width: 0; font-size: 11px; }
.topic-translation-editor summary { width: fit-content; color: var(--ink-soft); cursor: pointer; }
.topic-translation-editor form { display: grid; gap: 10px; padding-top: 10px; }
.topic-translation-editor p { margin: 0; color: var(--ink-soft); }
.topic-translation-editor fieldset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.topic-translation-editor legend { padding: 0 4px; font-weight: 700; }
.topic-translation-editor label { display: grid; gap: 4px; color: var(--ink-soft); }
.topic-translation-editor input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--ink); background: #fff; }
.topic-translation-editor .button { justify-self: start; }
.topic-archive { margin: 1px 0 0; color: var(--ink-faint); font-size: 9px; }
.topic-archive-blockers { grid-column: 2 / -1; min-width: 0; width: 100%; margin: 0; padding: 12px 14px; }
.topic-archive-blockers p { margin: 0 0 8px; }
.topic-archive-blockers p:last-child { margin-bottom: 0; }
.topic-archive-blockers ul { margin: 0 0 8px; padding-left: 18px; }
.topic-archive-blockers li + li { margin-top: 4px; }
.topic-archive-blockers .text-button { margin: 0; text-align: left; overflow-wrap: anywhere; }
.audience-model-grid { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); gap: 16px; margin-bottom: 34px; align-items: start; }
.audience-model-panel { min-width: 0; overflow: clip; }
.compact-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.compact-create-form .field { margin: 0; }
.compact-create-form .field-compact { width: auto; }
.property-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.property-chip { display: inline-flex; min-width: 0; align-items: center; gap: 7px; padding: 7px 9px; color: var(--ink-soft); background: #f5f3ee; border: 1px solid var(--border); border-radius: 5px; }
.property-chip strong { color: var(--ink); font-size: 11px; }
.property-chip code { overflow: hidden; max-width: 150px; font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.property-type-mark { padding: 2px 5px; color: var(--blue-ink); background: var(--blue-bg); border-radius: 3px; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.segment-builder { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.segment-export-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.segment-edit-note { margin: 0 0 16px; padding: 10px 12px; color: var(--blue-ink); background: var(--blue-bg); border-radius: 6px; line-height: 1.5; }
.segment-condition-list { display: grid; gap: 8px; margin-top: 14px; }
.segment-condition { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(135px, .82fr) minmax(130px, 1fr) 32px; gap: 8px; align-items: end; padding: 12px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 7px; }
.segment-condition .field { margin: 0; }
.segment-condition-value-field:not([hidden]) { display: grid; gap: 8px; }
.segment-condition-remove { display: grid; width: 32px; min-height: 38px; place-items: center; color: var(--ink-faint); background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 19px; }
.segment-condition-remove:hover:not(:disabled) { color: var(--red-ink); background: var(--red-bg); border-color: #f2d1d3; }
.segment-builder-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.segment-builder-actions .text-button { margin: 0; }
.subject-ideas { margin-top: 6px; }
.subject-ideas .text-button { margin: 0; font-size: 11px; }
.subject-idea-list { display: grid; gap: 6px; margin-top: 8px; }
.subject-idea-list button { display: grid; gap: 2px; width: 100%; padding: 9px 11px; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 6px; transition: border-color 150ms ease, background-color 150ms ease; }
.subject-idea-list button:hover { background: #fcfbf8; border-color: var(--border-strong); }
.subject-idea-list strong { font-size: 12px; font-weight: 650; }
.subject-idea-list small { color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.campaign-health-note { margin: 10px 0 0; padding: 10px 12px; color: var(--ink-soft); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; line-height: 1.5; }
.campaign-health-note.is-warning { color: var(--yellow-ink); background: var(--yellow-bg); border-color: #efd99a; }
.automation-email-edit { margin: 8px 0 0; font-size: 11px; }
.automation-email-editor { display: grid; gap: 10px; margin-top: 10px; padding: 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.automation-email-editor textarea { min-height: 140px; }
.automation-email-editor-actions { display: flex; gap: 8px; }
.campaign-history-stats { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.segment-builder-submit { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.segment-presets { margin: 0 0 16px; }
.segment-matches-result { margin: 10px 0 0; }
.segment-list { display: grid; gap: 8px; margin-top: 22px; }
.segment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 7px; transition: border-color 160ms ease, background-color 160ms ease, transform 100ms ease; }
.segment-row:hover { background: #fcfbf8; border-color: var(--border-strong); }
.segment-row:active { transform: scale(.998); }
.segment-row strong, .segment-row small { display: block; }
.segment-row strong { font-size: 12px; }
.segment-row small { margin-top: 4px; color: var(--ink-faint); font-size: 10px; line-height: 1.45; }
.segment-row-meta { display: grid; justify-items: end; gap: 4px; }
.segment-row-meta b { font-family: var(--serif); font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1; }
.segment-row-meta span { color: var(--ink-faint); font-size: 9px; }
.segment-history { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 11px; }
.segment-history ol { display: grid; gap: 0; margin: 0 0 9px; padding: 0; list-style: none; }
.segment-history li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.segment-history li strong { color: var(--ink); font-size: 11px; font-weight: 650; }
.segment-history li span { line-height: 1.5; }
.segment-history details { margin-top: 7px; }
.segment-history summary { width: fit-content; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.segment-version-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 9px 0; }
.segment-version-changes { margin-top: 9px; padding: 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-muted); color: var(--ink); line-height: 1.5; }
.segment-version-changes b { display: block; margin-bottom: 4px; font-size: 10px; }
.segment-version-changes ul { margin: 0; padding-left: 17px; }
.segment-version-changes li + li { margin-top: 3px; }
.segment-version-compare > div { padding: 9px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 5px; }
.segment-version-compare b { color: var(--ink); font-size: 10px; }
.segment-version-compare p { margin: 5px 0 0; line-height: 1.5; }
.segment-history .text-button { margin: 0; }
@media (max-width: 640px) { .segment-history li, .segment-version-compare { grid-template-columns: 1fr; gap: 3px; } }
.audience-ledger { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0 0 34px; }
.audience-ledger .panel { min-width: 0; }
.audience-source-list, .import-history-list { display: grid; gap: 8px; margin-top: 22px; }
.audience-source-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; color: var(--ink); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; text-align: left; }
.audience-source-row:hover { background: #f3f0e9; border-color: var(--border-strong); }
.audience-source-row strong, .audience-source-row small { display: block; }
.audience-source-row strong { font-size: 12px; }
.audience-source-row small { margin-top: 4px; color: var(--ink-faint); font-size: 10px; }
.audience-source-row b { font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 500; }
.audience-source-card { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.audience-source-card .audience-source-row { border: 0; background: transparent; }
.audience-source-blocks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.audience-source-blocks button { padding: 5px 7px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 10px; cursor: pointer; }
.audience-source-blocks button:hover:not(:disabled), .audience-source-blocks button:focus-visible { border-color: var(--focus); color: var(--ink); }
.audience-source-blocks button:disabled { opacity: .55; cursor: default; }
.compact-empty { margin-top: 22px; padding: 20px; color: var(--ink-faint); background: var(--surface-muted); border: 1px dashed var(--border-strong); border-radius: 7px; font-size: 12px; text-align: center; }
.import-receipt { padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 7px; }
.import-receipt > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.import-receipt strong, .import-receipt small { display: block; }
.import-receipt strong { max-width: 270px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.import-receipt small { margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.import-receipt p { margin: 10px 0 0; color: var(--ink-soft); font-size: 11px; }
.import-receipt .import-receipt-evidence { overflow: hidden; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.import-receipt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.import-receipt-actions .text-button { margin: 0; }
.text-button-danger { color: var(--red-ink); }
.import-receipt .import-source-deleted, .import-receipt .import-source-retained { margin-top: 10px; }
.import-receipt .import-source-deleted { color: var(--green-ink); }
.import-receipt .import-source-retained { color: var(--ink-faint); }

.commerce-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: start;
  gap: 16px;
}

.commerce-connect-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  align-items: start;
  gap: 16px;
}

.shopify-connect-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(149, 191, 71, .1), transparent 34%),
    var(--surface);
}

.connector-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}

.connector-heading h2 { margin: 3px 0 0; }
.connector-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  background: #5e7f2d;
  border-radius: 10px 10px 10px 4px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.shopify-connect-card > p { margin: 24px 0 20px; color: var(--ink-soft); }
.inline-action-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.inline-action-field .button { white-space: nowrap; }
.connector-scope-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.connector-scope-row span { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.connector-scope-row p { margin: 0; color: var(--ink-soft); font-size: 11px; text-align: right; }
.connector-trust-note { display: flex; gap: 10px; margin-top: 18px; padding: 13px 14px; color: var(--green-ink); background: var(--green-bg); border: 1px solid #d8e5d5; border-radius: 8px; }
.connector-trust-note span { flex: none; font-weight: 800; }
.connector-trust-note p { margin: 0; font-size: 11px; }
.commerce-connections { min-height: 100%; }
.commerce-revenue-panel { margin-top: 16px; }
.commerce-revenue-panel .panel-description { max-width: 66ch; }
.commerce-revenue-total { margin: 18px 0 8px; font-size: 20px; font-weight: 650; line-height: 1.35; }
.commerce-revenue-list { border-top: 1px solid var(--border); }
.commerce-revenue-order { border-bottom: 1px solid var(--border); }
.commerce-revenue-order summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 0; cursor: pointer; }
.commerce-revenue-order summary span { min-width: 0; overflow-wrap: anywhere; }
.commerce-revenue-order summary strong { flex: none; white-space: nowrap; }
.commerce-revenue-order .definition-list { margin: 0 0 16px; }
.commerce-revenue-order dd { overflow-wrap: anywhere; }
.commerce-revenue-panel .compact-empty { margin: 10px 0 0; }
.commerce-revenue-panel .button { margin-top: 16px; }
@media (max-width: 640px) {
  .commerce-revenue-order summary { align-items: flex-start; flex-direction: column; gap: 3px; }
}
.commerce-connection-list { display: grid; gap: 10px; margin-top: 20px; }
.commerce-connection-card { padding: 15px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; }
.commerce-connection-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.commerce-connection-card strong, .commerce-connection-card small { display: block; }
.commerce-connection-card small { margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.commerce-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.commerce-health-grid div { padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.commerce-health-grid span, .commerce-health-grid b { display: block; }
.commerce-health-grid span { color: var(--ink-faint); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.commerce-health-grid b { margin-top: 4px; font-size: 11px; }
.commerce-health-grid small { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.commerce-health-grid .commerce-customer-health { grid-column: 1 / -1; }
.commerce-customer-sync { margin-top: 8px; font-size: 11px; }
.commerce-disconnect { margin-top: 12px; font-size: 11px; color: var(--ink-faint); }

/* Apps, reusable files, and chat share one stable workspace sidebar. */
.workspace-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 18px; padding: 4px; background: #e5e4df; border-radius: 10px; }
.workspace-tabs[hidden] { display: none; }
.workspace-tab { min-height: 34px; padding: 6px 5px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; }
.workspace-tab:hover { color: var(--ink); background: rgba(255,255,255,.52); }
.workspace-tab[aria-selected="true"] { color: var(--ink); background: #f8f8f6; box-shadow: 0 1px 2px rgba(31,33,31,.08); }
.file-navigation { margin-top: 20px; }
.file-navigation .nav-heading { margin: 0 10px 8px; }
.chat-history { margin-top: 20px; }
.chat-history[hidden] { display: none; }
.chat-history-tools { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
.chat-history-tools input { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.chat-new { height: 34px; padding: 0; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: 7px; font-size: 18px; line-height: 1; cursor: pointer; }
.chat-new:hover { color: var(--ink); border-color: var(--border-strong); }
.chat-history-list { margin-top: 12px; }
.chat-history-group { margin: 14px 0 4px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.chat-history-item { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 8px; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; }
.chat-history-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-item span:last-child { flex: none; color: var(--ink-faint); font-size: 11px; }
.chat-history-item:hover { background: #ecebe7; }
.chat-history-item.is-active { background: #fff; font-weight: 600; }
.chat-history-empty { margin: 12px 8px; color: var(--ink-faint); font-size: 12px; }

.chat-view { display: flex; flex-direction: column; min-height: calc(100vh - 150px); max-width: 780px; margin: 0 auto; }
.chat-view[hidden] { display: none; }
.chat-intro { margin-top: clamp(24px, 12vh, 120px); text-align: center; }
.chat-mark { width: 64px; height: 64px; }
.chat-intro h1 { margin: 10px 0 8px; font-family: var(--serif); font-size: clamp(30px, 4vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.chat-intro p { max-width: 520px; margin: 0 auto 26px; color: var(--ink-soft); }
.chat-view.has-turns .chat-intro, .chat-view.has-turns .chat-starters, .chat-view.has-turns .chat-ready { display: none; }
.photos-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
.photos-source { display: grid; align-content: start; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.photos-source strong { font-size: 14px; }
.photos-source p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.photos-source .button { justify-self: start; }
.photos-source-row { display: flex; gap: 8px; }
.photos-source-row input { flex: 1; min-width: 0; }
.photos-drop { cursor: pointer; border-style: dashed; }
.photos-drop.is-over { border-color: var(--focus); background: var(--blue-bg); }
.photos-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photos-status { min-height: 18px; margin: 12px 0 0; }
.photos-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 12px; }
.photos-filters button { padding: 6px 12px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.photos-filters button.is-active { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.photos-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }
.photos-empty { color: var(--ink-soft); }
[data-media-remove][data-armed="true"] { color: var(--red-ink); font-weight: 600; }
.looks { margin: 8px 0 28px; }
.looks h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.looks > p { margin: 6px 0 16px; color: var(--ink-soft); font-size: 13px; }
.looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.look-card { display: grid; align-content: start; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.look-card.is-selected { border-color: var(--focus); box-shadow: 0 0 0 2px var(--blue-bg); }
.look-viewport { position: relative; height: 440px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.look-frame { position: absolute; top: 0; left: 0; width: 640px; height: 1400px; border: 0; transform-origin: top left; pointer-events: none; }
.look-card strong { font-size: 14px; }
.look-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.look-card .button { justify-self: start; }
.look-tag { margin-left: 4px; padding: 2px 7px; color: var(--ink-soft); background: var(--blue-bg); border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .02em; vertical-align: 2px; }
.look-card-new { align-content: center; min-height: 300px; border-style: dashed; background: transparent; }
.look-card-new textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); }
.look-new-status { min-height: 16px; }
.onboarding-site { display: grid; gap: 8px; margin: 18px 0 6px; }
.onboarding-site label { font-size: 13px; font-weight: 600; }
.onboarding-site-row { display: flex; flex-wrap: wrap; gap: 8px; }
.onboarding-site-row input { flex: 1; min-width: 200px; }
.onboarding-site .field-help { margin: 0; }
.onboarding-site .field-help.is-found { color: var(--green-ink); }
.ready-section { margin-top: 24px; }
.ready-section h2, .home-recent h2 { margin: 0 0 10px; color: var(--ink-faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.chat-ready { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
.ready-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ready-card { display: grid; align-content: start; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.ready-card strong { font-size: 14px; }
.ready-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.ready-card .button { justify-self: start; margin-top: 4px; }
.ready-card.is-setup { background: var(--surface-muted); }
.home-recent { margin-top: 24px; }
.home-recent ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-recent button { display: grid; gap: 4px; width: 100%; padding: 14px 16px; color: var(--ink); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.home-recent button:hover { border-color: var(--border-strong); }
.home-recent strong { font-size: 14px; overflow-wrap: anywhere; }
.home-recent span { color: var(--ink-faint); font-size: 12px; }
.home-legacy { display: none !important; }
.home-attention { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.home-attention h2 { margin: 2px 0 4px; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.home-attention p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.home-attention .eyebrow { color: var(--ink-faint); }
.home-attention .home-attention-more { margin-top: 6px; color: var(--ink-faint); font-size: 12px; }
.home-attention > div { min-width: 0; }
.home-attention > .button { flex: 0 0 auto; white-space: nowrap; }
.home-outcome { margin-top: 24px; }
.home-outcome h2 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.home-outcome-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.home-outcome-list div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.home-outcome-list dt { color: var(--ink-faint); font-size: 11.5px; }
.home-outcome-list dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; }
.home-outcome-note { margin: 6px 0 0; color: var(--ink-faint); font-size: 12px; }
@media (max-width: 640px) { .home-attention { flex-direction: column; align-items: flex-start; } }
.launch-board { margin-top: 24px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.launch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.launch-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.launch-count { color: var(--ink-soft); font-size: 12px; }
.launch-readiness { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; padding: 0; list-style: none; }
.launch-readiness button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--ink); background: transparent; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.launch-readiness button:hover { border-color: var(--border-strong); }
.launch-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9c7c1; }
.launch-dot.is-ready { background: #3f8f5b; }
.launch-dot.is-attention { background: #d98a1f; }
.launch-program { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.launch-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.launch-item strong { font-size: 14px; }
.launch-item p { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.launch-item .launch-note { color: #8a5a12; }
.launch-status { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #efeee9; color: var(--ink-soft); font-size: 10.5px; font-weight: 650; letter-spacing: .02em; vertical-align: 1px; }
.launch-status.is-live { background: #e3f1e7; color: #2d6b43; }
.launch-status.is-draft { background: var(--blue-bg); color: var(--ink); }
.launch-status.is-blocked { background: #fbeedb; color: #8a5a12; }
.launch-foot { margin: 12px 0 0; color: var(--ink-faint); font-size: 12px; }
.launch-review-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; background: var(--blue-bg); border-radius: 8px; font-size: 13px; }
.program-review { margin-top: 14px; }
.program-review h3 { margin: 0; font-size: 15px; font-weight: 650; }
.program-review-help { margin: 4px 0 12px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.program-review-list { display: grid; gap: 12px; }
.review-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.review-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.review-item-kind { color: var(--ink-faint); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.review-item-head strong { font-size: 14px; overflow-wrap: anywhere; }
.review-rows { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; }
.review-rows dt { color: var(--ink-faint); }
.review-rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.review-rows ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.review-rows .review-sub { color: var(--ink-soft); }
.review-check::before { display: inline-block; width: 1.2em; font-weight: 700; }
.review-check.is-pass::before { content: "✓"; color: #2d6b43; }
.review-check.is-warn::before { content: "!"; color: #8a5a12; }
.review-check.is-fail::before { content: "✕"; color: #a23b2a; }
.review-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--ink-faint); font-size: 12px; }
@media (max-width: 640px) { .review-rows { grid-template-columns: 1fr; gap: 2px; } .review-rows dd { margin-bottom: 8px; } .launch-review-bar { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) { .launch-item { grid-template-columns: 1fr; } .launch-item .button { justify-self: start; } }
.noticed-section { margin-top: 24px; }
.noticed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.noticed-head h2 { margin: 0; color: var(--ink-faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.noticed-help { margin: 6px 0 12px; color: var(--ink-soft); font-size: 13px; }
.noticed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.noticed-card { display: grid; align-content: start; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--focus); border-radius: 10px; }
.noticed-card strong { font-size: 15px; line-height: 1.3; }
.noticed-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.noticed-draft { padding: 8px 10px; color: var(--ink) !important; background: var(--canvas, #f7f6f3); border-radius: 6px; font-size: 12px !important; }
.noticed-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.home-routines { margin-top: 28px; }
.home-routines-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-routines-head h2 { margin: 0; color: var(--ink-faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-routines-help { margin: 6px 0 12px; color: var(--ink-soft); font-size: 13px; }
.routine-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.routine-starters button { padding: 8px 12px; color: var(--ink); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.routine-starters button:hover { border-style: solid; }
.routine-form { display: grid; gap: 12px; margin-bottom: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.routine-form textarea { width: 100%; resize: vertical; }
.routine-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.routine-form-row .field { margin: 0; }
.routine-form-row .field { min-width: 130px; }
.routine-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.routine-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.routine-item { display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.routine-item.is-paused { opacity: .7; }
.routine-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.routine-item strong { font-size: 14px; }
.routine-when { color: var(--ink-soft); font-size: 12px; }
.routine-instruction { margin: 0; color: var(--ink-soft); font-size: 13px; }
.routine-last { margin: 0; padding: 8px 10px; color: var(--ink); background: var(--canvas, #f7f6f3); border-radius: 6px; font-size: 12px; line-height: 1.5; }
.routine-last.is-failed { color: var(--red-ink); background: var(--red-bg); }
.routine-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-feed { flex: 1; margin: 0; padding: 8px 0 16px; list-style: none; }
.chat-view:not(.has-turns) .chat-feed { display: none; }
.chat-composer { padding: 14px 16px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 6px 24px rgba(31, 33, 31, .06); }
.chat-view.has-turns .chat-composer { position: sticky; bottom: 16px; }
.chat-composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(227, 93, 66, .14); }
.chat-composer textarea { width: 100%; min-height: 52px; max-height: 220px; padding: 0; color: var(--ink); background: transparent; border: 0; font: inherit; font-size: 16px; line-height: 1.5; resize: none; outline: none; }
.chat-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--ink-faint); font-size: 12px; }
.chat-send { width: 38px; height: 38px; padding: 0; color: #fff; background: #20221f; border: 0; border-radius: 10px; font-size: 18px; cursor: pointer; }
.chat-send:disabled { background: var(--border-strong); cursor: default; }
.chat-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.chat-starters button { padding: 8px 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.chat-starters button:hover { border-color: var(--border-strong); }

.assistant-turn { margin-bottom: 18px; }
.assistant-turn.is-user { display: flex; justify-content: flex-end; }
.assistant-turn > div { min-width: 0; max-width: 100%; }
.assistant-bubble { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: 15px; white-space: pre-wrap; }
.assistant-turn.is-user .assistant-bubble { max-width: 560px; color: #fff; background: #20221f; }
.assistant-turn.is-assistant .assistant-bubble { max-width: none; padding-left: 0; padding-right: 0; color: var(--ink); }
.assistant-turn.is-pending .assistant-bubble { color: var(--ink-faint); }
.assistant-card { max-width: 560px; margin-top: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.assistant-card-head { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.assistant-card-head strong { font-size: 15px; }
.assistant-card-head span { flex: none; color: var(--ink-faint); font-size: 12px; }
.assistant-card-preview { position: relative; height: 260px; margin: 12px 16px 0; overflow: hidden; background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; }
.assistant-card-preview iframe { width: 200%; height: 520px; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.assistant-card dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 10px; margin: 12px 16px 0; font-size: 13px; }
.assistant-card dt { color: var(--ink-faint); }
.assistant-card dd { margin: 0; }
.assistant-card-warnings { margin: 10px 16px 0; padding: 0; color: var(--yellow-ink); font-size: 12px; list-style: none; }
.assistant-card-actions { display: flex; gap: 8px; padding: 14px 16px 16px; }
.assistant-card-summary { margin: 8px 16px 0; color: var(--ink-soft); font-size: 13px; }
.assistant-card-steps { display: grid; gap: 4px; margin: 12px 16px 0; padding: 0; list-style: none; counter-reset: none; font-size: 13px; }
.assistant-card-steps li { padding: 7px 10px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.assistant-card-steps li.is-trigger { color: var(--ink-soft); background: transparent; border-style: dashed; }
.assistant-card-steps li.is-delay { color: var(--ink-faint); background: transparent; border: 0; padding: 2px 10px; font-size: 12px; }
.assistant-popup-mock { display: grid; gap: 6px; justify-items: center; margin: 12px 16px 0; padding: 22px 18px; text-align: center; background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; }
.assistant-popup-mock small { color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.assistant-popup-mock strong { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.assistant-popup-mock p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.assistant-popup-mock span { margin-top: 4px; padding: 7px 16px; color: #fff; background: #20221f; border-radius: 999px; font-size: 12px; font-weight: 600; }
.assistant-brand-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.assistant-count { display: inline-block; margin-top: 8px; padding: 8px 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.assistant-count b { margin-right: 6px; font-size: 16px; }
.chat-phone-bar { display: none; }
@media (max-width: 720px) {
  .chat-phone-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
  .chat-view { min-height: calc(100vh - 220px); }
  .chat-intro { margin-top: 16px; }
  .chat-starters { justify-content: flex-start; }
}
@media (max-width: 560px) {
  /* The project switcher and account buttons wrap under the name instead of widening the page. */
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-meta { flex-wrap: wrap; gap: 6px; }
}
.commerce-deliveries { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.commerce-deliveries summary { color: var(--ink-soft); cursor: pointer; font-size: 10px; font-weight: 700; }
.commerce-deliveries ol { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.commerce-deliveries li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-faint); font-size: 9px; }
.commerce-deliveries li b { color: var(--ink-soft); white-space: nowrap; }
.commerce-catalog-preview { margin-top: 14px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 7px; }
.commerce-catalog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.commerce-catalog-header strong { font-size: 12px; }
.commerce-catalog-sync { min-height: 30px; padding: 6px 11px; font-size: 10px; }
.commerce-catalog-list { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.commerce-catalog-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); }
.commerce-catalog-list li > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.commerce-product-visual { flex: none; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 5px; color: var(--ink-faint); font-family: var(--serif); font-size: 18px; }
.commerce-product-visual img { width: 100%; height: 100%; object-fit: cover; }
.commerce-catalog-list li > div.commerce-product-text { display: block; min-width: 0; }
.commerce-catalog-list b, .commerce-catalog-list a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--ink); }
.commerce-catalog-list a:hover { color: var(--focus-ink); text-decoration: underline; }
.commerce-catalog-list small { margin-top: 2px; color: var(--ink-faint); font-family: var(--sans); font-size: 10px; }
.commerce-catalog-list li > span { flex: none; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }
.commerce-catalog-list .commerce-catalog-empty { justify-content: flex-start; color: var(--ink-faint); font-size: 11px; }
.commerce-catalog-more { width: 100%; margin-top: 9px; min-height: 32px; font-size: 10px; }
.commerce-privacy-panel { margin-top: 18px; }
.commerce-privacy-list { display: grid; gap: 8px; margin-top: 18px; }
.commerce-privacy-request { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(160px, .6fr) auto; gap: 14px; align-items: center; padding: 13px 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.commerce-privacy-request strong, .commerce-privacy-request small, .commerce-privacy-request span, .commerce-privacy-request b { display: block; }
.commerce-privacy-request small { margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.commerce-privacy-request .commerce-privacy-match { margin-top: 7px; color: var(--ink-muted); font-family: var(--sans); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.commerce-privacy-due span { color: var(--ink-faint); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.commerce-privacy-due b { margin-top: 4px; font-size: 10px; }
.commerce-privacy-inspect { min-height: 31px; padding: 6px 11px; font-size: 10px; }
.commerce-privacy-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.commerce-privacy-impact { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--border); }
.commerce-privacy-impact-facts { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.commerce-privacy-impact-facts span { color: var(--ink); font-size: 10px; }
.commerce-privacy-impact > small { margin-top: 9px; font-family: var(--sans); font-size: 10px; }
.commerce-privacy-data-package { grid-column: 1 / -1; min-width: 0; padding: 17px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.commerce-privacy-data-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.commerce-privacy-data-header strong { font-size: 16px; }
.commerce-privacy-data-package > p { margin: 10px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.commerce-privacy-data-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.commerce-privacy-data-section { min-width: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.commerce-privacy-data-section summary { padding: 11px 13px; cursor: pointer; font-size: 12px; font-weight: 600; }
.commerce-privacy-data-records { max-height: 310px; overflow: auto; padding: 0 12px 12px; }
.commerce-privacy-data-records > p { margin: 6px 0; color: var(--ink-faint); font-size: 11px; }
.commerce-privacy-data-record { margin: 8px 0 0; padding: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }
.commerce-privacy-data-record > div { display: grid; grid-template-columns: minmax(88px, .35fr) minmax(0, 1fr); gap: 9px; padding: 3px 0; }
.commerce-privacy-data-record dt { color: var(--ink-faint); font-size: 10px; }
.commerce-privacy-data-record dd { margin: 0; font-size: 11px; overflow-wrap: anywhere; }
.commerce-privacy-data-gaps { margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--border); }
.commerce-privacy-data-gaps strong { font-size: 12px; }
.commerce-privacy-data-gaps ul { margin: 8px 0 0; padding-left: 19px; color: var(--ink-muted); font-size: 11px; line-height: 1.5; }
.commerce-privacy-outcome-form, .commerce-privacy-outcome-receipt { grid-column: 1 / -1; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.commerce-privacy-outcome-form { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: 12px; }
.commerce-privacy-outcome-form > p, .commerce-privacy-outcome-form > .commerce-privacy-outcome-ack, .commerce-privacy-outcome-form > .commerce-privacy-outcome-actions { grid-column: 1 / -1; }
.commerce-privacy-outcome-form > p { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.commerce-privacy-outcome-form label > span { margin-bottom: 6px; color: var(--ink-muted); font-size: 10px; font-weight: 700; }
.commerce-privacy-outcome-form select, .commerce-privacy-outcome-form input[type="text"], .commerce-privacy-outcome-form textarea { width: 100%; }
.commerce-privacy-outcome-form textarea { resize: vertical; }
.commerce-privacy-outcome-form .commerce-privacy-outcome-ack { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; background: var(--warning-soft); border-radius: 6px; }
.commerce-privacy-outcome-form .commerce-privacy-outcome-ack input { flex: none; margin-top: 2px; }
.commerce-privacy-outcome-form .commerce-privacy-outcome-ack span { margin: 0; color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.45; }
.commerce-privacy-outcome-actions { display: flex; gap: 8px; justify-content: flex-end; }
.commerce-privacy-outcome-receipt strong { font-size: 12px; }
.commerce-privacy-outcome-receipt p { margin: 7px 0 0; color: var(--ink); font-size: 12px; line-height: 1.5; }
.commerce-privacy-outcome-receipt small { margin-top: 8px; font-family: var(--mono); overflow-wrap: anywhere; }
.commerce-test-lab { margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.42); }
.commerce-test-lab > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; }
.commerce-test-lab > summary::-webkit-details-marker { display: none; }
.commerce-test-lab > summary strong, .commerce-test-lab > summary small { display: block; }
.commerce-test-lab > summary strong { font-size: 12px; }
.commerce-test-lab > summary small { margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.commerce-test-lab > summary > span:last-child { color: var(--ink-faint); font-size: 20px; transition: transform 160ms ease; }
.commerce-test-lab[open] > summary > span:last-child { transform: rotate(45deg); }
.commerce-test-lab .commerce-grid { padding: 0 16px 16px; }

#commerce-fixture-form { grid-column: 1; }
.commerce-result { grid-column: 2; grid-row: 1 / span 2; }
.source-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; color: var(--ink-soft); font-size: 12px; }
.source-summary strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.permission-strip { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--green-bg); border: 1px solid #d8e5d5; border-radius: 8px; }
.permission-strip p { margin: 0; color: var(--green-ink); font-size: 12px; }

.definition-list { margin: 24px 0 0; }
.definition-list > div { padding: 14px 0; border-bottom: 1px solid var(--border); }
.definition-list > div:last-child { border-bottom: 0; }
.definition-list dt { color: var(--ink); font-size: 12px; font-weight: 700; }
.definition-list dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.definition-list.compact > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; }
.definition-list.compact dd { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.metrics-evidence-grid { margin-top: 18px; }
.metrics-evidence-grid .definition-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.metrics-evidence-grid .definition-list dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.engagement-panel { margin-top: 18px; overflow: hidden; background: #f5f3ed; }
.engagement-panel h2 { margin-top: 4px; font-size: 24px; }
.engagement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.engagement-grid article { min-height: 150px; padding: 20px; background: rgba(255,255,255,.74); border: 1px solid var(--border); border-radius: 8px; }
.engagement-caveat { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink-faint) !important; font-size: 11px; line-height: 1.55; }
.mono { font-family: var(--mono); font-size: 11px !important; }

.result-box { margin-top: 22px; padding: 14px; color: var(--green-ink); background: var(--green-bg); border: 1px solid #d8e5d5; border-radius: 8px; font-size: 13px; }
.project-defaults { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 13px 14px; background: var(--green-bg); border: 1px solid #d8e5d5; border-radius: 8px; }
.project-defaults p { margin: 0; color: var(--green-ink); font-size: 12px; }
.form-assurance { margin: 12px 0 0; color: var(--ink-faint); font-size: 11px; text-align: center; }
.setup-actions { display: grid; gap: 8px; }
.campaign-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.campaign-actions .button { flex: 1 1 150px; }
#campaign-boundary { margin-top: 14px; }
.campaign-launch-review { margin-top: 22px; padding: 18px; background: #f6f3ec; border: 1px solid var(--border); border-radius: 10px; }
.campaign-review-heading, .campaign-progress-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.campaign-review-heading h3 { margin: 3px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; }
.campaign-review-grid { display: grid; grid-template-columns: 1.3fr repeat(2, minmax(0, .85fr)); gap: 8px; margin-top: 16px; }
.campaign-review-stat { min-width: 0; padding: 13px; background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 7px; }
.campaign-review-stat > span, .campaign-review-stat > strong { display: block; }
.campaign-review-stat > span { color: var(--ink); font-family: var(--serif); font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1; }
.campaign-review-stat > strong { margin-top: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.campaign-review-stat > p { overflow: hidden; margin: 8px 0 0; color: var(--ink-faint); font-size: 9px; line-height: 1.45; text-overflow: ellipsis; }
.campaign-review-included { background: var(--green-bg); border-color: #d8e5d5; }
.campaign-review-included > span, .campaign-review-included > strong { color: var(--green-ink); }
.campaign-review-note { margin: 13px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.campaign-clicked-links { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.campaign-recipient-outcomes { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.campaign-recipient-outcomes summary { cursor: pointer; font-weight: 650; }
.campaign-recipient-outcomes summary span { margin-left: 8px; color: var(--ink-faint); font-size: 10px; font-weight: 400; }
.campaign-recipient-outcomes p { color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.campaign-recipient-outcomes ol { margin: 14px 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.campaign-recipient-outcomes li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.campaign-recipient-outcomes li span:first-child { overflow-wrap: anywhere; }
.campaign-recipient-outcomes li span:last-child { color: var(--ink-soft); white-space: nowrap; }
.campaign-clicked-links-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.campaign-clicked-links-heading h3 { margin: 3px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; }
.campaign-clicked-links-intro, .campaign-clicked-links-empty { margin: 10px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.campaign-clicked-links-list { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.campaign-clicked-links-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.campaign-clicked-links-list .link-destination { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.campaign-clicked-links-list .link-counts { color: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.campaign-clicked-links-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.campaign-clicked-links-export-status { margin: 8px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
@media (max-width: 650px) {
  .campaign-clicked-links-list li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .campaign-clicked-links-list .link-counts { text-align: left; white-space: normal; }
}
.campaign-mailbox-performance { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.campaign-daily-movement { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.campaign-daily-movement .campaign-mailbox-heading p { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.campaign-daily-window { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.campaign-daily-window .button { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.campaign-daily-window span { min-width: 0; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.campaign-daily-window .button:disabled { opacity: .45; cursor: default; }
@media (max-width: 520px) { .campaign-daily-window { justify-content: space-between; gap: 6px; } }
.campaign-daily-scroll { overflow-x: auto; margin-top: 14px; }
.campaign-daily-scroll table { width: 100%; min-width: 430px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.campaign-daily-scroll th, .campaign-daily-scroll td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; text-align: right; }
.campaign-daily-scroll th:first-child, .campaign-daily-scroll td:first-child { padding-left: 0; text-align: left; }
.campaign-daily-scroll th { color: var(--ink-soft); font-weight: 700; }
.campaign-daily-scroll td { color: var(--ink); }
.campaign-daily-scroll tbody tr:last-child td { border-bottom: 0; }
.campaign-mailbox-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.campaign-mailbox-heading h3 { margin: 3px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; }
.campaign-mailbox-intro, .campaign-mailbox-caveat { margin: 10px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.campaign-mailbox-table { overflow-x: auto; margin-top: 15px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.campaign-mailbox-row { display: grid; grid-template-columns: minmax(116px, 1.25fr) repeat(5, minmax(76px, .75fr)); min-width: 560px; border-top: 1px solid var(--border); }
.campaign-mailbox-row:first-child { border-top: 0; }
.campaign-mailbox-row > span { padding: 10px 8px; color: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.campaign-mailbox-row > span:first-child { padding-left: 0; color: var(--ink); font-weight: 700; text-align: left; }
.campaign-mailbox-row > span:last-child { padding-right: 0; }
.campaign-mailbox-header > span { color: var(--ink-faint); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.campaign-progress { margin-top: 16px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 9px; }
.campaign-progress-heading strong { font-size: 12px; }
.campaign-progress-heading span { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.campaign-progress-track { overflow: hidden; height: 7px; margin-top: 12px; background: #ebe8e0; border-radius: 999px; }
.campaign-progress-track span { display: block; width: 0; height: 100%; background: var(--focus); border-radius: inherit; transition: width 260ms ease; }
.campaign-progress > p { margin: 10px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.45; }
.campaign-schedule-controls { margin-top: 16px; padding: 15px; background: var(--blue-bg); border: 1px solid #c8dfeb; border-radius: 9px; }
.campaign-schedule-controls > label { display: block; color: var(--blue-ink); font-size: 11px; font-weight: 700; }
.campaign-schedule-controls > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 9px; }
.campaign-schedule-controls input { min-width: 0; background: #fff; }
.campaign-schedule-controls > p { margin: 9px 0 0; color: var(--blue-ink); font-size: 9px; line-height: 1.45; }
.campaign-audience { margin: 0; padding: 15px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 8px; }
.campaign-audience legend { padding: 0 5px; color: var(--ink); font-size: 12px; font-weight: 700; }
.campaign-audience-preview { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.audience-preview-count { display: grid; width: 52px; height: 52px; place-items: center; color: var(--ink); background: #f0eee8; border-radius: 50%; font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; }
.campaign-audience-preview p { min-width: 0; margin: 0; }
.campaign-audience-preview strong, .campaign-audience-preview small { display: block; }
.campaign-audience-preview strong { font-size: 11px; }
.campaign-audience-preview small { margin-top: 4px; color: var(--ink-faint); font-size: 9px; line-height: 1.4; }
.campaign-source { margin: 0; padding: 0; border: 0; }
.campaign-source legend { margin-bottom: 9px; color: var(--ink); font-size: 12px; font-weight: 700; }
.campaign-source-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.campaign-source-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 78px; padding: 13px; color: var(--ink-soft); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease; }
.campaign-source-option:hover { background: #f3f1eb; border-color: var(--border-strong); }
.campaign-source-option:active { transform: translateY(1px); }
.campaign-source-option:has(input:checked) { color: var(--blue-ink); background: var(--blue-bg); border-color: #9bc9df; box-shadow: inset 3px 0 var(--blue-ink); }
.campaign-source-option input { width: 16px; min-height: 16px; margin: 2px 0 0; accent-color: var(--blue-ink); }
.campaign-source-option strong, .campaign-source-option small { display: block; }
.campaign-source-option strong { color: var(--ink); font-size: 12px; }
.campaign-source-option small { margin-top: 4px; font-size: 11px; font-weight: 400; line-height: 1.4; }
.campaign-template-source { padding: 16px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 8px; }
.campaign-template-version { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.campaign-template-version p { min-width: 0; margin: 0; }
.campaign-template-version strong, .campaign-template-version small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-template-version strong { font-size: 12px; }
.campaign-template-version small { margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.campaign-template-variables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.campaign-template-variables:empty { display: none; }
.campaign-static-note { margin: 14px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.campaign-static-note strong { color: var(--ink-soft); }
.campaign-inline-fields { display: grid; gap: 20px; }
.campaign-sections-editor { display: grid; gap: 12px; }
.campaign-sections-heading, .campaign-section-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.campaign-sections-heading .field-help { margin: 4px 0 0; }
#campaign-sections { display: grid; gap: 12px; }
.campaign-section-block { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.campaign-section-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.campaign-section-toolbar strong { white-space: nowrap; }
@media (max-width: 640px) {
  .campaign-sections-heading, .campaign-section-toolbar { flex-direction: column; align-items: stretch; }
}
.campaign-import-source { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.campaign-import-source .field-help { margin: 0; }
.campaign-omnisend-inspector { padding: 12px 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.campaign-omnisend-inspector summary { cursor: pointer; font-weight: 650; }
.campaign-omnisend-inspector-body { display: grid; gap: 12px; padding-top: 16px; }
.campaign-omnisend-inspector p { margin: 0; }
.campaign-omnisend-inspector small { color: var(--ink-soft); }
.campaign-omnisend-inspector pre { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.campaign-import-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.campaign-import-actions span { color: var(--ink-soft); font-size: 12px; }
.campaign-import-findings { margin: 0; padding: 0 0 0 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.campaign-import-findings.is-blocked { color: var(--danger, #a23b2a); }
.email-preview-frame.is-offline-import { pointer-events: none; }
.automation-agent-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 16px; align-items: start; }
.automation-agent-composer { padding: 30px; }
.automation-agent-composer h2, .automation-proposal-panel h2 { margin: 3px 0 0; font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.automation-agent-form { display: grid; gap: 20px; margin-top: 24px; }
.automation-command-field textarea { min-height: 172px; padding: 17px 18px; background: #fff; border-color: var(--border-strong); border-radius: 9px; font-size: 15px; line-height: 1.6; resize: vertical; }
.automation-command-field textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(227, 93, 66, .12); }
.automation-prompt-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: -8px; }
.automation-prompt-starters > span { margin-right: 2px; color: var(--ink-faint); font-size: 10px; }
.automation-prompt-starters button { padding: 7px 10px; color: var(--ink-soft); background: transparent; border: 1px solid var(--border); border-radius: 999px; font-size: 10px; font-weight: 650; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.automation-prompt-starters button:hover { color: var(--ink); background: #fff; border-color: var(--border-strong); }
.app-events-guide { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.app-events-guide summary { font-size: 12px; font-weight: 700; cursor: pointer; }
.app-events-guide > p { margin: 8px 0 10px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.app-events-guide pre { white-space: pre-wrap; word-break: break-all; }
.automation-app-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; margin: -6px 0 0; padding: 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.automation-app-events legend { padding: 0 4px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.automation-app-events label span { color: var(--ink-faint); font-weight: 400; }
.automation-app-events input { font-family: var(--mono); font-size: 12px; }
.automation-app-events .field-help { grid-column: 1 / -1; margin: 0; }
#automation-segment-entry .field { grid-column: 1 / -1; }
.automation-agent-settings { padding: 0 13px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.automation-agent-settings summary { padding: 11px 0; color: var(--ink-soft); font-size: 10px; font-weight: 700; cursor: pointer; }
.automation-agent-settings .field { padding: 0 0 13px; }
.automation-agent-submit { display: flex; align-items: center; gap: 12px; }
.automation-agent-submit .button { min-width: 160px; }
.automation-agent-submit span { color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.form-error { margin: 0; padding: 10px 12px; color: var(--red-ink); background: var(--red-bg); border: 1px solid #efc8ca; border-radius: 6px; font-size: 11px; }
.automation-proposal-panel { min-height: 290px; padding: 28px; }
.automation-proposal-panel .panel-heading > div { min-width: 0; }
.automation-proposal-panel .panel-heading h2 { font-size: 23px; }
.automation-proposal-summary { max-width: 58ch; margin: 9px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.automation-proposal-empty { display: flex; min-height: 232px; justify-content: center; flex-direction: column; padding: 4px 12px; }
.automation-proposal-empty h2 { max-width: 350px; margin-top: 8px; }
.automation-proposal-empty > p:last-child { max-width: 43ch; margin: 12px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.automation-proposal-intent { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.automation-proposal-intent li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--ink-soft); background: #f1f0ed; border-radius: 999px; font-size: 10px; line-height: 1.3; }
.automation-proposal-intent li.is-checked { color: var(--green-ink); background: var(--green-bg); }
.automation-proposal-intent li.is-checked::before { content: "\2713"; font-weight: 700; }
.automation-proposal-intent li.is-violated { color: var(--red-ink); background: var(--red-bg); font-weight: 650; }
.automation-proposal-intent li.is-violated::before { content: "!"; font-weight: 800; }
.automation-proposal-audience { display: grid; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--border); }
.automation-proposal-audience > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.automation-proposal-audience dt { color: var(--ink-faint); font-size: 10px; }
.automation-proposal-audience dd { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.45; }
.automation-proposal-warning { margin-top: 16px; padding: 11px 12px; color: var(--yellow-ink); background: var(--yellow-bg); border: 1px solid #eadbac; border-radius: 6px; font-size: 12px; line-height: 1.5; }
.automation-proposal-warning p { margin: 0; }
.automation-proposal-warning p + p { margin-top: 5px; }
.automation-proposal-steps { display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; }
.automation-proposal-step { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 11px; position: relative; padding: 0 0 17px; }
.automation-proposal-step:last-child { padding-bottom: 0; }
.automation-proposal-step::before { position: absolute; top: 25px; bottom: 0; left: 12px; width: 1px; background: var(--border); content: ""; }
.automation-proposal-step:last-child::before { display: none; }
.automation-proposal-step > span { display: grid; z-index: 1; width: 25px; height: 25px; place-items: center; color: var(--focus-ink); background: #fff7f3; border: 1px solid #e7a796; border-radius: 50%; font-family: var(--mono); font-size: 8px; }
.automation-proposal-step > div { min-width: 0; padding-top: 2px; }
.automation-proposal-step strong, .automation-proposal-step small { display: block; }
.automation-proposal-step strong { font-size: 12px; line-height: 1.4; }
.automation-proposal-step small { margin-top: 4px; color: var(--ink-faint); font-size: 11px; line-height: 1.5; }
.automation-proposal-email { margin-top: 8px; padding: 11px 12px; background: #f8f7f4; border-radius: 7px; }
.automation-proposal-email i { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 11px; font-style: normal; }
.automation-proposal-step.is-quiet { padding-bottom: 12px; }
.automation-proposal-step.is-quiet strong { color: var(--ink-faint); font-weight: 500; }
.automation-proposal-step.is-quiet > span { color: var(--ink-faint); background: var(--surface-muted); border-color: var(--border); }
.automation-proposal-email b, .automation-proposal-email p { display: block; margin: 0; }
.automation-proposal-email b { font-size: 11px; }
.automation-proposal-email p { margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.automation-proposal-assumptions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.automation-proposal-assumptions summary { font-size: 11px; font-weight: 700; }
.automation-proposal-assumptions ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.automation-proposal-assumptions li + li { margin-top: 6px; }
.automation-proposal-receipt { margin: 12px 0 0; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.automation-proposal-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.automation-proposal-actions .text-button { margin: 0 0 0 auto; font-size: 11px; font-weight: 650; }
.agent-automation-drafts-link { margin-top: 8px; color: var(--focus-ink); font-size: 12px; }
.automation-trigger-note { margin: 0 0 10px; padding: 8px 10px; color: var(--yellow-ink); background: var(--yellow-bg); border-radius: 6px; font-size: 10px; line-height: 1.45; }
.automation-drafts { margin-top: 16px; padding: 18px 20px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.automation-drafts-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.automation-drafts-heading h2 { margin: 0; font-size: 13px; font-weight: 700; }
.automation-drafts-list { display: grid; margin-top: 8px; }
.provider-flow-review { margin-top: 18px; padding: 18px 20px; }
.provider-flow-review > summary { cursor: pointer; font-weight: 700; }
.provider-flow-review > p { color: var(--ink-faint); line-height: 1.5; }
.provider-flow-review textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.provider-flow-review > button { margin-top: 12px; }
.provider-flow-review > section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.provider-flow-review > section h3 { margin: 0 0 4px; font-size: 18px; }
.provider-flow-review > section h4 { margin: 18px 0 6px; font-size: 13px; }
.provider-flow-review > section ol, .provider-flow-review > section ul { margin: 8px 0 0; padding-left: 20px; }
.provider-flow-review > section li { padding: 4px 0; line-height: 1.45; }
.provider-flow-review > section li small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11px; overflow-wrap: anywhere; }
.provider-flow-review > section li .provider-flow-email-action { display: block; margin: 4px 0 0; font-size: 11px; font-weight: 650; }
.provider-flow-template-reference { margin: 10px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); }
.provider-flow-template-reference summary { cursor: pointer; font-weight: 650; }
.provider-flow-template-reference p { margin: 8px 0; color: var(--ink-soft); font-size: 12px; }
.provider-flow-template-reference pre { max-height: 260px; overflow: auto; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.provider-flow-review > section > button { margin-top: 16px; }
.provider-trigger-evidence { margin: 16px 0 20px; padding: 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.provider-trigger-evidence-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.provider-trigger-evidence-heading h4, .provider-trigger-evidence-columns h5 { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; }
.provider-trigger-evidence-heading p { max-width: 65ch; margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.provider-trigger-evidence-heading button { flex-shrink: 0; }
.provider-trigger-evidence > .field-help { margin: 10px 0; }
.provider-trigger-evidence > .text-button { margin-top: 12px; font-size: 11px; }
.provider-trigger-evidence-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 13px; }
.provider-trigger-evidence-columns > div { min-width: 0; }
.provider-trigger-evidence-columns .field-help { margin: 4px 0 8px; }
.provider-trigger-evidence-columns ul { margin: 0; padding: 0; list-style: none; }
.provider-trigger-evidence-columns li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.provider-trigger-evidence-columns li:last-child { border-bottom: 0; }
.provider-trigger-evidence-columns li strong, .provider-trigger-evidence-columns li small { display: block; overflow-wrap: anywhere; }
.provider-trigger-evidence-columns li strong { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.provider-trigger-evidence-columns li small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
@media (max-width: 760px) { .provider-trigger-evidence-heading { flex-direction: column; } .provider-trigger-evidence-columns { grid-template-columns: 1fr; } }
.provider-flow-source { margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.provider-flow-source .field-row { margin: 12px 0; }
.provider-flow-source .field-help:last-child { margin-bottom: 0; }
.provider-flow-source > .field-row { align-items: end; }
.provider-flow-selection { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 14px; }
.provider-flow-selection[hidden] { display: none; }
.provider-flow-selection .field { min-width: min(100%, 280px); flex: 1; }
.provider-flow-selection .field-help { flex-basis: 100%; }
.provider-flow-source > details { margin: 12px 0; }
.provider-flow-source > details > summary { cursor: pointer; color: var(--ink-soft); font-size: 12px; }
.provider-flow-source > details .field { margin: 10px 0; }
.automation-draft-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 11px 8px; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; text-align: left; transition: background-color 140ms ease; }
.automation-draft-row:hover { background: #f7f6f3; }
.automation-draft-row.is-selected { background: #fff5f1; }
.automation-draft-row-copy { display: grid; gap: 2px; min-width: 0; }
.automation-draft-row-copy strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.automation-draft-row-copy span { color: var(--ink-faint); font-size: 10px; }
.automation-advanced-builder { margin-top: 18px; padding: 0 20px 20px; background: #efeeea; border: 1px solid var(--border); border-radius: 9px; }
.automation-advanced-builder > summary { padding: 15px 0; color: var(--ink); font-size: 11px; font-weight: 700; }
.automation-advanced-builder > p { margin: -2px 0 16px; color: var(--ink-faint); font-size: 10px; }
.automation-inline-fields { display: grid; gap: 20px; }
.automation-dynamic-variables { display: grid; gap: 10px; margin-top: 15px; padding: 13px 14px; color: var(--green-ink); background: var(--green-bg); border: 1px solid #d8e5d5; border-radius: 7px; }
.automation-dynamic-variables p { margin: 0; font-size: 11px; line-height: 1.45; }
.automation-dynamic-variables strong, .automation-dynamic-variables span { display: block; }
.automation-dynamic-variables span { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.automation-dynamic-variables > div { display: flex; flex-wrap: wrap; gap: 6px; }
.automation-dynamic-variables code { padding: 5px 8px; color: var(--green-ink); background: #fff; border: 1px solid #d8e5d5; border-radius: 5px; font-family: var(--mono); font-size: 9px; }
.automation-preview-frame { height: 300px; }
.automation-journey-fields { display: grid; gap: 18px; padding: 18px; background: #faf9f6; border: 1px solid var(--border); border-radius: 9px; }
.automation-journey-heading, .automation-step-activity-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.automation-journey-heading h3, .automation-step-activity-heading h4 { margin: 3px 0 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.automation-step-map { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.automation-step-map > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; position: relative; padding: 0 0 18px; }
.automation-step-map > li:last-child { padding-bottom: 0; }
.automation-step-map > li::before { position: absolute; top: 25px; bottom: 1px; left: 12px; width: 1px; background: var(--border); content: ""; }
.automation-step-map > li:last-child::before { display: none; }
.automation-step-map > li > span { display: grid; place-items: center; z-index: 1; width: 25px; height: 25px; color: var(--focus); background: #fff; border: 1px solid #e8b7a9; border-radius: 50%; font-family: var(--mono); font-size: 8px; }
.automation-step-map > li > div { min-width: 0; padding-top: 3px; }
.automation-step-map strong, .automation-step-map small { display: block; }
.automation-step-map strong { font-size: 11px; }
.automation-step-map small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.automation-step-editor > div { display: grid; gap: 7px; }
.automation-step-editor label { color: var(--ink-soft); font-size: 9px; }
.automation-step-editor input, .automation-step-editor textarea { width: 100%; }
.automation-inline-number { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--ink-soft); font-size: 10px; }
.automation-inline-number input { width: 82px; }
.automation-policy-fields { margin-top: 2px; }
.automation-operations { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.automation-operations-heading { align-items: end; margin-bottom: 12px; }
.automation-operations-heading > div { max-width: 690px; }
.automation-operations-heading h2 { margin: 0; font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.automation-operations-heading p { max-width: 66ch; margin: 3px 0 0; color: var(--ink-faint); font-size: 11px; line-height: 1.5; }
.automation-operations-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 0; align-items: start; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.automation-library-panel { min-width: 0; }
.automation-library-list { display: grid; }
.automation-library-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; width: 100%; min-height: 72px; padding: 14px 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; text-align: left; transition: background-color 140ms ease; }
.automation-library-row:last-child { border-bottom: 0; }
.automation-library-row:hover { background: #f7f6f3; }
.automation-library-row:active { background: #f0efeb; }
.automation-library-row.is-selected { background: #fff5f1; }
.automation-library-row-copy { min-width: 0; }
.automation-library-row-copy > strong { display: block; overflow: hidden; font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.automation-library-row-copy > span { display: block; margin-top: 5px; color: var(--ink-faint); font-size: 10px; line-height: 1.45; }
.automation-library-row-meta { display: grid; min-width: 152px; grid-template-columns: repeat(3, auto); gap: 12px; align-items: center; justify-content: end; }
.automation-library-stat { display: grid; gap: 2px; justify-items: end; }
.automation-library-stat strong { font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.2; }
.automation-library-stat span { color: var(--ink-faint); font-size: 9px; }
.automation-library-status.status-tag { position: relative; gap: 6px; padding: 0; background: transparent; border-radius: 0; font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.automation-library-status::before { width: 6px; height: 6px; background: currentColor; border-radius: 50%; content: ""; }
.automation-library-empty { min-height: 118px; padding: 28px 18px; }
.automation-library-empty h3 { margin: 0; font-family: var(--sans); font-size: 13px; }
.automation-library-empty p { max-width: 48ch; margin: 6px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.automation-run-panel { min-width: 0; min-height: 118px; padding: 16px 18px 18px 24px; border-left: 1px solid var(--border); }
.automation-run-panel h3 { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.3; }
.email-program { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--border); }
.email-program .panel-heading { align-items: start; }
.email-program .eyebrow { margin-bottom: 3px; font-size: 8px; }
.email-program-summary { margin: 9px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.email-program-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.email-program-limits div { min-width: 0; padding: 8px 9px; background: var(--surface-muted); border-radius: 6px; }
.email-program-limits dt { color: var(--ink-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.email-program-limits dd { margin: 3px 0 0; font-size: 10px; font-weight: 650; }
.email-program-decision { margin: 12px 0 0; padding: 9px 10px; color: var(--ink-soft); background: #f8f6f1; border-left: 2px solid var(--border-strong); font-size: 9px; line-height: 1.5; }
.email-program-decision.is-exception { color: #8a5a12; background: #fbeedb; border-left-color: #c9861a; }
.email-program-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.automation-run-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 11px; background: var(--surface-muted); border-radius: 8px; }
.automation-run-controls p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.automation-run-controls > div { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: 7px; }
.automation-run-controls label { align-self: center; font-size: 10px; }
.automation-run-controls input { width: 92px; min-height: 30px; padding: 5px 7px; }
.automation-export-note { margin: -5px 0 12px; color: var(--ink-faint); font-size: 9px; }
.automation-run-count { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.automation-run-panel .compact-empty { margin-top: 20px; padding: 0; color: var(--ink-faint); background: transparent; border: 0; border-radius: 0; font-size: 10px; line-height: 1.5; text-align: left; }
.automation-run-list { display: grid; gap: 0; margin-top: 18px; }
.automation-run-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 15px 0; border-top: 1px solid var(--border); }
.automation-run-row:first-child { border-top: 0; padding-top: 0; }
.automation-run-row-copy { min-width: 0; }
.automation-run-row-copy strong, .automation-run-row-copy span, .automation-run-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-run-row-copy strong { font-size: 11px; }
.automation-run-row-copy span { margin-top: 4px; color: var(--ink-soft); font-family: var(--mono); font-size: 9px; }
.automation-run-row-copy small { margin-top: 5px; color: var(--ink-faint); font-size: 9px; }
.automation-run-outcome { display: grid; gap: 7px; justify-items: end; }
.automation-run-message { color: var(--blue-ink); background: transparent; border: 0; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.automation-run-message:hover { color: var(--ink); }
.automation-run-activity { color: var(--focus); background: transparent; border: 0; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.automation-step-activity { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.automation-step-activity ol { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.automation-step-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.automation-step-activity li:first-child { border-top: 0; }
.automation-step-activity li strong, .automation-step-activity li span, .automation-step-activity li small { display: block; }
.automation-step-activity li strong { font-size: 10px; }
.automation-step-activity li span, .automation-step-activity li small { margin-top: 3px; color: var(--ink-faint); font-size: 8px; }
.automation-step-activity .automation-run-message { display: block; margin-top: 6px; padding: 0; text-align: left; }
.collection-more { margin: 14px auto 0; }
.email-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.email-preview-heading strong { display: block; font-size: 13px; }
.campaign-preview-meta { display: grid; gap: 3px; margin-top: 16px; padding: 12px 14px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 7px; }
.campaign-preview-meta strong, .campaign-preview-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-preview-meta strong { font-size: 12px; }
.campaign-preview-meta span { color: var(--ink-faint); font-size: 10px; }
#campaign-form.is-folded + .campaign-console .campaign-draft-preview { display: none; }
.split-layout:has(> #campaign-form.is-folded) { grid-template-columns: minmax(0, 1fr); }
.split-layout:has(> #campaign-form.is-folded) .campaign-console { position: static; }
#campaign-saved-preview .email-preview-frame { max-width: 620px; height: 300px; }
.campaign-history-more { display: block; margin: 18px auto 0; }
.campaign-library-filter { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.campaign-library-filter .field { min-width: 160px; margin: 0; }
.campaign-library-filter .field:first-child { flex: 1; max-width: 360px; }
.campaign-library-filter .button { min-height: 42px; }
.campaign-subject-editor { max-width: 620px; margin-top: 14px; }
.campaign-subject-editor summary { color: var(--ink); cursor: pointer; font-weight: 650; }
.campaign-subject-editor form { display: grid; gap: 10px; padding: 16px 0 2px; }
.campaign-subject-editor label { font-size: 13px; font-weight: 650; }
.campaign-subject-editor .field-help { margin: 0; }
.campaign-subject-editor button { justify-self: start; }
.email-preview-frame { width: 100%; height: 430px; margin-top: 16px; background: #eee; border: 1px solid var(--border); border-radius: 7px; }
.console-divider { margin: 24px -28px; border-top: 1px solid var(--border); }

.collection-section { margin-top: 48px; }
.collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.collection-heading h2 { margin-top: 5px; font-size: 29px; }
.collection-count { color: var(--ink-faint); font-size: 12px; }
.collection-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.collection-action-status { flex-basis: 100%; min-height: 1em; color: var(--ink-faint); font-size: 11px; text-align: right; }
.campaign-library-tools { display: flex; align-items: center; gap: 12px; }
.campaign-calendar { padding: 18px; }
.campaign-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.campaign-calendar-heading h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.campaign-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.campaign-calendar-weekday { padding: 4px 6px; color: var(--ink-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.campaign-calendar-day { min-height: 86px; padding: 6px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.campaign-calendar-day.is-outside { opacity: .45; }
.campaign-calendar-day.is-today { border-color: var(--focus); }
.campaign-calendar-day > span { display: block; margin-bottom: 4px; color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.campaign-calendar-day button { display: block; width: 100%; margin-top: 3px; padding: 3px 5px; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 4px; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.campaign-calendar-day button.is-sent { border-left-color: var(--green-ink); }
.campaign-calendar-day button.is-scheduled { border-left-color: var(--focus); }
.campaign-calendar-day button.is-draft { color: var(--ink-soft); border-style: dashed; border-left-style: solid; }
@media (max-width: 720px) {
  .campaign-calendar-day { min-height: 56px; padding: 4px; }
  .campaign-calendar-day button { font-size: 9px; }
}
.collection-empty { border: 1px solid var(--border); }
.campaign-history-list { display: grid; gap: 10px; }
.campaign-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 20px 22px; }
.campaign-history-row.is-selected { border-color: #d6aaa2; box-shadow: inset 3px 0 var(--focus); }
.campaign-history-row h3 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.campaign-history-row p { margin: 4px 0 0; color: var(--ink-faint); font-size: 11px; }

.table-panel { padding: 0; overflow: hidden; }
.contact-filter-bar { display: flex; align-items: end; gap: 12px; padding: 18px; background: #faf9f6; border-bottom: 1px solid var(--border); }
.contact-filter-note { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.contact-search-field { flex: 1; }
.contact-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: var(--ink-faint); border-top: 1px solid var(--border); font-size: 11px; }
.contact-inspector { margin-top: 12px; padding: 24px; background: #f8f6f1; border-color: var(--border-strong); }
.inspector-heading { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.icon-button { display: grid; width: 34px; height: 34px; flex: none; place-items: center; color: var(--ink-soft); background: #fff; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 20px; line-height: 1; transition: color 160ms ease, background-color 160ms ease, transform 100ms ease; }
.icon-button:hover { color: var(--ink); background: #f0eee8; }
.icon-button:active { transform: scale(.96); }
.contact-fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.recipient-answer { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.recipient-headline { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.recipient-streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0 0; }
.recipient-streams div { padding: 8px 10px; border-radius: 8px; background: var(--canvas, #f6f5f1); }
.recipient-streams dt { color: var(--ink-faint); font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.recipient-streams dd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; }
.recipient-streams dd.is-no { color: #a23b2a; }
.recipient-timeline { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.recipient-timeline li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; }
.recipient-timeline time { color: var(--ink-faint); }
.recipient-timeline strong { font-weight: 600; overflow-wrap: anywhere; }
.recipient-timeline span { grid-column: 2; color: var(--ink-soft); }
.recipient-timeline li.is-bad span { color: #a23b2a; }
.recipient-timeline li.is-good span { color: #2d6b43; }
.recipient-lookup { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--blue-bg); text-align: left; }
.contact-consent-history { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.contact-consent-history h3 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.contact-consent-history > p { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.contact-consent-history ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--border); }
.contact-consent-history li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.contact-consent-history li > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-consent-history li strong { font-size: 12px; }
.contact-consent-history li small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.recipient-lookup p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 640px) { .recipient-timeline li { grid-template-columns: 1fr; } .recipient-timeline span { grid-column: 1; } }
.draft-test { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.draft-test label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.draft-test-row { display: flex; gap: 8px; }
.draft-test-row input { flex: 1; min-width: 0; }
.draft-test .field-help { margin: 6px 0 0; }
.draft-test .field-help.is-error { color: #a23b2a; }
@media (max-width: 640px) { .draft-test-row { flex-direction: column; } }
.activity-sends { margin: 20px 0 24px; }
.email-program-exceptions { margin: 0 0 22px; padding: 14px; background: #fff8e9; border: 1px solid #ead8b2; border-radius: 10px; }
.email-program-exceptions .panel-heading { margin-bottom: 8px; }
.email-program-exceptions h2 { margin: 0; }
.email-program-exceptions ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.email-program-exceptions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid #ead8b2; }
.email-program-exceptions li:first-child { border-top: 0; }
.email-program-exceptions strong, .email-program-exceptions span, .email-program-exceptions time { display: block; }
.email-program-exceptions strong { font-size: 11px; }
.email-program-exceptions span, .email-program-exceptions time { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.email-program-exceptions time { white-space: nowrap; }
.activity-person { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.activity-person label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.activity-sends h2 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.activity-sends-empty { color: var(--ink-soft); font-size: 13px; }
.activity-send-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.activity-send-list li { border-bottom: 1px solid var(--border); }
.activity-send-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; width: 100%; padding: 10px 2px; color: var(--ink); text-align: left; background: transparent; border: 0; font: inherit; cursor: pointer; }
.activity-send-list button:hover strong { text-decoration: underline; }
.activity-send-list strong { font-size: 14px; overflow-wrap: anywhere; }
.activity-send-list .activity-send-kind { color: var(--ink-faint); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.activity-send-list .activity-send-numbers { grid-column: 1 / -1; color: var(--ink-soft); font-size: 12.5px; }
.activity-send-list .activity-send-health { align-self: start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; background: #efeee9; color: var(--ink-soft); }
.activity-send-health.is-good { background: #e3f1e7; color: #2d6b43; }
.activity-send-health.is-watch { background: #fbeedb; color: #8a5a12; }
.activity-send-health.is-problem { background: #f7e1dc; color: #a23b2a; }
.campaign-form.is-folded > :not(.panel-heading) { display: none; }
.campaign-form.is-folded .panel-heading { margin-bottom: 0; }
.campaign-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campaign-console:not(.show-ids) .detail-id { display: none; }
.campaign-ids-toggle { justify-self: start; margin: 4px 0; font-size: 12px; }
#campaign-details[hidden] + .campaign-ids-toggle { display: none; }
.contact-activity { margin-top: 18px; }
.contact-activity-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contact-activity-summary article { min-width: 0; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.contact-activity-summary span, .contact-activity-summary strong, .contact-activity-summary small { display: block; }
.contact-activity-summary span { color: var(--ink-faint); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.contact-activity-summary strong { margin-top: 5px; font-size: 15px; }
.contact-activity-summary small { margin-top: 4px; color: var(--ink-faint); font-size: 10px; line-height: 1.45; }
.contact-activity-feed { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 6px; max-height: 320px; overflow-y: auto; }
.contact-activity-feed li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.45; }
.contact-activity-feed li:first-child { border-top: 0; }
.contact-activity-feed time { color: var(--ink-faint); font-size: 10px; }
.contact-activity-feed strong { font-weight: 650; }
.contact-activity-feed small { display: block; overflow-wrap: anywhere; color: var(--ink-faint); font-size: 10px; }
@media (max-width: 640px) {
  .contact-activity-summary { grid-template-columns: minmax(0, 1fr); }
}
.contact-fact { min-width: 0; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.contact-fact span, .contact-fact strong, .contact-fact small { display: block; }
.contact-fact span { color: var(--ink-faint); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.contact-fact strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }
.contact-fact small { margin-top: 5px; color: var(--ink-faint); font-size: 9px; }
.contact-property-observation { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-strong); }
.contact-property-observation > .button { margin-top: 16px; }
.contact-preferences { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-strong); }
.contact-preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.contact-preferences-heading h3 { margin: 4px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.contact-preference-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.contact-preference-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.contact-preference-row > div { min-width: 0; }
.contact-preference-row strong, .contact-preference-row small { display: block; }
.contact-preference-row strong { font-size: 11px; }
.contact-preference-row small { margin-top: 4px; overflow: hidden; color: var(--ink-faint); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.preference-link-result { margin-top: 14px; padding: 13px; color: var(--blue-ink); background: var(--blue-bg); border: 1px solid #bad9e7; border-radius: 7px; }
.preference-link-result > label { display: block; font-size: 10px; font-weight: 700; }
.preference-link-result > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 7px; }
.preference-link-result input { min-width: 0; color: var(--ink-soft); background: #fff; font-family: var(--mono); font-size: 9px; }
.preference-link-result small { display: block; margin-top: 7px; color: var(--blue-ink); font-size: 9px; line-height: 1.4; }
.contact-preference-observation { margin-top: 16px; padding: 14px; background: rgba(255,255,255,.6); border: 1px solid var(--border); border-radius: 7px; }
.contact-preference-observation > .button { margin-top: 13px; }
.contact-action { min-height: 30px; padding: 5px 9px; font-size: 10px; }
.filter-bar { display: flex; align-items: end; gap: 12px; padding: 18px; border-bottom: 1px solid var(--border); }
.operations-filter,
.suppression-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(120px, .75fr)) auto;
}
.operations-filter .field-search { grid-column: 1; grid-row: 1; }
.operations-filter > .field:nth-child(2) { grid-column: 2; grid-row: 1; }
.operations-filter > .field:nth-child(3) { grid-column: 3; grid-row: 1; }
.operations-filter .field-short { grid-column: 4; grid-row: 1; }
.operations-filter .field-sender { grid-column: 1 / span 2; grid-row: 2; }
.operations-filter .field-source { grid-column: 3; grid-row: 2; }
.operations-filter .field-credential { grid-column: 4; grid-row: 2; }
.operations-filter .field-sender-domain { grid-column: 1 / span 2; grid-row: 3; }
.operations-filter .field-mailbox-provider { grid-column: 3 / span 2; grid-row: 3; }
.operations-filter .field-provider-issue { grid-column: 1 / span 2; grid-row: 4; }
.operations-filter .field-after { grid-column: 1 / span 2; grid-row: 5; }
.operations-filter .field-before { grid-column: 3 / span 2; grid-row: 5; }
.operations-filter .filter-actions { grid-column: 5; grid-row: 1; }
.suppression-filter { grid-template-columns: minmax(240px, 1.4fr) minmax(150px, .75fr) repeat(2, minmax(170px, .9fr)) auto; }
.suppression-summary { margin-bottom: 20px; padding: 20px; }
.suppression-summary-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.suppression-summary-heading h2 { margin: 4px 0 0; }
.suppression-summary-heading > p, .suppression-summary-note { color: var(--ink-soft); font-size: 11px; }
.suppression-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.suppression-summary-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; text-align: left; cursor: pointer; }
.suppression-summary-grid button:hover, .suppression-summary-grid button:focus-visible { border-color: var(--focus); }
.suppression-summary-grid strong { font-size: 23px; line-height: 1; }
.suppression-summary-grid span { color: var(--ink-soft); font-size: 11px; }
.suppression-summary-note { margin: 13px 0 0; }
.field-compact { width: 190px; }
.operations-filter .field-compact,
.suppression-filter .field-compact { width: auto; }
.field-compact select { min-height: 38px; }
.field-compact input { min-height: 38px; }
.filter-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 1px; }
.filter-reset { margin: 0; color: var(--ink-soft); font-size: 11px; }
.filter-reset:hover { color: var(--ink); }
.empty-state { padding: 76px 24px; text-align: center; }
.empty-state h2 { margin-top: 6px; }
.empty-state p:last-child { max-width: 460px; margin: 12px auto 0; color: var(--ink-soft); }
#contacts-empty-detail { max-width: 460px; margin: 12px auto 0; color: var(--ink-soft); }
#contacts-clear-filters { margin-top: 20px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 11px 18px; color: var(--ink-faint); background: var(--surface-muted); font-size: 10px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
td { padding: 14px 18px; border-top: 1px solid var(--border); }
td:first-child { font-family: var(--mono); font-size: 11px; }
.button-compact { min-height: 30px; padding: 5px 9px; font-size: 10px; }
.message-inspector { margin-top: 16px; }
.app-event-panel { margin-bottom: 16px; padding: 20px 22px; }
.app-event-panel .panel-heading { align-items: center; padding: 0; }
.app-event-panel h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.app-event-panel > p { max-width: 75ch; margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.app-event-panel > .field-help { color: var(--ink-faint); font-size: 11px; }
.app-event-name-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 18px; max-height: 360px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.app-event-name-list li { min-width: 0; padding: 11px 0; border-top: 1px solid var(--border); }
.app-event-name-list strong, .app-event-name-list small { display: block; overflow-wrap: anywhere; }
.app-event-name-list strong { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.app-event-name-list small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.event-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 16px; align-items: start; }
.event-ledger-heading { padding: 22px 18px 16px; }
.event-ledger-heading h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.event-filter { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(210px, 1fr) repeat(2, minmax(170px, .85fr)); }
.event-filter .field-compact { width: auto; }
.event-filter .filter-actions { grid-column: 1 / -1; justify-self: end; }
.event-source-cell strong,
.event-source-cell small { display: block; }
.event-source-cell strong { font-size: 12px; }
.event-source-cell small { max-width: 240px; margin-top: 4px; overflow: hidden; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.event-inspector { position: sticky; top: 96px; min-width: 0; background: #f4f1ea; border-color: var(--border-strong); }
.event-inspector .definition-list { margin-top: 12px; }
.event-payload-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.event-payload-heading h3 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.event-payload-heading span { color: var(--ink-faint); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.event-payload { max-height: 420px; margin: 12px 0 0; padding: 16px; overflow: auto; color: #e9ece7; background: #252724; border: 1px solid #1d1f1c; border-radius: 7px; font-family: var(--mono); font-size: 10px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 24px 0 0; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 7px; }
.message-facts div { min-width: 0; padding: 14px; background: var(--surface-muted); }
.message-facts dt { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.message-facts dd { margin: 4px 0 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.message-schedule-actions { margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.message-schedule-actions p { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; }
.message-schedule-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 12px; }
.message-schedule-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.message-schedule-form input { min-height: 38px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.message-timeline { margin: 28px 0 0; padding: 0; list-style: none; }
.message-timeline li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.message-timeline li > span { position: relative; width: 10px; height: 10px; margin-top: 5px; background: var(--focus); border: 2px solid #f4dcd7; border-radius: 50%; }
.message-timeline li:not(:last-child) > span::after { position: absolute; top: 10px; left: 2px; width: 2px; height: 30px; content: ""; background: var(--border-strong); }
.message-timeline strong, .message-timeline time, .message-timeline code { display: block; }
.message-timeline strong { font-size: 13px; }
.message-timeline time { margin-top: 2px; color: var(--ink-faint); font-size: 11px; }
.message-timeline code { margin-top: 5px; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; overflow-wrap: anywhere; }

.inbound-route-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 16px;
  background: #f0eee8;
}
.inbound-route-card h2 { margin: 5px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.inbound-route-form { display: grid; gap: 9px; min-width: min(100%, 510px); }
.inbound-route-form > label { font-size: 12px; font-weight: 700; }
.inbound-route-alias-row { display: flex; align-items: center; gap: 8px; }
.inbound-route-alias-row input { min-width: 130px; flex: 1; }
.inbound-route-alias-row span { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.inbound-route-value { display: flex; flex: 0 1 470px; align-items: center; gap: 8px; min-width: 0; }
.inbound-route-value code { min-width: 0; padding: 10px 12px; overflow: hidden; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.domain-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.domain-collection { margin-bottom: 16px; }
.domain-collection-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 8px; }
.domain-collection-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 13px 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-align: left; cursor: pointer; }
.domain-collection-item:hover { border-color: var(--border-strong); }
.domain-collection-item[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.domain-collection-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.domain-collection-item strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.domain-collection-item .status-tag { flex: none; }

.domain-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 16px;
  align-items: start;
}

.domain-form { min-height: 430px; }
.panel-description { max-width: 48ch; margin: 10px 0 0; color: var(--ink-soft); font-size: 13px; }
.domain-primer { background: #f0eee8; }
.domain-primer-list { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: domain-check; }
.domain-primer-list li { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--border-strong); }
.domain-primer-list li::before { counter-increment: domain-check; content: counter(domain-check); color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.domain-primer-list strong { font-size: 13px; }
.domain-primer-list span { color: var(--ink-soft); font-size: 12px; }

.domain-workspace { display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr); gap: 16px; align-items: start; }
.domain-summary { position: sticky; top: 96px; }
.domain-summary-copy, .dns-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.domain-health-issues { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.domain-health-issues li { padding: 13px 14px; color: #713f12; background: #fff7df; border: 1px solid #e8c978; border-radius: 7px; }
.domain-health-issues strong, .domain-health-issues span { display: block; }
.domain-health-issues strong { font-size: 12px; line-height: 1.4; }
.domain-health-issues span { margin-top: 4px; font-size: 11px; line-height: 1.55; }
.domain-summary > p { margin: 18px 0 0; }
.domain-progress { margin-top: 22px; padding: 14px; background: var(--yellow-bg); border: 1px solid #eadcae; border-radius: 8px; transition: background-color 180ms ease, border-color 180ms ease; }
.domain-progress.is-ready { background: var(--green-bg); border-color: #cfdfcd; }
.domain-progress.is-preview { background: #eeede9; border-color: var(--border-strong); }
.domain-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.domain-progress-copy strong { color: var(--yellow-ink); font-size: 13px; }
.domain-progress.is-ready .domain-progress-copy strong { color: var(--green-ink); }
.domain-progress.is-preview .domain-progress-copy strong { color: var(--ink-soft); }
.domain-progress-copy span { color: var(--ink-faint); font-size: 10px; }
.domain-progress-track { height: 5px; margin-top: 11px; overflow: hidden; background: rgba(123,87,0,.13); border-radius: 999px; }
.domain-progress-track span { display: block; width: 0; height: 100%; background: #d49a1b; border-radius: inherit; transition: width 240ms ease, background-color 180ms ease; }
.domain-progress.is-ready .domain-progress-track span { background: var(--green-ink); }
.domain-progress.is-preview .domain-progress-track span { background: var(--ink-faint); }
.domain-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; padding: 0; list-style: none; }
.domain-stages li { position: relative; min-width: 0; padding-right: 12px; color: var(--ink-faint); }
.domain-stages li:not(:last-child)::after { position: absolute; top: 12px; right: 4px; left: 30px; height: 1px; background: var(--border-strong); content: ""; }
.domain-stage-mark { position: relative; z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 10px; font-weight: 700; }
.domain-stages strong, .domain-stages small { display: block; }
.domain-stages strong { margin-top: 9px; color: inherit; font-size: 11px; }
.domain-stages small { margin-top: 3px; font-size: 9px; line-height: 1.35; }
.domain-stages li.is-active { color: var(--yellow-ink); }
.domain-stages li.is-active .domain-stage-mark { color: var(--yellow-ink); background: var(--yellow-bg); border-color: #d49a1b; }
.domain-stages li.is-complete { color: var(--green-ink); }
.domain-stages li.is-complete .domain-stage-mark { color: #fff; background: var(--green-ink); border-color: var(--green-ink); }
.domain-stages li.is-complete:not(:last-child)::after { background: #9fbea0; }
.domain-stages li.is-preview { color: var(--ink-soft); }
.domain-stages li.is-preview .domain-stage-mark { color: var(--ink-soft); background: #eeede9; }
.domain-checks { margin-top: 28px; }
.domain-check { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid var(--border); }
.domain-check strong, .domain-check span { display: block; }
.domain-check strong { font-size: 13px; }
.domain-check div > span { margin-top: 2px; color: var(--ink-faint); font-size: 11px; }
.check-mark { width: 10px; height: 10px; margin-top: 5px; background: #c8c8c3; border: 2px solid #fff; border-radius: 9999px; box-shadow: 0 0 0 1px #b5b6b0; }
.domain-check.is-ready .check-mark { background: var(--green-ink); box-shadow: 0 0 0 1px var(--green-ink); }
.domain-check.is-blocked .check-mark { background: #d49a1b; box-shadow: 0 0 0 1px #b9810b; }
.dns-installation-status { margin: 18px 0; padding: 16px; background: #f8f7f4; border: 1px solid var(--border-strong); border-radius: 8px; }
.dns-installation-status-heading, .dns-installation-status-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dns-installation-status-heading strong { display: block; max-width: 580px; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.dns-installation-status-footer { align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.dns-installation-status-footer > span { color: var(--ink-faint); font-size: 9px; }

.provider-note, .test-record-warning { margin-top: 22px; padding: 13px 14px; border-radius: 8px; font-size: 12px; }
.provider-note { color: var(--blue-ink); background: var(--blue-bg); border: 1px solid #cde4f1; }
.test-record-warning { color: var(--yellow-ink); background: var(--yellow-bg); border: 1px solid #eadcae; }
.dns-record-list { margin-top: 22px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dns-record { display: grid; grid-template-columns: 66px minmax(150px, .9fr) minmax(210px, 1.1fr) auto auto; gap: 14px; align-items: center; padding: 15px; background: var(--surface); }
.dns-record + .dns-record { border-top: 1px solid var(--border); }
.dns-record-type { width: fit-content; padding: 3px 6px; color: var(--ink-soft); background: #eeede9; border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.dns-record-field { min-width: 0; }
.dns-record-field span { display: block; margin-bottom: 4px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dns-record-field code { display: block; overflow: hidden; color: var(--ink); font-family: var(--mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.copy-record { min-width: 64px; }
.dns-record-status { min-width: 66px; text-align: center; }
.dns-empty { padding: 46px 20px; color: var(--ink-faint); text-align: center; }
.dns-empty p { margin: 0; }
.cloudflare-installer { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-strong); }
.cloudflare-installer-heading, .cloudflare-plan-heading, .cloudflare-apply-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cloudflare-installer-heading h3 { margin: 2px 0 0; font-size: 16px; }
.cloudflare-installer > p { margin: 9px 0 18px; color: var(--ink-soft); font-size: 12px; }
.cloudflare-token-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cloudflare-plan { margin-top: 18px; padding: 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: #f8f7f4; }
.cloudflare-plan-heading strong, .cloudflare-plan-heading span { display: block; }
.cloudflare-plan-heading span { margin-top: 3px; color: var(--ink-faint); font-size: 11px; }
.cloudflare-plan-heading code { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.cloudflare-plan-list { margin-top: 13px; border-top: 1px solid var(--border); }
.cloudflare-change { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--border); }
.cloudflare-change-copy strong, .cloudflare-change-copy span { display: block; }
.cloudflare-change-copy strong { overflow-wrap: anywhere; font-family: var(--mono); font-size: 11px; }
.cloudflare-change-copy span { margin-top: 3px; color: var(--ink-faint); font-size: 11px; }
.cloudflare-apply-row { align-items: center; margin-top: 14px; }
.cloudflare-apply-row p { max-width: 320px; margin: 0; color: var(--ink-faint); font-size: 11px; }

.agent-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#view-agents { display: flex; flex-direction: column; }
#view-agents .agent-page-heading { order: 0; }
#view-agents .agent-control-grid { order: 1; }
#view-agents .agent-command-section { order: 2; }
#view-agents .agent-operations-section { order: 3; }
#view-agents.has-agent-key .agent-command-section { order: 1; margin-top: 0; }
#view-agents.has-agent-key .agent-operations-section { order: 2; }
#view-agents.has-agent-key .agent-control-grid { order: 3; margin-top: 46px; }
#view-agents.has-agent-key .agent-page-heading h1 { max-width: 24ch; font-size: clamp(30px, 3.3vw, 48px); }

.agent-access-panel > p { max-width: 66ch; margin: 18px 0 0; }
.agent-key-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 24px; }
.agent-key-form .button { white-space: nowrap; }

.agent-secret {
  margin-top: 22px;
  padding: 18px;
  color: var(--blue-ink);
  background: var(--blue-bg);
  border: 1px solid #cde4f1;
  border-radius: 8px;
}

.agent-secret strong, .agent-secret p, .agent-secret code { display: block; }
.agent-secret p { margin: 3px 0 0; font-size: 12px; }
.agent-secret code { margin-top: 14px; padding: 11px 12px; overflow-wrap: anywhere; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid #c7dde9; border-radius: 5px; font-family: var(--mono); font-size: 11px; }
.agent-secret-actions { display: flex; gap: 8px; margin-top: 12px; }
.agent-secret .field-help { margin-top: 12px; color: var(--blue-ink); }

.agent-key-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.agent-key-heading h3 { margin: 0; font-size: 14px; }
.agent-key-heading span { color: var(--ink-faint); font-size: 11px; }
.agent-key-list { margin-top: 10px; }
.agent-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.agent-key-identity { min-width: 0; }
.agent-key-identity strong, .agent-key-identity span { display: block; }
.agent-key-identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.agent-key-identity span { margin-top: 2px; overflow: hidden; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agent-inline-empty { margin-top: 12px; padding: 16px; color: var(--ink-faint); background: var(--surface-muted); border-radius: 6px; font-size: 12px; }

.agent-command-section { margin-top: 46px; }
.agent-command-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.agent-task-form > p { max-width: 68ch; margin: 18px 0 0; color: var(--ink-soft); font-size: 13px; }
.agent-target-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; border: 0; }
.agent-target-choice legend { margin-bottom: 9px; color: var(--ink); font-size: 12px; font-weight: 700; }
.agent-target-choice label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 84px; padding: 14px; color: var(--ink-soft); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.agent-target-choice label:hover { background: #f3f1eb; border-color: var(--border-strong); }
.agent-target-choice label:active { transform: translateY(1px); }
.agent-target-choice label:has(input:checked) { color: var(--blue-ink); background: var(--blue-bg); border-color: #9bc9df; box-shadow: inset 3px 0 0 var(--blue-ink); }
.agent-target-choice input { width: 16px; min-height: 16px; margin: 2px 0 0; accent-color: var(--blue-ink); }
.agent-target-choice input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.agent-target-choice strong, .agent-target-choice small { display: block; }
.agent-target-choice strong { color: var(--ink); font-size: 12px; }
.agent-target-choice small { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.agent-task-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.agent-task-form > .field { margin-top: 14px; }
.agent-task-form > .button { margin-top: 16px; }
.agent-connect-panel { background: #f0eee8; }
.agent-connect-panel h2 { margin-top: 5px; font-size: 23px; }
.agent-connect-panel > p { margin: 18px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.agent-connect-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 13px; background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 7px; }
.agent-connect-value > div { min-width: 0; }
.agent-connect-value span, .agent-connect-value code { display: block; }
.agent-connect-value span, .agent-connect-command > div > span { color: var(--ink-faint); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agent-connect-value code { margin-top: 4px; overflow: hidden; font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agent-connect-host-field { margin-top: 18px; }
.agent-connect-host-field select { max-width: 240px; }
.agent-connect-command { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.agent-connect-command p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.agent-connect-command p code { font-family: var(--mono); }
.agent-connect-command pre { margin: 12px 0 9px; padding: 12px; overflow-x: auto; color: #f7f6f3; background: #262825; border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.agent-connect-command pre code { font-family: var(--mono); font-size: 11px; line-height: 1.55; }
.agent-connect-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agent-connect-check-status { min-height: 18px; margin-top: 12px !important; color: var(--ink) !important; font-size: 12px !important; }
.agent-connect-check-status.is-success { color: var(--green-ink) !important; }
.agent-connect-check-status.is-error { color: var(--red-ink) !important; }
.agent-connect-command .agent-connect-check-help { margin-top: 6px; color: var(--ink-faint); }
.agent-connect-hosted { margin-top: 22px; padding: 16px; background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 7px; }
.agent-connect-hosted > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agent-connect-hosted strong { font-size: 12px; }
.agent-connect-hosted p { margin: 8px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.agent-approval-disclosure { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.agent-approval-disclosure summary { color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 700; }
.agent-approval-disclosure p { margin: 10px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.agent-task-heading { margin-top: 32px; }
.agent-task-list { display: grid; gap: 12px; }
.agent-task-facts div:last-child { grid-column: auto; }
.agent-task-failure { margin-top: 14px; padding: 14px 16px; color: var(--red-ink); background: var(--red-bg); border: 1px solid #f2d1d3; border-radius: 7px; font-size: 12px; }

.agent-operations-section { margin-top: 46px; }
.agent-operations-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.agent-operations-heading h2 { font-size: 29px; }
.agent-operations-heading p { max-width: 620px; margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; }
.agent-operation-list { display: grid; gap: 12px; }
.agent-operation { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.agent-operation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.agent-operation-header h3 { max-width: 720px; margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; }
.agent-operation-header p { margin: 7px 0 0; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.agent-operation-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.agent-operation-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; margin: 24px 0 0; padding: 18px; background: var(--surface-muted); border-radius: 7px; }
.agent-operation-facts div:last-child { grid-column: 1 / -1; }
.agent-operation-facts dt { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agent-operation-facts dd { margin: 4px 0 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.agent-draft-preview { margin-top: 14px; padding: 18px; background: #fbfaf7; border: 1px solid var(--border); border-radius: 7px; }
.agent-draft-preview > strong { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.agent-draft-preview > p { max-width: 72ch; margin: 10px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 17px; line-height: 1.55; white-space: pre-wrap; }
.agent-draft-preview details { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.agent-draft-preview summary { width: fit-content; color: var(--blue-ink); cursor: pointer; font-size: 11px; font-weight: 700; }
.agent-draft-preview summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.agent-draft-preview pre { max-height: 260px; margin: 12px 0 0; padding: 12px; overflow: auto; color: var(--ink-soft); background: var(--surface-muted); border-radius: 5px; font-family: var(--mono); font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.agent-reply-composer { display: grid; gap: 12px; margin-top: 14px; padding: 18px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; }
.agent-reply-composer > strong { font-size: 13px; }
.agent-reply-composer > p { max-width: 72ch; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.agent-reply-composer label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.agent-reply-composer input, .agent-reply-composer textarea { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 400; }
.agent-reply-composer textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.agent-reply-composer > button { justify-self: start; }
.agent-receipt { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 16px; margin-top: 14px; padding: 14px 16px; color: var(--green-ink); background: var(--green-bg); border: 1px solid #d8e5d5; border-radius: 7px; font-size: 12px; }
.agent-operation-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.agent-operation-footer p { max-width: 660px; margin: 0 auto 0 0; color: var(--ink-soft); font-size: 12px; }
.agent-operations-empty { padding: 66px 24px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.agent-operations-empty h2 { font-size: 25px; }
.agent-operations-empty p { max-width: 500px; margin: 10px auto 0; }

.developer-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 16px; align-items: start; }
.developer-keys > p, .webhook-panel > p { margin: 16px 0 0; color: var(--ink-soft); font-size: 13px; }
.quickstart-panel { position: sticky; top: 96px; background: #f0eee8; }
.quickstart-steps { display: grid; gap: 14px; margin: 22px 0; padding: 0; list-style: none; }
.quickstart-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.quickstart-steps li > span { display: grid; width: 22px; height: 22px; place-items: center; color: var(--blue-ink); background: var(--blue-bg); border-radius: 50%; font-family: var(--mono); font-size: 10px; }
.quickstart-steps p { margin: 1px 0 0; color: var(--ink-soft); font-size: 12px; }
.quickstart-steps code { font-family: var(--mono); font-size: 10px; }
.browser-test-send { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0; padding: 14px; background: #fff; border: 1px solid var(--border-strong); border-radius: 7px; }
.browser-test-send strong, .browser-test-send p { display: block; }
.browser-test-send strong { font-size: 12px; }
.browser-test-send p { margin: 2px 0 0; color: var(--ink-faint); font-size: 10px; }
.browser-test-send .button { flex: none; }
.quickstart-language { display: flex; gap: 3px; width: fit-content; margin: 0 0 8px; padding: 3px; background: #e4e1da; border-radius: 6px; }
.quickstart-language button { min-height: 28px; padding: 4px 10px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 4px; cursor: pointer; font-size: 10px; font-weight: 700; }
.quickstart-language button:hover { color: var(--ink); }
.quickstart-language button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(36, 36, 33, .1); }
.quickstart-language button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.code-sample { position: relative; overflow: hidden; color: #f7f6f3; background: #262825; border-radius: 8px; }
.code-sample pre { margin: 0; padding: 48px 18px 18px; overflow-x: auto; }
.code-sample code { font-family: var(--mono); font-size: 10px; line-height: 1.7; }
.code-copy { position: absolute; top: 10px; right: 10px; padding: 4px 8px; color: #d7d6d1; background: #363834; border: 1px solid #4b4d48; border-radius: 4px; font-size: 10px; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 22px; }
.developer-key-create { grid-template-columns: minmax(0, 1fr) 190px auto; }
.secret-reveal { margin-top: 18px; padding: 16px; color: var(--blue-ink); background: var(--blue-bg); border: 1px solid #edcfc5; border-radius: 8px; }
.secret-reveal strong, .secret-reveal p, .secret-reveal code { display: block; }
.secret-reveal p { margin: 2px 0 0; font-size: 11px; }
.secret-reveal code { margin-top: 12px; padding: 10px; overflow-wrap: anywhere; color: var(--ink); background: rgba(255,255,255,.74); border: 1px solid #edcfc5; border-radius: 5px; font-family: var(--mono); font-size: 10px; }
.secret-actions { display: flex; gap: 8px; margin-top: 10px; }
.resource-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.resource-heading h3 { margin: 0; font-size: 13px; }
.resource-heading span { color: var(--ink-faint); font-size: 11px; }
.resource-heading > div > p { margin: 4px 0 0; color: var(--ink-faint); font-size: 11px; }
.resource-heading-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.developer-key-filter { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; margin-top: 14px; }
.resource-list { margin-top: 10px; }
.resource-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.resource-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.resource-identity { min-width: 0; }
.resource-identity strong, .resource-identity span { display: block; }
.resource-identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.resource-identity span { margin-top: 2px; overflow: hidden; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.resource-identity .webhook-subscriptions { max-width: 70ch; overflow-wrap: anywhere; line-height: 1.5; white-space: normal; }
.webhook-add-events { margin-top: 8px; }
.webhook-add-events > summary { width: fit-content; color: var(--ink-soft); cursor: pointer; font-size: 11px; font-weight: 650; }
.webhook-add-events > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.webhook-add-events form { display: grid; grid-template-columns: minmax(180px, 280px) auto; gap: 9px; align-items: end; margin-top: 8px; }
.webhook-add-events .field { margin: 0; }
.webhook-add-events select { min-height: 34px; padding: 5px 8px; font-size: 11px; }
.webhook-add-events p { grid-column: 1 / -1; margin: 0; color: var(--ink-faint); font-size: 10px; }
.inline-empty { margin-top: 10px; padding: 16px; color: var(--ink-faint); background: var(--surface-muted); border-radius: 6px; font-size: 12px; }
.webhook-panel { margin-top: 16px; }
.webhook-form { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 10px; align-items: end; margin-top: 22px; }
.webhook-activity-heading { align-items: flex-end; }
.webhook-activity-list { display: grid; gap: 0; margin-top: 10px; }
.webhook-attempt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.check-field { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 9px; font-weight: 400; }
.check-field input { width: 16px; min-height: 16px; margin-top: 2px; }
.check-field span { color: var(--ink-soft); font-size: 12px; }

.content-heading { flex-wrap: wrap; gap: 20px 24px; }
.content-heading > :first-child { flex: 1 1 340px; }
.content-heading .button-row { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; }
.content-heading .button-row .button { white-space: nowrap; }
.button-row { display: flex; align-items: center; gap: 8px; }
.optional-label { color: var(--ink-faint); font-size: 10px; font-weight: 500; }

.template-workspace {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.template-library {
  position: sticky;
  top: 88px;
  min-height: 720px;
  padding: 22px 14px;
  background: #f0eee8;
  border-right: 1px solid var(--border);
}

.template-library-heading,
.template-editor-heading,
.template-history-heading,
.template-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.template-library-heading h2 { font-size: 20px; }
.template-status-field { margin-top: 18px; }
.template-status-field select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.template-library-state { display: flex; align-items: center; gap: 9px; padding: 16px 10px; color: var(--ink-faint); font-size: 11px; }
.template-library-state .loading-mark { width: 15px; height: 15px; }
.template-library-list { display: grid; gap: 5px; margin-top: 12px; }

.template-library-item {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px 11px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.template-library-item:hover { background: rgba(255,255,255,.7); border-color: var(--border); }
.template-library-item:active { transform: translateY(1px); }
.template-library-item.is-active { background: #fff; border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(31,33,31,.04); }
.template-library-item > span:first-child { min-width: 0; }
.template-library-item strong,
.template-library-item small { display: block; }
.template-library-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.template-library-item > span:first-child small { margin-top: 4px; overflow: hidden; color: var(--ink-faint); font-size: 10px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.template-library-item > span:last-child { display: grid; justify-items: end; gap: 5px; }
.template-library-item > span:last-child small { color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.template-library-empty { margin-top: 12px; padding: 24px 14px; color: var(--ink-soft); border: 1px dashed #c8c4bb; border-radius: 7px; text-align: center; }
.template-library-empty strong { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.template-library-empty p { margin: 6px 0 0; font-size: 11px; }

.template-studio { min-width: 0; }
.template-start {
  display: grid;
  min-height: 560px;
  align-content: center;
  justify-items: start;
  padding: clamp(32px, 6vw, 72px);
}
.template-start[hidden] { display: none; }
.template-start h2 { max-width: 520px; font-size: clamp(30px, 4vw, 46px); }
.template-start > p:not(.eyebrow) { max-width: 540px; margin: 14px 0 24px; color: var(--ink-soft); line-height: 1.6; }
.template-editor-form { padding: 30px; }
.template-editor-heading { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.template-editor-heading h2 { font-size: 28px; }
.template-editor-state { display: flex; align-items: center; gap: 9px; }
.template-version-label { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.template-starters { margin-top: 22px; padding: 18px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 8px; }
.template-starters-heading strong, .template-starters-heading span { display: block; }
.template-starters-heading strong { font-size: 12px; }
.template-starters-heading span { margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.template-starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.template-starter-grid button { min-width: 0; min-height: 108px; padding: 12px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 6px; text-align: left; transition: border-color 160ms ease, box-shadow 160ms ease, transform 100ms ease; }
.template-starter-grid button:hover { border-color: var(--focus); box-shadow: 0 5px 16px rgba(31, 33, 31, .06); }
.template-starter-grid button:active { transform: translateY(1px); }
.template-starter-grid button > span, .template-starter-grid button strong, .template-starter-grid button small { display: block; }
.template-starter-grid button > span { color: var(--focus-ink); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.template-starter-grid button strong { margin-top: 8px; font-size: 11px; }
.template-starter-grid button small { margin-top: 4px; color: var(--ink-faint); font-size: 9px; font-weight: 400; line-height: 1.4; }
.template-editor-grid { display: grid; grid-template-columns: minmax(330px, 1.05fr) minmax(300px, .95fr); gap: 30px; margin-top: 28px; }
.template-fields > .field + .field { margin-top: 18px; }
.template-fields textarea { line-height: 1.55; }
.template-html-details { margin-top: 18px; border: 1px solid var(--border); border-radius: 7px; }
.template-html-details summary { padding: 12px 14px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 650; }
.template-html-details summary span { margin-left: 4px; color: var(--ink-faint); font-size: 10px; font-weight: 500; }
.template-html-details[open] summary { border-bottom: 1px solid var(--border); }
.template-html-details .field { padding: 14px; }
.template-html-details textarea { font-family: var(--mono); font-size: 11px; }

.template-variables { margin-top: 18px; padding: 14px; background: #f8f6f1; border: 1px solid var(--border); border-radius: 7px; }
.template-variables > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.template-variables strong { font-size: 12px; }
.template-variables > div:first-child span { color: var(--ink-faint); font-size: 10px; }
.template-variable-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.template-variable-list code { padding: 4px 7px; color: var(--blue-ink); background: var(--blue-bg); border-radius: 4px; font-family: var(--mono); font-size: 10px; }
.template-variable-empty { color: var(--ink-faint); font-size: 11px; }
.template-variables p { margin: 10px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.45; }
.template-variables p code { font-family: var(--mono); }

.template-preview-card {
  position: sticky;
  top: 96px;
  min-width: 0;
  overflow: hidden;
  background: #f0eee8;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.template-preview-heading { padding: 18px 18px 14px; }
.template-preview-heading h3,
.template-history-heading h3 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.segmented-control { display: inline-flex; padding: 2px; background: #dedcd5; border-radius: 5px; }
.segmented-control button { padding: 4px 7px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 4px; font-size: 9px; font-weight: 700; }
.segmented-control button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(31,33,31,.08); }
.inbox-preview { display: grid; gap: 3px; padding: 12px 18px; background: #faf9f6; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.inbox-preview strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inbox-preview span { overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#template-preview,
#template-text-preview { width: 100%; height: 430px; margin: 0; background: #fff; border: 0; }
#template-text-preview { padding: 24px; overflow: auto; color: var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.template-preview-note { margin: 0; padding: 11px 18px; color: var(--ink-faint); background: #f8f6f1; border-top: 1px solid var(--border); font-size: 9px; }
.template-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.template-archive-action { margin: 0; color: var(--red-ink); font-size: 11px; }
.template-inline-error { margin: 14px 0 0; padding: 12px 14px; color: var(--red-ink); background: var(--red-bg); border: 1px solid #f2d1d3; border-radius: 6px; font-size: 11px; }

.template-history { padding: 24px 30px 30px; border-top: 1px solid var(--border); }
.template-history-heading > span { color: var(--ink-faint); font-size: 10px; }
.template-history ol { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.template-history li { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.template-history-mark { display: grid; width: 30px; height: 30px; place-items: center; color: var(--blue-ink); background: var(--blue-bg); border-radius: 50%; font-family: var(--mono); font-size: 9px; }
.template-history li strong,
.template-history li small { display: block; }
.template-history li strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.template-history li small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }
.template-history .text-button { margin: 0; font-size: 10px; }

.template-test-panel { padding: 26px 30px 28px; background: #f2f6f0; border-top: 1px solid #d9e4d5; }
.template-test-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.template-test-heading h3 { margin: 3px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.template-test-heading p:last-child { max-width: 620px; margin: 7px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.template-test-form { margin-top: 22px; }
.template-test-addresses,
.template-test-variables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.template-test-variable-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid #d9e4d5; }
.template-test-variable-section > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.template-test-variable-section strong { font-size: 12px; }
.template-test-variable-section span { color: var(--ink-faint); font-size: 10px; }
.template-test-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.template-test-actions p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.template-test-receipt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 20px; padding: 14px 16px; background: #fff; border: 1px solid #cbdac6; border-radius: 7px; }
.template-test-receipt .receipt-mark { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; background: var(--green-ink); border-radius: 50%; font-weight: 800; }
.template-test-receipt strong { font-size: 12px; }
.template-test-receipt p { margin: 3px 0 0; color: var(--ink-soft); font-size: 10px; }

.settings-page-heading { margin-bottom: 34px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 16px; }
.settings-grid h2,
.settings-section-heading h2 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: -.025em; }
.settings-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 24px 0 0; }
.settings-facts > div { min-width: 0; padding: 13px 0; border-top: 1px solid var(--border); }
.settings-facts dt { color: var(--ink-faint); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.settings-facts dd { margin: 5px 0 0; overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.settings-account .settings-actions { justify-content: flex-start; }
.settings-project { background: #f0eee8; }
.settings-activity,
.settings-people,
.settings-data,
.settings-destinations { margin-top: 16px; }
.people-list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.people-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.people-list .people-who { min-width: 0; }
.people-list strong,
.people-list small { display: block; overflow-wrap: anywhere; }
.people-list strong { font-size: 13px; font-weight: 600; }
.people-list small { margin-top: 2px; color: var(--ink-faint); font-size: 11px; }
.people-list .people-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.people-list .people-pending strong { color: var(--ink-soft); font-weight: 500; }
.people-list .people-actions .text-button { font-size: 12px; }
.people-list .people-actions select { padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
.people-invite { display: grid; gap: 8px; margin-top: 20px; }
.people-invite label { font-size: 12px; font-weight: 600; }
.people-invite-row { display: flex; flex-wrap: wrap; gap: 8px; }
.people-invite-row input { flex: 2; min-width: 200px; }
.people-invite-row select { flex: 1; min-width: 180px; }
.people-invite .field-help { margin: 0; }
.page-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 24px; }
.brand-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-align: left; cursor: pointer; transition: border-color 160ms ease, transform 100ms ease; }
.brand-card:hover { border-color: var(--border-strong); }
.brand-card:active { transform: translateY(1px); }
.brand-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.brand-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.brand-card-heading strong { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.brand-card-kind { flex: none; color: var(--ink-faint); font-size: 11px; }
.brand-card dl { display: grid; gap: 8px; margin: 0; }
.brand-card dt { color: var(--ink-faint); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.brand-card dd { margin: 2px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.brand-card dd.is-warning { color: var(--red-ink); }
.invitation-banner { display: grid; gap: 8px; margin-bottom: 16px; }
.invitation-banner[hidden] { display: none; }
.invitation-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--blue-bg); border: 1px solid var(--border-strong); border-radius: 8px; }
.invitation-card p { margin: 0; font-size: 13px; }
.invitation-card small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.invitation-card .invitation-actions { display: flex; gap: 8px; }
.settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.settings-section-heading p { max-width: 60ch; margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; }
.settings-section-heading .text-button { flex: none; margin-top: 4px; }
.settings-activity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.settings-activity-grid > div { min-width: 0; padding: 0 24px; border-left: 1px solid var(--border); }
.settings-activity-grid > div:first-child { padding-left: 0; border-left: 0; }
.settings-activity-grid strong,
.settings-activity-grid span { display: block; }
.settings-activity-grid strong { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.settings-activity-grid span { margin-top: 8px; color: var(--ink-faint); font-size: 10px; }
.settings-destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.settings-destination-grid button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 18px; color: var(--ink); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; text-align: left; transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease; }
.settings-destination-grid button:hover { background: #fff; border-color: var(--border-strong); }
.settings-destination-grid button:active { transform: translateY(1px); }
.settings-destination-grid strong,
.settings-destination-grid small { display: block; }
.settings-destination-grid strong { font-size: 12px; }
.settings-destination-grid small { margin-top: 3px; color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.settings-destination-grid button > span:last-child { color: var(--blue-ink); font-size: 18px; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  max-width: 420px;
  padding: 13px 16px;
  color: #fff;
  background: #282a27;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 3px 14px rgba(0,0,0,.04);
  animation: reveal 240ms ease both;
}

.toast.is-error { color: var(--red-ink); background: var(--red-bg); border: 1px solid #f2d1d3; }

.confirm-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(24, 23, 21, .16);
}
.confirm-dialog-body { padding: 22px 22px 18px; }
.confirm-dialog::backdrop { background: rgba(24, 23, 21, .28); }
.confirm-dialog[open] { animation: reveal 160ms ease both; }
.confirm-dialog p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-dialog .button-primary.is-danger { background: var(--red-ink); border-color: var(--red-ink); }

@media (max-width: 1700px) {
  .event-workspace { grid-template-columns: 1fr; }
  .event-inspector { position: static; }
}

@media (max-width: 1180px) {
  .template-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-panel { grid-template-columns: 1fr; align-content: start; gap: 36px; }
  .setup-panel.is-customer-setup { grid-template-columns: 1fr; gap: 30px; }
  .is-customer-setup .form-card { grid-column: auto; grid-row: 1; }
  .is-customer-setup .setup-copy { grid-column: auto; grid-row: 2; }
  .setup-copy, .setup-copy > p:not(.eyebrow), .trust-list { max-width: 720px; }
  .form-card { width: min(720px, 100%); }
  .template-editor-grid { grid-template-columns: 1fr; }
  .template-preview-card { position: static; }
  .suppression-filter { grid-template-columns: minmax(220px, 1.25fr) minmax(150px, .75fr) repeat(2, minmax(170px, .9fr)); }
  .suppression-filter .filter-actions { grid-column: 1 / -1; justify-self: end; }
  .log-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-filter .field,
  .log-filter .log-search-field,
  .log-filter .log-user-agent-field,
  .log-filter .field-date { grid-column: auto; }
}

@media (max-width: 900px) {
  :root { --sidebar-width: 190px; }
  .setup-panel, .split-layout, .csv-import-panel, .audience-model-grid, .audience-ledger, .commerce-grid, .commerce-connect-layout, .event-workspace, .domain-onboarding, .domain-workspace, .agent-control-grid, .agent-command-grid, .developer-grid, .onboarding-checklist, .template-workspace, .log-workspace, .automation-agent-layout, .automation-operations-grid { grid-template-columns: 1fr; }
  .compact-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-create-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topic-description-field { grid-column: 1 / -1; }
  .topic-list { grid-template-columns: 1fr; }
  .setup-panel { align-content: center; }
  .evidence-panel, .campaign-console, .automation-console, .commerce-result, .domain-summary { position: static; }
  .csv-review { border-top: 1px solid var(--border); border-left: 0; }
  .quickstart-panel { position: static; }
  .webhook-form { grid-template-columns: 1fr; }
  .agent-operation-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .message-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-library { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .template-library-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #commerce-fixture-form, .commerce-result { grid-column: auto; grid-row: auto; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-health-grid { grid-template-columns: 1fr; }
  .provider-health-empty { grid-column: auto; }
  .metric-card-wide { grid-column: 1 / -1; }
  .log-inspector { position: static; }
  .event-inspector { position: static; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .app-shell { display: block; }
  #workspace { min-width: 0; overflow-x: clip; }
  .sidebar { position: static; width: 100%; padding: 14px 16px 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar > div:first-child { display: flex; align-items: center; justify-content: space-between; }
  .workspace-label { margin: 0; }
  .workspace-tabs, .primary-nav, .file-navigation, .chat-history { display: none; }
  .mobile-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; }
  .mobile-navigation label { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .mobile-navigation select { width: 100%; min-height: 38px; padding: 7px 34px 7px 10px; background: #fff; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 12px; font-weight: 650; }
  .is-entry .mobile-navigation { display: none; }
  .is-entry .entry-flight-plan { display: flex; gap: 16px; margin-top: 14px; overflow-x: auto; }
  .entry-flight-plan li { min-width: 170px; }
  .entry-flight-plan small { display: none; }
  .nav-item { width: auto; flex: 0 0 auto; }
  .nav-section, .sidebar-foot { display: none; }
  main { grid-column: auto; }
  .topbar { top: 0; min-height: 60px; padding: 10px 18px; }
  .page-frame { padding: 42px 18px 72px; }
  .setup-panel { min-height: auto; gap: 36px; }
  .is-entry:has(.setup-panel.is-customer-setup:not([hidden])) .page-frame { padding-top: 20px; }
  .setup-panel.is-customer-setup { min-height: auto; gap: 20px; padding-top: 0; }
  h1 { font-size: 40px; }
  .page-heading { display: block; margin-bottom: 32px; }
  .page-heading > .button { margin-top: 18px; }
  .page-heading > .button-row { margin-top: 18px; }
  .next-best-action { align-items: flex-start; flex-direction: column; }
  .field-row, .onboarding-path-grid, .template-starter-grid, .metrics-grid, .engagement-grid, .content-grid, .agent-target-choice, .agent-task-fields, .checklist-steps, .template-test-addresses, .template-test-variables, .campaign-source-options, .campaign-template-variables { grid-template-columns: 1fr; }
  .automation-agent-submit { align-items: stretch; flex-direction: column; }
  .automation-agent-submit span { order: -1; }
  .automation-proposal-panel .panel-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .automation-proposal-actions { align-items: stretch; flex-direction: column; }
  .automation-proposal-actions .text-button { margin-left: 0; }
  .automation-proposal-audience > div { grid-template-columns: 1fr; gap: 2px; }
  .automation-app-events { grid-template-columns: 1fr; }
  .engagement-caveat { grid-column: auto; }
  .compact-create-form, .topic-create-form, .topic-list, .segment-condition, .contact-fact-list, .contact-preference-list { grid-template-columns: 1fr; }
  .topic-description-field { grid-column: auto; }
  .topic-workspace-heading, .contact-preferences-heading { align-items: flex-start; flex-direction: column; }
  .segment-condition-remove { width: 100%; }
  .campaign-audience-preview { grid-template-columns: 46px minmax(0, 1fr); }
  .campaign-audience-preview > .status-tag { grid-column: 2; justify-self: start; }
  .automation-operations-heading { align-items: flex-start; flex-direction: column; }
  .automation-operations-grid { grid-template-columns: 1fr; }
  .automation-run-panel { border-top: 1px solid var(--border); border-left: 0; }
  .automation-library-row { grid-template-columns: 1fr; }
  .automation-library-row-meta { min-width: 0; justify-content: start; }
  .automation-library-stat { justify-items: start; }
  .audience-preview-count { width: 44px; height: 44px; }
  .metrics-filter { grid-template-columns: 1fr; }
  .metrics-filter-footer { align-items: stretch; flex-direction: column; }
  .metrics-filter-footer .filter-actions { width: 100%; }
  .metrics-filter-footer .button { flex: 1; }
  .log-filter { grid-template-columns: 1fr; }
  .event-filter { grid-template-columns: 1fr; }
  .event-filter .filter-actions { grid-column: auto; justify-self: stretch; }
  .log-filter-footer { align-items: stretch; flex-direction: column; }
  .log-filter-footer .filter-actions { width: 100%; }
  .log-filter-footer .button { flex: 1; }
  .provider-health-panel .panel-heading { align-items: flex-start; flex-direction: column; }
  .provider-health-capacity { grid-template-columns: 1fr; }
  .sender-health-heading { align-items: flex-start; flex-direction: column; padding: 22px 18px 18px; }
  .mailbox-provider-trends { grid-template-columns: 1fr; padding: 20px 18px 22px; }
  .csv-review-actions { align-items: stretch; flex-direction: column; }
  .project-context { display: block; }
  .project-switcher { min-width: 150px; margin-top: 3px; }
  .customer-email { display: none; }
  .inline-form, .developer-key-create, .webhook-form { grid-template-columns: 1fr; }
  .inline-action-field { grid-template-columns: 1fr; }
  .inline-action-field .button { width: 100%; }
  .connector-heading { grid-template-columns: 42px minmax(0, 1fr); }
  .connector-heading > .status-tag { grid-column: 2; justify-self: start; }
  .connector-scope-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .connector-scope-row p { text-align: left; }
  .commerce-privacy-request { grid-template-columns: 1fr auto; }
  .commerce-privacy-due, .commerce-privacy-actions { grid-column: 1 / -1; }
  .commerce-privacy-actions { justify-content: flex-start; }
  .commerce-privacy-actions .button { flex: 1 1 145px; }
  .commerce-privacy-data-sections { grid-template-columns: 1fr; }
  .commerce-privacy-outcome-form { grid-template-columns: 1fr; }
  .commerce-privacy-outcome-form > p, .commerce-privacy-outcome-form > .commerce-privacy-outcome-ack, .commerce-privacy-outcome-form > .commerce-privacy-outcome-actions { grid-column: auto; }
  .commerce-privacy-data-header { align-items: flex-start; }
  .commerce-deliveries li { align-items: flex-start; flex-direction: column; gap: 3px; }
  .commerce-catalog-header { align-items: flex-start; flex-direction: column; }
  .commerce-catalog-sync { width: 100%; }
  .developer-key-filter { grid-template-columns: 1fr; }
  .resource-row { grid-template-columns: minmax(0, 1fr) auto; }
  .resource-row .button { grid-column: 1 / -1; }
  .resource-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .resource-actions .button { grid-column: auto; }
  .webhook-add-events form { grid-template-columns: minmax(0, 1fr); }
  .webhook-activity-heading { align-items: flex-start; flex-direction: column; }
  .webhook-attempt-row { grid-template-columns: minmax(0, 1fr) auto; }
  .webhook-attempt-row .button { grid-column: 1 / -1; }
  .metric-card-wide { grid-column: auto; }
  .metric-card { min-height: 150px; }
  .filter-bar, .contact-filter-bar { align-items: stretch; flex-direction: column; }
  .operations-filter, .suppression-filter { display: grid; grid-template-columns: 1fr; }
  .suppression-summary-heading { align-items: flex-start; flex-direction: column; }
  .suppression-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-filter .field-search,
  .operations-filter > .field:nth-child(2),
  .operations-filter > .field:nth-child(3),
  .operations-filter .field-short,
  .operations-filter .field-sender,
  .operations-filter .field-source,
  .operations-filter .field-credential,
  .operations-filter .field-sender-domain,
  .operations-filter .field-mailbox-provider,
  .operations-filter .field-provider-issue,
  .operations-filter .field-after,
  .operations-filter .field-before,
  .operations-filter .field-date,
  .operations-filter .filter-actions,
  .suppression-filter .filter-actions { grid-column: auto; justify-self: stretch; }
  .operations-filter .field-search,
  .operations-filter > .field:nth-child(2),
  .operations-filter > .field:nth-child(3),
  .operations-filter .field-short,
  .operations-filter .field-sender,
  .operations-filter .field-source,
  .operations-filter .field-credential,
  .operations-filter .field-sender-domain,
  .operations-filter .field-mailbox-provider,
  .operations-filter .field-provider-issue,
  .operations-filter .field-after,
  .operations-filter .field-before,
  .operations-filter .filter-actions { grid-row: auto; }
  .filter-actions { justify-content: space-between; }
  .field-compact { width: 100%; }
  .domain-primer-list li { grid-template-columns: 20px 95px minmax(0, 1fr); }
  .domain-stages { grid-template-columns: 1fr; gap: 14px; }
  .template-test-heading, .template-test-actions { align-items: stretch; flex-direction: column; }
  .template-test-receipt { grid-template-columns: 30px minmax(0, 1fr); }
  .template-test-receipt .button { grid-column: 1 / -1; }
  .domain-stages li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding-right: 0; }
  .domain-stages li:not(:last-child)::after { top: 24px; bottom: -14px; left: 12px; width: 1px; height: auto; }
  .domain-stages strong { margin-top: 0; }
  .dns-record { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .dns-record-field-value { grid-column: 2 / -1; grid-row: 2; }
  .dns-record-status { grid-column: 2; grid-row: 3; justify-self: start; }
  .dns-record .copy-record { grid-column: 3; grid-row: 3; }
  .cloudflare-token-row { grid-template-columns: 1fr; }
  .cloudflare-change { grid-template-columns: 1fr; }
  .cloudflare-apply-row { align-items: stretch; flex-direction: column; }
  .agent-key-form { grid-template-columns: 1fr; }
  .agent-secret-actions, .agent-operation-header, .agent-operations-heading, .agent-operation-footer { align-items: stretch; flex-direction: column; }
  .agent-operation-badges { justify-content: flex-start; }
  .agent-operation-facts { grid-template-columns: 1fr; }
  .agent-operation-facts div:last-child { grid-column: auto; }
  .agent-receipt { grid-template-columns: 1fr; }
  .collection-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .collection-heading-actions { justify-content: flex-start; }
  .collection-action-status { text-align: left; }
  .campaign-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .campaign-history-row .button { grid-column: 1 / -1; }
  .campaign-review-grid { grid-template-columns: 1fr 1fr; }
  .campaign-review-included { grid-column: 1 / -1; }
  .campaign-schedule-controls > div { grid-template-columns: 1fr; }
  .message-facts { grid-template-columns: 1fr; }
  .template-library-list { grid-template-columns: 1fr; }
  .template-editor-form, .template-history { padding: 22px 18px; }
  .template-editor-heading, .template-editor-actions { align-items: stretch; flex-direction: column; }
  .template-editor-state { justify-content: space-between; }
  .template-editor-actions .button-row { align-items: stretch; flex-direction: column; }
  .template-history li { grid-template-columns: 34px minmax(0,1fr); }
  .template-history li .text-button { grid-column: 2; justify-self: start; }
  .agent-operation-footer p { margin-bottom: 4px; }
  .settings-facts, .settings-destination-grid { grid-template-columns: 1fr; }
  .settings-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .settings-activity-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .settings-section-heading { align-items: flex-start; flex-direction: column; }
  .settings-section-heading .text-button { margin-top: 0; }
  .toast { right: 14px; bottom: 14px; left: 14px; }
}

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

/* Visual email editor */
.template-mode-switch { justify-self: start; margin: 10px 0 4px; }
.template-mode-switch button { padding: 7px 14px; font-size: 12px; }
.template-design-editor { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.template-design-theme { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.template-design-theme > summary { padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: 0.86rem; }
.template-design-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 4px 14px 14px; }
.template-design-color input[type="color"] { height: 38px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
.color-field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.color-field input[type="color"] { flex: none; width: 44px; height: 38px; }
.color-field .color-hex { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; text-transform: lowercase; }
.color-field .color-hex[aria-invalid] { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(227,93,66,.12); }
.template-design-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.template-design-block { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.template-design-block .field { margin: 0; }
.template-design-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-design-block-head strong { font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.template-design-block-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.template-design-block-head { cursor: grab; }
.template-design-block-head button { cursor: pointer; }
.template-design-grip { display: grid; flex: none; width: 24px; height: 28px; margin-left: -8px; padding: 0; place-items: center; color: #b3b4ae; border: 0; border-radius: 6px; background: transparent; cursor: grab; touch-action: none; transition: color 120ms ease, background-color 120ms ease; }
.template-design-grip svg { fill: currentColor; }
.template-design-block:hover .template-design-grip { color: var(--ink-soft); }
.template-design-grip:hover { color: var(--ink); background: var(--surface-muted); }
.template-design-grip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; color: var(--ink); }
.template-design-blocks { position: relative; }
.template-design-blocks.is-reordering { cursor: grabbing; user-select: none; }
.template-design-blocks.is-reordering * { cursor: grabbing !important; }
.template-design-blocks.is-reordering > .template-design-block { transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
.template-design-blocks.is-reordering > .template-design-block.is-dragging { position: relative; z-index: 2; transition: box-shadow 160ms ease; border-color: var(--border-strong); box-shadow: 0 14px 32px rgba(38,34,30,.16), 0 2px 6px rgba(38,34,30,.08); }
.template-design-blocks.is-reordering > .template-design-block.is-settling { transition: transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms ease; box-shadow: none; }
.template-design-drop-slot { position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface-muted); pointer-events: none; transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .template-design-blocks.is-reordering > .template-design-block, .template-design-drop-slot { transition: none !important; }
}
.template-design-block-head span { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.template-design-block-head .text-button { margin: 0; padding: 4px 6px; font-size: 0.8rem; white-space: nowrap; }
.template-design-block-head .icon-button { width: 30px; height: 30px; font-size: 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; }
.template-design-block-head .icon-button:disabled { opacity: .35; cursor: default; }
.template-design-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.template-design-add > span { margin-right: 4px; font-size: 0.8rem; color: var(--ink-soft); }
.template-design-add button { padding: 6px 11px; border: 1px dashed var(--border-strong); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; }
.template-design-add button:hover { border-style: solid; background: var(--surface); }
.template-starter-loading { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }
@media (max-width: 720px) {
  .template-design-theme-grid { grid-template-columns: 1fr; }
}

/* Write it with Linnet */
.template-ai { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.template-ai .field { margin: 0; }
.template-ai-heading { display: grid; gap: 3px; }
.template-ai-heading span { color: var(--ink-soft); font-size: 0.86rem; }
.template-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.template-ai-actions span { color: var(--ink-soft); font-size: 0.86rem; }
.template-ai-result { display: grid; gap: 8px; }
.template-ai-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.84rem; }
.template-ai-checks li::before { display: inline-block; width: 1.2em; font-weight: 700; }
.template-ai-checks li.is-checked { color: var(--green-ink); }
.template-ai-checks li.is-checked::before { content: "\2713"; }
.template-ai-checks li.is-violated { color: var(--red-ink); }
.template-ai-checks li.is-violated::before { content: "!"; }
.template-ai-assumptions { margin: 0; color: var(--ink-soft); font-size: 0.84rem; }
.template-import { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fbfaf7; }
.template-import > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 16px; cursor: pointer; list-style: none; }
.template-import > summary::-webkit-details-marker { display: none; }
.template-import > summary span:first-child { display: grid; gap: 3px; }
.template-import > summary small, .template-import-actions span { color: var(--ink-soft); font-size: 0.84rem; }
.template-import-body { display: grid; gap: 14px; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.template-import-grid, .template-import-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.template-import-body .field { margin: 0; padding-top: 14px; }
.template-import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.template-import-result { padding: 13px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.template-import-result.is-blocked { border-color: var(--yellow); background: var(--yellow-soft); }
.template-import-result p { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.84rem; }
.template-import-result ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.84rem; }
@media (max-width: 760px) { .template-import-grid, .template-import-sources { grid-template-columns: 1fr; } }
.template-design-brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0 14px 14px; }
.template-design-brand-actions span { color: var(--ink-soft); font-size: 0.8rem; }
.automation-email-look { margin-top: 8px; }
.automation-email-look > summary { cursor: pointer; font-size: 0.82rem; color: var(--ink-soft); }
.automation-email-look iframe { display: block; width: 100%; height: 420px; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.template-brand-import { display: grid; gap: 6px; padding: 4px 14px 12px; }
.template-brand-import label { font-weight: 700; font-size: 0.84rem; }
.template-brand-import-row { display: flex; gap: 8px; }
.template-brand-import-row input { flex: 1; min-width: 0; }
.template-brand-import-notes { margin: 0; padding-left: 18px; color: var(--yellow-ink); font-size: 0.82rem; }
.template-brand-voice { padding: 0 14px; }


/* Brand footer, photo library, and ecommerce blocks */
.template-brand-footer { margin: 0 14px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.template-brand-footer > summary { padding: 9px 12px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.template-brand-footer .template-design-theme-grid { padding: 4px 12px 10px; }
.template-brand-footer .template-brand-voice { padding: 0 12px 12px; }
.template-photos-count { margin-left: 6px; padding: 1px 7px; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--border); border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.template-photos-count:empty { display: none; }
.template-photos-body { display: grid; gap: 10px; padding: 2px 14px 14px; }
.template-photos-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.template-photos-actions input[type="text"] { flex: 1 1 180px; min-width: 0; }
.template-photos-upload { position: relative; cursor: pointer; }
.template-photos-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.template-photos-upload:focus-within { box-shadow: 0 0 0 3px rgba(227,93,66,.18); }
.template-photos-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0; padding: 0; }
.template-photos-grid li { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.template-photos-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--canvas); }
.template-photos-grid select, .template-photos-grid input { width: 100%; padding: 5px 7px; font-size: 12px; }
.template-photos-grid .text-button { justify-self: start; margin: 0; padding: 2px 0; font-size: 0.78rem; }
.template-photos-grid small { color: var(--yellow-ink); font-size: 11px; line-height: 1.3; }
.design-photo-picker { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.design-photo-picker .field-help { margin: 0; }
.design-photo-option { flex: none; width: 58px; height: 58px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: var(--canvas); cursor: pointer; }
.design-photo-option img { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-photo-option:hover { border-color: var(--border-strong); }
.design-photo-option.is-selected { border-color: var(--focus); box-shadow: 0 0 0 2px rgba(227,93,66,.18); }
.design-photo-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.design-block-layout { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 2px; }
.design-compact-select { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; }
.design-compact-select select { width: auto; padding: 4px 26px 4px 8px; font-size: 12px; }
.design-gallery-editor { display: grid; gap: 10px; }
.design-gallery-slot { display: grid; gap: 6px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.design-gallery-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; }
.design-gallery-slot-head .text-button, .design-gallery-editor > .text-button { margin: 0; padding: 2px 0; font-size: 0.8rem; justify-self: start; }
.design-gallery-slot input { padding: 6px 9px; font-size: 13px; }
.design-products-editor { display: grid; gap: 8px; }
.design-products-chosen, .design-products-results { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.design-products-chosen li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.design-products-chosen li:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto auto; }
.design-products-chosen img, .design-products-results img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--canvas); }
.design-products-chosen span, .design-products-results span { overflow: hidden; font-size: 0.86rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.design-products-chosen small, .design-products-results small { color: var(--ink-soft); font-size: 0.8rem; white-space: nowrap; }
.design-products-chosen .text-button { margin: 0; padding: 2px 0; font-size: 0.8rem; }
.design-products-editor input[type="search"] { padding: 7px 10px; font-size: 13px; }
.design-products-results { max-height: 232px; overflow-y: auto; }
.design-products-results button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; color: var(--ink); text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; cursor: pointer; }
.design-products-results button:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.design-products-results button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-muted); }
.design-products-results button:disabled { opacity: .55; cursor: default; }
.design-products-empty { color: var(--ink-soft); font-size: 0.84rem; }
.template-design-blockers { margin: 0 0 10px; padding: 8px 12px; color: var(--yellow-ink); background: var(--yellow-bg); border-radius: 8px; font-size: 0.82rem; line-height: 1.45; }

/* Signup forms */
.signup-form-picker select { min-width: 220px; }
.signup-layout { align-items: start; }
.signup-layout .form-stack .field-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#signup-form-error:empty { display: none; }
.signup-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-preview-panel { display: grid; gap: 16px; position: sticky; top: 84px; }
.signup-count { color: var(--ink-soft); font-size: 0.82rem; font-weight: 600; }
.signup-preview-switch { justify-self: start; }
.signup-preview-switch button { padding: 6px 14px; font-size: 12px; }
.signup-preview-stage { position: relative; height: 740px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background:
  linear-gradient(var(--canvas) 0 0) 24px 24px / 40% 14px no-repeat,
  linear-gradient(#ecebe7 0 0) 24px 56px / calc(100% - 48px) 160px no-repeat,
  linear-gradient(#ecebe7 0 0) 24px 232px / 44% 120px no-repeat,
  linear-gradient(#ecebe7 0 0) right 24px top 232px / 44% 120px no-repeat,
  var(--surface-muted); }
.signup-install { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.signup-install h3 { margin: 6px 0 0; font-size: 0.92rem; }
.signup-install p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.5; }
.signup-copy-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.signup-copy-row code { flex: 1; min-width: 0; overflow-x: auto; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.signup-copy-row .text-button { margin: 0; padding: 2px 4px; }
@media (max-width: 960px) {
  .inbound-route-card { align-items: stretch; flex-direction: column; gap: 18px; }
  .inbound-route-value { flex-basis: auto; }
  .inbound-route-value code { flex: 1; }
  .signup-preview-panel { position: static; }
  .signup-preview-stage { height: 480px; }
}
.signup-start { display: grid; gap: 10px; padding: 0 0 18px; border-bottom: 1px solid var(--border); }
.signup-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.signup-template-grid button { display: grid; gap: 4px; padding: 10px 12px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font: inherit; cursor: pointer; }
.signup-template-grid button:hover { border-color: var(--border-strong); background: var(--surface-muted); }
.signup-template-grid strong { font-size: 0.86rem; }
.signup-template-grid small { color: var(--ink-soft); font-size: 0.76rem; line-height: 1.35; }
.signup-template-category { justify-self: start; padding: 2px 6px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; font-size: 0.64rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.signup-ai { display: grid; gap: 6px; }
.signup-ai label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.signup-ai-row { display: flex; gap: 8px; align-items: stretch; }
.signup-ai-row textarea { flex: 1; min-width: 0; }
.signup-quiz { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.signup-quiz legend { padding: 0 6px; font-size: 0.86rem; font-weight: 600; }
.signup-quiz legend label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.signup-quiz-fields .field:first-child { margin-top: 6px; }

.design-promo-helper { display: grid; gap: 2px; margin-top: 6px; }
.design-promo-helper .text-button { justify-self: start; }
.design-promo-helper span { color: var(--ink-soft); font-size: 0.8rem; }

.campaign-proposal-recent { display: grid; gap: 6px; margin-top: 4px; }
.campaign-proposal-recent > span { color: var(--ink-faint); font-size: 0.74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.campaign-proposal-recent ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.campaign-proposal-recent button { display: grid; gap: 1px; max-width: 240px; padding: 6px 11px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.campaign-proposal-recent button:hover, .campaign-proposal-recent button.is-active { border-color: var(--border-strong); background: var(--surface-muted); }
.campaign-proposal-recent button b { overflow: hidden; font-size: 0.82rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.campaign-proposal-recent button small { color: var(--ink-soft); font-size: 0.74rem; }

.campaign-ab { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.campaign-ab > summary { cursor: pointer; font-weight: 650; font-size: 0.88rem; }
.campaign-ab[open] > summary { margin-bottom: 8px; }
.campaign-ab-status { margin: 8px 0 0; font-size: 0.84rem; color: var(--ink-soft); }

.automation-engagement { margin: 0 0 10px; padding: 9px 12px; font-size: 0.84rem; background: var(--green-bg); color: var(--green-ink); border-radius: 8px; }
.journey-experiment { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.journey-experiment > p { margin: 8px 0 12px; color: var(--muted); }
.journey-experiment-arms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.journey-experiment-arms > div { padding: 10px; border-radius: 8px; background: var(--surface); }
.journey-experiment-arms span, .journey-experiment-arms strong { display: block; }
.journey-experiment-arms span { margin-bottom: 4px; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.journey-experiment-arms strong { font-size: 0.86rem; white-space: pre-line; line-height: 1.5; }
.journey-experiment-history { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.journey-experiment-history > p { margin: 0 0 8px; }
.journey-experiment-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.journey-experiment-history li { display: grid; gap: 3px; }
.journey-experiment-history li strong { font-size: 0.86rem; }
.journey-experiment-history li span { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.journey-improvement { display: grid; gap: 9px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.journey-improvement[hidden] { display: none; }
.journey-improvement h3, .journey-improvement p { margin: 0; }
.journey-improvement > p:not(.eyebrow):not(.form-error) { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.journey-improvement label { margin-top: 4px; font-size: 0.78rem; font-weight: 700; }
.journey-improvement textarea { width: 100%; min-height: 96px; resize: vertical; }
.journey-improvement button { justify-self: start; }

/* Rendering previews and inbox checks */
#template-preview.is-mobile, .email-preview-frame.is-mobile { display: block; width: 375px; max-width: 100%; margin-left: auto; margin-right: auto; }
.proposal-preview-modes { justify-self: start; }
.proposal-text-preview { margin: 0; max-height: 620px; overflow: auto; padding: 16px; font: 13px/1.6 var(--mono); white-space: pre-wrap; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; }
.inbox-checks-panel { display: grid; gap: 8px; margin-top: 12px; }
.inbox-checks-panel > strong { font-size: 0.86rem; }
.template-preview-card .inbox-checks-panel { margin: 0; padding: 14px 18px 18px; border-top: 1px solid var(--border); }
.inbox-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.inbox-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 0.82rem; line-height: 1.45; }
.inbox-checks li::before { content: "\2713"; font-weight: 700; color: var(--green-ink); }
.inbox-checks li.is-warning::before { content: "!"; color: var(--yellow-ink); }
.inbox-checks li.is-blocker::before { content: "\00d7"; color: var(--red-ink); }
.inbox-checks li b { display: block; font-weight: 650; color: var(--ink); }
.inbox-checks li span { color: var(--ink-soft); }

/* Campaign planner: one sentence in, a reviewable proposal out */
.campaign-planner { display: grid; gap: 18px; margin-bottom: 16px; }
.campaign-planner-ask { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.campaign-planner-intro h2 { margin: 2px 0 6px; }
.campaign-planner-intro p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.campaign-planner-input { display: grid; gap: 10px; }
.campaign-planner-input textarea { width: 100%; resize: vertical; }
.campaign-planner-source { display: grid; gap: 5px; }
.campaign-planner-source label { font-size: 0.83rem; font-weight: 650; }
.campaign-planner-source label span { color: var(--ink-faint); font-weight: 400; }
.campaign-planner-source select { width: 100%; }
.campaign-planner-source p { margin: 0; color: var(--ink-faint); font-size: 0.78rem; }
.campaign-planner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.campaign-planner-actions span { color: var(--ink-soft); font-size: 0.86rem; }
.campaign-proposal { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr); gap: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.campaign-proposal-email { display: grid; gap: 8px; align-content: start; }
.campaign-proposal-inbox { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; }
.campaign-proposal-inbox strong { font-size: 0.95rem; }
.campaign-proposal-inbox span { color: var(--ink-soft); font-size: 0.84rem; }
.campaign-proposal-frame { height: 620px; margin-top: 0; background: #fff; }
.campaign-proposal-plan { display: grid; gap: 14px; align-content: start; }
.campaign-proposal-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.campaign-proposal-heading h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.campaign-proposal-changes { margin: 0; padding: 10px 12px 10px 28px; background: var(--green-bg); color: var(--green-ink); border-radius: 10px; font-size: 0.86rem; }
.campaign-proposal-facts { display: grid; gap: 0; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.campaign-proposal-facts > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); }
.campaign-proposal-facts > div:first-child { border-top: 0; }
.campaign-proposal-facts dt { color: var(--ink-faint); font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
.campaign-proposal-facts dd { display: grid; gap: 2px; margin: 0; font-size: 0.9rem; }
.campaign-proposal-facts dd span { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.45; }
.campaign-proposal-facts dd b { font-size: 0.84rem; color: var(--ink); }
.campaign-proposal-variables { display: grid; gap: 8px; }
.campaign-proposal-variables .field { margin: 0; }
.campaign-proposal-revise { display: grid; gap: 8px; }
.campaign-proposal-revise > label { font-weight: 700; font-size: 0.86rem; }
.campaign-proposal-revise-row { display: flex; gap: 8px; }
.campaign-proposal-revise-row input { flex: 1; min-width: 0; }
.campaign-proposal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.campaign-proposal-chips button { padding: 5px 11px; font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.campaign-proposal-chips button:hover { border-color: var(--border-strong); background: var(--surface-muted); }
.campaign-proposal-history { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--ink-soft); }
.campaign-proposal-history li b { color: var(--ink); font-weight: 600; }
.campaign-proposal-client { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.campaign-proposal-client strong,
.campaign-proposal-client span { display: block; }
.campaign-proposal-client strong { font-size: 0.86rem; }
.campaign-proposal-client span { margin-top: 2px; color: var(--ink-soft); font-size: 0.8rem; overflow-wrap: anywhere; }
.campaign-proposal-client span.is-approved { color: var(--green-ink); }
.campaign-proposal-client span.is-changes { color: var(--red-ink); }
.campaign-proposal-accept { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.campaign-proposal-accept .button { justify-self: start; }
.campaign-proposal-accept p { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }

/* Context inspectors keep the working list or preview visible while one record is under review. */
.context-inspector {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 24;
  width: var(--inspector-width);
  max-height: 100dvh;
  margin: 0;
  padding: 24px;
  overflow-y: auto;
  background: var(--surface);
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: -12px 0 28px rgba(31, 33, 31, .08);
  overscroll-behavior: contain;
}
.context-inspector-actions { display: flex; align-items: center; gap: 8px; }
.context-inspector .panel-heading,
.context-inspector .campaign-proposal-heading {
  position: sticky;
  top: -24px;
  z-index: 1;
  margin: -24px -24px 18px;
  padding: 20px 24px 16px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--border);
}
.context-inspector .panel-heading h2,
.context-inspector .campaign-proposal-heading h3 { font-size: 1.3rem; overflow-wrap: anywhere; }
.context-inspector.contact-inspector { background: var(--surface); border-color: var(--border-strong); }
.context-inspector.message-inspector { margin-top: 0; }
.context-inspector .message-facts { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.context-inspector .contact-preference-list { grid-template-columns: minmax(0, 1fr); }
.campaign-proposal:has(.campaign-proposal-plan.context-inspector) { grid-template-columns: minmax(0, 1fr); }
.campaign-proposal-plan.context-inspector { display: grid; gap: 14px; align-content: start; }
/* Table containers are full-bleed; receiving controls and summaries need their own inset. */
.inbound-email-panel { --receiving-inset: 24px; margin-top: 24px; }
.inbound-email-panel > .panel-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: var(--receiving-inset); }
.inbound-email-panel > .panel-heading + p,
.inbound-email-panel > .small-note { margin: 0 var(--receiving-inset) 12px; line-height: 1.6; }
.inbound-email-panel > .small-note:empty { display: none; }
.inbound-workload { margin: 16px var(--receiving-inset) 24px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.inbound-email-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.inbound-filter-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.inbound-email-controls label { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.inbound-email-controls input,
.inbound-email-controls select { width: 100%; min-width: 0; }
#inbound-email-search-form,
#inbound-email-recipient-form { display: grid; grid-column: span 2; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 6px 8px; min-width: 0; }
#inbound-email-search-form label,
#inbound-email-recipient-form label { grid-column: 1 / -1; }
.inbound-email-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.inbound-email-panel > .empty-state { margin: 0 var(--receiving-inset) 24px; }
.inbound-email-panel th:first-child,
.inbound-email-panel td:first-child { padding-left: var(--receiving-inset); }
.inbound-email-panel th:last-child,
.inbound-email-panel td:last-child { padding-right: var(--receiving-inset); }
.inbound-workload > .inbound-workload-queues + p { margin-top: 16px; }
@media (max-width: 1100px) {
  .inbound-email-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inbound-email-search-form,
  #inbound-email-recipient-form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .inbound-email-panel { --receiving-inset: 16px; }
  .inbound-email-controls { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #inbound-email-search-form,
  #inbound-email-recipient-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inbound-email-search-form input,
  #inbound-email-recipient-form input { grid-column: 1 / -1; }
  #inbound-email-search-form button,
  #inbound-email-recipient-form button { justify-self: start; }
  .inbound-email-actions { justify-content: flex-start; }
}
.inbound-workload > p { margin: 0 0 10px; color: var(--ink-soft); font-size: 12px; }
.inbound-workload-queues { display: flex; flex-wrap: wrap; gap: 8px; }
.inbound-workload-queues button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.inbound-email-body {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inbound-image-preview { display: block; max-width: min(100%, 480px); max-height: 360px; margin-top: 10px; object-fit: contain; }
.inbound-conversation { display: grid; gap: 12px; margin-top: 24px; }
.inbound-conversation > h3 { margin: 0; font-size: 18px; }
.inbound-conversation-message { padding: 16px; border: 1px solid var(--border); border-radius: 7px; }
.inbound-conversation-message > strong { display: block; overflow-wrap: anywhere; }
.inbound-conversation-message > small { display: block; margin-top: 5px; color: var(--ink-soft); }
.inbound-conversation-message > p { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbound-conversation-related { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; }
.inbound-conversation-related > h4 { margin: 0; font-size: 14px; }
.inbound-conversation-related > p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.inbound-conversation-related > button { justify-self: start; max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.inbound-manual-reply { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.inbound-manual-reply > strong { font-size: 13px; }
.inbound-manual-reply > p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.inbound-manual-reply label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.inbound-manual-reply input, .inbound-manual-reply textarea { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 400; }
.inbound-manual-reply textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.inbound-manual-reply > button { justify-self: start; }

@media (max-width: 1180px) {
  .campaign-planner-ask, .campaign-proposal { grid-template-columns: minmax(0, 1fr); }
  .campaign-proposal-frame { height: 520px; }
  body.has-context-inspector main { margin-right: 0; }
  .context-inspector { width: min(420px, 100vw); }
}
@media (max-width: 680px) {
  body.has-context-inspector { overflow: hidden; }
  .context-inspector { width: 100%; }
  .campaign-proposal-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .campaign-proposal-revise-row { flex-direction: column; }
}


/* App appearance. Classic inherits the original stylesheet above unchanged. */
.app-appearance { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.app-appearance select { width: auto; min-height: 34px; padding: 5px 28px 5px 9px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 5px; font-size: 12px; }
.topbar-meta { flex-wrap: wrap; justify-content: flex-end; }
.topbar { gap: 16px; }
html[data-app-theme="dispatch"] {
  --canvas: #f4f6f9;
  --surface: #fff;
  --surface-muted: #f8fafc;
  --ink: #172b45;
  --ink-soft: #52647a;
  --ink-faint: #65758a;
  --border: #dce3ec;
  --border-strong: #bdcadb;
  --focus: #b93838;
  --focus-ink: #a82e31;
  --blue-bg: #eaf1fa;
  --blue-ink: #184c89;
  --serif: var(--sans);
}
html[data-app-theme="dispatch"] .sidebar { background: #123b70; border-right-color: #123b70; overflow-y: auto; }
html[data-app-theme="dispatch"] .brand { color: #fff; gap: 10px; font-family: var(--sans); font-size: 26px; font-weight: 750; letter-spacing: -.045em; }
html[data-app-theme="dispatch"] .brand-mascot { width: 46px; height: 46px; padding: 4px; background: #fff; border-radius: 5px; filter: none; }
html[data-app-theme="dispatch"] .sidebar :is(.workspace-label, .nav-heading, .sidebar-foot p, .mobile-navigation label) { color: #bccde4; }
html[data-app-theme="dispatch"] .sidebar :is(.nav-item, .nav-group-toggle, .workspace-tab, .connection-row) { color: #e6edf8; }
html[data-app-theme="dispatch"] .sidebar :is(.nav-item, .nav-group-toggle, .workspace-tab):hover { color: #fff; background: #245084; }
html[data-app-theme="dispatch"] .sidebar :is(.nav-item.is-active, .workspace-tab[aria-selected="true"]) { color: #fff; background: #28558c; box-shadow: none; }
html[data-app-theme="dispatch"] .sidebar .nav-group.has-active-view > .nav-group-toggle { color: #fff; background: transparent; box-shadow: none; }
html[data-app-theme="dispatch"] .nav-group-items { border-left: 1px solid #ffffff36; }
html[data-app-theme="dispatch"] .sidebar :is(.workspace-tabs, .sidebar-foot) { border-color: #365985; }
html[data-app-theme="dispatch"] .sidebar :is(.entry-flight-plan li, .entry-flight-plan small) { color: #cfdaeb; }
html[data-app-theme="dispatch"] .sidebar .entry-flight-plan li.is-current { color: #fff; }
html[data-app-theme="dispatch"] .sidebar :focus-visible { outline-color: #fff; }
html[data-app-theme="dispatch"] .topbar { background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px #123b7005; }
html[data-app-theme="dispatch"] :is(h1, h2, .chat-intro h1) { font-family: var(--sans); font-weight: 650; letter-spacing: -.04em; }
html[data-app-theme="dispatch"] .page-heading h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.12; }
html[data-app-theme="dispatch"] .button-primary { background: #123b70; border-color: #123b70; }
html[data-app-theme="dispatch"] .button-primary:hover:not(:disabled) { background: #20528d; }
html[data-app-theme="dispatch"] .confirm-dialog .button-primary.is-danger { background: var(--red-ink); border-color: var(--red-ink); }
html[data-app-theme="dispatch"] :is(td, .metric-value, .stat-value) { font-variant-numeric: tabular-nums; }
html[data-app-theme="dispatch"] .page-frame { padding-top: 42px; }
@media (max-width: 1100px) { .topbar { flex-wrap: wrap; } .topbar-meta { justify-content: flex-start; } }
@media (max-width: 680px) {
  html[data-app-theme="dispatch"] .sidebar { border-bottom: 3px solid #c44848; }
  html[data-app-theme="dispatch"] .page-frame { padding-top: 28px; }
  .app-appearance { white-space: normal; }
  .topbar-meta { max-width: 100%; }
}
html[data-app-theme="dispatch"] .sidebar .workspace-tabs { background: #0c2e59; }
html[data-app-theme="dispatch"] .sidebar .chat-history-item { color: #e6edf8; }
html[data-app-theme="dispatch"] .sidebar .chat-history-item:is(:hover, .is-active) { color: #fff; background: #28558c; }
html[data-app-theme="dispatch"] :is(.template-library, .template-preview-heading, .template-starters, .template-variables, .template-preview-note, .template-test-panel, .template-import, .agent-connect-panel, .agent-draft-preview, .quickstart-panel, .dns-installation-status, .cloudflare-plan) { background: var(--surface-muted); }
html[data-app-theme="dispatch"] .template-library-empty { border-color: var(--border-strong); }

/* Keep native select behavior while placing the header chevrons consistently. */
select, .app-appearance select, .mobile-navigation select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2352647a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
}
@media (forced-colors: active) {
  select { appearance: auto; -webkit-appearance: auto; background-image: none; }
}

.design-catalog { margin-bottom: 36px; }
.design-catalog-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.design-catalog-heading h2 { margin: 0; font-size: 26px; }
.design-catalog-heading p:not(.eyebrow) { max-width: 66ch; color: var(--ink-soft); font-size: 13px; }
.design-catalog-heading > .button { flex: none; }
.design-catalog-filters { display: flex; align-items: end; gap: 16px; margin: 20px 0; flex-wrap: wrap; }
.design-catalog-filters label { display: grid; gap: 6px; min-width: 180px; flex: 1; }
.design-catalog-filters > span { padding-bottom: 10px; font-size: 12px; color: var(--ink-soft); }
.design-catalog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 20px; }
.design-catalog-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.design-catalog-preview { position: relative; height: 700px; overflow: hidden; background: #f0f1f3; }
.design-catalog-preview iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 1px; border: 0; pointer-events: none; }
.design-catalog-details { padding: 18px; border-bottom: 1px solid var(--border); }
.design-catalog-details > span { color: var(--ink-soft); font-size: 11px; text-transform: capitalize; }
.design-catalog-details h3 { margin: 5px 0 8px; font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
.design-catalog-details p { margin: 0 0 14px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
@media(max-width: 1000px) { .design-catalog-grid { grid-template-columns: 1fr; } }
@media(max-width: 600px) { .design-catalog-grid { grid-template-columns: 1fr; } .design-catalog-heading { flex-direction: column; } }
.catalog-preview-dialog { width: min(720px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); }
.catalog-preview-dialog::backdrop { background: #10213980; }
.catalog-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-preview-toolbar h2 { margin: 0; font-size: 22px; }
.catalog-preview-dialog > p { color: var(--ink-soft); font-size: 12px; }
.catalog-preview-dialog iframe { display: block; width: 100%; height: 65dvh; border: 1px solid var(--border); background: white; }
.catalog-brand-appearance { margin-bottom: 28px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.catalog-brand-appearance summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.catalog-brand-appearance[open] summary { margin-bottom: 20px; }

/* Shared dropdown type; keep option labels distinct from the surrounding bold field label. */
select, .app-appearance select, .mobile-navigation select {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: normal;
  max-inline-size: 100%;
  padding-right: 28px;
}
select option, select optgroup { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 400; }
/* Supported browsers expose a styleable native picker, retaining keyboard/typeahead behavior. */
@supports (appearance: base-select) {
 @media (hover: hover) and (pointer: fine) {
  select, select::picker(select) { appearance: base-select; }
  select::picker-icon { display: none; }
  select::picker(select) { max-block-size: min(420px, 60dvh); overflow-y: auto; padding: 5px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: 0 6px 20px #123b7014; font-family: system-ui, sans-serif; font-size: 13px; }
  select option { padding: 8px 10px; gap: 8px; border-radius: 4px; }
  select option:hover, select option:focus { background: var(--surface-muted); }
  select option:checked { color: var(--blue-ink); background: var(--blue-bg); }
 }
}
@media (forced-colors: active) {
  select, select::picker(select) { appearance: auto; }
  select::picker-icon { display: block; }
}

.agent-design-permission { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; line-height: 1.5; }
.agent-design-permission input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 3px 0 0; padding: 0; }