/* Clerity Email Change Tracker — visual system
   Brand blue sampled from the supplied Clerity wordmark, with restrained
   semantic colours reserved for migration states. */

:root {
  --navy-900: #061c56;
  --navy-800: #082a78;
  --navy-700: #002898;
  --navy-600: #0a3eb0;
  --navy-500: #285bc0;
  --navy-050: #eef3ff;

  --green-700: #12693a;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-100: #d6f5e3;
  --green-050: #eefbf3;

  --amber-600: #b45309;
  --amber-100: #fdeccd;
  --amber-050: #fff8ec;

  --red-600: #c02626;
  --red-100: #fbdcdc;
  --red-050: #fef4f4;

  --sky-600: #0369a1;
  --sky-100: #d5ebf8;
  --sky-050: #f0f8fd;

  --ink: #13213c;
  --ink-2: #42516a;
  --ink-3: #6b7890;
  --line: #dfe5ef;
  --line-2: #edf1f7;
  --paper: #ffffff;
  --canvas: #f6f8fc;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(19, 33, 60, .04), 0 5px 18px rgba(19, 33, 60, .035);
  --shadow: 0 2px 7px rgba(19, 33, 60, .06), 0 12px 32px rgba(19, 33, 60, .05);
  --shadow-lg: 0 18px 60px rgba(6, 28, 86, .18);

  --sidebar: 248px;
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* A wide table must never widen the document. The sidebar and the header
     are fixed points on the screen; only the table scrolls sideways, inside
     its own card. */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(40, 91, 192, .28); outline-offset: 2px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; color: var(--navy-800); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .7rem; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; min-width: 0; max-width: 100vw; }

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--paper);
  color: var(--ink);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 25px 22px 20px;
  border-bottom: 1px solid var(--line-2);
}
.brand-mark { display: flex; align-items: center; gap: 11px; }
.brand-logo { max-height: 43px; max-width: 168px; display: block; object-fit: contain; }
.brand-glyph {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem; color: #fff;
  box-shadow: 0 2px 10px rgba(34, 197, 94, .35);
}
.brand-word { font-size: 1.2rem; font-weight: 680; letter-spacing: -.02em; color: var(--navy-700); }
.brand-sub {
  margin-top: 9px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

.nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: .9rem; font-weight: 500;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.nav a:hover { background: var(--navy-050); color: var(--navy-700); text-decoration: none; }
.nav a.active { background: #e8efff; color: var(--navy-700); box-shadow: inset 3px 0 0 var(--navy-700); font-weight: 650; }
.nav a .pill {
  margin-left: auto; background: var(--green-600); color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: .68rem; font-weight: 650;
}
.nav a .pill.warn { background: var(--amber-600); }

/* Grouped sections. The label is quiet on purpose — it orients without
   competing with the links themselves. */
.nav-group + .nav-group { margin-top: 14px; }
.nav-group-label {
  padding: 0 12px 5px; font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #99a3b4;
}

.sidebar-foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-2);
  font-size: .72rem; color: var(--ink-3);
}
.sidebar-foot strong { color: var(--navy-700); font-weight: 650; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 13px 26px;
  display: flex; align-items: center; gap: 18px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .title { font-weight: 640; color: var(--navy-800); font-size: 1.02rem; }
.topbar .spacer { flex: 1; }
.powered { display: flex; align-items: center; gap: 9px; font-size: .76rem; color: var(--ink-3); }
.powered img { max-height: 26px; max-width: 116px; display: block; }
.powered .algoatech { font-weight: 640; color: var(--navy-700); }

.who {
  display: flex; align-items: center; gap: 9px;
  padding-left: 16px; border-left: 1px solid var(--line);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-050); color: var(--navy-700);
  display: grid; place-items: center; font-size: .76rem; font-weight: 680;
}
.who-name { font-size: .82rem; font-weight: 580; line-height: 1.2; }
.who-role { font-size: .7rem; color: var(--ink-3); }

.content { padding: 30px; flex: 1; max-width: 1600px; width: 100%; min-width: 0; }

.page-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .lede { color: var(--ink-2); font-size: .92rem; margin-top: 5px; max-width: 76ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.footer {
  padding: 18px 26px 30px;
  color: var(--ink-3); font-size: .76rem;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--line-2);
}
.footer .dot { color: var(--line); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: #d4dceb; }
.card + .card { margin-top: 18px; }
.card-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { font-size: .98rem; }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 18px; }
.card-body.tight { padding: 12px 18px; }
.card-note { font-size: .8rem; color: var(--ink-3); }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* ---------- Stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cdd7e9; text-decoration: none; }
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--navy-500); }
.stat.good::before { background: var(--green-500); }
.stat.warn::before { background: var(--amber-600); }
.stat.bad::before { background: var(--red-600); }
.stat.info::before { background: var(--sky-600); }
.stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; }
.stat .v { font-size: 1.85rem; font-weight: 680; color: var(--navy-800); line-height: 1.15; margin-top: 4px; letter-spacing: -.02em; }
.stat .m { font-size: .76rem; color: var(--ink-3); margin-top: 2px; }
.stat.good .v { color: var(--green-700); }
.stat.bad .v { color: var(--red-600); }
.stat.warn .v { color: var(--amber-600); }

/* ---------- Progress ---------- */
.progress { height: 10px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-600)); border-radius: 999px; transition: width .4s ease; }
.progress.thin { height: 6px; }
.progress-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-2); margin-bottom: 7px; }
.progress-label b { color: var(--navy-800); font-size: 1.05rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.5;
}
.badge.good { background: var(--green-050); color: var(--green-700); border-color: var(--green-100); }
.badge.warn { background: var(--amber-050); color: var(--amber-600); border-color: var(--amber-100); }
.badge.bad { background: var(--red-050); color: var(--red-600); border-color: var(--red-100); }
.badge.info { background: var(--sky-050); color: var(--sky-600); border-color: var(--sky-100); }
.badge.neutral { background: var(--navy-050); color: var(--navy-700); border-color: #dbe5f2; }
.badge.demo { background: #f3e8ff; color: #6b21a8; border-color: #e6d3fb; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.data th {
  text-align: left; padding: 10px 12px;
  font-size: .71rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650;
  border-bottom: 1px solid var(--line); background: #fbfcfe;
  white-space: nowrap;
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fafcff; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .muted { color: var(--ink-3); font-size: .8rem; }
table.data .strong { font-weight: 600; color: var(--navy-800); }
.checkcol { width: 34px; }

.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); }
.empty .big { font-size: 1rem; color: var(--ink-2); font-weight: 560; margin-bottom: 4px; }

/* ---------- Forms ---------- */
label { display: block; font-size: .79rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=url], select, textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .88rem; color: var(--ink);
  background: #fff; transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(42, 87, 152, .13);
}
textarea { resize: vertical; min-height: 110px; font-size: .86rem; line-height: 1.6; }
.field { margin-bottom: 14px; }
.field .hint { font-size: .75rem; color: var(--ink-3); margin-top: 4px; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.check input { margin-top: 3px; flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--green-600); }
.check label { margin: 0; font-weight: 550; color: var(--ink); font-size: .87rem; }
.check .hint { font-size: .76rem; color: var(--ink-3); font-weight: 400; margin-top: 2px; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 16px; }
legend { font-size: .78rem; font-weight: 680; color: var(--navy-700); padding: 0 7px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--navy-700);
  font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s, box-shadow .12s;
}
.btn:hover { background: #f7fafd; border-color: #cdd8e6; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn.primary:hover { background: var(--navy-600); border-color: var(--navy-600); }
.btn.go { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn.go:hover { background: var(--navy-600); border-color: var(--navy-600); }
.btn.danger { color: var(--red-600); border-color: var(--red-100); background: var(--red-050); }
.btn.danger:hover { background: #fceaea; border-color: #f3c7c7; }
.btn.sm { padding: 5px 11px; font-size: .78rem; }
.btn.block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------- Flash ---------- */
.flashes { margin-bottom: 18px; display: grid; gap: 9px; }
.flash {
  padding: 11px 15px; border-radius: var(--radius-sm);
  border: 1px solid; font-size: .87rem; font-weight: 520;
  display: flex; gap: 10px; align-items: flex-start;
}
.flash.success { background: var(--green-050); border-color: var(--green-100); color: var(--green-700); }
.flash.error { background: var(--red-050); border-color: var(--red-100); color: var(--red-600); }
.flash.info { background: var(--sky-050); border-color: var(--sky-100); color: var(--sky-600); }

.notice {
  padding: 12px 15px; border-radius: var(--radius-sm);
  background: var(--amber-050); border: 1px solid var(--amber-100); color: #7c4708;
  font-size: .84rem; line-height: 1.55;
}
.notice.info { background: var(--sky-050); border-color: var(--sky-100); color: #0b4f74; }
.notice.plain { background: var(--navy-050); border-color: #dbe5f2; color: var(--navy-700); }
.notice strong { font-weight: 680; }

/* ---------- Filters ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px; align-items: end; }
.filters .field { margin: 0; }
.filters .wide { grid-column: span 2; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .8rem; font-weight: 580; color: var(--ink-2); text-decoration: none;
}
.chip:hover { border-color: var(--navy-500); color: var(--navy-700); text-decoration: none; }
.chip.active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.chip .n {
  background: rgba(11, 37, 69, .08); border-radius: 999px;
  padding: 0 7px; font-size: .72rem; font-weight: 680;
}
.chip.active .n { background: rgba(255, 255, 255, .2); }
.chip.has-work .n { background: var(--amber-100); color: var(--amber-600); }
.chip.active.has-work .n { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- Definition rows ---------- */
.dl { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0; font-size: .87rem; }
.dl dt { color: var(--ink-3); padding: 7px 0; border-bottom: 1px solid var(--line-2); font-weight: 550; }
.dl dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); word-break: break-word; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }

.prov { font-size: .73rem; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.prov a { color: var(--navy-600); }
.prov .sep { color: var(--line); margin: 0 5px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 15px 22px; border-left: 2px solid var(--line-2); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--navy-500); border: 2px solid #fff;
}
.timeline li.good::before { background: var(--green-500); }
.timeline li.bad::before { background: var(--red-600); }
.timeline li.warn::before { background: var(--amber-600); }
.timeline .when { font-size: .73rem; color: var(--ink-3); }
.timeline .what { font-size: .86rem; font-weight: 560; color: var(--navy-800); }
.timeline .detail { font-size: .81rem; color: var(--ink-2); }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed #c7d5e6; border-radius: var(--radius);
  padding: 40px 22px; text-align: center; background: #fbfdff;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.dropzone:hover, .dropzone.hover { border-color: var(--green-500); background: var(--green-050); }
.dropzone .big { font-size: 1.02rem; font-weight: 620; color: var(--navy-800); margin-bottom: 5px; }
.dropzone .sub { font-size: .84rem; color: var(--ink-3); }
.dropzone .chosen { margin-top: 12px; font-size: .85rem; color: var(--green-700); font-weight: 600; }

/* ---------- Login ---------- */
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 26px;
  background:
    radial-gradient(circle at 18% 18%, rgba(57, 104, 202, .36), transparent 35%),
    linear-gradient(145deg, var(--navy-700) 0%, var(--navy-900) 72%, #04133c 100%);
}
.login-card {
  width: 100%; max-width: 408px; background: #fff;
  border-radius: 18px; padding: 34px 32px; box-shadow: var(--shadow-lg);
}
.login-card .brand-mark { justify-content: center; margin-bottom: 6px; }
.login-card .brand-logo { max-width: 230px; max-height: 74px; }
.login-card .brand-word { color: var(--navy-800); }
.login-card .tag { text-align: center; color: var(--ink-3); font-size: .84rem; margin-bottom: 24px; }
.login-foot { text-align: center; margin-top: 20px; font-size: .74rem; color: var(--ink-3); }
.login-page .outside { text-align: center; margin-top: 18px; color: rgba(255, 255, 255, .45); font-size: .74rem; }

/* ---------- Misc ---------- */
.mono { font-family: var(--mono); font-size: .82rem; }
.muted { color: var(--ink-3); }
.small { font-size: .8rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.stack { display: grid; gap: 16px; }
.inline-form { display: inline; }
.divider { height: 1px; background: var(--line-2); margin: 16px 0; }
.eyebrow { color: var(--navy-600); font-size: .69rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 5px; }

/* ---------- Microsoft 365 wizard ---------- */
.provider-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.provider-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
}
.provider-choice:hover { border-color: #bdc9dd; text-decoration: none; }
.provider-choice.active { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(40, 91, 192, .1); }
.provider-choice span:first-child { display: grid; }
.provider-choice small { color: var(--ink-3); font-size: .76rem; }
.setup-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.setup-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 0 0 22px; position: relative; }
.setup-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 2px; background: var(--line); }
.setup-steps li.done:not(:last-child)::after { background: #a9bff0; }
.step-number { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; color: var(--ink-3); font-weight: 720; z-index: 1; }
.setup-steps li.done .step-number { background: var(--navy-700); color: #fff; }
.setup-steps li.current .step-number { background: var(--navy-050); color: var(--navy-700); box-shadow: inset 0 0 0 2px var(--navy-500); }
.setup-steps li > div { display: grid; gap: 3px; padding-top: 4px; }
.setup-steps li small { color: var(--ink-3); font-size: .81rem; line-height: 1.5; }
.btn.microsoft { background: #fff; border-color: #b7c2d4; color: #17233a; }
.btn.microsoft::before { content: ""; width: 14px; height: 14px; background: linear-gradient(90deg,#f35325 0 47%,transparent 47% 53%,#81bc06 53%),linear-gradient(90deg,#05a6f0 0 47%,transparent 47% 53%,#ffba08 53%); background-size:100% 47%,100% 47%; background-position:top,bottom; background-repeat:no-repeat; }
.mailbox-select-list { display: grid; gap: 9px; }
.mailbox-select { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0; cursor: pointer; }
.mailbox-select:hover { background: #fafcff; border-color: #cbd5e5; }
.mailbox-select input { width: 17px; height: 17px; accent-color: var(--navy-700); }
.mailbox-select span:nth-child(2) { display: grid; }
.mailbox-select small { color: var(--ink-3); font-weight: 450; }
.connection-state { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); background: var(--navy-050); }
.connection-state > div { display: grid; }
.connection-state small { color: var(--ink-3); margin-top: 2px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--navy-500); box-shadow: 0 0 0 4px rgba(40,91,192,.12); }
.connection-state.good .status-dot { background: var(--green-600); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.connection-state.warn .status-dot { background: var(--amber-600); box-shadow: 0 0 0 4px rgba(180,83,9,.12); }
.connection-state.bad .status-dot { background: var(--red-600); box-shadow: 0 0 0 4px rgba(192,38,38,.12); }
.advanced { border-top: 1px solid var(--line-2); padding-top: 13px; }
.advanced summary { cursor: pointer; color: var(--ink-2); font-weight: 620; font-size: .84rem; }
.assurance-list { display: grid; gap: 15px; }
.assurance-list > div { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; }
.assurance-list > div > span:last-child { display: grid; }
.assurance-list small { color: var(--ink-3); }
.assurance-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green-050); color: var(--green-700); font-weight: 800; }
.empty-panel { padding: 22px; border: 1px dashed #cbd5e5; border-radius: var(--radius); text-align: center; display: grid; justify-items: center; color: var(--ink-3); }
.empty-panel strong { color: var(--ink); margin-bottom: 4px; }
.settings-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.settings-link { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); text-decoration: none; }
.settings-link:hover { border-color: #bdc9dd; transform: translateY(-1px); text-decoration: none; }
.settings-link.featured { border-color: #b9c9ed; background: linear-gradient(135deg,#fff,#f5f8ff); }
.settings-link > span:nth-child(2) { display: grid; }
.settings-link small { color: var(--ink-3); font-size: .75rem; }
.settings-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--navy-050); color: var(--navy-700); font-weight: 780; }
.settings-link .arrow { color: var(--ink-3); font-size: 1.15rem; }
.migration-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -2px 0 20px; padding: 15px 18px; border: 1px solid #cfdaf0; border-radius: var(--radius); background: linear-gradient(100deg,#f3f6ff,#fff); color: var(--ink-2); }
.migration-banner > div { display: grid; }
.migration-banner strong { color: var(--navy-800); font-size: 1rem; }
.migration-banner > span { font-size: .82rem; }
.migration-banner.urgent { border-color: var(--amber-100); background: linear-gradient(100deg,var(--amber-050),#fff); }

.pagination { display: flex; gap: 7px; align-items: center; justify-content: center; padding: 15px; }
.pagination .info { color: var(--ink-3); font-size: .82rem; margin: 0 10px; }

.kv-list { display: grid; gap: 9px; }
.kv-list .row { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.kv-list .row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-list .row .k { color: var(--ink-2); }
.kv-list .row .v { font-weight: 620; color: var(--navy-800); font-variant-numeric: tabular-nums; }

/* Same label/value pattern as .kv-list, for pages built from a plain <div> per
   row instead of an explicit .row wrapper (monitoring/mailboxes.html). */
.kv { display: grid; gap: 9px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv .k { color: var(--ink-2); }
.kv .v { font-weight: 620; color: var(--navy-800); text-align: right; }

.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
.stage {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px; background: #fff;
}
.stage .n { font-size: 1.15rem; font-weight: 680; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.stage .l { font-size: .73rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stage.active { border-color: var(--green-500); background: var(--green-050); }

.secret-box {
  font-family: var(--mono); font-size: 1rem; letter-spacing: .04em;
  background: var(--navy-050); border: 1px dashed var(--navy-500);
  padding: 11px 14px; border-radius: var(--radius-sm); color: var(--navy-800);
  word-break: break-all; user-select: all;
}

.preview-body {
  white-space: pre-wrap; font-size: .85rem; line-height: 1.62;
  background: #fbfcfe; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 13px 15px; color: var(--ink);
  max-height: 320px; overflow-y: auto;
}

.sticky-actions {
  position: sticky; bottom: 0; z-index: 12;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  padding: 11px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(11, 37, 69, .06);
  border-radius: 0 0 var(--radius) var(--radius);
}
.sticky-actions .count { font-size: .84rem; color: var(--ink-2); font-weight: 580; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.split { grid-template-columns: minmax(0, 1fr); }
  .settings-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 960px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 10px; padding: 0 12px;
    overflow: hidden;
  }
  .brand { border-bottom: 0; border-right: 1px solid var(--line); padding: 12px 16px 12px 6px; flex: 0 0 auto; }
  .brand-sub { display: none; }
  .nav { display: flex; gap: 4px; padding: 9px 0; overflow-x: auto; flex: 1; min-width: 0; }
  .nav-group { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-group-label { display: none; }
  .nav a { white-space: nowrap; margin: 0; padding: 7px 11px; font-size: .84rem; }
  .nav a.active { box-shadow: inset 0 -3px 0 var(--navy-700); }
  .sidebar-foot { display: none; }
  .content { padding: 18px 16px; }
  .topbar { padding: 11px 16px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl dt { padding-bottom: 0; border-bottom: 0; }
  .dl dd { padding-top: 2px; }
  .form-grid.two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .topbar .title { display: none; }
  .topbar .powered { display: none; }
  .who { margin-left: auto; padding-left: 0; border-left: 0; }
  .page-head .actions { width: 100%; }
  .provider-switch { grid-template-columns: minmax(0,1fr); }
  .mailbox-select { grid-template-columns: auto minmax(0,1fr); }
  .mailbox-select .badge { grid-column: 2; justify-self: start; }
  .settings-links { grid-template-columns: minmax(0,1fr); }
  .migration-banner { align-items: flex-start; flex-direction: column; }
}

@media print {
  .sidebar, .topbar, .sticky-actions, .btn { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* --- Source tags -------------------------------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.badge.tag {
  background: linear-gradient(180deg, rgba(11, 37, 69, .06), rgba(11, 37, 69, .12));
  border: 1px solid rgba(11, 37, 69, .18);
  color: var(--navy-800);
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
a.badge.tag:hover { border-color: var(--green-500); color: var(--green-600); }

@media (prefers-color-scheme: dark) {
  .badge.tag {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
  }
}

/* --- Onboarding progress ------------------------------------------------ */
.timeline li.good .what { color: var(--green-600); }
.timeline li.warn .what { font-weight: 700; }

/* --- Multi-file drop ---------------------------------------------------- */
.file-list { margin-top: 12px; display: grid; gap: 8px; }
.file-list .file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.file-list .file .name { font-weight: 600; word-break: break-all; }
.file-list .file .meta { color: var(--ink-2); font-size: .82rem; white-space: nowrap; }

/* ==========================================================================
   Campaigns module
   ========================================================================== */

/* Wizard step rail */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wizard-step {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 999px;
  background: #fff; color: #6b7280; text-decoration: none; font-size: 13px;
}
.wizard-step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e5e7eb; color: #374151; font-weight: 700; font-size: 11px;
}
.wizard-step.active { border-color: #16a34a; color: #14532d; background: #f0fdf4; }
.wizard-step.active .n { background: #16a34a; color: #fff; }
.wizard-step.done { color: #14532d; }
.wizard-step.done .n { background: #bbf7d0; color: #14532d; }

/* Sender chooser */
.sender-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sender-option {
  display: flex; gap: 10px; padding: 14px; cursor: pointer;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: #fff;
}
.sender-option.ready:hover { border-color: #16a34a; }
.sender-option.blocked { opacity: .65; cursor: not-allowed; background: #fafafa; }
.sender-option input { margin-top: 3px; }

/* Editor + preview */
.merge-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
#editor-host { background: #fff; min-height: 260px; }
.ql-editor { min-height: 240px; font-family: Arial, Helvetica, sans-serif; }
.preview-frame {
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: #f5f6f8; padding: 16px; overflow-x: auto; margin: 0 auto;
}
.preview-frame .preview-body {
  background: #fff; padding: 20px; border-radius: 6px;
  font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.6;
}
.preview-frame .preview-body img { max-width: 100%; height: auto; }
.plain-preview {
  white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px; padding: 12px; font-size: 12.5px; max-height: 320px; overflow: auto;
}
.sig-preview { max-width: 240px; max-height: 90px; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; }


/* Compact stat row, used inside cards */
.stats.compact { gap: 8px; }
.stats.compact .stat { padding: 10px 12px; }
.stats.compact .stat .v { font-size: 20px; }

/* Small key/value tables */
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini td { padding: 5px 8px; border-bottom: 1px solid var(--line, #eef0f3); }
table.mini td.right { text-align: right; font-variant-numeric: tabular-nums; }

/* Activity feed */
.timeline .tl-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #eef0f3); }
.timeline .tl-when { flex: 0 0 130px; font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; }
.timeline .tl-what { flex: 1; font-size: 13px; }

.card.inner { border: 1px solid var(--line, #e5e7eb); box-shadow: none; margin: 0; }
.btn.danger { border-color: #fecaca; color: #b91c1c; }
.btn.danger:hover { background: #fef2f2; }
.btn.active { border-color: #16a34a; color: #14532d; background: #f0fdf4; }

/* Public pages: unsubscribe and notices */
.public-page {
  min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
  background: #f5f6f8; padding: 24px;
}
.public-card {
  background: #fff; border-radius: 14px; padding: 34px; max-width: 520px; width: 100%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.public-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.public-brand img { max-height: 40px; }
.public-card h1 { font-size: 22px; margin: 0 0 12px; }
.public-foot {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line, #e5e7eb);
  font-size: 12px; color: #6b7280; line-height: 1.6;
}

/* ---------- Master Database ---------- */
/* A search row that keeps the input elastic and the buttons their natural size. */
.search-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.search-row > input[type=search] { flex: 1 1 260px; width: auto; }
.mt { margin-top: 12px; }

/* Filter and column drawers. Hidden with the `hidden` attribute so the page
   works with JavaScript switched off — the form still submits. */
.drawer {
  margin-top: 14px; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fbfcfe;
}
.column-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 14px;
}
.column-picker .check { margin-bottom: 4px; }

/* A frozen header row, so the column names stay readable while scrolling a
   long page of results. */
table.data.sticky-head thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fbfcfe; box-shadow: inset 0 -1px 0 var(--line);
}
table.data.sticky-head thead th a { color: var(--ink-3); text-decoration: none; }
table.data.sticky-head thead th a:hover { color: var(--navy-700); }

/* Side-by-side duplicate comparison. Only the differing rows are tinted, so the
   eye goes straight to what actually has to be decided. */
table.data.compare td, table.data.compare th { vertical-align: top; }
table.data.compare tr.differs td { background: var(--amber-050); }
table.data.compare tr.differs:hover td { background: #fdf4e3; }
table.data.compare .check { margin-bottom: 0; }

tr.is-archived td { opacity: .6; }

/* The provenance link beside a field value. Quiet until wanted. */
.why-link {
  margin-left: 7px; font-size: .72rem; font-weight: 600;
  color: var(--ink-3); border-bottom: 1px dotted var(--line);
}
.why-link:hover { color: var(--navy-600); text-decoration: none; border-bottom-color: var(--navy-500); }
.recommendation-section { margin: 0 0 22px; overflow: hidden; }
.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 16px;
}
.recommendation-card {
  display: flex;
  min-width: 0;
  min-height: 156px;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(11, 37, 69, .045);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.recommendation-card:hover {
  border-color: var(--navy-500);
  box-shadow: 0 8px 22px rgba(11, 37, 69, .09);
  transform: translateY(-1px);
}
.recommendation-card .muted { line-height: 1.45; }
.recommendation-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recommendation-count { color: var(--navy-800); font-size: 1.7rem; font-weight: 750; letter-spacing: -.04em; }
.link-arrow { margin-top: auto; color: var(--navy-700); font-size: .86rem; font-weight: 700; }

@media (max-width: 680px) {
  .recommendation-grid { grid-template-columns: 1fr; padding: 12px; }
  .recommendation-card { min-height: 0; }
}

/* ---------- Operational worklists (1.1) ---------- */
/* The old contact tables were wider than the viewport and scrolled the whole
   page sideways, which put the checkbox column and the row actions out of
   reach. The fix is to scroll the table inside its own box and never the page:
   the container owns both axes, the header row stays put vertically, and the
   first column stays put horizontally so a row is still identifiable when the
   later columns are on screen. */
.worklist-table {
  overflow: auto;
  max-height: 68vh;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.worklist-table table.data { min-width: 900px; }
.worklist-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fbfcfe; box-shadow: inset 0 -1px 0 var(--line);
}
/* The checkbox column stays reachable however far right the table is scrolled. */
.worklist-table th.checkcol,
.worklist-table td.checkcol {
  position: sticky; left: 0; z-index: 2;
  background: #fff;
}
.worklist-table thead th.checkcol { z-index: 4; background: #fbfcfe; }
.worklist-table tbody tr:hover td.checkcol { background: #fafcff; }

/* Why a row was flagged. Reasons are the point of the Data Quality page, so
   they are readable text rather than an icon the reader has to decode. */
.reasons { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reasons li { font-size: .79rem; color: var(--ink-2); line-height: 1.45; }
.reasons .code {
  display: inline-block; font-weight: 640; color: var(--navy-700);
  margin-right: 6px;
}
.reasons .fix { color: var(--ink-3); font-style: italic; }

/* The selection bar. It states the count it will act on, because a bulk action
   whose scope the user has to infer is a bulk action they will get wrong. */
.selection-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.selection-bar .scope { font-size: .82rem; color: var(--ink-2); }
.selection-bar select, .selection-bar input[type="text"] { max-width: 240px; }

.view-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.view-strip .view {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: .82rem; color: var(--ink-2);
  text-decoration: none; background: #fff; display: inline-flex; gap: 7px; align-items: center;
}
.view-strip .view:hover { border-color: var(--navy-300); color: var(--navy-700); }
.view-strip .view.active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.view-strip .view .n { font-variant-numeric: tabular-nums; font-weight: 640; }
.view-strip .view.active .n { color: #fff; }

.purpose { color: var(--ink-3); font-size: .86rem; margin: 0 0 14px; max-width: 78ch; line-height: 1.5; }
.view-note { color: var(--ink-3); font-size: .8rem; margin: -6px 0 12px; max-width: 78ch; }

.pagebar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 11px 4px 0;
}
.pagebar .sizes { display: flex; gap: 5px; align-items: center; }
.pagebar .sizes a { font-size: .8rem; padding: 3px 8px; border-radius: 5px; text-decoration: none; color: var(--ink-3); }
.pagebar .sizes a.on { background: var(--navy-050); color: var(--navy-700); font-weight: 640; }

/* =============================================================================
   The operational table system.

   Master Database, Still Using Basan, Invalid / Bounced, Data Quality, New
   Clerity Contacts, Duplicate Review and the Archive Bin are the same screen
   with different rows in it, so they are the same component. One place to fix
   a spacing bug, and an operator who learns one list has learned all of them.

   The shape is fixed:  title + primary action  /  search + filters + export  /
   selection toolbar (only when something is selected)  /  table  /  pagination.
   Nothing actionable lives below the table -- an operator should never have to
   scroll past four thousand rows to reach the button that acts on the three
   they ticked.
   ========================================================================== */

/* --- The search / filter / export row ------------------------------------ */
.ops-bar {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
}
.ops-bar .grow { flex: 1 1 260px; min-width: 0; }
.ops-bar input[type="search"], .ops-bar input[type="text"] { width: 100%; }
.ops-bar .spacer { flex: 1 1 auto; }

/* The active filters, stated once in a sentence rather than as a wall of
   chips. Twenty permanent bubbles is not a filter UI, it is a legend. */
.filter-summary {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid var(--line-2);
  background: var(--navy-025, #f7f9fd); font-size: .82rem; color: var(--ink-2);
}
.filter-summary .k { font-weight: 620; color: var(--ink-3); }
.filter-summary .val {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; color: var(--navy-700); font-weight: 570;
}
.filter-summary a.clear { margin-left: auto; font-size: .8rem; }

/* --- The selection toolbar ------------------------------------------------
   Hidden entirely until a row is ticked, then it appears above the table and
   sticks there. A toolbar that is always on screen is a toolbar nobody reads,
   and one pinned to the bottom of a 4,000-row page may as well not exist. */
.bulk-bar {
  display: none;
  gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--navy-050); border-bottom: 1px solid var(--navy-100, #d5e0f5);
  position: sticky; top: 0; z-index: 14;
}
.bulk-bar.on { display: flex; }
.bulk-bar .count { font-size: .84rem; font-weight: 640; color: var(--navy-700); }
.bulk-bar .spacer { flex: 1 1 auto; }

/* --- Row actions ---------------------------------------------------------- */
.row-actions { position: relative; display: inline-block; text-align: left; }
.row-actions > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; min-width: 32px; height: 28px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-2); font-weight: 700; letter-spacing: .06em;
}
.row-actions > summary::-webkit-details-marker { display: none; }
.row-actions > summary:hover { border-color: var(--navy-500); color: var(--navy-700); }
.row-actions[open] > summary { border-color: var(--navy-500); color: var(--navy-700); }
.row-actions .menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 190px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(11, 37, 69, .16);
  display: flex; flex-direction: column; gap: 1px;
}
.row-actions .menu a, .row-actions .menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: none; border-radius: 5px;
  font: inherit; font-size: .84rem; color: var(--ink); cursor: pointer;
}
.row-actions .menu a:hover, .row-actions .menu button:hover {
  background: var(--navy-050); color: var(--navy-700); text-decoration: none;
}
.row-actions .menu .danger { color: var(--red-600); }
.row-actions .menu .danger:hover { background: var(--red-050, #fdf0ef); color: var(--red-600); }
.row-actions .menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }

/* --- The table itself -----------------------------------------------------
   The card owns the horizontal scrollbar. The header stays put vertically,
   the checkbox stays put on the left, and the actions stay put on the right,
   so a row remains identifiable and actionable at any scroll position. */
.ops-table {
  overflow: auto; max-height: 70vh;
  width: 100%; max-width: 100%; min-width: 0;
}
.ops-table table.data { min-width: 940px; }
.ops-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fbfcfe; box-shadow: inset 0 -1px 0 var(--line);
}
.ops-table th.checkcol, .ops-table td.checkcol {
  position: sticky; left: 0; z-index: 2; background: #fff; width: 38px;
}
.ops-table thead th.checkcol { z-index: 5; background: #fbfcfe; }
.ops-table th.actioncol, .ops-table td.actioncol {
  position: sticky; right: 0; z-index: 2; background: #fff;
  width: 56px; text-align: right;
  box-shadow: inset 1px 0 0 var(--line-2);
}
.ops-table thead th.actioncol { z-index: 5; background: #fbfcfe; }
.ops-table tbody tr:hover td.checkcol,
.ops-table tbody tr:hover td.actioncol { background: #fafcff; }
/* An open row menu must escape the scroll container, so that row opts out. */
.ops-table tr:has(.row-actions[open]) td.actioncol { position: static; box-shadow: none; }

/* --- Plain-language reason cell ------------------------------------------ */
.reason-line { font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.reason-line .what { font-weight: 640; color: var(--navy-700); display: block; }
.reason-more { font-size: .78rem; color: var(--ink-3); }
.reason-more summary { cursor: pointer; color: var(--navy-600); }
.reason-more .tech {
  margin-top: 5px; padding: 7px 9px; background: var(--navy-025, #f7f9fd);
  border-radius: 5px; font-family: var(--mono, monospace); font-size: .74rem;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
}

/* --- Confirmation, shown only after an action is chosen ------------------- */
.confirm-sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11, 37, 69, .38);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.confirm-sheet.on { display: flex; }
.confirm-sheet .box {
  background: #fff; border-radius: var(--radius); padding: 22px 24px;
  max-width: 440px; width: 100%; box-shadow: 0 24px 60px rgba(11, 37, 69, .3);
}
.confirm-sheet h3 { margin-bottom: 8px; }
.confirm-sheet p { color: var(--ink-2); font-size: .88rem; }
.confirm-sheet .row { display: flex; gap: 9px; justify-content: flex-end; margin-top: 16px; }
.confirm-sheet label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: 5px; }
.confirm-sheet input[type="text"], .confirm-sheet select { width: 100%; }
.confirm-sheet .extra { margin-top: 12px; }

@media (max-width: 900px) {
  .ops-bar, .bulk-bar, .filter-summary { padding-left: 12px; padding-right: 12px; }
  .ops-table { max-height: none; }
}

/* --- Mailchimp migration campaign control -------------------------------- */
.eyebrow, .meta-label {
  color: var(--ink-3); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.migration-campaign-card { border-top: 4px solid var(--navy-700); }
.migration-overview {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(150px, .5fr);
  gap: 22px; align-items: center; margin-bottom: 18px;
}
.eligible-total { padding-left: 20px; border-left: 1px solid var(--line); }
.eligible-total .number { color: var(--green-700); font-size: 2.35rem; font-weight: 720; line-height: 1; }
.audience-math {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.audience-math > div {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); font-size: .8rem;
}
.audience-math > div strong { color: var(--navy-800); }
.audience-math > .final { background: var(--green-050); color: var(--green-700); font-weight: 700; }
.audience-math > .final strong { color: var(--green-700); font-size: 1.05rem; }
.audience-math-large { margin-bottom: 20px; background: var(--paper); box-shadow: var(--shadow-sm); }
.diagnostic-grid, .detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.diagnostic-grid div, .detail-list div { min-width: 0; }
.diagnostic-grid dt, .detail-list dt { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.diagnostic-grid dd, .detail-list dd { margin: 3px 0 0; font-weight: 580; overflow-wrap: anywhere; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi-grid > div { padding: 11px; background: var(--canvas); border-radius: var(--radius-sm); }
.kpi-grid span { display: block; color: var(--ink-3); font-size: .72rem; }
.kpi-grid strong { display: block; color: var(--navy-800); font-size: 1.2rem; margin-top: 2px; }
.gate-closed { display: flex; gap: 12px; padding: 14px; background: var(--amber-050); border: 1px solid var(--amber-100); border-radius: var(--radius-sm); }
.gate-closed p { margin: 2px 0 0; color: var(--ink-2); font-size: .82rem; }
.mini-timeline { min-width: 210px; margin: 0; padding-left: 16px; font-size: .75rem; }
.mini-timeline span { display: block; color: var(--ink-3); }

@media (max-width: 980px) {
  .migration-overview, .diagnostic-grid, .detail-list { grid-template-columns: 1fr; }
  .eligible-total { padding-left: 0; border-left: 0; }
  .audience-math { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .audience-math, .kpi-grid { grid-template-columns: 1fr; }
}

/* --- Campaign Manager V3 --------------------------------------------------
   Deliberately scoped: no shell, global header or other product page is
   redesigned by the campaign workspace. */
.campaign-v3 { width: 100%; min-width: 0; }
.campaign-v3-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-bottom: 20px;
}
.campaign-v3-head h1 { font-size: 2rem; margin-top: 2px; }
.campaign-v3-head .lede { max-width: 760px; margin-top: 5px; }
.campaign-v3-head-actions, .campaign-actions, .feature-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}
.connection-pill, .gate-pill, .count-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  padding: 7px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  white-space: nowrap;
}
.connection-pill { color: var(--green-700); background: var(--green-050); border: 1px solid var(--green-100); }
.connection-pill.disconnected { color: var(--red-600); background: var(--red-050); border-color: var(--red-100); }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.gate-pill { color: var(--amber-600); background: var(--amber-050); border: 1px solid var(--amber-100); }
.count-pill { color: var(--navy-700); background: var(--navy-050); }
.campaign-tabs {
  display: flex; gap: 2px; overflow-x: auto; margin: 0 0 22px; padding: 0 3px;
  border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.campaign-tabs a {
  position: relative; flex: 0 0 auto; padding: 12px 15px 13px; color: var(--ink-3);
  font-size: .73rem; font-weight: 760; letter-spacing: .055em;
}
.campaign-tabs a:hover { color: var(--navy-700); text-decoration: none; }
.campaign-tabs a.active { color: var(--navy-700); }
.campaign-tabs a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--navy-700); }
.campaign-gate-banner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 13px 16px;
  color: #74430a; background: var(--amber-050); border: 1px solid var(--amber-100); border-radius: 12px;
  font-size: .84rem;
}
.campaign-gate-banner .gate-icon { font-size: 1rem; }
.campaign-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px;
}
.campaign-kpi {
  min-width: 0; min-height: 128px; padding: 20px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.campaign-kpi > span { display: block; color: var(--ink-3); font-size: .67rem; font-weight: 760; letter-spacing: .065em; }
.campaign-kpi > strong { display: block; margin: 9px 0 3px; color: var(--navy-800); font-size: 2rem; line-height: 1; letter-spacing: -.045em; }
.campaign-kpi > small { color: var(--ink-3); font-size: .75rem; }
.campaign-feature-card {
  overflow: hidden; margin-bottom: 28px; background: linear-gradient(125deg, #fff 0%, #f8faff 100%);
  border: 1px solid #d6e0f4; border-top: 4px solid var(--navy-700); border-radius: 16px;
  box-shadow: var(--shadow);
}
.campaign-feature-top { display: flex; justify-content: space-between; gap: 24px; padding: 24px 24px 20px; }
.campaign-feature-top h2 { margin: 4px 0 5px; font-size: 1.3rem; }
.campaign-feature-top p { max-width: 720px; color: var(--ink-2); }
.campaign-feature-facts {
  display: grid; grid-template-columns: 1.4fr 1.2fr .65fr .65fr; gap: 1px;
  margin: 0 24px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 11px;
}
.campaign-feature-facts > div { padding: 15px 16px; background: #fff; }
.campaign-feature-facts span { display: block; margin-bottom: 5px; color: var(--ink-3); font-size: .65rem; font-weight: 750; letter-spacing: .07em; }
.campaign-feature-facts strong { display: block; color: var(--navy-800); font-size: .9rem; line-height: 1.35; }
.campaign-feature-facts .feature-number { color: var(--green-700); font-size: 1.65rem; line-height: 1; }
.campaign-feature-card > .campaign-actions { padding: 18px 24px 24px; }
.campaign-section { margin: 28px 0; }
.campaign-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 16px;
}
.campaign-section-head.compact { align-items: center; }
.campaign-section-head h2 { font-size: 1.28rem; }
.campaign-section-head p { max-width: 760px; margin: 4px 0 0; color: var(--ink-3); font-size: .84rem; }
.audience-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.audience-card-grid.full { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
.audience-card {
  display: flex; flex-direction: column; min-width: 0; padding: 20px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.audience-card h3 { margin: 4px 0 7px; font-size: 1rem; }
.audience-card p { min-height: 56px; color: var(--ink-3); font-size: .79rem; line-height: 1.45; }
.audience-card-math { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.audience-card-math span { min-width: 0; padding: 10px 8px; background: var(--canvas); border-radius: 9px; text-align: center; }
.audience-card-math span.final { background: var(--green-050); }
.audience-card-math small { display: block; overflow: hidden; color: var(--ink-3); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.audience-card-math strong { display: block; margin-top: 3px; color: var(--navy-800); font-size: 1.12rem; }
.audience-card-math .final strong { color: var(--green-700); }
.exclusion-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 13px 0; color: var(--ink-3); font-size: .7rem; }
.exclusion-list span { display: flex; justify-content: space-between; gap: 6px; }
.campaign-list-card, .campaign-table-card, .campaign-form-card {
  overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm);
}
.campaign-row-card {
  display: grid; grid-template-columns: minmax(320px, 1.5fr) minmax(360px, 1fr) auto;
  align-items: center; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line-2);
}
.campaign-row-card:last-child { border-bottom: 0; }
.campaign-row-main { display: flex; min-width: 0; align-items: center; gap: 14px; }
.campaign-preview-tile { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); border-radius: 11px; font-size: .74rem; font-weight: 800; }
.campaign-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.campaign-row-title a { color: var(--navy-800); font-size: .94rem; font-weight: 700; }
.campaign-row-main p { overflow: hidden; max-width: 520px; margin: 3px 0 1px; color: var(--ink-2); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-row-main small { color: var(--ink-3); }
.campaign-row-stats { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 8px; }
.campaign-row-stats span { padding: 8px; background: var(--canvas); border-radius: 8px; text-align: center; }
.campaign-row-stats small { display: block; color: var(--ink-3); font-size: .61rem; }
.campaign-row-stats strong { color: var(--navy-800); font-size: .92rem; }
.campaign-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.campaign-table-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.campaign-table-title p { margin: 3px 0 0; color: var(--ink-3); font-size: .79rem; }
.campaign-table-card .table-wrap { margin: 0; border: 0; border-radius: 0; }
.campaign-table-card table { min-width: 1050px; }
.campaign-table-card th { padding: 11px 12px; background: #f9fbfe; color: var(--ink-3); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.campaign-table-card td { padding: 12px; font-size: .76rem; vertical-align: top; }
.campaign-form-card { padding: 22px; }
.campaign-filter-bar { margin: 0 0 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.campaign-filter-bar form { display: flex; flex-wrap: wrap; gap: 8px; }
.campaign-filter-bar input, .campaign-filter-bar select { width: auto; min-width: 135px; font-size: .76rem; }
.campaign-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.btn.active-filter { color: var(--navy-700); background: var(--navy-050); border-color: #cbd9f8; }
.template-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.template-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm); }
.template-card.master { border-color: #b9caed; box-shadow: 0 7px 25px rgba(8,42,120,.09); }
.template-preview { height: 180px; padding: 18px; background: #eef3fb; }
.template-preview-inner { width: 80%; height: 100%; margin: auto; padding: 15px; background: #fff; border-radius: 6px; box-shadow: 0 4px 14px rgba(19,33,60,.1); }
.template-preview-inner span { display: block; color: var(--navy-700); font-size: .57rem; font-weight: 800; letter-spacing: .12em; }
.template-preview-inner strong { display: block; margin: 9px 0 14px; color: var(--navy-800); }
.template-preview-inner i { display: block; width: 100%; height: 7px; margin: 7px 0; background: #e5eaf3; border-radius: 5px; }
.template-preview-inner i:last-child { width: 55%; background: var(--green-100); }
.template-preview.html { overflow: hidden; color: var(--ink-3); background: linear-gradient(#f4f7fc,#eaf0f9); font-size: .76rem; line-height: 1.8; }
.template-preview.html > div { height: 100%; padding: 14px; background: rgba(255,255,255,.85); border-radius: 6px; }
.template-card-body { padding: 19px 20px 21px; }
.template-source { color: var(--navy-600); font-size: .62rem; font-weight: 780; letter-spacing: .075em; }
.template-card h3 { margin: 4px 0 13px; }
.template-card dl { margin: 0; }
.template-card dl div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.template-card dt { color: var(--ink-3); font-size: .68rem; }
.template-card dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink-2); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.template-card-body > small { display: block; margin: 11px 0; color: var(--ink-3); }
.template-safety { margin: 11px 0 0; color: var(--ink-3); font-size: .7rem; }
.mailchimp-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 22px 24px; background: linear-gradient(120deg,#f2f6ff,#fff); border: 1px solid #d6e0f4; border-radius: 15px; }
.mailchimp-hero h2 { display: inline-block; margin: 3px 10px 0 0; font-size: 1.6rem; }
.integration-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.integration-card { min-height: 115px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.integration-card > span { display: block; color: var(--ink-3); font-size: .64rem; font-weight: 750; letter-spacing: .07em; }
.integration-card > strong { display: block; overflow-wrap: anywhere; margin: 8px 0 3px; color: var(--navy-800); font-size: 1.05rem; }
.integration-card > small { color: var(--ink-3); font-size: .69rem; }
.member-state-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.member-state-links a { display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.member-state-links a:hover { border-color: #b7c8eb; text-decoration: none; }
.member-state-links span { color: var(--ink-3); font-size: .68rem; font-weight: 750; letter-spacing: .07em; }
.member-state-links strong { grid-row: span 2; align-self: center; color: var(--navy-800); font-size: 1.6rem; }
.member-state-links small { color: var(--ink-3); }
.contact-campaign-block { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.contact-campaign-block:first-child { padding-top: 0; }
.contact-campaign-block:last-child { padding-bottom: 0; border-bottom: 0; }
.contact-campaign-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.contact-campaign-timeline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 18px; min-width: 0; margin-bottom: 8px; }
.preview-frame[data-responsive-preview] { max-width: 100%; margin: 0 auto; transition: max-width .18s ease; }
.preview-frame[data-responsive-preview].mobile-preview { max-width: 390px; }

@media (max-width: 1280px) {
  .audience-card-grid, .audience-card-grid.full, .template-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-row-card { grid-template-columns: minmax(300px,1fr) minmax(340px,1fr); }
  .campaign-row-actions { grid-column: 1 / -1; }
  .campaign-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .campaign-v3-head, .campaign-feature-top, .mailchimp-hero { flex-direction: column; align-items: stretch; }
  .campaign-kpis, .integration-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-feature-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-row-card { grid-template-columns: 1fr; }
  .campaign-row-actions { grid-column: auto; justify-content: flex-start; }
  .campaign-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .campaign-kpis, .integration-card-grid, .audience-card-grid, .audience-card-grid.full,
  .template-card-grid, .campaign-form-grid, .member-state-links { grid-template-columns: 1fr; }
  .campaign-feature-facts { grid-template-columns: 1fr; margin: 0 16px; }
  .campaign-feature-top { padding: 20px 16px 16px; }
  .campaign-feature-card > .campaign-actions { padding: 16px; }
  .campaign-row-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-kpi { min-height: 108px; }
}

/* --- Campaign Manager V4 -------------------------------------------------
   Premium email-workspace treatment. Everything remains scoped to campaign
   pages; the shared sidebar and top bar are intentionally unchanged. */
.content.campaign-workspace {
  max-width: none;
  padding: 30px clamp(24px, 2vw, 34px);
}
.campaign-workspace .campaign-v3-head h1,
.campaign-workspace .page-head h1 { font-size: clamp(1.85rem, 2.2vw, 2.15rem); line-height: 1.15; }
.campaign-workspace .campaign-section-head h2,
.campaign-workspace .wizard-panel h2 { font-size: 1.35rem; }
.campaign-tabs {
  gap: 5px; padding: 5px 6px 0; background: rgba(255,255,255,.72);
  border: 1px solid var(--line); border-radius: 13px 13px 0 0;
  scrollbar-width: none;
}
.campaign-tabs::-webkit-scrollbar { display: none; }
.campaign-tabs a { padding: 13px 18px 14px; border-radius: 9px 9px 0 0; font-size: .78rem; }
.campaign-tabs a:hover { background: var(--navy-050); }
.campaign-tabs a.active { background: #fff; box-shadow: 0 -1px 0 #fff; }
.campaign-tabs a.active::after { left: 14px; right: 14px; height: 4px; }

/* The provider document owns this viewport. No email selector can escape it. */
.email-preview-component { position: relative; overflow: hidden; width: 100%; background: #fff; }
.email-preview-iframe { display: block; width: 100%; height: 900px; border: 0; background: #fff; }
.email-preview-loading, .email-preview-error {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  justify-content: center; gap: 10px; padding: 24px; color: var(--ink-3);
  background: #f7f9fc; font-size: .82rem; text-align: center;
}
.email-preview-loading[hidden], .email-preview-error[hidden] { display: none; }
.email-preview-error { flex-direction: column; color: var(--red-600); }
.preview-spinner { width: 18px; height: 18px; border: 2px solid #d4dceb; border-top-color: var(--navy-600); border-radius: 50%; animation: preview-spin .8s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
.email-preview-component.is-thumbnail { height: 225px; background: #e9edf3; }
.email-preview-component.is-thumbnail .email-preview-iframe {
  position: absolute; top: 10px; left: 50%; width: 760px; height: 940px;
  margin-left: -380px; transform: scale(.36); transform-origin: top center;
  box-shadow: 0 8px 35px rgba(14,31,64,.16); pointer-events: none;
}
.email-preview-component.is-thumbnail .email-preview-loading { height: 225px; }
.email-client-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.email-preview-toolbar, .builder-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: #fff; border-bottom: 1px solid var(--line);
}
.email-client-canvas {
  width: 100%; padding: 28px; background: #e9edf3; transition: padding .2s ease;
}
.email-client-canvas > .email-preview-component {
  max-width: 780px; margin: 0 auto; box-shadow: 0 13px 44px rgba(13,31,67,.16);
}
.email-client-canvas.mobile > .email-preview-component { max-width: 400px; }
.email-client-canvas.mobile { padding-left: 12px; padding-right: 12px; }
.email-client-canvas.mobile .email-preview-iframe { height: 820px; }
.preview-device-switch { display: flex; gap: 6px; }
.preview-device-switch .btn.active, [data-email-device].active { color: #fff; background: var(--navy-700); border-color: var(--navy-700); }
.template-preview-link, .campaign-feature-preview, .campaign-row-thumb {
  position: relative; display: block; overflow: hidden; text-decoration: none;
}
.template-preview-link { background: #e9edf3; border-bottom: 1px solid var(--line); }
.template-preview-link > span, .campaign-feature-preview > span {
  position: absolute; right: 12px; bottom: 11px; z-index: 3; padding: 6px 9px;
  color: #fff; background: rgba(6,28,86,.9); border-radius: 7px; font-size: .7rem; font-weight: 700;
}
.template-preview-link:hover > span, .campaign-feature-preview:hover > span { background: var(--navy-700); }

.campaign-feature-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr); }
.campaign-feature-copy { min-width: 0; }
.campaign-feature-copy > .campaign-actions { padding: 18px 24px 24px; }
.campaign-feature-preview { min-height: 330px; padding: 20px; background: #e9edf3; border-left: 1px solid var(--line); }
.campaign-feature-preview .email-preview-component.is-thumbnail { height: 290px; }
.campaign-feature-preview .email-preview-iframe { transform: scale(.39); }
.campaign-row-card { grid-template-columns: minmax(420px, 1.55fr) minmax(330px, 1fr) auto; padding: 19px 22px; }
.campaign-row-thumb { flex: 0 0 126px; width: 126px; height: 90px; background: #e9edf3; border: 1px solid var(--line); border-radius: 9px; }
.campaign-row-thumb .email-preview-component.is-thumbnail { height: 90px; }
.campaign-row-thumb .email-preview-component.is-thumbnail .email-preview-iframe { top: 4px; transform: scale(.15); }
.campaign-row-thumb .email-preview-loading { padding: 8px; font-size: 0; }
.campaign-row-thumb.on-demand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--navy-700); }
.campaign-row-thumb.on-demand small { font-size: .65rem; }
.preview-on-demand-icon { font-size: 1.45rem; }

.template-card-grid { grid-template-columns: repeat(3,minmax(300px,1fr)); }
.template-card { display: flex; flex-direction: column; }
.template-card-body { flex: 1; display: flex; flex-direction: column; padding: 21px 22px 23px; }
.template-card-body .campaign-actions { margin-top: auto; padding-top: 15px; }
.master-protection {
  display: flex; flex-wrap: wrap; gap: 7px 18px; margin-bottom: 18px; padding: 14px 17px;
  color: #74430a; background: var(--amber-050); border: 1px solid var(--amber-100); border-radius: 11px;
}
.master-protection.compact { margin: 16px 0 0; font-size: .8rem; }
.protected-pill { padding: 8px 11px; color: #74430a; background: var(--amber-050); border: 1px solid var(--amber-100); border-radius: 999px; font-size: .7rem; font-weight: 780; }
.preview-meta-bar { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 1px; overflow: hidden; margin-bottom: 16px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; }
.preview-meta-bar > div, .preview-report-strip > div { min-width: 0; padding: 13px 15px; background: #fff; }
.preview-meta-bar span, .preview-report-strip span { display: block; color: var(--ink-3); font-size: .62rem; font-weight: 750; letter-spacing: .06em; }
.preview-meta-bar strong { display: block; overflow: hidden; margin-top: 3px; color: var(--ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-report-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 12px; }
.preview-report-strip strong { display: block; margin-top: 3px; color: var(--navy-800); font-size: 1.25rem; }
.preview-action-dock { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.preview-action-dock p { margin: 3px 0 0; color: var(--ink-3); }
.preview-action-dock input { min-width: 280px; }

.campaign-compose-grid, .campaign-editor-split { display: grid; grid-template-columns: minmax(340px,2fr) minmax(520px,3fr); gap: 18px; align-items: start; }
.campaign-preview-column, .campaign-editor-preview-column { min-width: 0; }
.sticky-preview-card { position: sticky; top: 78px; }
.editor-preview-canvas { padding: 18px; }
.editor-preview-canvas .email-preview-iframe { height: 680px; }
.editor-mode-label { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.editor-mode-label span { color: var(--ink-3); font-size: .78rem; }
.danger-outline { color: var(--red-600); border-color: var(--red-100); }

.campaign-stepper { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px; margin: 22px 0; }
.campaign-stepper .wizard-step { justify-content: center; min-width: 0; padding: 10px 6px; border-radius: 10px; }
.campaign-stepper .wizard-step .l { text-transform: uppercase; }
.campaign-stepper .wizard-step:disabled { cursor: default; opacity: .58; }
.campaign-builder-grid { display: grid; grid-template-columns: minmax(390px,2fr) minmax(520px,3fr); gap: 18px; align-items: start; }
.campaign-builder-controls, .campaign-builder-preview { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.campaign-builder-preview { position: sticky; top: 78px; }
.wizard-panel { padding: 23px; }
.wizard-panel[hidden] { display: none; }
.wizard-panel-head { margin-bottom: 20px; }
.wizard-panel-head > span { color: var(--navy-600); font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.wizard-panel-head h2 { margin: 4px 0; }
.wizard-panel-head p { color: var(--ink-3); }
.wizard-panel-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.campaign-kind-grid { grid-template-columns: 1fr; }
.builder-audience-math { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 17px; }
.text-link { display: inline-block; margin-top: 12px; font-weight: 650; }
.builder-template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-height: 600px; overflow-y: auto; padding: 2px; }
.builder-template-card { position: relative; overflow: hidden; cursor: pointer; background: #fff; border: 2px solid var(--line); border-radius: 11px; }
.builder-template-card:hover { border-color: #9bb3e2; }
.builder-template-card.selected { border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(40,91,192,.12); }
.builder-template-card > input { position: absolute; top: 10px; right: 10px; z-index: 4; width: 19px; height: 19px; accent-color: var(--navy-700); }
.builder-template-card .email-preview-component.is-thumbnail { height: 150px; }
.builder-template-card .email-preview-iframe { transform: scale(.25); }
.builder-template-copy { display: block; padding: 12px; border-top: 1px solid var(--line); }
.builder-template-copy b, .builder-template-copy small, .builder-template-copy em { display: block; }
.builder-template-copy b { color: var(--navy-800); }
.builder-template-copy small { margin: 3px 0; color: var(--navy-600); font-size: .59rem; font-style: normal; font-weight: 760; letter-spacing: .04em; }
.builder-template-copy em { overflow: hidden; color: var(--ink-3); font-size: .72rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.builder-preview-head > div:first-child span { display: block; color: var(--ink-3); font-size: .62rem; font-weight: 760; letter-spacing: .06em; }
.builder-preview-head > div:first-child strong { display: block; margin-top: 3px; color: var(--navy-800); }
.builder-preview-head > div:last-child { display: flex; gap: 5px; }
.safety-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 18px; padding: 15px; color: var(--green-700); background: var(--green-050); border-radius: 10px; font-size: .76rem; font-weight: 650; }

.member-management-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.member-management-cards a { display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; padding: 20px 22px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); }
.member-management-cards a:hover, .member-management-cards a.active { border-color: #9fb5df; background: var(--navy-050); text-decoration: none; }
.member-management-cards span { color: var(--ink-3); font-size: .68rem; font-weight: 760; letter-spacing: .07em; }
.member-management-cards strong { grid-row: span 2; align-self: center; color: var(--navy-800); font-size: 2rem; }
.member-management-cards small { color: var(--ink-3); }
.member-filter input, .campaign-search input { min-width: min(360px,60vw); }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; color: var(--ink-3); border-top: 1px solid var(--line); font-size: .78rem; }
.pagination-bar > div { display: flex; gap: 7px; }

.performance-empty-state { display: grid; grid-template-columns: auto 1fr; gap: 15px 20px; padding: clamp(28px,4vw,48px); background: linear-gradient(125deg,#fff,#f5f8ff); border: 1px solid #d6e0f4; border-radius: 15px; box-shadow: var(--shadow-sm); }
.empty-state-icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--navy-700); background: var(--navy-050); border-radius: 12px; font-size: 1.4rem; }
.performance-empty-state p { color: var(--ink-3); }
.performance-readiness { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 8px 0; }
.performance-readiness > div { padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.performance-readiness span, .performance-readiness small { display: block; color: var(--ink-3); font-size: .64rem; font-weight: 700; letter-spacing: .05em; }
.performance-readiness strong { display: block; margin: 5px 0; color: var(--navy-800); font-size: 1.1rem; }
.performance-empty-state > .btn { grid-column: 2; justify-self: start; }
.activity-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 720; }
.activity-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8994a6; }
.activity-state.good::before { background: var(--green-500); }
.activity-state.bad::before { background: var(--red-600); }
.correspondence-row:hover td { background: #f8faff; }

.mailchimp-account-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; overflow: hidden; margin-bottom: 14px; background: var(--line); border: 1px solid var(--line); border-radius: 13px; }
.mailchimp-account-strip > div { padding: 17px 19px; background: #fff; }
.mailchimp-account-strip span, .integration-health-card span { display: block; color: var(--ink-3); font-size: .64rem; font-weight: 760; letter-spacing: .06em; }
.mailchimp-account-strip strong, .mailchimp-account-strip small { display: block; }
.mailchimp-account-strip strong { margin-top: 4px; color: var(--navy-800); }
.mailchimp-account-strip small { color: var(--ink-3); }
.member-summary-grid { margin-bottom: 16px; }
.integration-card-grid a.integration-card:hover { border-color: #9fb5df; box-shadow: var(--shadow); text-decoration: none; }
.mailchimp-operations-grid { display: grid; grid-template-columns: minmax(360px,3fr) minmax(300px,2fr); gap: 16px; }
.mailchimp-master-card, .integration-health-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); }
.mailchimp-master-card { display: grid; grid-template-columns: minmax(280px,1.1fr) minmax(260px,1fr); }
.mailchimp-master-card > div { padding: 22px; }
.mailchimp-master-card h3 { margin: 5px 0; font-size: 1.15rem; }
.mailchimp-master-card p { color: var(--ink-3); }
.integration-health-card { display: grid; grid-template-columns: 1fr; }
.integration-health-card > div { padding: 17px 19px; border-bottom: 1px solid var(--line-2); }
.integration-health-card > div:last-child { border: 0; }
.integration-health-card strong { display: block; margin-top: 4px; color: var(--navy-800); }
.integration-health-card small { color: var(--ink-3); }

@media (min-width: 1840px) {
  .campaign-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .integration-card-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 1360px) {
  .campaign-feature-split { grid-template-columns: minmax(0,3fr) minmax(300px,1.6fr); }
  .campaign-row-card { grid-template-columns: minmax(360px,1.25fr) minmax(300px,1fr); }
  .campaign-row-actions { grid-column: 1/-1; }
  .campaign-builder-grid, .campaign-compose-grid, .campaign-editor-split { grid-template-columns: minmax(330px,2fr) minmax(430px,3fr); }
  .template-card-grid { grid-template-columns: repeat(2,minmax(300px,1fr)); }
}
@media (max-width: 1060px) {
  .campaign-feature-split, .campaign-builder-grid, .campaign-compose-grid, .campaign-editor-split, .mailchimp-operations-grid { grid-template-columns: 1fr; }
  .campaign-feature-preview { border-top: 1px solid var(--line); border-left: 0; }
  .campaign-builder-preview, .sticky-preview-card { position: static; }
  .campaign-stepper { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .mailchimp-master-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .content.campaign-workspace { padding: 22px 18px; }
  .campaign-stepper { display: flex; overflow-x: auto; }
  .campaign-stepper .wizard-step { min-width: 105px; }
  .builder-template-grid, .template-card-grid, .member-management-cards, .performance-readiness, .mailchimp-account-strip, .preview-report-strip { grid-template-columns: 1fr; }
  .mailchimp-master-card { grid-template-columns: 1fr; }
  .campaign-row-thumb { flex-basis: 86px; width: 86px; }
  .campaign-feature-facts { margin-left: 16px; margin-right: 16px; }
  .preview-action-dock { align-items: stretch; flex-direction: column; }
  .preview-action-dock form { align-items: stretch; flex-direction: column; }
  .preview-action-dock input { min-width: 0; width: 100%; }
  .safety-checks { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .content.campaign-workspace { padding: 16px 13px; }
  .email-client-canvas { padding: 10px; }
  .email-preview-toolbar, .builder-preview-head { align-items: flex-start; flex-direction: column; }
  .campaign-row-main { align-items: flex-start; }
  .campaign-row-thumb { display: none; }
}